/* ============================================================
   FRONT PAGE — EDGE TO EDGE WHITE PREMIUM
============================================================ */

/* -------- HARD RESET FOR THEME CONTAINERS -------- */

main,
.home-main,
.site-main,
.page-wrap,
.container,
.wrap{
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

/* Prevent horizontal scroll */
html,body{
  overflow-x:hidden;
  background:#ffffff;
}

/* ============================================================
   MAIN GRID — LEFT CONTENT + RIGHT SIDEBAR
============================================================ */

.home-grid{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:0;
}

/* LEFT COLUMN */
.home-left{
  width:100%;
  padding:10px 14px 20px;
}

/* RIGHT SIDEBAR */
.home-right{
  width:100%;
}

/* ============================================================
   COUNTRY CITY STRIP — COMPACT PREMIUM UI
============================================================ */

.cc-strip{
  background:#ffffff;
  padding:8px 0 10px;
  border-bottom:1px solid #e5e7eb;
}

/* ================= TOP ROW ================= */

.cc-strip .cc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

/* Search input look */
.cc-strip .cc-country-wrap{
  flex:1;
  position:relative;
}

.cc-strip .cc-country-select{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:2px solid #7c3aed !important;
  border-radius:12px !important;
  background:#ffffff !important;
  font-size:.82rem !important;
  font-weight:600 !important;
  color:#475569 !important;
  cursor:pointer;
}

.cc-strip .cc-country-select .cc-arrow{
  margin-left:auto;
  font-size:.7rem;
}

/* Dropdown */
.cc-strip .cc-country-dropdown{
  position:absolute;
  top:108%;
  left:0;
  width:200px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(2,6,23,.12);
  padding:4px;
  display:none;
  z-index:999;
}

.cc-strip .cc-country-dropdown.open{ display:block; }

.cc-strip .cc-country-dropdown button{
  width:100%;
  padding:6px 10px;
  border:none;
  background:none;
  text-align:left;
  border-radius:6px;
  font-size:.78rem;
  cursor:pointer;
}

.cc-strip .cc-country-dropdown button:hover{
  background:#f1f5f9;
}

/* ================= ACTION BUTTONS ================= */

.cc-strip .cc-actions{
  display:flex;
  gap:6px;
}

.cc-strip .cc-actions .cc-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-size:.7rem !important;
  font-weight:700 !important;
  border:none !important;
  white-space:nowrap;
}

