/* ============================================================
   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;
}
/* ============================================================
   ESCORT CARD NEW — STYLE COMPLET
============================================================ */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 10px 0;
}

.escort-card-new {
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #7c3aed;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: transform .2s, box-shadow .2s;
  position: relative;
}

.escort-card-new:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}

.escort-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.escort-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #1a1a2e;
}

.escort-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.escort-card-new:hover .escort-card-img-wrap img {
  transform: scale(1.05);
}

/* Watermark */
.escort-card-img-wrap::after {
  content: 'allo-escort.com';
  position: absolute;
  bottom: 8px;
  right: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 3;
}

/* BADGES */
.escort-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  z-index: 5;
  text-transform: uppercase;
}

.badge-diamond { background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #000; }
.badge-gold    { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #000; }
.badge-silver  { background: linear-gradient(135deg,#9ca3af,#d1d5db); color: #000; }
.badge-verified{ background: linear-gradient(135deg,#10b981,#34d399); color: #000; }
.badge-type    { background: linear-gradient(135deg,#7c3aed,#a78bfa); color: #fff; }

/* CARD INFO */
.escort-card-info {
  padding: 10px 12px;
  background: #111;
}

.escort-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.escort-card-age {
  color: #c9a24d;
  font-weight: 400;
}

.escort-card-location {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.escort-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.escort-card-rating {
  font-size: 11px;
  color: #f59e0b;
}

.escort-card-price {
  font-size: 12px;
  font-weight: 700;
  color: #c9a24d;
  background: rgba(201,162,77,.12);
  padding: 2px 8px;
  border-radius: 999px;
}

/* BLOCK TITLES */
.listing-block { margin-bottom: 32px; }
.block-head { margin-bottom: 12px; }
.block-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  border-left: 4px solid #c9a24d;
  padding-left: 12px;
}

/* Section Diamond highlight */
.listing-block.elite-diamond .block-title { color: #f59e0b; }

/* RESPONSIVE */
@media (max-width: 600px) {
  .card-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 380px) {
  .card-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
