/* =========================================================
   THEME DARK – VARIABLES
   Single source, cinematic black + gold
   ========================================================= */

:root{
  color-scheme: dark;

  /* Base surfaces */
  --bg-main: #030202;
  --bg-secondary: #0e0b0c;

  /* Text */
  --text-main: #f3ede2;
  --text-muted: #b8b0a6;

  /* Accent */
  --accent: #c9a24d;
  --accent-hover: #e0c36a;

  /* Info / secondary text */
  --info-text: #d6cfc4;
  --info-muted: #b8b0a6;

  /* Token (pill) */
  --token-text: #f1d88a;
  --token-bg: rgba(0,0,0,0.35);
  --token-border: rgba(201,162,77,0.35);

  /* Text over images */
  --image-text: #ffffff;
  --image-shadow: rgba(0,0,0,0.75);

  /* Decorative glow */
  --gold-glow-strong: rgba(201,162,77,0.20);
  --gold-glow-soft: rgba(201,162,77,0.05);
}

/* =========================================================
   BASE LAYOUT
   ========================================================= */

html, body{
  height: 100%;
  margin: 0;
}

body{
  background-color: var(--bg-main);
  background-image:
    linear-gradient(
      rgba(186,182,56,0.33),
      rgba(0,0,0,0.92)
    ),
    url("/assets/img/background.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-main);
}

input, textarea, select{
  color-scheme: dark;
}

/* =========================================================
   LINKS
   ========================================================= */

a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{
  color: var(--accent-hover);
}

/* =========================================================
   NAVBAR / MENU BAR
   ========================================================= */

.navbar{
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid rgba(201,162,77,0.35);
}

.menu-bar{
  position: relative;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.073);
}

/* Gold glow under menu bar */
.menu-bar::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-40px;
  height:40px;
  background: radial-gradient(
    ellipse at center top,
    var(--gold-glow-strong),
    var(--gold-glow-soft) 40%,
    transparent 70%
  );
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary{
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
}
.btn-primary:hover{
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* =========================================================
   TEXT HELPERS
   ========================================================= */

.text-muted{
  color: var(--text-muted) !important;
}

.info,
.info-text,
.help-text{
  color: var(--info-text);
}

small,
.small,
.form-text,
.text-secondary{
  color: var(--info-muted) !important;
}

/* =========================================================
   TOKEN / PILL
   ========================================================= */

.token,
.code-token,
.show-token{
  color: var(--token-text);
  background: var(--token-bg);
  border: 1px solid var(--token-border);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-block;
}

/* =========================================================
   SHOW CARD – STRUCTURE
   ========================================================= */

.show-card{
  overflow: hidden;
  background-color: transparent;
  border-color: rgba(201,162,77,0.45);
}

.show-card-media{
  position: relative;
}

/* Image darkening gradient */
.show-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.55)
  );
}

.show-card-img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* =========================================================
   SHOW CARD – IMAGE OVERLAY
   ========================================================= */

.show-card-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 14px;
}

/* Show title
   - Invisible box exists for alignment
   - No visual background
*/
.show-title{
  color: var(--image-text);
  text-shadow: 0 2px 8px var(--image-shadow);
  font-weight: 800;
  line-height: 1.15;

  display: inline-block;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
}

.show-token{
  align-self: flex-start;
}

/* =========================================================
   SHOW CARD – BODY
   ========================================================= */

.show-card .card-body{
  background: rgba(253,253,253,0.35);
  color: var(--text-main);
  display: flex;
  align-items: flex-end;
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert-info{
  background-color: rgba(14,11,12,0.85);
  color: var(--info-text);
  border-color: rgba(201,162,77,0.45);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* =========================================================
   TOKEN STEPPER (1–2–3)
   ========================================================= */

.pm-stepper{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  margin: 0 auto 1rem;
}

.pm-step{
  width:46px;
  height:46px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1rem;
  padding: 10px 14px;
  border: 4px solid rgba(113,91,45,0.35);
  background: rgba(0,0,0,0.25);
}

.pm-step--active{
  background:#9fa674;
  color:#fff;
}

.pm-step--locked{
  background:#e5e5e5;
  color:#777;
}

.pm-connector{
  width:100px;
  height:4px;
  border-radius:999px;
  background:#e5e5e5;
  margin:0 10px;
}

.pm-connector--active{ background:#2e7d32; }
.pm-connector--locked{ background:#e5e5e5; }

/* =========================================================
   ENV BANNER (ADMIN)
   ========================================================= */

.env-banner{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 2147483647;
  text-align:center;
  padding:6px;
  font-weight:bold;
  font-family: Arial, sans-serif;
}

.env-banner--local{
  background-color:#ffcc00 !important;
  color:#000 !important;
}

.env-banner--prod{
  background-color:#2ecc71 !important;
  color:#000 !important;
}

body.has-env-banner{
  padding-top: 38px;
}

/* =========================================================
   ACCESS SHOW – FORM & CARD
   ========================================================= */

.access-show .form-label{
  color: var(--text-main);
  font-weight: 700;
}

.access-show .form-text{
  color: var(--info-muted) !important;
}

.access-show input.form-control[name="show"]{
  background-color: var(--bg-secondary) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(201,162,77,0.35) !important;
  -webkit-text-fill-color: var(--text-main);
}

.access-show input.form-control[name="show"]::placeholder{
  color: var(--text-muted);
}

.access-show input.form-control[name="show"]:focus{
  border-color: var(--accent-hover) !important;
  box-shadow: 0 0 0 0.15rem rgba(201,162,77,0.25) !important;
}

/* Single unified card (no inner box) */
.access-show .card{
  background-color: rgba(14,11,12,0.67) !important;
  color: var(--info-text);
  border: 1px solid rgba(201,162,77,0.45) !important;
  border-radius: 0.375rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.access-show .card-body{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.75rem 1rem;
}
/* =========================
   STEP 4 – NAVIGATION BUTTONS
   Dark theme override
   ========================= */

/* Outline / secondary buttons (Back, Edit steps) */
.access-show .btn-outline-secondary,
.access-show .btn-secondary {
  background-color: #d0aa39;
  color: rgba(14, 12, 10, 0.852);
  border-color: rgba(209, 80, 37, 0.852);
}

.access-show .btn-outline-secondary:hover,
.access-show .btn-secondary:hover {
  background-color: rgba(215, 182, 111, 0.886);
  color: var(--text-main);
  border-color: rgba(106, 209, 37, 0.852);
}

/* Link-style buttons */
.access-show .btn-link {
  color: var(--accent);
  text-decoration: none;
}

.access-show .btn-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
/* =========================
   MY ACCOUNT (HEADER BUTTON)
   ========================= */

.navbar .btn-my-account,
.menu-bar .btn-my-account{
  background: rgba(227, 169, 35, 0.886);
  color: rgba(8, 8, 8, 0.886);
  border: 1px solid rgba(36, 33, 33, 0.833) !important;
}

.navbar .btn-my-account:hover,
.menu-bar .btn-my-account:hover{
  color: var(--text-main) !important;
  border-color: var(--accent) !important;
  background: rgba(255,255,255,0.06) !important;
}