.cc-strip .cc-search{ background:#7c3aed !important; color:#fff !important; }
.cc-strip .cc-available{ background:#f97316 !important; color:#fff !important; }
.cc-strip .cc-verified{ background:#2563eb !important; color:#fff !important; }
.cc-strip .cc-filters{ background:#9333ea !important; color:#fff !important; }

/* ================= CITY PILLS ================= */

/* ================= CITY CONTAINER — FULL WIDTH RECTANGULAR ================= */

.cc-strip .cc-cities{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px 10px;

  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:6px;
  padding:10px 12px;
}


/* ================= CITY BUTTON — RECTANGLE WITH RIGHT COUNT ================= */

.cc-strip .cc-city{
  display:none;
  width:100%;
  align-items:center;
  justify-content:space-between; /* push count to right */
  gap:8px;

  padding:7px 10px !important;
  border-radius:4px !important;
  border:1.5px solid #7c3aed !important;
  background:#ffffff !important;

  font-size:.72rem !important;
  font-weight:600 !important;
  color:#020617 !important;
  cursor:pointer;
  line-height:1.15 !important;
  white-space:nowrap;
}

.cc-strip .cc-city.is-visible{
  display:flex;
}

.cc-strip .cc-city:hover{
  background:#ede9fe !important;
}


/* ================= CITY COUNT — RIGHT SIDE ================= */

.cc-strip .cc-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:16px;
  height:16px;
  padding:0 5px;
  border-radius:3px;

  background:#facc15 !important;
  color:#000 !important;
  font-size:.55rem !important;
  font-weight:800 !important;
  line-height:1;
  flex-shrink:0; /* never collapse */
}


.cc-strip button{
  background:unset;
  border:none;
  box-shadow:none;
}


/* ================= MOBILE ================= */

@media (max-width:900px){

  .cc-strip .cc-top{
    flex-direction:column;
    align-items:stretch;
  }

  .cc-strip .cc-actions{
    justify-content:space-between;
    flex-wrap:wrap;
  }

}

/* ============================================================
   BANNERS
============================================================ */

.banner-wrap{
  margin-top:12px;
}

.banner-main{
  background:#ffffff;
}

.section-heading{
  font-size:1rem;
  font-weight:800;
  color:#1A3552;
  margin-bottom:8px;
}

.banner-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.banner-grid a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 16px rgba(2,6,23,.08);
}

.banner-grid img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* ============================================================
   LISTING BLOCKS
============================================================ */

.listing-block{
  margin-top:18px;
}

.block-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
  font-weight:800;
  color:#1A3552;
  text-transform:uppercase;
}

/* ICON BADGES */
.fp-icon{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:linear-gradient(135deg,#fde68a,#f59e0b);
  font-size:14px;
}

.elite-diamond .fp-icon{
  background:linear-gradient(135deg,#c7d2fe,#60a5fa);
}

/* ============================================================
   CARD GRID
============================================================ */

.card-row{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}

/* RESPONSIVE */
@media (max-width:1600px){
  .card-row{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:1280px){
  .card-row{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:1024px){
  .card-row{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .card-row{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   ESCORT CARD BASE
============================================================ */

.escort-card{
  background:#ffffff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 28px rgba(2,6,23,.10);
}

.escort-card img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
}

/* BADGES */
.escort-badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#facc15;
  color:#000;
  z-index:5;
}

.escort-badge-couple{
  background:linear-gradient(135deg,#ff5fa2,#ff2f92);
  color:#fff;
}

.escort-badge-trans{
  background:linear-gradient(135deg,#4f46e5,#22d3ee);
  color:#fff;
}

/* ============================================================
   RIGHT SIDEBAR — EDGE TO EDGE
============================================================ */

.main-right{
  background:#f5f3ff;
  border-left:1px solid #e5e7eb;
  padding:14px 12px;
  height:100%;
}

@media (min-width:992px){
  .main-right{
    position:sticky;
    top:84px;
    align-self:start;
  }
}

.main-right .mini-section{
  background:#ffffff;
  border-radius:14px;
  padding:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 26px rgba(2,6,23,0.08);
}

.main-right .mini-title{
  text-align:center;
  font-size:.85rem;
  font-weight:800;
  color:#1A3552;
  margin-bottom:10px;
}

.main-right .mini-two-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.main-right .mini-profile{
  background:#ffffff;
  border-radius:12px;
  border:1px solid #e5e7eb;
  padding:6px;
  box-shadow:0 6px 18px rgba(2,6,23,0.10);
}

/* ============================================================
   MOBILE STACK
============================================================ */

@media (max-width:900px){

  .home-grid{
    grid-template-columns:1fr;
  }

  .main-right{
    position:static;
    border-left:none;
    border-top:1px solid #e5e7eb;
  }
}

/* ============================================================
   GRID SAFETY — FORCE ALL CARD TYPES INTO GRID FLOW
============================================================ */

.card-row > *{
  position:relative !important;
  float:none !important;
  width:100%;
  min-width:0;
  max-width:100%;
}

/* Prevent absolute children from escaping card */

.escort-card,
.escort-card *{
  box-sizing:border-box;
}

.escort-card{
  position:relative; /* anchor for badges & overlays */
}

/* Normalize all profile card wrappers */

.trans-card,
.couple-card,
.profile-card{
  background:#ffffff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 28px rgba(2,6,23,.10);
  position:relative;
}

/* Kill accidental absolute positioning on card containers */

.trans-card,
.couple-card,
.profile-card,
.escort-card{
  position:relative !important;
}
/* ============================================================
   FRONT PAGE — HEADING COLOR (WINE RED THEME)
============================================================ */

/* Section titles like: Top Featured, New Escorts, etc */
.section-heading,
.block-title,
.main-right .mini-title,
.city-hero h1,
.country-hero h1{
  color:#5C0303 !important;
  font-weight:700;
}

/* Card names */
.meta-row .name,
.mini-name{
  color:#5C0303 !important;
  font-weight:700;
}

/* Navigation text (optional, premium look) */
.nav-menu a,
.drawer-list a{
  color:#5C0303 !important;
}

.cc-country-search{
  width:100%;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:6px;
  margin-bottom:8px;
  font-size:14px;
}

.cc-country-list{
  max-height:220px;
  overflow-y:auto;
}

.cc-country-list button{
  width:100%;
  text-align:left;
}

/* ============================================================
   FRONT PAGE — MOBILE EDGE TO EDGE (FINAL PATCH)
============================================================ */

@media (max-width:900px){

  /* Kill all horizontal padding on mobile */
  .home-left,
  .home-right,
  .banner-wrap,
  .listing-block{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  

  /* Banner section full width */
  .banner-main,
  .banner-wrap{
    padding-left:12px;
    padding-right:12px;
  }

  /* Listing titles edge aligned */
  .block-title,
  .section-heading{
    padding-left:12px;
    padding-right:12px;
  }

  /* Card grid full bleed */
  .card-row{
    padding-left:12px;
    padding-right:12px;
    gap:12px;
  }

  /* Sidebar stacks clean */
  .main-right{
    padding-left:12px;
    padding-right:12px;
  }
}

 /* ============================================================
   COUNTRY CITY STRIP — COMPACT PREMIUM UI
============================================================ */

.cc-strip{
  background:#ffffff;
  padding:8px 0 10px;
  border-bottom:1px solid #e5e7eb;
}

/* ================= TOP ROW ================= */

.cc-strip .cc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

/* Search input look */
.cc-strip .cc-country-wrap{
  flex:1;
  position:relative;
}

.cc-strip .cc-country-select{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:2px solid #7c3aed !important;
  border-radius:12px !important;
  background:#ffffff !important;
  font-size:.82rem !important;
  font-weight:600 !important;
  color:#475569 !important;
  cursor:pointer;
}

.cc-strip .cc-country-select .cc-arrow{
  margin-left:auto;
  font-size:.7rem;
}

/* Dropdown */
.cc-strip .cc-country-dropdown{
  position:absolute;
  top:108%;
  left:0;
  width:200px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(2,6,23,.12);
  padding:4px;
  display:none;
  z-index:999;
}

.cc-strip .cc-country-dropdown.open{ display:block; }

.cc-strip .cc-country-dropdown button{
  width:100%;
  padding:6px 10px;
  border:none;
  background:none;
  text-align:left;
  border-radius:6px;
  font-size:.78rem;
  cursor:pointer;
}

.cc-strip .cc-country-dropdown button:hover{
  background:#f1f5f9;
}

/* ================= ACTION BUTTONS ================= */

.cc-strip .cc-actions{
  display:flex;
  gap:6px;
}

.cc-strip .cc-actions .cc-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-size:.7rem !important;
  font-weight:700 !important;
  border:none !important;
  white-space:nowrap;
}

.cc-strip .cc-search{ background:#7c3aed !important; color:#fff !important; }
.cc-strip .cc-available{ background:#f97316 !important; color:#fff !important; }
.cc-strip .cc-verified{ background:#2563eb !important; color:#fff !important; }
.cc-strip .cc-filters{ background:#9333ea !important; color:#fff !important; }

/* ================= CITY CONTAINER ================= */

.cc-strip .cc-cities{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px 10px;

  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:6px;
  padding:10px 12px;
}

/* ================= CITY BUTTON ================= */

.cc-strip .cc-city{
  display:none;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  padding:7px 10px !important;
  border-radius:4px !important;
  border:1.5px solid #7c3aed !important;
  background:#ffffff !important;

  font-size:.72rem !important;
  font-weight:600 !important;
  color:#020617 !important;
  cursor:pointer;
  line-height:1.15 !important;
  white-space:nowrap;
}

.cc-strip .cc-city.is-visible{
  display:flex;
}

.cc-strip .cc-city:hover{
  background:#ede9fe !important;
}

/* ================= CITY COUNT ================= */

.cc-strip .cc-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 5px;
  border-radius:3px;
  background:#facc15 !important;
  color:#000 !important;
  font-size:.55rem !important;
  font-weight:800 !important;
  line-height:1;
  flex-shrink:0;
}

.cc-strip button{
  background:unset;
  border:none;
  box-shadow:none;
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width:900px){

  .cc-strip .cc-top{
    flex-direction:column;
    align-items:stretch;
  }

  .cc-strip .cc-actions{
    justify-content:space-between;
    flex-wrap:wrap;
  }

  /* MOBILE CITY VISIBILITY FIX */
  .cc-strip .cc-city{
    display:none;
  }

  .cc-strip .cc-city.is-visible{
    display:flex;
  }
}
/* ============================================================
   FRONT PAGE — MOBILE PREMIUM COUNTRY / CITY STRIP
============================================================ */

@media (max-width:900px){

  /* ================= STRIP SHELL ================= */

  .cc-strip{
    padding:12px 12px 14px;
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
  }

  /* ================= TOP STACK ================= */

  .cc-strip .cc-top{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:12px;
  }

  /* ================= COUNTRY SELECT (PRIMARY) ================= */

  .cc-strip .cc-country-wrap{
    width:100%;
  }

  .cc-strip .cc-country-select{
    width:100%;
    padding:12px 14px;
    border-radius:14px !important;
    border:2px solid var(--brand) !important;
    font-size:.9rem !important;
    font-weight:700 !important;
    background:#ffffff !important;
    box-shadow:0 6px 16px rgba(2,6,23,.10);
  }

  .cc-strip .cc-country-select .cc-icon{
    font-size:1rem;
  }

  .cc-strip .cc-country-select .cc-arrow{
    font-size:.75rem;
    opacity:.7;
  }

  /* ================= ACTION PILLS (SECONDARY) ================= */

  .cc-strip .cc-actions{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .cc-strip .cc-actions::-webkit-scrollbar{
    display:none;
  }

  .cc-strip .cc-actions .cc-pill{
    padding:8px 14px !important;
    font-size:.7rem !important;
    font-weight:700 !important;
    border-radius:999px !important;
    white-space:nowrap;
    box-shadow:0 4px 10px rgba(2,6,23,.10);
  }

  /* Tone down colors for premium feel */
  .cc-strip .cc-search{ background:#4f46e5 !important; }
  .cc-strip .cc-available{ background:#f59e0b !important; }
  .cc-strip .cc-verified{ background:#2563eb !important; }
  .cc-strip .cc-filters{ background:#6d28d9 !important; }

  /* ================= CITY GRID (SOFT CARDS) ================= */

  .cc-strip .cc-cities{
    margin-top:10px;
    padding:12px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  /* ================= CITY BUTTON ================= */

  .cc-strip .cc-city{
    display:none;
    padding:10px 12px !important;
    border-radius:10px !important;
    border:1px solid #e5e7eb !important;
    background:#ffffff !important;
    font-size:.75rem !important;
    font-weight:600 !important;
    box-shadow:0 6px 14px rgba(2,6,23,.08);
  }

  .cc-strip .cc-city.is-visible{
    display:flex;
  }

  .cc-strip .cc-city:hover{
    background:#ede9fe !important;
  }

  /* ================= COUNT BADGE ================= */

  .cc-strip .cc-count{
    min-width:18px;
    height:18px;
    font-size:.6rem !important;
    border-radius:6px;
    background:#fde047 !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  }

}

/* ============================================================
   MOBILE BANNER COLLAPSE (PREMIUM TOGGLE)
============================================================ */

@media (max-width:900px){

  /* Mobile Heading */
  .banner-mobile-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    font-size:.9rem;
    font-weight:800;
    color:#5C0303;
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
    cursor:pointer;
  }

  .banner-mobile-toggle .banner-arrow{
    font-size:.75rem;
    transition:.25s ease;
  }

  /* Collapse by default */
  #bannerMobileContent{
    display:none;
  }

  /* Open state */
  .banner-open #bannerMobileContent{
    display:block;
  }

  .banner-open .banner-arrow{
    transform:rotate(180deg);
  }

  /* Adjust mobile grid spacing */
  .banner-grid{
    padding:12px;
    gap:10px;
    grid-template-columns:repeat(2,1fr);
  }

}

/* Hide heading on desktop */
@media (min-width:901px){
  .banner-mobile-toggle{
    display:none;
  }
}

/* ============================================================
   MOBILE BANNER COLLAPSE — SLIDE ANIMATION
============================================================ */

@media (max-width:900px){

  /* Mobile heading */
  .banner-mobile-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    font-size:.9rem;
    font-weight:800;
    color:#5C0303;
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
    cursor:pointer;
  }

  .banner-mobile-toggle .banner-arrow{
    font-size:.75rem;
    transition:transform .25s ease;
  }

  /* Collapsible container */
  #bannerMobileContent{
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:
      max-height .45s ease,
      opacity .25s ease;
  }

  /* Open state */
  .banner-open #bannerMobileContent{
    max-height:800px; /* safe upper bound */
    opacity:1;
  }

  .banner-open .banner-arrow{
    transform:rotate(180deg);
  }

  /* Mobile grid tuning */
  .banner-grid{
    padding:12px;
    gap:10px;
    grid-template-columns:repeat(2,1fr);
  }
}

/* Hide heading on desktop */
@media (min-width:901px){
  .banner-mobile-toggle{ display:none; }
}