/* =========================================================
Santa-Latina.com – GLOBAL FINAL styles.css
IDENTISCH ZUR INDEX / STABIL / NICHTS SPRINGT
========================================================= */

/* ---------- Tokens ---------- */
:root{
--rose:#A23E48;
--flame:#FF3C38;
--tangerine:#FF8C42;
--sun:#FFF275;

--ink:#fff;
--muted:#ffe7cb;
--bg:#160f12;

--panel:#ffffff10;
--panel-b:#ffffff1f;

--grad:linear-gradient(90deg,var(--rose),var(--flame),var(--tangerine));
--btn:linear-gradient(90deg,var(--flame),var(--tangerine));
--btnH:linear-gradient(90deg,var(--sun),#ffe8a0);

--radius:14px;
--shadow:0 12px 28px rgba(0,0,0,.45);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--ink);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
min-height:100vh;
}

/* ---------- Links ---------- */
a{color:inherit;text-decoration:none}

/* ---------- BUTTONS (EXAKT WIE INDEX) ---------- */
.btn{
background:var(--btn);
border:none;
color:#2d120f;
padding:9px 16px;
border-radius:12px;
font-weight:700;
cursor:pointer;
box-shadow:var(--shadow);
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
transition:.2s;
}
.btn:hover{background:var(--btnH)}
.btn.small{padding:7px 12px;font-size:.9rem}

/* ---------- HEADER ---------- */
.hero{
background:var(--grad);
padding:26px 20px 22px;
text-align:center;
position:relative;
box-shadow:0 8px 24px rgba(0,0,0,.35);
}
/* Titel – EINHEITLICH */
.hero h1,
.brand{
font-size: 2.2rem;
font-weight: 800; /* WICHTIG: überall gleich */
margin: 0;
line-height: 1.15; /* verhindert Höhen-Schwankung */
letter-spacing: .02em;
}
.motto{
display:block;
margin:6px 0 8px;
color:var(--sun);
font-weight:700;
}

/* ---------- LANGUAGE PILLS ---------- */
.lang{
display:flex;
justify-content:center;
gap:6px;
margin-bottom:8px;
}
.lang button{
border:1px solid #ffffff66;
background:none;
color:#fff;
border-radius:999px;
padding:6px 0;
width:46px;
font-weight:700;
cursor:pointer;
text-align:center;
}
.lang button.active{
background:var(--sun);
color:#2b1c00;
border-color:transparent;
}

/* ---------- MENU ---------- */
.menu-wrap{
position:absolute;
right:20px;
top:24px;
z-index:100;
}
.menu-toggle{
background:var(--btn);
border-radius:12px;
width:42px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:var(--shadow);
cursor:pointer;
color:#2d120f;
}
.menu-toggle span{
display:block;
width:18px;
height:2px;
background:currentColor;
position:relative;
}
.menu-toggle span::before,
.menu-toggle span::after{
content:"";
position:absolute;
left:0;
width:18px;
height:2px;
background:currentColor;
}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}

.menu-panel{
position:absolute;
right:0;
top:48px;
background:#1f1214;
border:1px solid #ffffff2c;
border-radius:14px;
padding:10px;
box-shadow:var(--shadow);
display:none;
min-width:200px;
}
.menu-wrap.open .menu-panel{display:block}
.menu-panel .btn{
width:100%;
margin:4px 0;
}

/* ---------- LAYOUT ---------- */
.wrap{
max-width:1200px;
margin:0 auto;
padding:20px;
}

/* ---------- CONTENT BOX ---------- */
.box{
background:var(--panel);
border:1px solid var(--panel-b);
border-radius:14px;
padding:18px;
box-shadow:var(--shadow);
}

/* ---------- FOOTER ---------- */
.foot{
margin-top:40px;
padding:28px 20px;
border-top:1px solid var(--panel-b);
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}
.foot .btn{
min-width:240px;
}

/* =========================================================
SEITEN-INHALT (AUS DEM „FALSCHEN“ CSS – NUR ERGÄNZT)
========================================================= */

/* ---------- Page Logic ---------- */
.page{display:none}
.page.active{display:block}

