/* Homepage hero search card, second pass (owner, 2026-10-18): the three tabs are always fully visible
   and share the card's width, the map link no longer squeezes them, and the city picker lists cities
   under their region. Loaded after the page's inline hero styles, so equal selectors win here; the
   few !important flags only answer !important rules (and Tailwind utilities) already in that sheet. */

#client-home-page.home-hero-card {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1rem, 2.2vw, 1.75rem) !important;
    border-radius: 1.5rem;
    /* Owner, 2026-10-27: «عطها 75٪ اوباسيستس للخلفية البيضاء»: the skyline shows through the card's white. */
    background-color: rgba(255, 255, 255, 0.75);
}

/* Owner, 2026-10-27: «نزل هذه شوي عشان تظهر الصورة اللي خلفها»: the card sits lower under the title, so more of
   the skyline shows between them. */
.home-hero-stage > #client-home-page {
    margin-top: clamp(2.5rem, 10vh, 6.5rem);
}

/* ---------- Tabs ---------- */
/* One segmented control across the full card: three equal tabs, never scrolled or clipped. */
#client-home-page.home-hero-card .home-hero-mode-tabs-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin: 0 !important;
}
#client-home-page.home-hero-card .home-hero-mode-tabs-wrap .home-hero-mode-tabs {
    display: grid !important;
    /* The services tab carries an icon and the «مميز» chip, so it never shrinks below its content;
       the two property tabs share what is left equally. */
    grid-template-columns: minmax(max-content, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none;
    gap: 0.35rem !important;
    padding: 0.35rem;
    overflow: visible !important;
    border-radius: 1.1rem;
}
#client-home-page.home-hero-card .home-hero-mode-btn {
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem !important;
    font-size: clamp(0.9rem, 1.15vw, 1.02rem) !important;
    font-weight: 800 !important;
    white-space: nowrap;
}
/* Unselected tabs read as buttons: a white face with a lilac outline (the selected tab keeps its fill). */
#client-home-page.home-hero-card .home-hero-mode-btn:not(.active) {
    border: 1.5px solid #ddd3ee !important;
    background: #ffffff !important;
    color: #4c3d75 !important;
}
#client-home-page.home-hero-card .home-hero-mode-btn:not(.active):hover {
    border-color: #8b7baf !important;
    background: #faf8fe !important;
}
#client-home-page.home-hero-card .home-hero-mode-btn.active { border: 1.5px solid transparent !important; }
#client-home-page.home-hero-card .home-hero-mode-btn__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wide cards: the map link sits beside the tabs, which still take every pixel left over. */
@media (min-width: 1100px) {
    #client-home-page.home-hero-card .home-hero-mode-tabs-wrap {
        flex-direction: row;
        align-items: center;
    }
    #client-home-page.home-hero-card .home-explore-map-row { flex: none; }
    #client-home-page.home-hero-card .home-explore-map-btn { height: 3.25rem; padding: 0 1.15rem; border-radius: 1rem; }
}

/* Narrower cards: the tabs get the whole row, and the map link moves under the fields as a full-width
   secondary button (display: contents lets the wrapper's children take part in the card's column). */
@media (max-width: 1099px) {
    #client-home-page.home-hero-card .home-hero-mode-tabs-wrap { display: contents; }
    #client-home-page.home-hero-card .home-hero-mode-tabs { order: 1; }
    #client-home-page.home-hero-card .home-hero-search-grid { order: 2; }
    #client-home-page.home-hero-card .home-explore-map-row { order: 3; width: 100%; }
    #client-home-page.home-hero-card .home-explore-map-btn {
        width: 100%;
        height: 2.9rem;
        border-style: dashed;
        border-radius: 0.875rem;
        background: #faf8fe;
    }
}

/* Phones: «الخدمات العقارية ★ مميز» gets its own full row; the two property tabs share the next. */
@media (max-width: 560px) {
    #client-home-page.home-hero-card .home-hero-mode-tabs-wrap .home-hero-mode-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #client-home-page.home-hero-card .home-hero-mode-btn--special { grid-column: 1 / -1; }
    #client-home-page.home-hero-card .home-hero-mode-btn { min-height: 3rem; font-size: 0.92rem !important; }
}

/* ---------- Fields ---------- */
#client-home-page.home-hero-card {
    --hero-field-h: 3.4rem;
    --hero-field-radius: 1rem;
}
#client-home-page.home-hero-card .home-hero-search-grid { gap: 0.75rem !important; }
#client-home-page.home-hero-card #homeSearchBtn {
    font-size: 1rem;
    font-weight: 800;
}
@media (max-width: 639px) {
    #client-home-page.home-hero-card { --hero-field-h: 3.15rem; }
}

