/* Egypt Villas - Mobile home/header/search layout v26
   Mobile only. Two-line compact header + existing search. */
@media (max-width: 860px){
  html,body{overflow-x:hidden!important;}

  /* v25 strict mobile header visibility guards */
  .top [data-ev-mobile-hidden-by-v25="1"]{display:none!important;}

  /* No WhatsApp Prep / Reports in mobile header for anyone */
  .top-actions .primary-whatsapp-prep,
  .top-actions a[href*="/whatsapp"],
  .top-actions .admin-only{display:none!important;}

  /* EV Portal and My Units are login-role only */
  body:not(.is-admin) .top nav .admin-only,
  body:not(.is-admin) .top nav [data-tab="portal"]{display:none!important;}
  body:not(.is-broker) .top nav .broker-only,
  body:not(.is-broker) .top nav [data-tab="brokerdash"]{display:none!important;}

  /* Login/logout swap */
  body.is-admin .top nav [data-tab="login"],
  body.is-broker .top nav [data-tab="login"],
  body.is-admin .top-actions [data-tab="login"],
  body.is-broker .top-actions [data-tab="login"]{display:none!important;}
  body:not(.is-admin):not(.is-broker) .top .ev-logout-btn,
  body:not(.is-admin):not(.is-broker) .top [data-ev-action="logout"]{display:none!important;}

  /* Hide Home only on the Home tab */
  body.ev-tab-home .top nav [data-tab="home"],
  body.ev-tab-home .top-actions [data-tab="home"]{display:none!important;}

  /* Dashboard replaces Reports as the dashboard entry */
  .top-actions .ev-dashboard-header-btn,
  .top-actions [data-ev-dashboard],
  .top-actions [data-ev-action="dashboard"]{display:inline-flex!important;visibility:visible!important;opacity:1!important;}

  /* Header must fill the mobile screen width exactly */
  .top{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    box-sizing:border-box!important;
    padding:10px 12px!important;
    border-radius:0!important;
    gap:8px!important;
    overflow:hidden!important;
  }

  /* Visitor only: keep the public header clean */
  body:not(.is-admin):not(.is-broker) .top-actions .primary-whatsapp-prep,
  body:not(.is-admin):not(.is-broker) .top-actions .admin-only,
  body:not(.is-admin):not(.is-broker) .top .ev-logout-btn,
  body:not(.is-admin):not(.is-broker) .top [data-ev-action="logout"]{
    display:none!important;
  }

  /* Reports is EV-only */
  body:not(.is-admin) .top-actions .admin-only{
    display:none!important;
  }

  /* Broker logged-in header: no Sell Your Unit in the compact bar */
  body.is-broker .top-actions .primary-sell,
  body.is-broker .top-actions [data-ev-action="sell"],
  body.is-broker .top-actions [href*="sell"]{
    display:none!important;
  }

  .top.ev-mobile-flat-header{
    display:block!important;
  }
  .top.ev-mobile-flat-header nav{display:none!important;}
  .top-actions{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:38px!important;
    gap:7px!important;
    align-items:stretch!important;
  }
  .top-actions .navbtn,
  .top-actions .ev-dashboard-header-btn,
  .top-actions .brand{
    grid-column:auto!important;
    min-width:0!important;
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    border-radius:13px!important;
    padding:5px 5px!important;
    font-size:11.5px!important;
    line-height:1.08!important;
    text-align:center!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    white-space:normal!important;
    box-shadow:0 6px 14px rgba(0,0,0,.15)!important;
    transition:transform .16s ease, filter .16s ease, box-shadow .16s ease!important;
  }
  .top-actions .navbtn:active,
  .top-actions .ev-dashboard-header-btn:active,
  .top-actions .brand:active{transform:scale(.97)!important;}

  .top-actions .brand{
    order:2!important;
    padding:0!important;
    background:rgba(16,44,70,.22)!important;
    border:1px solid rgba(214,185,99,.48)!important;
    color:#f3d67a!important;
    text-decoration:none!important;
    overflow:hidden!important;
  }
  .top-actions .brand span{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    gap:0!important;
    line-height:1!important;
  }
  .top-actions .brand strong{
    display:block!important;
    font-size:11.5px!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    color:#f4d77f!important;
  }
  .top-actions .brand small{display:none!important;}


  /* Dashboard must always stay visible after any login type */
  body.is-admin .top-actions .ev-dashboard-header-btn,
  body.is-broker .top-actions .ev-dashboard-header-btn,
  body.ev-logged-in .top-actions .ev-dashboard-header-btn,
  .top-actions [data-ev-action="dashboard"],
  .top-actions [data-ev-dashboard]{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .top-actions .primary-sell{order:1!important;}
  .top-actions .brand{order:2!important;}
  .top-actions .primary-listing{order:3!important;}
  .top-actions .primary-contact{order:4!important;}
  .top-actions .ev-dashboard-header-btn{
    order:5!important;
    background:linear-gradient(135deg,#12334f,#145c85)!important;
    border-color:rgba(214,185,99,.52)!important;
    color:#fff!important;
  }
  .top-actions .primary-whatsapp-prep{order:98!important;}
  .top-actions .admin-only{order:6!important;}
  .top-actions [data-tab="login"]{order:7!important;}
  .top-actions [data-tab="home"]{order:8!important;}
  .top-actions [data-tab="brokerdash"]{order:9!important;}
  .top-actions [data-tab="portal"]{order:9!important;}
  .top-actions .ev-logout-btn,
  .top-actions [data-ev-action="logout"]{order:7!important;}

  .top nav{display:none!important;}
  .top nav .navbtn{display:none!important;}

  /* Search: no new background; compact mobile layout */
  #tab-home .search-panel{
    width:min(96vw,650px)!important;
    margin:12px auto 0!important;
    padding:0 8px!important;
    border-radius:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:visible!important;
  }

  #tab-home .search-grid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:end!important;
    direction:ltr!important;
  }

  #tab-home .search-grid label,
  #tab-home .search-grid .more-filters{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    transform-origin:center center!important;
    transition:transform .20s cubic-bezier(.2,.9,.2,1), filter .20s ease!important;
    will-change:transform;
  }

  #tab-home .search-grid label{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    direction:rtl!important;
  }

  /* Line 1: code/keyword full width */
  #tab-home .search-grid label:has(#q){order:1!important;grid-column:1 / -1!important;}

