/* =========================================================
   BenTech · Dark Green Modern Theme (styles.css)
   - Sticky sidebar on desktop; off-canvas drawer on mobile
   - Big brand logo; 3× hero logo
   - Glass cards, grids, buttons, forms, tiles
   - Gold selection + in-tile loader
   ========================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0 }
img{ max-width:100%; display:block }
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:inherit; text-decoration:none }

/* ---------- Theme Vars ---------- */
:root{
  --bg:#081613;               /* deep green */
  --bg2:#0c1f1b;
  --panel:#0f2621;
  --glass:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.10);
  --ink:#e9f8f1;
  --muted:#a7c7bb;
  --accent:#2bd4a0;
  --accent-2:#18b981;
  --danger:#ef4444;

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;

  --shadow-1:0 8px 24px rgba(0,0,0,.28);
  --shadow-2:0 14px 34px rgba(0,0,0,.34);

  --gold:#d4af37;
  --gold-ink:#111;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth }
body{
  background: radial-gradient(1200px 800px at 30% -10%, #0f2a23 0%, #091a16 45%, var(--bg) 100%);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height:1.45;
}

/* Subtle grid overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(transparent 23px, rgba(255,255,255,.04) 24px),
    linear-gradient(90deg, transparent 23px, rgba(255,255,255,.04) 24px);
  background-size:24px 24px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.7) 40%, rgba(0,0,0,.95));
}

/* =========================================================
   LAYOUT
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100vh;
  position:relative;
  z-index:1;
}
.aside{
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,#0c1f1b,#0a1916);
  padding:14px 12px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.col{
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

/* Collapsed (desktop) */
.aside.collapsed{ width:92px }
.aside.collapsed .nav a span{ display:none !important }
.aside.collapsed .brand h1{ display:none }

/* =========================================================
   BRAND + NAV
   ========================================================= */
.brand{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.brand h1{ font-size:18px; letter-spacing:.2px; font-weight:700; color:var(--ink); opacity:.95 }
.brand-logo{ height:120px !important }
.aside.collapsed .brand-logo{ height:40px !important }

/* Tiny chevron toggle */
.collapse-mini{
  position:absolute; right:8px; top:8px;
  width:26px; height:26px; border:0; background:transparent; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.mini-ico{ width:20px; height:20px; opacity:.85; transition:transform .15s ease, opacity .15s ease }
.collapse-mini:hover .mini-ico{ opacity:1; transform:scale(1.06) }

/* Sidebar nav */
.nav{ display:grid; gap:10px; margin:12px 0 }
.nav a{
  display:grid; grid-template-columns:28px 1fr; align-items:center; gap:10px;
  padding:12px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .2s ease;
}
.nav a .ico{ width:18px; height:18px; opacity:.9 }
.nav a:hover{ transform:translateY(-1px); border-color:rgba(52,211,153,.35); box-shadow:var(--shadow-1) }
.nav a.active{
  background:linear-gradient(180deg, rgba(43,212,160,.25), rgba(43,212,160,.12));
  border-color:rgba(43,212,160,.45);
}

.aside-foot{ margin-top:8px; padding:8px 4px; color:var(--muted); text-align:center; opacity:.9 }

/* =========================================================
   HEADER / FOOTER
   ========================================================= */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.header .title{ font-size:20px; font-weight:800; letter-spacing:.2px }
.footer{ padding:28px 22px; border-top:1px solid var(--line); color:var(--muted); text-align:center }

/* =========================================================
   MAIN + CARDS
   ========================================================= */
.main{ padding:24px }
.card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--panel), #0e2420);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, var(--shadow-1);
}
.card .hd{
  padding:14px 16px; font-weight:800; letter-spacing:.25px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.card .bd{ padding:16px }
.mt-16{ margin-top:16px }

/* Grids */
.grid{ display:grid; gap:14px }
.cols-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1100px){ .cols-3{ grid-template-columns:1fr } }

/* Hero */
.hero .bd{ text-align:center; padding:36px 20px }
.logo-hero{ display:inline-block; opacity:.96 }
.logo-hero.xl{ height:240px !important }
@media (max-width:900px){ .logo-hero.xl{ height:180px !important } }
.hero h2{
  margin-top:10px; font-size:clamp(28px,4vw,42px); line-height:1.15; font-weight:900; letter-spacing:.2px;
}
.hero .sub{
  margin:10px auto 14px; max-width:840px; color:var(--ink); opacity:.95; font-size:17px; line-height:1.6;
}
.badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0 12px }
.badge{
  padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  font-weight:700; font-size:13px; color:var(--ink); opacity:.95;
}
.buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px }
.notice{ margin-top:12px; font-size:13px; color:var(--muted); opacity:.95 }

/* Hover lift */
.card-hover{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.card-hover:hover{ transform:translateY(-2px); border-color:rgba(52,211,153,.35); box-shadow:var(--shadow-2) }

/* =========================================================
   BUTTONS
   ========================================================= */
.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-weight:800; letter-spacing:.2px; color:var(--ink);
  transition:transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  cursor:pointer;
}
.button:hover{ transform:translateY(-1px); border-color:rgba(52,211,153,.45); box-shadow:var(--shadow-1) }
.button.primary{ background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#06231c; border:0 }
.button.ghost{ border:1px solid rgba(255,255,255,.45); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) }

