/* ==========================================================================
   L2Etina — login page theme (pilot). Loaded ONLY from signin.tpl, so it
   affects the sign-in / sign-up / reminder screens only, never logged-in pages.
   Restyles the Codebase shell into the L2Etina dark+gold brand.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@700&display=swap');

:root{
  --l2e-bg:#0b0906; --l2e-gold:#f6ad4d; --l2e-gold2:#f0cd82; --l2e-golddeep:#b47b24;
  --l2e-cream:#f3e7d0; --l2e-cream-dim:#c3b49b; --l2e-muted:#8c7d67;
  --l2e-line:rgba(246,173,77,.18); --l2e-line2:rgba(246,173,77,.34);
}

/* --- neutralize the admin shell on the login screen --- */
#sidebar,
#main-container > .content-header,
#page-container .content-header-fullrow{ display:none !important; }
#page-container{ padding:0 !important; margin:0 !important;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(11,9,6,.42), rgba(11,9,6,.88) 78%),
    linear-gradient(180deg, rgba(11,9,6,.62), rgba(11,9,6,.46) 40%, rgba(11,9,6,.9)),
    url("/template/site/L2Etina/images/bg/bg1.png") center 12% / cover no-repeat fixed !important; }
/* kill the leftover the base theme-blue Codebase page overlay on public pages */
#page-overlay{ background:none !important; }
#main-container{ margin:0 !important; max-width:none !important; width:100% !important; background:transparent !important; }
body{ background:var(--l2e-bg) !important; }

/* --- full-screen atmospheric stage --- */
.l2e-stage{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.l2e-stage__bg{ position:absolute; inset:0;
  background:url("/template/site/L2Etina/images/bg/bg1.png") center 12% / cover no-repeat;
  transform:scale(1.04); }
.l2e-stage__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(11,9,6,.35), rgba(11,9,6,.86) 78%),
    linear-gradient(180deg, rgba(11,9,6,.55), rgba(11,9,6,.4) 40%, rgba(11,9,6,.85)); }

/* the signin content sits above the stage, centered full-screen */
#main-container{ position:relative; z-index:2;
  min-height:100vh; display:flex !important; align-items:center; justify-content:center; padding:40px 18px; }
#main-container .content.content-full{ width:100%; display:flex; align-items:center; justify-content:center; padding:0; }

/* --- auth card (wide, the base theme proportions ~col-xl-6) --- */
.l2e-auth{ position:relative; z-index:2; width:100%; max-width:720px; margin:auto; }
.l2e-auth__crest{ text-align:center; margin-bottom:14px; }
.l2e-auth__crest img{ height:74px; filter:drop-shadow(0 8px 24px rgba(0,0,0,.85)) drop-shadow(0 0 20px rgba(246,173,77,.18)); }
.l2e-auth__title{ text-align:center; font-family:Philosopher,Georgia,serif; font-weight:700; font-size:26px;
  letter-spacing:.03em; color:#fff; margin:0 0 3px; text-shadow:0 3px 18px rgba(0,0,0,.7); }
.l2e-auth__sub{ text-align:center; color:var(--l2e-cream-dim); font-size:13px; margin:0; }
.l2e-orn{ display:flex; align-items:center; justify-content:center; gap:12px; margin:15px 0 18px; }
.l2e-orn i{ height:1px; width:70px; background:linear-gradient(90deg,transparent,var(--l2e-golddeep)); }
.l2e-orn i:last-child{ background:linear-gradient(90deg,var(--l2e-golddeep),transparent); }
.l2e-orn b{ width:7px; height:7px; transform:rotate(45deg); background:var(--l2e-gold); box-shadow:0 0 10px rgba(246,173,77,.6); }

/* --- restyle the Codebase block/form into a glass card --- */
.l2e-auth .block{ border:1px solid var(--l2e-line2) !important; border-radius:16px !important; overflow:hidden;
  background:linear-gradient(180deg,rgba(28,21,14,.72),rgba(18,13,9,.8)) !important;
  backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,224,170,.08) !important;
  position:relative; }
