/* =========================================================
   HOUSE CAREGIVER
   CLEAN FINAL ADJUSTMENTS
   Development build
   ========================================================= */

/* ---------- Base ---------- */

html,
body{
    margin:0 !important;
    padding:0 !important;
}

html body{
    overflow-x:hidden;
}

/* ---------- Header ---------- */

html body header.header.hc-header{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin:0 !important;
    z-index:1000 !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

html body header.header.hc-header .hc-logo,
html body header.header.hc-header .hc-logo a{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

html body header.header.hc-header .hc-logo img{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* ---------- Hero ---------- */

html body section.hc-hero{
    position:relative !important;
    margin:0 !important;
    overflow:hidden !important;

    background-image:url("/assets/images/house-caregiver-hero-premium-final.webp") !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
}

/* لا نستخدم أي صورة Hero إضافية */
html body section.hc-hero > img.hc-hero-real-image{
    display:none !important;
}

/* إلغاء أي طبقات صور قديمة */
html body section.hc-hero::before{
    background-image:none !important;
    transform:none !important;
}

/* ---------- Hero Content ---------- */

html body section.hc-hero > .hc-hero-text{
    position:relative !important;
    z-index:10 !important;

    transform:none !important;
}

/* ---------- Desktop ---------- */

@media (min-width:1000px){

    html body section.hc-hero{
        min-height:560px !important;
        height:560px !important;

        background-size:cover !important;
        background-position:center center !important;
    }

    html body section.hc-hero > .hc-hero-text{
        width:53% !important;
        height:100% !important;

        margin:0 !important;
        padding:105px 5% 40px !important;

        box-sizing:border-box !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;

        transform:none !important;
    }

    html body section.hc-hero > .hc-hero-text h1{
        max-width:760px !important;
        margin:0 0 12px !important;

        font-size:clamp(50px,4.5vw,68px) !important;
        line-height:1.15 !important;

        text-align:center !important;
    }

    html body section.hc-hero > .hc-hero-text .hc-gold-line{
        margin:6px auto 18px !important;
    }

    html body section.hc-hero > .hc-hero-text .hc-hero-description{
        max-width:620px !important;
        margin:4px auto 20px !important;

        font-size:16px !important;
        line-height:1.8 !important;

        text-align:center !important;
    }

    html body section.hc-hero > .hc-hero-text .hc-features{
        max-width:640px !important;
        margin:0 auto !important;
        gap:12px !important;
    }

    html body section.hc-hero > .hc-hero-text .hc-hero-buttons{
        max-width:640px !important;
        margin:16px auto 0 !important;
    }
}

/* ---------- Tablet / Mobile ---------- */

@media (max-width:999px){

    html body section.hc-hero{
        min-height:650px !important;
        height:auto !important;

        background-size:cover !important;
        background-position:center center !important;
    }

    html body section.hc-hero > .hc-hero-text{
        width:100% !important;
        min-height:650px !important;

        box-sizing:border-box !important;

        padding:95px 20px 45px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;

        transform:none !important;
    }
}

@media (max-width:600px){

    html body section.hc-hero{
        min-height:680px !important;
    }

    html body section.hc-hero > .hc-hero-text{
        min-height:680px !important;
        padding:90px 16px 35px !important;
    }

    html body section.hc-hero > .hc-hero-text h1{
        font-size:38px !important;
        line-height:1.25 !important;
    }

    html body section.hc-hero > .hc-hero-text .hc-hero-description{
        font-size:15px !important;
        line-height:1.8 !important;
    }

    html body section.hc-hero > .hc-hero-text .hc-features{
        width:100% !important;
    }

    html body section.hc-hero > .hc-hero-text .hc-hero-buttons{
        width:100% !important;
    }
}

/* ---------- Safety: no extreme positioning ---------- */

html body section.hc-hero,
html body section.hc-hero > .hc-hero-text,
html body section.hc-hero > img.hc-hero-real-image{
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
}

html body section.hc-hero > .hc-hero-text{
    translate:none !important;
}


/* =========================================================
   HOUSE CAREGIVER — FINAL MOBILE HERO BACKGROUND
   ========================================================= */

@media (max-width: 768px) {

  html body section.hc-hero {
    background-image: url("/assets/images/house-caregiver-hero-premium-final.webp") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    /* ضع الشجرة أسفل الكلام وعلى اليمين */
    background-position: 68% 72% !important;

    background-color: #f7efe2 !important;
  }

  /* طبقة خفيفة جدًا حتى يظل الكلام واضحًا */
  html body section.hc-hero::before {
    background-image: none !important;
    background: rgba(255,255,255,.16) !important;
    opacity: 1 !important;
  }

  html body section.hc-hero > .hero-overlay {
    background: rgba(255,255,255,.16) !important;
    opacity: 1 !important;
  }

  /* منع أي فراغ علوي زائد داخل الـ Hero */
  html body section.hc-hero {
    margin-top: 0 !important;
    padding-top: 26px !important;
  }

  html body section.hc-hero > .hc-hero-text {
    position: relative !important;
    z-index: 5 !important;
  }

  html body section.hc-hero > .hc-hero-text .hc-hero-description {
    position: relative !important;
    z-index: 6 !important;
  }
}

/* الهواتف الصغيرة */
@media (max-width: 390px) {
  html body section.hc-hero {
    background-position: 68% 76% !important;
    background-size: cover !important;
  }
}


/* =========================================================
   HOUSE CAREGIVER — WHATSAPP VIP PREVIEW
   Development build ONLY
   ========================================================= */

html body a.whatsapp-float,
html body .whatsapp-float,
html body .hc-whatsapp{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;

    position:fixed !important;
    right:24px !important;
    bottom:24px !important;

    width:58px !important;
    height:58px !important;

    align-items:center !important;
    justify-content:center !important;

    background:#25D366 !important;
    color:#fff !important;

    border:3px solid rgba(255,255,255,.95) !important;
    border-radius:50% !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.18),
        0 0 0 1px rgba(37,211,102,.15) !important;

    z-index:99999 !important;

    text-decoration:none !important;
    transition:
        transform .22s ease,
        box-shadow .22s ease !important;
}

html body a.whatsapp-float:hover,
html body .whatsapp-float:hover,
html body .hc-whatsapp:hover{
    transform:translateY(-3px) scale(1.04) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.22),
        0 0 0 5px rgba(37,211,102,.12) !important;
}

html body a.whatsapp-float svg,
html body .whatsapp-float svg,
html body .hc-whatsapp svg{
    width:28px !important;
    height:28px !important;
    display:block !important;
}

html body a.whatsapp-float i,
html body .whatsapp-float i,
html body .hc-whatsapp i{
    font-size:27px !important;
    line-height:1 !important;
}

/* Mobile */
@media (max-width:600px){

    html body a.whatsapp-float,
    html body .whatsapp-float,
    html body .hc-whatsapp{
        right:16px !important;
        bottom:16px !important;

        width:54px !important;
        height:54px !important;

        border-width:2px !important;
    }

    html body a.whatsapp-float svg,
    html body .whatsapp-float svg,
    html body .hc-whatsapp svg{
        width:26px !important;
        height:26px !important;
    }
}