/* =========================================================
   FLYX Owner Hotel Mobile Fix v6
   - Orange theme preserved
   - Hotel search cards polished
   - Hotel detail gallery: 1 big image + clickable thumbnails
   - Mobile room cards readable
   ========================================================= */

:root{
  --blue:#ff5a1f !important;
  --greencolor:#ff5a1f !important;
  --flyx-orange:#ff5a1f;
  --flyx-orange-dark:#e84b14;
  --flyx-orange-soft:#fff3ec;
  --flyx-text:#111827;
  --flyx-muted:#6b7280;
  --flyx-border:#e5e7eb;
  --flyx-bg:#f3f6fb;
  --flyx-success:#16a34a;
  --flyx-danger:#dc2626;
}

/* brand color cleanup */
#header #menu .active,
#header #menu a:hover,
a{ color:var(--flyx-orange) !important; }
#header #menu a span,
#header #rightmenu .btn span,
#header #rightmenu .show .btn,
.mainbutton,
.btn-primary,
.bg-primary,
.btn-danger,
.redbuttonsearch,
.registerbutton,
.bookbtn a button,
.bookbtn button,
.combutton{
  background-color:var(--flyx-orange) !important;
  border-color:var(--flyx-orange) !important;
  color:#fff !important;
}
.starcatht,
.starcatht .fa{ color:#ffb400 !important; }

/* ==============================
   Hotel detail gallery
   ============================== */
.flyx-hotel-gallery{
  width:100%;
  margin:0 0 18px;
}
.flyx-gallery-main{
  position:relative;
  width:100%;
  height:330px;
  border-radius:24px;
  overflow:hidden;
  background:#eef2f7;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  margin-bottom:10px;
}
.flyx-gallery-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.flyx-gallery-more-main{
  position:absolute;
  right:14px;
  bottom:14px;
  background:rgba(17,24,39,.78);
  color:#fff;
  font-size:13px;
  font-weight:800;
  padding:8px 12px;
  border-radius:12px;
  backdrop-filter:blur(4px);
}
.flyx-gallery-thumbs{
  display:flex;
  gap:10px;
}
.flyx-gallery-thumb-wrap{
  position:relative;
  flex:1;
  height:92px;
  border-radius:14px;
  overflow:hidden;
  background:#eef2f7;
  border:2px solid transparent;
  transition:.2s ease;
}
.flyx-gallery-thumb-wrap.active{
  border-color:var(--flyx-orange);
}
.flyx-gallery-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:pointer;
}
.flyx-gallery-more-thumb{
  position:absolute;
  inset:0;
  background:rgba(17,24,39,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:768px){
  body{ background:var(--flyx-bg) !important; }

  /* Header mobile polish */
  #header{
    height:64px !important;
    display:flex !important;
    align-items:center !important;
  }
  #header #logo img{ height:36px !important; }
  #header .mainbutton,
  #header #rightmenu .btn{
    border-radius:12px !important;
    box-shadow:0 8px 20px rgba(255,90,31,.22) !important;
  }

  /* Search/listing hotel cards (OLD layout only) */
  .hotelbookrow:not(.ct-hotel-card),
  .bookrow.hotelbookrow:not(.ct-hotel-card){
    width:100% !important;
    display:block !important;
    margin:0 0 18px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:22px !important;
    background:#fff !important;
    overflow:hidden !important;
    box-shadow:0 8px 26px rgba(15,23,42,.08) !important;
  }

  /* ---- NEW ct-hotel-card mobile overrides ---- */
  .ct-hotel-card{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    margin:0 0 16px !important;
    padding:0 !important;
    border-radius:16px !important;
    overflow:hidden !important;
    border:1px solid #ebebeb !important;
    box-shadow:0 4px 18px rgba(15,23,42,.09) !important;
    background:#fff !important;
  }
  .ct-card-body{
    display:flex !important;
    flex-direction:column !important;
  }
  .ct-img-col{
    width:100% !important;
    min-width:100% !important;
    height:210px !important;
    flex-shrink:0 !important;
  }
  .ct-details-col{
    border-right:none !important;
    border-bottom:1px solid #f0f0f0 !important;
    padding:14px 16px !important;
    width:100% !important;
  }
  .ct-price-col{
    width:100% !important;
    min-width:100% !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:12px 16px !important;
    gap:10px !important;
  }
  .ct-price-box{ text-align:left !important; }
  .ct-sell-price{ font-size:22px !important; }
  .ct-view-btn{ width:auto !important; padding:10px 18px !important; min-width:110px !important; }
  .ct-nights-info{ display:none !important; }
  .hotelbookrow .col-lg-9,
  .hotelbookrow .col-lg-3{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    padding:0 !important;
  }
  .hotelbooking{
    display:block !important;
    padding:0 !important;
  }
  .hotelbooking .hotelimg{
    width:100% !important;
    height:225px !important;
    overflow:hidden !important;
    border-radius:0 !important;
    background:#eef2f7 !important;
  }
  .hotelbooking .hotelimg img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
  .hotelbooking .hoteltext{
    padding:18px 20px 8px !important;
    width:100% !important;
  }
  .hotelbooking .hoteltext h5{
    font-size:21px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    color:var(--flyx-text) !important;
    margin:0 0 8px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .reviewsection{ margin-bottom:8px !important; display:flex !important; align-items:center !important; gap:8px !important; }
  .threeblue{
    background:var(--flyx-orange-soft) !important;
    color:var(--flyx-orange) !important;
    border-radius:8px !important;
    padding:3px 8px !important;
    font-size:11px !important;
  }
  .relocation{
    color:var(--flyx-muted) !important;
    font-size:13px !important;
    line-height:1.45 !important;
    margin-bottom:10px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .Deluxe p{ margin:0 !important; }
  .Deluxe .tbl{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    padding:7px 10px !important;
    background:#f8fafc !important;
    color:#374151 !important;
    border:1px solid #edf0f4 !important;
    border-radius:999px !important;
    margin:4px 4px 0 0 !important;
    font-size:12px !important;
    font-weight:700 !important;
  }
  .hotelbookrow:not(.ct-hotel-card) .bookbtn{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:16px 20px 20px !important;
    border-top:1px solid #f1f3f6 !important;
    text-align:left !important;
  }
  .hotelbookrow:not(.ct-hotel-card) .bookbtn .blackbox,
  .hotelbookrow:not(.ct-hotel-card) .bookbtn .flyx-start-label{
    display:block !important;
    background:transparent !important;
    margin:0 0 4px !important;
    height:auto !important;
    line-height:normal !important;
    color:var(--flyx-muted) !important;
    width:auto !important;
  }
  .hotelbookrow:not(.ct-hotel-card) .bookbtn .blackbox h5,
  .hotelbookrow:not(.ct-hotel-card) .bookbtn .flyx-start-label h5{
    font-size:12px !important;
    font-weight:800 !important;
    color:var(--flyx-muted) !important;
    text-transform:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  .hotelbookrow:not(.ct-hotel-card) .bookbtn h4{
    display:block !important;
    font-size:31px !important;
    font-weight:900 !important;
    color:var(--flyx-text) !important;
    line-height:1 !important;
    margin:0 !important;
  }
  .hotelbookrow:not(.ct-hotel-card) .bookbtn form{ margin-left:auto !important; }
  .hotelbookrow:not(.ct-hotel-card) .bookbtn .btn,
  .hotelbookrow:not(.ct-hotel-card) .bookbtn button{
    min-width:150px !important;
    height:58px !important;
    border-radius:15px !important;
    font-size:17px !important;
    font-weight:800 !important;
    box-shadow:0 10px 20px rgba(255,90,31,.26) !important;
  }

  /* Detail page heading card */
  .phonehoteldetailcontainer{ padding:0 14px !important; }
  .hotelgallery{ padding-top:78px !important; }
  .hoteldetail{
    background:#fff !important;
    border-radius:22px !important;
    padding:18px !important;
    margin-bottom:14px !important;
    box-shadow:0 8px 26px rgba(15,23,42,.08) !important;
    display:block !important;
  }
  .hoteldetailone,
  .hoteldetailtwo{
    width:100% !important;
    max-width:100% !important;
    display:block !important;
  }
  .hoteldetail .topheading h1{
    font-size:25px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
    color:var(--flyx-text) !important;
    margin-bottom:8px !important;
  }
  .hoteldetail p{
    color:var(--flyx-muted) !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }
  .hoteldetailtwo .roompricing{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    margin-top:12px !important;
    gap:12px !important;
  }
  .hoteldetailtwo .roompricing h3{
    font-size:30px !important;
    font-weight:900 !important;
    color:var(--flyx-text) !important;
    margin:0 !important;
  }
  .hoteldetailtwo .roompricing p{
    margin:2px 0 0 !important;
    font-weight:700 !important;
    color:var(--flyx-muted) !important;
  }
  .hoteldetailtwo .roompricing button{
    background:var(--flyx-orange) !important;
    color:#fff !important;
    border:0 !important;
    border-radius:15px !important;
    padding:15px 22px !important;
    font-size:16px !important;
    font-weight:800 !important;
    box-shadow:0 10px 20px rgba(255,90,31,.26) !important;
  }

  /* Gallery mobile */
  .flyx-gallery-main{
    height:250px !important;
    border-radius:20px !important;
    margin-bottom:8px !important;
  }
  .flyx-gallery-thumbs{ gap:8px !important; }
  .flyx-gallery-thumb-wrap{
    height:78px !important;
    border-radius:13px !important;
  }
  .flyx-gallery-more-main{
    font-size:12px !important;
    padding:7px 10px !important;
    border-radius:10px !important;
  }

  /* Stay details + amenities */
  .descriptioncard{
    border:0 !important;
    border-radius:22px !important;
    overflow:hidden !important;
    box-shadow:0 8px 26px rgba(15,23,42,.08) !important;
    margin-bottom:18px !important;
  }
  .descriptioncard .card-body{ padding:20px !important; }
  .description h1,
  .stayamentites h1{
    font-size:27px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    color:var(--flyx-text) !important;
    margin:0 0 14px !important;
  }
  .description h1 span,
  .stayamentites h1 span{ color:var(--flyx-orange) !important; }
  .description p{
    color:#374151 !important;
    font-size:15px !important;
    line-height:1.65 !important;
    max-height:220px !important;
    overflow:auto !important;
  }
  .stayamentites table,
  .stayamentites tbody,
  .stayamentites tr{
    display:block !important;
    width:100% !important;
  }
  .stayamentites tr{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .stayamentites td{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    padding:12px !important;
    background:#f8fafc !important;
    border:1px solid #edf0f4 !important;
    border-radius:14px !important;
    text-align:left !important;
    color:#374151 !important;
    font-size:13px !important;
    font-weight:800 !important;
  }
  .stayamentites td i{
    width:30px !important;
    height:30px !important;
    border-radius:10px !important;
    background:var(--flyx-orange-soft) !important;
    color:var(--flyx-orange) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:15px !important;
  }
  .stayamentites td br{ display:none !important; }
  .stayamentites td span{ font-size:13px !important; color:#374151 !important; }

  /* Room options */
  .roomtable{ margin-top:20px !important; }
  .roomtable:before{
    content:'Choose your room';
    display:block;
    font-size:28px;
    line-height:1.2;
    font-weight:900;
    color:var(--flyx-text);
    margin:0 0 14px;
  }
  .firstrtable{ display:none !important; }
  .secondrttable,
  .secondrttable tbody{
    display:block !important;
    width:100% !important;
    border:0 !important;
    background:transparent !important;
  }
  .secondrttable tr:first-child{ display:none !important; }
  .secondrttable tr{
    display:block !important;
    background:#fff !important;
    border:1px solid #edf0f4 !important;
    border-radius:22px !important;
    overflow:hidden !important;
    margin:0 0 18px !important;
    box-shadow:0 8px 26px rgba(15,23,42,.08) !important;
  }
  .secondrttable tr td{
    display:block !important;
    width:100% !important;
    border:0 !important;
    border-bottom:1px solid #f1f3f6 !important;
    padding:18px 20px !important;
    background:#fff !important;
  }
  .secondrttable tr td:last-child{ border-bottom:0 !important; }
  .secondrttable tr td h4{
    font-size:22px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
    color:var(--flyx-text) !important;
    margin:0 0 10px !important;
  }
  .secondrttable tr td a,
  .secondrttable tr td strong{
    color:var(--flyx-orange) !important;
  }
  .borders.d-grid{
    display:block !important;
  }
  .rmRatePlan__rec{
    display:inline-block !important;
    color:#0f766e !important;
    background:#ecfdf5 !important;
    padding:3px 8px !important;
    border-radius:8px !important;
    font-size:11px !important;
    font-weight:800 !important;
    margin-bottom:8px !important;
  }
  .hotels_amenities{
    font-size:15px !important;
    line-height:1.45 !important;
    color:#374151 !important;
    font-weight:800 !important;
    margin:0 0 9px !important;
  }
  .hotels_amenities .fa-check,
  .hotels_amenities .fa-dot-circle-o{ color:var(--flyx-success) !important; }
  .hotels_amenities .fa-times{ color:var(--flyx-danger) !important; }
  .cancelltioncharge{
    width:100% !important;
    border:1px solid #fed7aa !important;
    border-radius:14px !important;
    overflow:hidden !important;
    margin:12px 0 0 !important;
    background:#fff7ed !important;
  }
  .cancelltioncharge tr{
    display:grid !important;
    grid-template-columns:1fr !important;
    margin:0 !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    background:#fff7ed !important;
  }
  .cancelltioncharge td{
    display:block !important;
    border:0 !important;
    border-bottom:1px solid #fed7aa !important;
    background:#fff7ed !important;
    padding:10px 12px !important;
    font-size:13px !important;
    color:#7c2d12 !important;
  }
  .cancelltioncharge td:last-child{ border-bottom:0 !important; }
  .secondrttable tr td:nth-last-child(1) div[style*="font-size:24px"],
  .secondrttable tr td:last-child div[style*="font-size:24px"]{
    font-size:36px !important;
    line-height:1 !important;
    color:var(--flyx-text) !important;
    font-weight:900 !important;
    margin:6px 0 16px !important;
  }
  .secondrttable tr td:last-child .btn,
  .secondrttable tr td:last-child button{
    width:100% !important;
    min-height:58px !important;
    border-radius:15px !important;
    background:var(--flyx-orange) !important;
    color:#fff !important;
    font-size:18px !important;
    font-weight:900 !important;
    box-shadow:0 10px 20px rgba(255,90,31,.26) !important;
    margin-bottom:8px !important;
  }

  /* WhatsApp / floating button should not cover CTA */
  .whatsapp_float,
  .whatsappicon,
  .floatwhatsapp,
  a[href*="wa.me"],
  a[href*="whatsapp"]{
    bottom:92px !important;
    right:14px !important;
    z-index:999 !important;
  }
}

/* ==============================
   V7: Full hotel photo gallery modal
   - Shows 1 big hero + 3 thumbs on page
   - Opens all photos when user taps View all / +N more
   ============================== */
.flyx-gallery-more-main,
.flyx-gallery-more-thumb{
  border:0 !important;
  cursor:pointer !important;
  font-family:inherit !important;
}
.flyx-gallery-more-main{
  right:12px !important;
  bottom:12px !important;
  left:auto !important;
  width:auto !important;
  line-height:1.2 !important;
}
.flyx-gallery-more-thumb{
  padding:0 !important;
  width:100% !important;
  height:100% !important;
}
body.flyx-gallery-open{
  overflow:hidden !important;
}
.flyx-gallery-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:none !important;
}
.flyx-gallery-modal.show{
  display:block !important;
}
.flyx-gallery-modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,.82) !important;
}
.flyx-gallery-modal-panel{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(980px,94vw) !important;
  max-height:92vh !important;
  background:#111827 !important;
  color:#fff !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 20px 70px rgba(0,0,0,.45) !important;
}
.flyx-gallery-modal-head{
  height:54px !important;
  padding:0 14px 0 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:#0b1220 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.flyx-gallery-modal-head strong{
  display:block !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
}
.flyx-gallery-modal-head span{
  display:block !important;
  margin-top:3px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.72) !important;
}
.flyx-gallery-modal-head button{
  width:38px !important;
  height:38px !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  font-size:28px !important;
  line-height:34px !important;
  cursor:pointer !important;
}
.flyx-gallery-modal-image-wrap{
  position:relative !important;
  height:min(62vh,620px) !important;
  background:#05070b !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.flyx-gallery-modal-image-wrap img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}
.flyx-gallery-nav{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:42px !important;
  height:42px !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:34px !important;
  line-height:38px !important;
  cursor:pointer !important;
  z-index:2 !important;
}
.flyx-gallery-prev{ left:12px !important; }
.flyx-gallery-next{ right:12px !important; }
.flyx-gallery-modal-thumbs{
  display:flex !important;
  gap:8px !important;
  overflow-x:auto !important;
  padding:12px !important;
  background:#0b1220 !important;
  -webkit-overflow-scrolling:touch !important;
}
.flyx-modal-thumb{
  flex:0 0 88px !important;
  width:88px !important;
  height:66px !important;
  border:2px solid transparent !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:#1f2937 !important;
  padding:0 !important;
  cursor:pointer !important;
  opacity:.68 !important;
}
.flyx-modal-thumb.active{
  border-color:#ff5a1f !important;
  opacity:1 !important;
}
.flyx-modal-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
@media(max-width:768px){
  .flyx-gallery-modal-panel{
    width:100vw !important;
    height:100vh !important;
    max-height:100vh !important;
    border-radius:0 !important;
  }
  .flyx-gallery-modal-head{
    height:58px !important;
    padding-top:max(0px, env(safe-area-inset-top)) !important;
  }
  .flyx-gallery-modal-image-wrap{
    height:calc(100vh - 150px) !important;
  }
  .flyx-gallery-nav{
    width:38px !important;
    height:38px !important;
    font-size:30px !important;
  }
  .flyx-modal-thumb{
    flex-basis:76px !important;
    width:76px !important;
    height:58px !important;
  }
}