/* Line 2: City + Project */
#tab-home .search-grid label:has(#city){order:2!important;grid-column:1 / span 3!important;}
#tab-home .search-grid label:has(#project){order:3!important;grid-column:4 / span 3!important;}


  /* Line 3: Unit Type + Sale/Rent + Finishing */
  #tab-home .search-grid label:has(#typeFilter){order:4!important;grid-column:1 / span 2!important;}
  #tab-home .search-grid label:has(#purposeFilter){order:5!important;grid-column:3 / span 2!important;}
  #tab-home .search-grid label:has(#filterFinishing){order:6!important;grid-column:5 / span 2!important;}

  /* Line 4: Developer + Extra Features */
  #tab-home .search-grid label:has(#developer){order:7!important;grid-column:1 / span 3!important;}
  #tab-home .search-grid .more-filters{order:8!important;grid-column:4 / span 3!important;align-self:end!important;}
  #tab-home .search-grid .more-filters[open]{grid-column:1 / -1!important;}

  #tab-home .search-grid label span{
    display:block!important;
    width:100%!important;
    min-height:18px!important;
    color:#f4df9a!important;
    font-size:12px!important;
    font-weight:950!important;
    line-height:1.15!important;
    text-align:center!important;
    padding:0 2px!important;
    white-space:normal!important;
    text-shadow:0 2px 8px rgba(0,0,0,.48)!important;
  }

  #tab-home .search-grid input,
  #tab-home .search-grid select{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:44px!important;
    border-radius:14px!important;
    border:1px solid rgba(12,36,54,.45)!important;
    background:#fff!important;
    color:#101820!important;
    font-size:13px!important;
    font-weight:850!important;
    text-align:center!important;
    text-align-last:center!important;
    padding:8px 5px!important;
    box-shadow:0 7px 16px rgba(0,0,0,.16)!important;
  }

  #tab-home .search-grid label:has(#q) input{
    min-height:52px!important;
    height:52px!important;
    border-radius:18px!important;
    font-size:16px!important;
  }

  #tab-home .search-grid label:focus-within,
  #tab-home .search-grid label.ev-mobile-field-open{
    z-index:80!important;
    transform:translateY(-4px) scale(1.035)!important;
    filter:drop-shadow(0 14px 22px rgba(0,0,0,.26))!important;
  }
  #tab-home .search-grid label:has(#q):focus-within,
  #tab-home .search-grid label:has(#q).ev-mobile-field-open{
    transform:translateY(-5px) scale(1.018)!important;
  }
  #tab-home .search-grid input:focus,
  #tab-home .search-grid select:focus{
    outline:0!important;
    border-color:#d6b963!important;
    box-shadow:0 0 0 3px rgba(214,185,99,.22),0 12px 24px rgba(0,0,0,.24)!important;
  }

  /* Extra Features as a small block next to Developer */
  #tab-home .search-grid .more-filters summary{
    width:100%!important;
    min-height:44px!important;
    height:44px!important;
    border-radius:14px!important;
    padding:8px 7px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(12,36,54,.35)!important;
    color:#102c46!important;
    font-size:12px!important;
    font-weight:950!important;
    box-shadow:0 7px 16px rgba(0,0,0,.14)!important;
    text-align:center!important;
  }
  #tab-home .search-grid .more-filters summary:after{content:none!important;}
  #tab-home .search-grid .more-filters .plus{
    display:inline-grid!important;
    place-items:center!important;
    width:19px!important;
    height:19px!important;
    border-radius:50%!important;
    background:linear-gradient(135deg,#9c7830,#d6b963)!important;
    color:#101820!important;
    font-size:15px!important;
    font-weight:950!important;
    line-height:1!important;
    flex:0 0 auto!important;
  }
  #tab-home .search-grid .more-filters[open] .plus{font-size:0!important;}
  #tab-home .search-grid .more-filters[open] .plus:before{content:'−';font-size:17px!important;}
  #tab-home .search-grid .more-filter-grid{
    margin-top:8px!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.95)!important;
    border:1px solid rgba(217,215,207,.9)!important;
    box-shadow:0 12px 28px rgba(20,30,36,.12)!important;
  }

  /* Buttons: left Clear All, middle Search, right Copy Link */
  #tab-home .search-actions{
    margin-top:10px!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    direction:ltr!important;
    align-items:stretch!important;
  }
  #tab-home .search-actions .more-filters{display:none!important;}
  #tab-home .search-actions .btn,
  #tab-home .search-actions button{
    min-width:0!important;
    width:100%!important;
    min-height:44px!important;
    height:44px!important;
    border-radius:13px!important;
    padding:8px 6px!important;
    font-size:11.5px!important;
    font-weight:950!important;
    line-height:1.15!important;
    white-space:normal!important;
    text-align:center!important;
  }
  #tab-home #clearSearchBtn{order:1!important;}
  #tab-home #searchBtn{order:2!important;background:linear-gradient(135deg,#b58a32,#ead276)!important;color:#101820!important;}
  #tab-home #evShareFilterUrl{order:3!important;}
}

