/* =========================================
   profile.css — Model page ONLY (scoped)
   Palette matches index (Velvet Amber)
   ========================================= */

/* ---- Theme tokens (scoped) ---- */
body.profile-page{
  --bg:#0e0f14; --paper:#171923; --ink:#eef1f6; --muted:#adb4c2; --line:#242734;
  --gold:#e0b068; --gold-2:#c99a58; --shadow:0 12px 34px rgba(0,0,0,.35);
  --wrap:1240px; --radius:14px; --headerH:64px;
  color:var(--ink); background:var(--bg);
}
body.profile-page .fx-wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* =========================================
   Header / Nav (match index)
   ========================================= */
body.profile-page .fx-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(18,19,28,.92), rgba(18,19,28,.84));
  backdrop-filter:blur(8px); border-bottom:1px solid #1c1f2b; box-shadow:var(--shadow);
}
body.profile-page .fx-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
body.profile-page .fx-logo img{height:38px;width:auto}
body.profile-page .fx-nav{display:flex;gap:18px;align-items:center}
body.profile-page .fx-nav a{padding:10px 8px;border-radius:10px;color:var(--ink);font-weight:700}
body.profile-page .fx-nav a:hover{background:#121521}
body.profile-page .fx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;font-weight:800;letter-spacing:.2px;border-radius:999px;border:2px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
body.profile-page .fx-btn--primary{background:var(--gold);border-color:var(--gold);color:#121212}
body.profile-page .fx-btn--primary:hover{background:#f0c781;border-color:#f0c781;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
body.profile-page .fx-menu{display:none;border:1px solid var(--line);background:#0d1117;color:var(--ink);border-radius:10px;padding:8px 10px}
@media (max-width:960px){ body.profile-page .fx-nav{display:none} body.profile-page .fx-menu{display:inline-block} }

/* Mobile menu laid out in a tidy grid */
body.profile-page .fx-mnav{
  position:fixed; inset:0; z-index:60; display:grid; align-content:start;
  background:rgba(10,12,18,.92); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .2s, transform .2s;
  padding:10px 12px;
}
body.profile-page .fx-mnav.open{opacity:1; pointer-events:auto; transform:none}
body.profile-page .fx-mnav a{margin:0; border-top:0; background:transparent; padding:0; color:var(--ink)}
body.profile-page .fx-mnav > .nav-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
@media (max-width:680px){ body.profile-page .fx-mnav > .nav-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
body.profile-page .fx-mnav > .nav-grid a{
  display:block; text-align:center; font-weight:800; padding:10px 12px; border-radius:12px;
  background:#0f1219; border:1px solid var(--line);
}
body.profile-page .fx-mnav > .nav-grid a:hover{ background:#121521; border-color:#1f2330 }

/* =========================================
   Cinematic hero (compact + face-safe)
   ========================================= */
body.profile-page .profile-cinema{
  position:relative; isolation:isolate;
  min-height: clamp(320px, 58vh, 480px);
  padding-block: clamp(16px, 3.5vw, 28px);
  display:grid; place-items:center;
  background: var(--banner, none) center/cover no-repeat fixed;
}
@media (max-width:1024px){ body.profile-page .profile-cinema{ background-attachment:scroll } }
body.profile-page .profile-cinema::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(80% 60% at 15% 20%, rgba(0,0,0,.28), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.62) 65%, rgba(0,0,0,.75));
}
body.profile-page .profile-cinema::after{
  content:""; position:absolute; inset:-10% -5% -15% -5%; z-index:0;
  background:radial-gradient(60% 40% at 85% 20%, rgba(224,176,104,.14), transparent 60%);
  filter:blur(20px);
}
body.profile-page .cinema-grid{ position:relative; z-index:1; display:grid; gap:clamp(12px,2vw,22px); grid-template-columns:1.05fr .95fr; align-items:center }
@media (max-width:980px){ body.profile-page .cinema-grid{ grid-template-columns:1fr } }
body.profile-page .cinema-copy{ color:#fff; display:grid; gap:12px; align-content:center }
body.profile-page .cinema-title{
  font-size: clamp(26px, 3.8vw, 44px); line-height:1.08; margin:0 0 4px;
  background:linear-gradient(90deg,#fff,#ffe6bc 55%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 6px 40px rgba(0,0,0,.5);
}
body.profile-page .cinema-sub{ color:#e9e9ef; opacity:.95 }

/* Hero portrait */
body.profile-page .cinema-portrait{
  justify-self:end; align-self:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:6px 8px;
  box-shadow:0 28px 60px rgba(0,0,0,.45);
}
body.profile-page .cinema-portrait img{
  display:block; width:min(370px, 38vw); height:auto;
  max-height: var(--portraitH, clamp(320px, 50vh, 420px));
  object-fit:cover; object-position:var(--focal, center 32%);
  border-radius:14px;
}

/* Mobile hero stack + safe space under sticky header */
@media (max-width:980px){
  body.profile-page .profile-cinema{
    padding-top: calc(var(--headerH) + 8px);
    padding-bottom: 14px;
    min-height:auto; background-attachment:scroll; overflow:hidden;
  }
  body.profile-page .profile-cinema::before,
  body.profile-page .profile-cinema::after{ inset:0 }
  body.profile-page .cinema-grid{ grid-template-columns:1fr; gap:12px; margin:0 auto }
  body.profile-page .cinema-portrait{ justify-self:center; padding:8px 10px; max-width:92vw }
  body.profile-page .cinema-portrait img{
    width:100%; height:auto;
    max-height: var(--portraitHMobile, clamp(240px, 42vh, 380px));
  }
  body.profile-page .cinema-copy{ text-align:center }
}

/* =========================================
   Breadcrumb
   ========================================= */
body.profile-page .crumb{
  display:flex; gap:8px; align-items:center; font-weight:700; color:#cfd6e4; opacity:.9;
  padding:12px 0; font-size:.92rem;
}
body.profile-page .crumb a{ color:var(--ink) }
body.profile-page .crumb span{ opacity:.7 }

/* =========================================
   Profile grid
   ========================================= */
body.profile-page .p-grid{
  display:grid; gap:18px; padding:14px 0 26px;
  grid-template-columns:340px 1fr;
}
@media (max-width:980px){ body.profile-page .p-grid{ grid-template-columns:1fr } }

body.profile-page .p-side{ display:grid; gap:14px; align-content:start }
body.profile-page .p-card{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:var(--shadow) }
body.profile-page .p-title{ margin:0 0 10px; font-size:1.02rem; color:var(--gold); font-weight:900 }

/* Sidebar buttons */
body.profile-page .p-card.p-card--no-pad { padding: 0; }
body.profile-page .btn-rose{
  display:block; width:100%; text-align:center;
  background:#d97a95; color:#fff; border-radius:8px;
  padding:14px 16px; font-weight:900; letter-spacing:.3px;
  border:2px solid #d97a95; margin-bottom:12px; transition:.15s ease;
}
body.profile-page .btn-rose:hover{ filter:brightness(1.05); transform:translateY(-1px); }
body.profile-page .btn-rose--ghost{
  background:#e6a2b4; border-color:#e6a2b4; color:#fff;
}

body.profile-page .p-note small{ color:#cfd3df; line-height:1.5 }

/* =========================================
   Currency tabs (two styles supported)
   ========================================= */
/* Used in template.php */
body.profile-page .p-title--price{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
body.profile-page .p-currency-tabs{ display:flex; gap:8px; }
body.profile-page .p-currency-tabs .cur{
  background:transparent; color:var(--ink); border:0; padding:6px 6px; font-weight:800; opacity:.7; cursor:pointer;
}
body.profile-page .p-currency-tabs .cur.is-active{ opacity:1; text-decoration:underline; }

/* Also style .price-tabs .tab (used in static HTML variant) */
body.profile-page .price-tabs{ display:flex; gap:8px; margin:8px 0 10px }
body.profile-page .price-tabs .tab{ background:#0f0f10; color:#eaeaea; border:1px solid #2a2a2a; border-radius:999px; padding:6px 12px; font-weight:800; font-size:.85rem; cursor:pointer }
body.profile-page .price-tabs .tab.is-active{ background:var(--gold); color:#000; border-color:var(--gold) }

/* =========================================
   Packages card (sidebar)
   ========================================= */
body.profile-page .p-price-card{ padding:14px; }

body.profile-page .pkg-list{ display:grid; gap:10px; }
body.profile-page .pkg{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:10px; padding:12px;
}
body.profile-page .pkg--accent{
  background:#e9a5b7;
  color:#1b1b1b;
  border-color:#e9a5b7;
}

body.profile-page .pkg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
body.profile-page .pkg-title strong{ font-size:1.02rem; }
body.profile-page .pkg-sub{ display:block; opacity:.9; }
body.profile-page .pkg-price{ text-align:right; min-width:88px; }
body.profile-page .pkg-price .money{ display:block; font-size:1.15rem; font-weight:900; }
body.profile-page .pkg-price .cur-lbl{ display:block; font-size:.85rem; opacity:.85; margin-top:2px; }

body.profile-page .pkg-features{
  list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px;
}
body.profile-page .pkg-features li{ font-size:.95rem; color:inherit; opacity:.95; }

/* Note under list */
body.profile-page .pkg-note{
  margin-top:10px; padding:10px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:var(--muted);
}

/* =========================================
   Right column
   ========================================= */
body.profile-page .p-main{ display:grid; gap:14px }

/* Right-side hero (shorter) */
body.profile-page .p-main-hero{ margin:0; overflow:hidden; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); padding:0 }
body.profile-page .p-main-hero img{
  width:100%; height:auto; max-height: clamp(220px, 34vh, 360px); object-fit: cover; border-radius:12px;
}
@media (max-width:768px){ body.profile-page .p-main-hero{ display:none } }

/* Specs */
body.profile-page .p-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px;
}
body.profile-page .spec-row{ display:grid; grid-template-columns:180px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06) }
body.profile-page .spec-row:last-child{ border-bottom:0 }
body.profile-page .spec-row span{ color:#cfd3df }
body.profile-page .spec-row b{ color:#fff; font-weight:800 }

/* =========================================
   Categories (chips) — 3-up grid
   ========================================= */
body.profile-page .p-tags{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px; margin:6px 0 10px; list-style:none; padding:0;
}
body.profile-page .p-tags li{
  text-align:center; width:100%;
  font-weight:800; font-size:.9rem; color:#000;
  background:linear-gradient(135deg, var(--gold), #f0d49c);
  padding:8px 12px; border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.25);
}
@media (max-width:680px){
  body.profile-page .p-tags{ gap:8px }
  body.profile-page .p-tags li{ font-size:.82rem; padding:6px 8px }
}
@media (max-width:380px){
  body.profile-page .p-tags li{ font-size:.78rem; padding:6px 8px }
}

/* =========================================
   Gallery — fill cells, favor faces
   ========================================= */
body.profile-page .p-gallery{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width:900px){ body.profile-page .p-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ body.profile-page .p-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)) } }

body.profile-page .p-gallery img{
  width:100%; aspect-ratio:1/1; height:auto;
  object-fit: cover;
  object-position: var(--face, center 32%);
  border-radius:10px; border:1px solid var(--line); box-shadow:var(--shadow);
}
@media (max-width:420px){ body.profile-page .p-gallery img{ object-position: var(--face, center 28%) } }

/* =========================================
   Mobile hardening / layout fixes
   ========================================= */
@media (max-width:980px){
  body.profile-page .p-main{ grid-auto-flow:row }
  body.profile-page .p-specs, body.profile-page .p-card, body.profile-page .p-main-hero{ width:100%; overflow:hidden }
  body.profile-page .spec-row{ grid-template-columns:minmax(92px,40%) 1fr }
  body.profile-page .spec-row span, body.profile-page .spec-row b{
    white-space:normal; word-break:break-word; overflow-wrap:anywhere; line-height:1.45;
  }
  body.profile-page .spec-row span{ font-size:.95rem }
}
@media (max-width:768px){
  body.profile-page .fx-bleed{ left:auto; right:auto; margin:0; width:100% }
  body.profile-page .fx-bleed > .fx-wrap{ max-width:100%; padding-inline:16px }
  body.profile-page{ overflow-x:hidden }
}

/* =========================================
   Footer
   ========================================= */
body.profile-page .fx-foot{background:#0c0e14;color:#cdd4e1;margin-top:24px;border-top:1px solid #10131b}
body.profile-page .fx-foot__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px 0}
@media (max-width:720px){ body.profile-page .fx-foot__grid{grid-template-columns:1fr} }
body.profile-page .fx-foot h5{margin:0 0 6px;color:#fff}
body.profile-page .fx-copy{ text-align:center;padding:10px 0;border-top:1px solid #1b2230;color:#a9b3c4;font-size:.9rem }

/* Typography inside cards */
.p-card .p-title{margin-bottom:.6rem}
.p-about{line-height:1.7;font-size:1rem}
.p-about p{margin:0 0 .9rem}
.p-about p:last-child{margin-bottom:0}
.p-about ul,.p-about ol{margin:.6rem 0 1rem 1.25rem}
.p-about li{margin:.3rem 0}
.p-about h4,.p-about h5{margin:1rem 0 .5rem;line-height:1.3}
.p-card{display:flex;flex-direction:column;gap:12px}


/* ==== LEFT SIDEBAR: HTML replica styles (wins over older rules) ==== */

/* Contact card buttons (pink) */
body.profile-page .p-contact.p-card { padding: 0; }
body.profile-page .p-contact .btn-amber { 
  background:#d97a95; border-color:#d97a95; color:#fff; 
  border-radius:8px; padding:14px 16px; font-weight:900; letter-spacing:.3px;
}
body.profile-page .p-contact .btn-amber:hover{ filter:brightness(1.05); transform:translateY(-1px) }
body.profile-page .p-contact .btn-ghost{
  background:#e6a2b4; border-color:#e6a2b4; color:#fff; border-radius:8px; margin-top:12px;
}

/* Packages card container */
body.profile-page #packages-card.p-card { padding:14px; }

/* Title */
body.profile-page #packages-card .p-title{ 
  margin:0 0 10px; font-size:1.02rem; color:var(--gold); font-weight:900;
}

/* Currency tabs (HTML version uses .price-tabs .tab) */
body.profile-page #packages-card .price-tabs{ display:flex; gap:8px; margin:8px 0 10px }
body.profile-page #packages-card .price-tabs .tab{
  background:#0f0f10; color:#eaeaea; border:1px solid #2a2a2a;
  border-radius:999px; padding:6px 12px; font-weight:800; font-size:.85rem; cursor:pointer;
}
body.profile-page #packages-card .price-tabs .tab.is-active{
  background:var(--gold); color:#000; border-color:var(--gold);
}

/* Package list + items (HTML uses <ul><li class="pkg">) */
body.profile-page #packages-card .pkg-list{ display:grid; gap:10px; list-style:none; padding:0; margin:0; }
body.profile-page #packages-card .pkg{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:10px; padding:0;
}

/* Accordion head (HTML uses <button class="pkg-head">) */
body.profile-page #packages-card .pkg-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:transparent; border:0; padding:12px; text-align:left; cursor:pointer;
  color:inherit; font:inherit;
}
body.profile-page #packages-card .pkg-head:hover{ background:rgba(255,255,255,.02); }

/* Title + price inside head */
body.profile-page #packages-card .pkg-title{ font-weight:900; font-size:1.02rem; }
body.profile-page #packages-card .pkg-price{
  text-align:right; min-width:92px; font-weight:900; white-space:nowrap;
}
body.profile-page #packages-card .pkg-price i.pkg-curr{
  font-style:normal; font-weight:800; opacity:.85; margin-left:2px; font-size:.9em;
}

/* Body (hidden by default) */
body.profile-page #packages-card .pkg-body{ padding:0 12px 12px; }
body.profile-page #packages-card .pkg-body[hidden]{ display:none !important; }

/* Bullet points inside body */
body.profile-page #packages-card .pkg-points{ 
  margin:8px 0 0; padding-left:18px; color:inherit;
}
body.profile-page #packages-card .pkg-points li{ margin:3px 0; }

/* Accent note row (travel fee) */
body.profile-page #packages-card .pkg.pkg-note{
  background:#e9a5b7; color:#1b1b1b; border-color:#e9a5b7; padding:10px 12px;
}
body.profile-page #packages-card .pkg.pkg-note .pkg-note-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:800;
}
body.profile-page #packages-card .pkg.pkg-note .pkg-price{ min-width:auto; }