/* =========================================================
   FORMS
   ========================================================= */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr } }
.form-span{ grid-column:1 / -1 }
.form-field label{ display:block; font-size:12px; color:var(--muted); margin:2px 0 6px }
.form-field select,
.form-field textarea,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"]{
  width:100%; padding:12px 14px; font-size:14px; color:var(--ink);
  background:rgba(12,28,24,.6); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-md); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-field textarea{ min-height:120px; resize:vertical }
.form-field select:focus,
.form-field textarea:focus,
.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field input[type="tel"]:focus{
  border-color:rgba(52,211,153,.55); box-shadow:0 0 0 3px rgba(52,211,153,.18);
}

/* =========================================================
   TILES
   ========================================================= */
.tiles-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) }
.tile{
  display:block; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--ink); font-weight:700;
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tile:hover{ transform:translateY(-2px); border-color:rgba(52,211,153,.45); box-shadow:var(--shadow-1) }

/* Selection highlight (gold) */
.is-selected{
  border-color:var(--gold) !important;
  background:linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.14)) !important;
  box-shadow:0 12px 28px rgba(212,175,55,.18);
  color:var(--ink);
}
.tile.is-selected{
  background:linear-gradient(180deg, rgba(212,175,55,.28), rgba(212,175,55,.16)) !important;
  color:var(--gold-ink) !important; font-weight:800;
}

/* In‑tile loader (appears inside selected tile) */
.tile-loader{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-top:6px;
  border:1px dashed rgba(212,175,55,.55);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.08));
  color:var(--ink); font-size:14px;
  box-shadow:0 6px 18px rgba(212,175,55,.12);
}
.spinner{
  width:18px; height:18px; border:2px solid rgba(212,175,55,.35);
  border-top-color:var(--gold); border-radius:50%;
  animation:ben_spin .9s linear infinite;
}
@keyframes ben_spin{ to{ transform:rotate(360deg) } }

/* =========================================================
   DETAILS GRID
   ========================================================= */
.details-grid{ display:grid; gap:16px; grid-template-columns:1fr 1fr }
@media (max-width:1100px){ .details-grid{ grid-template-columns:1fr } }
.box{
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding:14px;
}
.box h3{ font-size:15px; font-weight:800; margin-bottom:8px }
.box ol{ padding-left:20px; line-height:1.6 }
.box p{ line-height:1.6 }

/* Utilities */
.help{ color:var(--muted); font-size:13px }
a:hover{ text-decoration:none }

/* =========================================================
   RESPONSIVE: MOBILE DRAWER + FULL-WIDTH CONTENT
   ========================================================= */

/* --- Desktop/Laptop guardrail (>=992px) --- */
@media (min-width:992px){
  .layout{ grid-template-columns:280px 1fr !important }
  .aside{
    position:sticky !important; top:0; left:auto !important;
    width:280px !important; height:100vh !important;
    transform:none !important; box-shadow:none !important; pointer-events:auto !important;
  }
  .scrim, .scrim.show{ display:none !important }
  body.nav-open{ overflow:auto !important }
  .mobile-toggle{ display:none !important }
}

/* --- Mobile/Tablet (<=991.98px) --- */
@media (max-width:991.98px){
  .layout{ grid-template-columns:1fr !important; overflow-x:hidden }
  .aside{
    position:fixed !important; top:0; left:0;
    width:min(86vw, 320px); height:100dvh;
    transform:translateX(-100%); transition:transform .22s ease;
    z-index:60; border-right:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.5);
    pointer-events:none;
  }
  .aside.open{ transform:translateX(0); pointer-events:auto }
  .aside:not(.open){ box-shadow:none }

  .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(1px); z-index:50; display:none }
  .scrim.show{ display:block }

  .mobile-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:10px;
    border:1px solid var(--line); background:rgba(255,255,255,.06);
    margin-right:8px;
  }
  .mobile-toggle svg{ width:20px; height:20px; opacity:.9 }
  
	/* Sidebar collapse should expand main content */
.layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  position: relative;
}

.aside.collapsed{
  width: 92px !important;
}
.aside.collapsed ~ .col{
  grid-column: 2;
}
.layout.collapsed{
  grid-template-columns: 92px 1fr !important;
}

  /* Full-width content on small screens (no narrow hero) */
  body .layout .col,
  body .layout .col .main,
  body .layout .col .main .hero,
  body .layout .col .main .card,
  body .layout .col .main .hero > .bd,
  body .layout .col .main .card > .bd,
  body .layout .col .main .hero-inner,
  body .layout .col .main .container,
  body .layout .col .main [class*="container"]{
    max-width:none !important; width:100% !important; margin:0 !important;
  }
  .main{ padding:14px !important }
  .card .bd, .hero .bd{ padding:16px 14px !important }
  .badges{ display:flex; flex-wrap:wrap; gap:8px }
  .buttons .button{ width:100%; margin:8px 0 }
  .aside .brand h1{ display:none }          /* keep brand compact on phone */
  .brand-logo{ height:48px !important }
  .logo-hero.xl{ height:180px !important }
}