@media (max-width: 420px){
  .top{padding:9px 10px!important;}
  .top-actions{gap:6px!important;}
  .top-actions{gap:6px!important;grid-auto-rows:36px!important;}
  .top-actions .navbtn,
  .top-actions .ev-dashboard-header-btn,
  .top-actions .brand{
    min-height:36px!important;
    height:36px!important;
    border-radius:12px!important;
    font-size:11px!important;
    padding:4px 4px!important;
  }
  .top-actions .brand strong{font-size:10.5px!important;}
  .top nav{display:none!important;}
  .top nav .navbtn{display:none!important;}
  #tab-home .search-panel{width:97vw!important;padding:0 6px!important;}
  #tab-home .search-grid{gap:7px!important;}
  #tab-home .search-grid label{gap:4px!important;}
  #tab-home .search-grid label span{font-size:11.2px!important;min-height:25px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;}
  #tab-home .search-grid input,
  #tab-home .search-grid select{min-height:42px!important;height:42px!important;border-radius:13px!important;font-size:12px!important;padding:7px 4px!important;}
  #tab-home .search-grid label:has(#q) input{min-height:50px!important;height:50px!important;font-size:15px!important;}
  #tab-home .search-grid .more-filters summary{min-height:42px!important;height:42px!important;font-size:11px!important;}
  #tab-home .search-actions{gap:7px!important;}
  #tab-home .search-actions .btn,
  #tab-home .search-actions button{font-size:10.5px!important;padding:7px 4px!important;}
}