/* ---------- Filters ---------- */
.filters{
background: var(--panel);
border: 1px solid var(--panel-b);
border-radius: 14px;
padding: 14px;
display: grid;
gap: 12px;

/* 🔴 ALLE FILTER IN EINER ZEILE */
grid-template-columns:
1.3fr /* Suche */
1fr /* Land */
1fr /* Region */
1fr /* Typ (Girls/Gay/Trans) */
1fr; /* Kategorie */
}
.filters label{
display:flex;
flex-direction:column;
gap:6px;
}
input,select{
background:#00000042;
border:1px solid #ffffff33;
color:#fff;
padding:10px 12px;
border-radius:10px;
outline:none;
}
input:focus,select:focus{
border-color:var(--tangerine);
box-shadow:0 0 0 3px rgba(255,140,66,.25);
}
select option{color:#000}

/* ---------- Day Ads ---------- */
#dayAdsWrap{
grid-column:1/-1;
display:flex;
justify-content:center;
margin-top:10px;
}

/* ---------- Origin Flags ---------- */
#flagRow{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
margin:12px 0;
}
.flags .flag{
background:#ffffff12;
border:1px solid #ffffff2c;
border-radius:999px;
padding:6px 12px;
cursor:pointer;
color:#fff;
font-weight:700;
display:flex;
align-items:center;
gap:8px;
}
.flags .flag[aria-pressed="true"]{
background:linear-gradient(90deg,var(--flame),var(--tangerine));
border-color:transparent;
}

/* ---------- Cards ---------- */
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.card {
position: relative;
border-radius: 18px;
overflow: hidden;
}

.card-media {
position: relative;
}

.card-media img {
width: 100%;
display: block;
aspect-ratio: 4 / 5;
object-fit: cover;
}

.card-top,
.card-bottom {
position: absolute;
left: 12px;
right: 12px;
padding: 10px 12px;
border-radius: 14px;
}

.card-top {
top: 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}

.card-bottom {
bottom: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}

.glass {
background: linear-gradient(
135deg,
rgba(18,10,12,.82),
rgba(18,10,12,.75)
);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.25);
}

.card-bottom h3 {
margin: 0;
}

.card-bottom .btn {
align-self: flex-start;
margin-top: 6px;
}


/* ---------- Profile ---------- */
#profile{
max-width:920px;
margin:0 auto;
}
#profile .box{
background:var(--panel);
border:1px solid var(--panel-b);
border-radius:14px;
padding:14px;
margin:12px 0 18px;
}
/* Bio im Profil: volle Länge erlauben */
#profile #profBio{
display:block;
white-space:normal;
overflow:visible;
max-height:none;
height:auto;
}

/* ---------- Pager ---------- */
.pager{
display:flex;
justify-content:center;
gap:12px;
margin:20px 0;
}

/* ---------- AGE GATE ---------- */
#ageGate{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.85);
}
#ageGate[hidden]{display:none}
.agegate-card{
background:#1f1214;
border-radius:18px;
padding:28px 24px;
max-width:420px;
width:calc(100% - 40px);
box-shadow:0 20px 50px rgba(0,0,0,.6);
text-align:center;
}

/* ---------- Responsive ---------- */
@media(max-width:700px){
.menu-wrap{right:12px}
.hero h1{font-size:1.8rem}
}

/* =========================
MOBILE FIX – FILTER & PROFILE
========================= */
@media (max-width: 700px) {

/* FILTER: alles untereinander */
.filters{
grid-template-columns: 1fr !important;
}

#dayAdsWrap{
grid-column: auto;
justify-content: flex-start;
}

/* Herkunfts-Flags sauber umbrechen */
#flagRow{
justify-content: flex-start;
}

/* Cards: eine Spalte */
.grid{
grid-template-columns: 1fr;
}

/* Profil-Karte: Bild immer sichtbar */
.card{
max-width: 100%;
}

.card-media img{
aspect-ratio: 4 / 5;
object-fit: cover;
}

/* Glasbox unten etwas kompakter */
.card-bottom{
padding: 10px;
}
}


/* =========================
HEADER STABILISIERUNG – KEIN SPRINGEN
========================= */

.hero{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 170px; /* 🔒 feste Headerhöhe */
}

/* Titel */
.hero h1{
margin: 0;
line-height: 1.1;
}

/* Motto – fester Abstand */
.motto{
margin-top: 8px;
margin-bottom: 10px;
min-height: 1.4em; /* 🔒 verhindert Höhenänderung */
}

/* Sprachpills – fester Abstand */
.lang{
margin-top: 0;
margin-bottom: 0;
height: 36px; /* 🔒 gleiche Höhe auf ALLEN Seiten */
align-items: center;
}