/* Mobile tightening */
@media (max-width:980px){
  body.profile-page #packages-card.p-card{ padding:12px; }
  body.profile-page #packages-card .price-tabs .tab{ padding:6px 10px }
}

/* === Sidebar packages (replica of screenshot) === */
.pkg-list{ list-style:none; padding:0; margin:0; }
.pkg{ border:1px solid rgba(255,255,255,.08); border-left:0; border-right:0; }
.pkg + .pkg{ margin-top:10px; }

/* head row */
.pkg-head{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  padding:12px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--ink);
  border:none;
  cursor:pointer;
  text-align:left;
  border-radius:8px;
}
.pkg-title{ font-weight:800; letter-spacing:.2px; }
.pkg-price{ font-weight:900; }
.pkg-price .pkg-curr{ font-style:normal; font-weight:800; opacity:.9; margin-left:6px; }

/* body (collapsible) */
.pkg-body{ padding:8px 12px 12px; border-top:1px solid rgba(255,255,255,.06); }
.pkg-points{ margin:0; padding-left:18px; color:#dfe4ee; }
.pkg-points li{ margin:4px 0; }

/* open state */
.pkg[data-open="true"] .pkg-head{
  background:linear-gradient(180deg, rgba(224,176,104,.12), rgba(224,176,104,.06));
  border:1px solid rgba(224,176,104,.28);
}

/* note row at bottom */
.pkg-note{ border:0; margin-top:10px; }
.pkg-note-row{
  display:grid; grid-template-columns:1fr auto; gap:10px;
  padding:10px 8px; color:#dfe4ee;
  border-top:1px solid rgba(255,255,255,.10);
}

/* ===== Hero Tags: force two columns on all breakpoints ===== */
body.profile-page .cinema-copy .p-tags{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin:6px 0 10px;
  padding:0;
  list-style:none;
}

body.profile-page .cinema-copy .p-tags li{
  width:100%;
  text-align:center;
  font-weight:800;
  font-size:.9rem;
  color:#000;
  background:linear-gradient(135deg, var(--gold), #f0d49c);
  padding:8px 10px;
  border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}

/* tighter on mobile so everything fits neatly */
@media (max-width: 680px){
  body.profile-page .cinema-copy .p-tags li{
    font-size:.78rem;
    padding:6px 8px;
  }
}

/* ===== Specs: always 2 columns; tidy on mobile ===== */
body.profile-page .p-specs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px 16px;
}

/* each spec row = label/value */
body.profile-page .p-specs .spec-row{
  display:grid;
  grid-template-columns: 160px 1fr; /* label | value */
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.profile-page .p-specs .spec-row:last-child{ border-bottom:0; }

/* mobile: keep 2 columns for the grid, but shrink text + label width */
@media (max-width: 680px){
  body.profile-page .p-specs{
    gap:10px 12px;
  }
  body.profile-page .p-specs .spec-row{
    grid-template-columns: 130px 1fr;
    padding:6px 0;
  }
  body.profile-page .p-specs .spec-row span{ font-size:.9rem; }
  body.profile-page .p-specs .spec-row b{ font-size:.95rem; }
}

/* tiny phones */
@media (max-width: 400px){
  body.profile-page .p-specs .spec-row{
    grid-template-columns: 110px 1fr;
  }
  body.profile-page .p-specs .spec-row span{ font-size:.86rem; }
  body.profile-page .p-specs .spec-row b{ font-size:.9rem; }
}

/* long labels/values should wrap instead of pushing layout */
body.profile-page .p-specs .spec-row span,
body.profile-page .p-specs .spec-row b{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.45;
}