/* Fallback for very old mobile browsers without :has support */
@supports not selector(label:has(input)){
  @media (max-width: 860px){
    #tab-home .search-grid label:nth-child(1){order:1!important;grid-column:1 / -1!important;}
    

#tab-home .search-grid label:nth-child(3){order:2!important;grid-column:1 / span 3!important;}
#tab-home .search-grid label:nth-child(4){order:3!important;grid-column:4 / span 3!important;}
    
    #tab-home .search-grid label:nth-child(2){order:4!important;grid-column:1 / span 2!important;}
    #tab-home .search-grid label:nth-child(6){order:5!important;grid-column:3 / span 2!important;}
    #tab-home .search-grid label:nth-child(7){order:6!important;grid-column:5 / span 2!important;}
    #tab-home .search-grid label:nth-child(5){order:7!important;grid-column:1 / span 3!important;}
    #tab-home .search-grid .more-filters{order:8!important;grid-column:4 / span 3!important;}
  }
}


/*
 * Clear filters + Copy filter link
 * Animated gold wave.
 */
#tab-home #clearSearchBtn,
#tab-home #evShareFilterUrl{
  color:#17232b!important;
  font-weight:900!important;

  border:1px solid
    rgba(145,101,20,.52)!important;

  background:
    linear-gradient(
      115deg,
      #9d6d18 0%,
      #c99b38 18%,
      #f5dc83 36%,
      #b98425 52%,
      #efd171 68%,
      #a8751d 84%,
      #d9ad4c 100%
    )!important;

  background-size:
    320% 100%!important;

  box-shadow:
    0 4px 12px rgba(117,78,14,.18),
    inset 0 1px 0 rgba(255,255,255,.55)!important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.3);

  animation:
    evGoldButtonWave 4s
    cubic-bezier(.45,.05,.55,.95)
    infinite!important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease!important;
}

#tab-home #clearSearchBtn:hover,
#tab-home #evShareFilterUrl:hover{
  transform:
    translateY(-1px);

  filter:
    brightness(1.06)
    saturate(1.08);

  box-shadow:
    0 7px 18px rgba(117,78,14,.26),
    inset 0 1px 0 rgba(255,255,255,.65)!important;
}

#tab-home #clearSearchBtn:active,
#tab-home #evShareFilterUrl:active{
  transform:
    translateY(1px)
    scale(.995);

  box-shadow:
    0 2px 7px rgba(117,78,14,.2),
    inset 0 1px 3px rgba(80,48,3,.15)!important;
}

@keyframes evGoldButtonWave{
  0%{
    background-position:
      0% 50%;
  }

  50%{
    background-position:
      100% 50%;
  }

  100%{
    background-position:
      0% 50%;
  }
}

@media (prefers-reduced-motion:reduce){
  #tab-home #clearSearchBtn,
  #tab-home #evShareFilterUrl{
    animation:none!important;
    background-position:50% 50%!important;
  }
}