.l2e-auth .block::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(246,205,130,.6),transparent); }
.l2e-auth .block-header{ background:transparent !important; border-bottom:1px solid var(--l2e-line) !important; padding:14px 22px !important; }
.l2e-auth .block-title{ color:var(--l2e-cream) !important; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.l2e-auth .block-content{ padding:22px 24px !important; }
.l2e-auth .block-content.bg-body-light{ background:rgba(0,0,0,.32) !important; border-top:1px solid var(--l2e-line); }

.l2e-auth label{ color:var(--l2e-cream-dim) !important; font-size:12px; font-weight:600; margin-bottom:7px; }

/* input icons (server / envelope / key) */
.l2e-ig{ position:relative; }
.l2e-ig .l2e-ic{ position:absolute; left:0; top:0; bottom:0; width:46px; display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--l2e-line); background:rgba(246,173,77,.05); border-radius:10px 0 0 10px; pointer-events:none; z-index:2; }
.l2e-ig .l2e-ic svg{ width:18px; height:18px; color:var(--l2e-golddeep); }
.l2e-auth .l2e-ig .form-control{ padding-left:58px !important; }
.l2e-auth .form-control{
  background:rgba(0,0,0,.38) !important; border:1px solid var(--l2e-line2) !important; color:var(--l2e-cream) !important;
  border-radius:10px !important; height:auto !important; padding:12px 14px !important; font-size:14.5px !important; box-shadow:none !important; }