/* ---------- Searchable dropdowns (city, district, services) ---------- */
#client-home-page .home-hero-search-grid .home-dd-panel {
    min-width: max(100%, 17rem);
    padding: 0.45rem;
    border: 1px solid #e6e0f3 !important;
    border-radius: 1rem !important;
    background: #ffffff;
    box-shadow: 0 24px 48px -18px rgba(29, 21, 64, 0.42), 0 2px 6px rgba(59, 42, 99, 0.06) !important;
}
/* Above or below the field, as the script decides (home-dd-flip-below / -above). The page's own rule
   for this only matched a .home-searchable-dd wrapper these fields don't have, so the panel used to sit
   on top of its field and its list was squeezed into whatever room was left. */
#client-home-page .home-hero-search-grid .home-dd-panel.home-dd-flip-below {
    top: calc(100% + 0.4rem) !important;
    bottom: auto !important;
    margin: 0 !important;
}
#client-home-page .home-hero-search-grid .home-dd-panel.home-dd-flip-above {
    top: auto !important;
    bottom: calc(100% + 0.4rem) !important;
    margin: 0 !important;
}
/* A panel wider than its field grows toward the card's middle, not off its edge. */
#client-home-page[dir="rtl"] .home-hero-search-grid .home-dd-panel { left: auto !important; right: 0 !important; }
#client-home-page[dir="ltr"] .home-hero-search-grid .home-dd-panel { right: auto !important; left: 0 !important; }

#client-home-page .home-hero-search-grid .home-dd-panel input[type="text"] {
    display: block;
    width: 100%;
    height: 2.75rem;
    margin-bottom: 0.4rem;
    padding: 0 0.85rem;
    padding-inline-start: 2.5rem;
    border: 1.5px solid #ece7f6 !important;
    border-radius: 0.75rem;
    background: #f8f6fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7baf' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat;
    background-size: 1.05rem;
    color: #1f1a2e;
    font-size: 0.92rem;
    font-weight: 600;
}
#client-home-page[dir="rtl"] .home-hero-search-grid .home-dd-panel input[type="text"] { background-position: right 0.85rem center; }
#client-home-page[dir="ltr"] .home-hero-search-grid .home-dd-panel input[type="text"] { background-position: left 0.85rem center; }
#client-home-page .home-hero-search-grid .home-dd-panel input[type="text"]:focus {
    border-color: #8b7baf !important;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(106, 93, 139, 0.12) !important;
}

#client-home-page .home-hero-search-grid .home-dd-list {
    max-height: 19rem;
    padding: 0 0.1rem !important;
    scrollbar-width: thin;
    scrollbar-color: #d9cff1 transparent;
}
#client-home-page .home-hero-search-grid .home-dd-list::-webkit-scrollbar { display: block; width: 6px; }
#client-home-page .home-hero-search-grid .home-dd-list::-webkit-scrollbar-thumb { border-radius: 6px; background: #d9cff1; }

#client-home-page .home-hero-search-grid .home-dd-item {
    margin: 1px 0;
    padding: 0.6rem 0.8rem;
    border-radius: 0.65rem;
    color: #2a2340;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: start;
}
#client-home-page .home-hero-search-grid .home-dd-item:hover,
#client-home-page .home-hero-search-grid .home-dd-item:focus-visible {
    background: #f3effb;
    color: #3b2a63;
}
#client-home-page .home-hero-search-grid .home-dd-item[aria-selected="true"] {
    background: #ebe5f8;
    color: #3b2a63;
    font-weight: 800;
}

/* Region heading: a sticky label above its cities, not an option. */
#client-home-page .home-hero-search-grid .home-dd-group {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
    padding: 0.5rem 0.8rem 0.35rem;
    background: #ffffff;
    color: #8b7baf;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: default;
    user-select: none;
    pointer-events: none;
}
#client-home-page .home-hero-search-grid .home-dd-group:first-child { margin-top: 0; }
#client-home-page .home-hero-search-grid .home-dd-group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee8f7;
}

/* Loading row: a small spinner beside the text, centred in the panel. */
#client-home-page .home-hero-search-grid .home-dd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.1rem 0.8rem;
    color: #8b7baf;
    font-size: 0.9rem;
    font-weight: 600;
}
#client-home-page .home-hero-search-grid .home-dd-loading::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid #e6e0f3;
    border-top-color: #6a5d8b;
    border-radius: 50%;
    animation: home-dd-spin 0.8s linear infinite;
}
@keyframes home-dd-spin { to { transform: rotate(360deg); } }