.l2e-auth .form-control:focus{ border-color:var(--l2e-gold) !important; box-shadow:0 0 0 3px rgba(246,173,77,.12) !important; }
.l2e-auth select.form-control option{ background:#191309; color:var(--l2e-cream); }
.l2e-auth .form-control::placeholder{ color:#6d6250 !important; }

/* language selector in header */
.l2e-auth .block-options .form-control{ background:rgba(0,0,0,.4) !important; padding:5px 8px !important; }

/* remember-me checkbox */
.l2e-auth .custom-control-label{ color:var(--l2e-cream-dim) !important; font-size:13px; }
.l2e-auth .custom-control-input:checked ~ .custom-control-label::before{ background:var(--l2e-golddeep) !important; border-color:var(--l2e-golddeep) !important; }

/* submit button (keep .btn .submit-form classes, restyle) */
.l2e-auth .btn.btn-alt-primary, .l2e-auth .btn-alt-primary,
.l2e-auth .btn.btn-alt-success, .l2e-auth .btn-alt-success{
  background:linear-gradient(180deg,var(--l2e-gold2),var(--l2e-golddeep)) !important;
  border:0 !important; color:#1c130a !important; font-weight:800 !important; border-radius:10px !important;
  padding:11px 22px !important; box-shadow:0 6px 18px rgba(246,173,77,.3), inset 0 1px 0 rgba(255,240,210,.4) !important; }
.l2e-auth .btn.btn-alt-primary:hover, .l2e-auth .btn.btn-alt-success:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(246,173,77,.42) !important; }

/* signup: tabs (email/phone), secondary buttons, input groups */
.l2e-auth .nav-tabs{ border:0 !important; margin-bottom:6px; }
.l2e-auth .nav-tabs .nav-link{ color:var(--l2e-cream-dim) !important; border:0 !important; background:transparent !important; font-weight:600; padding:11px 8px; }
.l2e-auth .nav-tabs .nav-link.active{ color:var(--l2e-gold2) !important; box-shadow:inset 0 -2px 0 var(--l2e-gold); }
.l2e-auth .nav-tabs .nav-link i{ color:var(--l2e-golddeep); }
.l2e-auth .btn-secondary{ background:rgba(0,0,0,.4) !important; border:1px solid var(--l2e-line2) !important; color:var(--l2e-cream-dim) !important; }
.l2e-auth .btn-secondary:hover{ border-color:var(--l2e-gold) !important; color:var(--l2e-gold2) !important; }
.l2e-auth .input-group-append .btn, .l2e-auth .input-group-prepend .btn{ border-radius:0 10px 10px 0 !important; }
.l2e-auth .form-text{ color:var(--l2e-muted) !important; font-size:11.5px; }
.l2e-auth code{ color:var(--l2e-gold2); background:rgba(246,173,77,.08); padding:2px 6px; border-radius:4px; }

/* footer links (register / reset) */
.l2e-auth .link-effect{ color:var(--l2e-gold2) !important; border:1px solid var(--l2e-line2); border-radius:9px;
  padding:8px 14px !important; font-size:12.5px; transition:.18s; }
.l2e-auth .link-effect:hover{ background:rgba(246,173,77,.08); border-color:var(--l2e-gold) !important; }

/* language footer strip under the card */
.l2e-lang{ margin-top:18px; text-align:center; }
.l2e-lang label{ display:block; font-size:10.5px; color:var(--l2e-muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
.l2e-lang select{ background:rgba(0,0,0,.4); color:var(--l2e-cream); border:1px solid var(--l2e-line2);
  border-radius:8px; padding:8px 30px 8px 12px; font-size:13px; cursor:pointer; }
.l2e-lang select option{ background:#191309; }

/* footer text */
.l2e-foot{ margin-top:14px; text-align:center; font-size:11.5px; color:var(--l2e-muted); }

@media(max-width:520px){
  .l2e-auth__crest img{ height:60px; }
  .l2e-auth__title{ font-size:22px; }
}

/* ================= branded left sidebar (login/signup/reminder) ================= */
.l2e-side{ position:fixed; left:0; top:0; bottom:0; width:300px; z-index:4;
  background:linear-gradient(180deg,#141009,#0a0805); border-right:1px solid var(--l2e-line2);
  display:flex; flex-direction:column; padding:22px 18px; }
.l2e-side__logo{ text-align:center; padding:4px 0 18px; border-bottom:1px solid var(--l2e-line); margin-bottom:16px; }
.l2e-side__logo img{ height:92px; max-width:100%; filter:drop-shadow(0 6px 18px rgba(0,0,0,.75)); }
.l2e-side__nav{ display:flex; flex-direction:column; gap:5px; }
.l2e-side__nav a, .l2e-side__link{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:10px;
  color:var(--l2e-cream-dim); font-size:15.5px; font-weight:500; text-decoration:none; transition:.16s; }
.l2e-side__nav a:hover, .l2e-side__link:hover{ background:rgba(246,173,77,.06); color:var(--l2e-cream); }
.l2e-side__nav a.on{ background:linear-gradient(90deg,rgba(80,54,24,.55),transparent); color:var(--l2e-gold2); box-shadow:inset 2px 0 0 var(--l2e-gold); }
.l2e-side__nav a svg, .l2e-side__link svg{ width:21px; height:21px; flex:0 0 21px; }
.l2e-side__div{ height:1px; background:var(--l2e-line); margin:14px 4px; }
.l2e-side__foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--l2e-line); }
.l2e-side__foot label{ display:block; font-size:10.5px; color:var(--l2e-muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
.l2e-side__foot select{ width:100%; padding:9px 12px; border-radius:8px; background:rgba(0,0,0,.4); color:var(--l2e-cream);
  border:1px solid var(--l2e-line2); font-size:13px; cursor:pointer; }
.l2e-side__foot select option{ background:#191309; }
.l2e-brand{ margin-top:12px; font-size:11px; color:var(--l2e-muted); }

/* make room for the sidebar; hero bg only in the content area; language lives in sidebar */
#main-container{ padding-left:340px !important; }
.l2e-stage{ left:300px; }
.l2e-auth .block-header .block-options{ display:none; }

@media(max-width:900px){
  /* stack vertically: sidebar bar on top, form below (both full width) — was breaking side-by-side */
  #main-container{ padding-left:18px !important; flex-direction:column !important; align-items:stretch !important; }
  #main-container .content.content-full{ flex-direction:column !important; align-items:stretch !important; }
  .l2e-side{ position:static; width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; padding:12px 14px; margin-bottom:18px; }
  .l2e-side__logo, .l2e-side__div{ display:none; }
  .l2e-side__nav{ flex-direction:row; gap:8px; }
  .l2e-side__foot{ margin:0; padding:0; border:0; min-width:150px; }
  .l2e-side__foot label, .l2e-brand{ display:none; }
  .l2e-auth{ margin:0 auto; }
  .l2e-stage{ left:0; }
}

/* ============================================================================
   Public FLOW sub-pages: sign-up/activation, sign-up/code, sign-up/completed,
   reminder sub-views. They render as .row > .col > .content.content-full with NO
   hero wrapper — so the Codebase header stayed white and text was dark-on-dark.
   .content.content-full exists ONLY on these pages (hero pages don't use it),
   so styling it here is safe. Match the auth look, make it readable & neat.
   ============================================================================ */
/* kill the leftover white Codebase header on every public page (hero pages don't use it) */
#page-header{ display:none !important; }
/* these pages have no sidebar → don't reserve 300px for it */
body:has(.content.content-full) #main-container{ padding-left:18px !important; }
body:has(.content.content-full) .l2e-stage{ left:0; }
/* center the card */
#main-container .row.mx-0.justify-content-center{ width:100%; margin:0 !important; }
#main-container .row.mx-0.justify-content-center > [class*="col-"]{ flex:0 0 auto; width:100%; max-width:600px; }
/* the content becomes a gold glass card, readable */
#main-container .content.content-full{
  display:block !important; width:100%; margin:0 auto !important;
  padding:34px 36px !important; text-align:center;
  background:linear-gradient(180deg,rgba(28,21,14,.80),rgba(18,13,9,.86));
  border:1px solid var(--l2e-line2); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,224,170,.08);
  color:var(--l2e-cream);
}
#main-container .content.content-full h1,
#main-container .content.content-full h2,
#main-container .content.content-full h3,
#main-container .content.content-full h4,
#main-container .content.content-full h5,
#main-container .content.content-full .h1,
#main-container .content.content-full .h4,
#main-container .content.content-full .h5{ color:#fff !important; }
#main-container .content.content-full p,
#main-container .content.content-full label,
#main-container .content.content-full .h6,
#main-container .content.content-full .text-muted,
#main-container .content.content-full .form-text{ color:var(--l2e-cream-dim) !important; }
#main-container .content.content-full strong,
#main-container .content.content-full b{ color:var(--l2e-cream); }
#main-container .content.content-full code{ background:rgba(246,173,77,.14); color:var(--l2e-gold2); padding:3px 9px; border-radius:6px; font-weight:700; }
#main-container .content.content-full a{ color:var(--l2e-gold2); }
#main-container .content.content-full a:hover{ color:var(--l2e-gold); }
#main-container .content.content-full .fa,
#main-container .content.content-full .si{ color:var(--l2e-gold); }
/* form controls (code / reminder pages) */
#main-container .content.content-full .form-control{ background:rgba(0,0,0,.35) !important; border:1px solid var(--l2e-line2) !important; color:var(--l2e-cream) !important; text-align:center; }
#main-container .content.content-full .form-control::placeholder{ color:var(--l2e-muted); }
#main-container .content.content-full .input-group-text{ background:rgba(246,173,77,.1) !important; border:1px solid var(--l2e-line2) !important; color:var(--l2e-gold2) !important; }
#main-container .content.content-full .btn-warning,
#main-container .content.content-full .btn-primary,
#main-container .content.content-full .btn-alt-primary,
#main-container .content.content-full .btn-alt-success,
#main-container .content.content-full .submit-form{ background:var(--l2e-gold) !important; border:0 !important; color:#1c130a !important; font-weight:700; }
#main-container .content.content-full .btn-secondary,
#main-container .content.content-full .btn-alt-secondary{ background:rgba(246,173,77,.1) !important; border:1px solid var(--l2e-line2) !important; color:var(--l2e-cream) !important; }
@media(max-width:900px){ #main-container .content.content-full{ padding:26px 20px !important; } }

/* readable message / table content inside the auth card (activation / code / completed) */
.l2e-auth .block-content{ color:var(--l2e-cream-dim); line-height:1.6; }
.l2e-auth .block-content code{ background:rgba(246,173,77,.14); color:var(--l2e-gold2); padding:3px 9px; border-radius:6px; font-weight:700; }
.l2e-auth .block-content a{ color:var(--l2e-gold2); }
.l2e-auth .block-content a:hover{ color:var(--l2e-gold); }
.l2e-auth .block-content .fa{ color:var(--l2e-gold); }
.l2e-auth .block-content .table{ color:var(--l2e-cream); margin-bottom:0; }
.l2e-auth .block-content .table td{ border-color:var(--l2e-line2) !important; padding:9px 12px; background:transparent !important; }
.l2e-auth .block-content .table td:first-child{ color:var(--l2e-cream-dim); white-space:nowrap; }
.l2e-auth .block-content .table td:last-child{ color:#fff; font-weight:600; word-break:break-word; }
/* action button inside the card (e.g. "Sign In" on the code-error page) */
.l2e-auth .block-content .cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:2px; padding:12px 26px; border-radius:10px; background:var(--l2e-gold); border:0; color:#1c130a !important; font-weight:700; font-size:14.5px; text-decoration:none; transition:.15s; }
.l2e-auth .block-content .cta:hover{ filter:brightness(1.07); color:#1c130a !important; text-decoration:none; }
.l2e-auth .block-content .cta .fa, .l2e-auth .block-content .cta .si{ color:#1c130a !important; }