/* City picker, step 1: one row per region — name, number of cities, and a chevron into it. */
#client-home-page .home-hero-search-grid .home-dd-region {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.7rem;
    font-weight: 700;
}
#client-home-page .home-hero-search-grid .home-dd-region span { flex: 1; min-width: 0; }
#client-home-page .home-hero-search-grid .home-dd-region small {
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    background: #f3effb;
    color: #8b7baf;
    font-size: 0.72rem;
    font-weight: 700;
}
#client-home-page .home-hero-search-grid .home-dd-region svg { flex: none; width: 1rem; height: 1rem; color: #b9a7ea; }
#client-home-page[dir="ltr"] .home-hero-search-grid .home-dd-region svg { transform: scaleX(-1); }
#client-home-page .home-hero-search-grid .home-dd-region[aria-current="true"] { background: #f3effb; color: #3b2a63; }

/* Step 2: the open region as a sticky header that leads back to all regions. */
#client-home-page .home-hero-search-grid .home-dd-back {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.25rem;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 0.65rem;
    background: #f3effb;
    color: #3b2a63;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: start;
    cursor: pointer;
}
#client-home-page .home-hero-search-grid .home-dd-back span { flex: 1; min-width: 0; }
#client-home-page .home-hero-search-grid .home-dd-back small { color: #8b7baf; font-size: 0.75rem; font-weight: 700; }
#client-home-page .home-hero-search-grid .home-dd-back svg { flex: none; width: 1rem; height: 1rem; }
#client-home-page[dir="ltr"] .home-hero-search-grid .home-dd-back svg { transform: scaleX(-1); }
#client-home-page .home-hero-search-grid .home-dd-back:hover { background: #ebe5f8; }

/* Search results across regions: the region in small type after the city. */
#client-home-page .home-hero-search-grid .home-dd-item__sub {
    display: block;
    margin-top: 0.1rem;
    color: #a197bd;
    font-size: 0.74rem;
    font-weight: 600;
}

/* ---------- «الخدمات العقارية»: Ahmed's card (owner, 2026-10-31) ----------
   The services page's «دع المهندس أحمد يساعدك» pill (client-skin.css .kr-help) at the hero row's size: white,
   his face in a gold ring at the start, his line, a purple disc with the arrow at the end. One link. */
#client-home-page .home-ahmed-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 4.25rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #e6e0f3;
    border-radius: 999px;
    background: #fff;
    color: #241b46;
    box-shadow: 0 12px 30px rgba(36, 27, 70, 0.08), 0 0 0 5px rgba(106, 93, 139, 0.06);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
#client-home-page .home-ahmed-card:hover {
    border-color: #cfc4e6;
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(36, 27, 70, 0.12), 0 0 0 6px rgba(106, 93, 139, 0.1);
}
#client-home-page .home-ahmed-card:focus-visible {
    outline: 3px solid #6a5d8b;
    outline-offset: 3px;
}
.home-ahmed-card__face {
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #efeaf8 url("../../images/khadamat/ahmed/hello.webp") 50% 8% / 150% auto no-repeat;
    box-shadow: 0 0 0 3px #f5b942;
}
#client-home-page .home-ahmed-card__text {
    flex: 1 1 auto;
    min-width: 0;
    color: #241b46;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.35;
}
#client-home-page .home-ahmed-card__arrow {
    display: inline-flex;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #6a5d8b;
    color: #fff;
    transition: background-color 0.2s ease;
}
#client-home-page .home-ahmed-card:hover .home-ahmed-card__arrow { background: #54438a; }
#client-home-page .home-ahmed-card__arrow svg { width: 1.25rem; height: 1.25rem; }
#client-home-page[dir="ltr"] .home-ahmed-card__arrow svg { transform: scaleX(-1); }
@media (max-width: 639px) {
    #client-home-page .home-ahmed-card { gap: 0.6rem; min-height: 3.5rem; padding: 0.4rem 0.5rem; }
    .home-ahmed-card__face { flex-basis: 2.5rem; width: 2.5rem; height: 2.5rem; box-shadow: 0 0 0 2px #f5b942; }
    #client-home-page .home-ahmed-card__text { font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #client-home-page .home-ahmed-card__arrow { flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    #client-home-page .home-ahmed-card { transition: none; }
    #client-home-page .home-ahmed-card:hover { transform: none; }
}