/* ═══════════════════════════════════════════════════════════════
   ARIKONSFLOW — Antarctic Metal Card Journey
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ice:          #d8eaf5;
  --steel:        #8a9bb0;
  --gold:         #c9aa71;
  --dark:         #0a0f1a;
  --glass-bg:     rgba(8, 16, 32, 0.60);
  --glass-border: rgba(200, 225, 255, 0.14);
  --text-light:   #eef4ff;
  --text-dim:     rgba(200, 218, 240, 0.60);
  --accent:       #c9aa71;
  --accent2:      #6ab4e8;
  --success:      #5de0a8;
  --radius-lg:    18px;
  --radius-sm:    10px;
  --shadow:       0 16px 56px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.4);
  --blur:         blur(24px) saturate(1.5);
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--dark);
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
}

/* ─── Custom Cursor ─── */
#c-outer {
  position: fixed; top:0; left:0; z-index:9999;
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid rgba(201,170,113,.65);
  transform:translate(-50%,-50%); pointer-events:none;
  transition:width .22s,height .22s,border-color .22s,opacity .3s;
  will-change:transform;
}
#c-dot {
  position:fixed; top:0; left:0; z-index:10000;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent); transform:translate(-50%,-50%);
  pointer-events:none; will-change:transform;
}

/* ─── Loader ─── */
#loader {
  position:fixed; inset:0; z-index:8000; background:var(--dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition:opacity .7s,visibility .7s;
}
#loader.done { opacity:0; visibility:hidden; pointer-events:none; }
.ld-brand {
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3rem); font-weight:900; letter-spacing:.22em;
  background:linear-gradient(135deg,#e0c882,var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.ld-bar { width:220px; height:2px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.ld-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width .1s linear;
}
.ld-hint { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }

/* ─── Nav ─── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 36px; pointer-events:none;
}
#nav a { pointer-events:all; text-decoration:none; }
.nav-brand {
  font-family:'Playfair Display',serif;
  font-size:1rem; font-weight:900; letter-spacing:.24em;
  color:var(--accent); text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.nav-admin { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); transition:color .2s; }
.nav-admin:hover { color:var(--text-light); }

/* ─── Desert Drift Background (Spline 3D) ─── */
#bg-wrap { position:fixed; inset:0; overflow:hidden; }
#bg-img {
  position:absolute; inset:-10%;
  transform-origin:center center;
  will-change:transform;
}
.spline-bg {
  width:100%; height:100%;
  border:none; display:block;
  pointer-events:all;
}
#bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(5,12,28,.35) 0%,
    rgba(5,12,28,.10) 40%,
    rgba(5,12,28,.45) 100%
  );
  pointer-events:none;
}

/* ─── Three.js card canvas ─── */
#card-canvas {
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:10;
}

/* ─── Journey UI ─── */
#journey-ui { position:fixed; inset:0; z-index:100; pointer-events:none; }

/* ─── Progress ─── */
#progress-bar {
  position:fixed; top:68px; left:50%;
  transform:translateX(-50%); pointer-events:none; z-index:200;
}
.prog-stations { display:flex; align-items:flex-start; }
.prog-station {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:0 18px; position:relative; opacity:.42; transition:opacity .35s;
}
.prog-station.active,.prog-station.completed { opacity:1; }
.prog-station::before {
  content:''; position:absolute; top:5px; left:0; right:100%; height:1.5px;
  background:rgba(255,255,255,.1); margin-right:-5px; margin-left:calc(50% + 5px);
  width:calc(100% - 10px - 50%);
}
/* simpler approach: just lines between dots */
.prog-station:not(:first-child)::before {
  content:''; position:absolute; top:5px;
  right:calc(50% + 5px); left:auto;
  width:calc(100% - 10px);
  height:1.5px; background:rgba(200,218,255,.12);
  transform:translateX(100%);
}
.prog-station.completed:not(:first-child)::before {
  background:linear-gradient(90deg,rgba(201,170,113,.6),rgba(201,170,113,.3));
}
.ps-dot {
  width:11px; height:11px; border-radius:50%;
  background:rgba(200,220,255,.15); border:1.5px solid rgba(200,220,255,.22);
  transition:all .35s; position:relative; z-index:1;
}
.prog-station.active .ps-dot {
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(201,170,113,.28); transform:scale(1.3);
}
.prog-station.completed .ps-dot { background:var(--success); border-color:var(--success); }
.prog-station span { font-size:.57rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); white-space:nowrap; }
.prog-station.active span,.prog-station.completed span { color:var(--text-light); }

/* ─── Altitude indicator ─── */
#altitude {
  position:fixed; right:28px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none; z-index:200;
}
.alt-label { font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.alt-bar {
  width:3px; height:120px; background:rgba(255,255,255,.08);
  border-radius:99px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
}
.alt-fill {
  width:100%; height:0%;
  background:linear-gradient(0deg,var(--accent),var(--accent2));
  border-radius:99px;
  transition:height .8s cubic-bezier(.4,0,.2,1);
}
.alt-value { font-size:.6rem; font-weight:600; color:var(--accent); }

/* ─── Step Panels ─── */
.step-panel {
  position:fixed; left:50%; bottom:30px;
  transform:translateX(-50%) translateY(30px);
  width:min(460px,94vw); opacity:0; pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
  z-index:150;
}
.step-panel.active { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:all; }
.design-step { width:min(560px,96vw); }

.panel-glass {
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-radius:var(--radius-lg);
  padding:24px 26px 20px;
  box-shadow:var(--shadow);
}
.design-panel { padding:22px 22px 18px; }

.panel-header { margin-bottom:16px; }
.panel-num { font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:3px; }
.panel-header h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.25rem,3vw,1.55rem); font-weight:700; line-height:1.15; color:var(--text-light);
}
.panel-header h2 em { font-style:italic; color:var(--accent); }
.panel-header p { font-size:.75rem; color:var(--text-dim); margin-top:3px; }

/* ─── Metal Grid ─── */
.metal-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px;
}
.metal-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 8px 12px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.1); cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
  position:relative; overflow:hidden;
}
.metal-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.22); }
.metal-card.selected {
  border-color:var(--accent);
  box-shadow:0 4px 20px rgba(201,170,113,.25);
  transform:translateY(-3px);
}
.metal-swatch {
  width:42px; height:28px; border-radius:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.metal-card span { font-size:.65rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.metal-card.selected span { color:var(--accent); }
.metal-badge {
  position:absolute; top:5px; right:5px;
  font-size:.48rem; letter-spacing:.08em; padding:2px 5px;
  background:rgba(201,170,113,.2); border:1px solid rgba(201,170,113,.35);
  border-radius:4px; color:var(--accent); text-transform:uppercase;
}

/* ─── Finish List ─── */
.finish-list { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.finish-item {
  display:flex; align-items:center; gap:14px;
  padding:11px 14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-sm); cursor:pointer;
  transition:background .2s,border-color .2s,transform .18s;
}
.finish-item:hover { background:rgba(255,255,255,.09); transform:translateX(2px); }
.finish-item.selected { background:rgba(201,170,113,.1); border-color:var(--accent); transform:translateX(3px); }
.finish-preview {
  width:44px; height:30px; border-radius:5px; flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.finish-info { flex:1; }
.finish-name { font-size:.83rem; font-weight:600; color:var(--text-light); }
.finish-item.selected .finish-name { color:var(--accent); }
.finish-desc { font-size:.67rem; color:var(--text-dim); margin-top:1px; }

/* ─── Shape Grid ─── */
.shape-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:14px; }
.shape-card {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:12px 6px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-sm);
  cursor:pointer; transition:background .2s,border-color .2s,transform .2s;
}
.shape-card:hover { background:rgba(255,255,255,.1); transform:translateY(-2px); }
.shape-card.selected { background:rgba(201,170,113,.13); border-color:var(--accent); transform:translateY(-3px); box-shadow:0 4px 16px rgba(201,170,113,.18); }
.shape-icon { width:32px; height:22px; }
.shape-card span { font-size:.57rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-dim); }
.shape-card.selected span { color:var(--accent); }

/* ─── Thickness ─── */
.thickness-row { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.thick-label { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); white-space:nowrap; }
.thick-options { display:flex; gap:6px; }
.thick-btn {
  padding:6px 12px; border-radius:99px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:var(--text-dim); font-family:'Space Grotesk',sans-serif;
  font-size:.72rem; font-weight:600; cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.thick-btn:hover { background:rgba(255,255,255,.1); }
.thick-btn.active { background:rgba(201,170,113,.15); border-color:var(--accent); color:var(--accent); }

/* ─── Design Step ─── */
.card-preview-wrap {
  position:relative; margin-bottom:13px; border-radius:9px; overflow:hidden;
  cursor:pointer; box-shadow:0 4px 24px rgba(0,0,0,.55);
  transition:box-shadow .2s;
}
.card-preview-wrap:hover { box-shadow:0 6px 32px rgba(201,170,113,.3); }
#cardPreview2D { width:100%; height:auto; display:block; border-radius:9px; }
.upload-overlay {
  position:absolute; inset:0; border-radius:9px;
  border:2px dashed rgba(201,170,113,.35);
  background:rgba(0,0,0,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background .2s,border-color .2s; pointer-events:none;
}
.upload-overlay.hidden { opacity:0; }
.card-preview-wrap:hover .upload-overlay { border-color:var(--accent); background:rgba(0,0,0,.5); }
.upl-icon { color:var(--accent); }
.upload-overlay span { font-size:.78rem; font-weight:500; color:var(--text-light); }
.upload-overlay small { font-size:.62rem; color:var(--text-dim); }
.remove-file-btn {
  position:absolute; top:7px; right:7px;
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.15);
  color:var(--text-light); font-size:.65rem; padding:4px 8px;
  border-radius:99px; cursor:pointer; font-family:inherit;
  transition:background .2s;
}
.remove-file-btn:hover { background:rgba(200,50,50,.6); }

.design-form.compact { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.df-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.df-field { display:flex; flex-direction:column; gap:3px; }
.df-field label { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.df-field input {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
  border-radius:7px; padding:7px 10px;
  font-family:'Space Grotesk',sans-serif; font-size:.78rem; color:var(--text-light);
  outline:none; transition:border-color .2s,background .2s;
}
.df-field input::placeholder { color:rgba(255,255,255,.2); }
.df-field input:focus { border-color:var(--accent); background:rgba(255,255,255,.1); }

/* ─── Quantity ─── */
.qty-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:16px; }
.qty-btn {
  padding:10px 6px; border-radius:9px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:var(--text-light); font-family:'Space Grotesk',sans-serif;
  font-size:.82rem; font-weight:600; cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;
}
.qty-btn:hover { background:rgba(255,255,255,.1); transform:translateY(-1px); }
.qty-btn.active { background:rgba(201,170,113,.16); border-color:var(--accent); color:var(--accent); box-shadow:0 3px 14px rgba(201,170,113,.2); }

.price-display {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(201,170,113,.07); border:1px solid rgba(201,170,113,.18);
  border-radius:11px; padding:13px 16px; margin-bottom:13px;
}
.price-unit { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:700; color:var(--text-light); }
.price-total { font-size:.88rem; font-weight:600; color:var(--accent); }

.price-table { width:100%; border-collapse:collapse; margin-bottom:16px; font-size:.7rem; }
.price-table thead tr { border-bottom:1px solid rgba(255,255,255,.08); }
.price-table th { text-align:left; padding:4px 7px; color:var(--text-dim); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; }
.price-table th:last-child { text-align:right; }
.price-table td { padding:5px 7px; color:var(--text-dim); border-bottom:1px solid rgba(255,255,255,.04); }
.price-table td:last-child { text-align:right; }
.price-table tr.current-qty td { color:var(--text-light); font-weight:600; }
.price-table tr.current-qty td:first-child { color:var(--accent); }
.price-savings { font-size:.57rem; color:var(--success); margin-left:4px; }

/* ─── Buttons ─── */
.mag-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:99px;
  font-family:'Space Grotesk',sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; border:none; outline:none; text-decoration:none;
  transition:transform .2s,box-shadow .2s; will-change:transform;
}
.next-btn,.finish-btn {
  width:100%;
  background:linear-gradient(135deg,#b8922a,var(--accent),#e0c882);
  color:#0a0800; box-shadow:0 4px 18px rgba(201,170,113,.35);
}
.next-btn:hover,.finish-btn:hover { transform:translateY(-2px)!important; box-shadow:0 7px 28px rgba(201,170,113,.55)!important; }
.order-btn { background:linear-gradient(135deg,#b8922a,var(--accent),#e0c882); color:#0a0800; box-shadow:0 4px 18px rgba(201,170,113,.35); padding:14px 30px; }
.order-btn:hover { transform:translateY(-2px)!important; box-shadow:0 7px 28px rgba(201,170,113,.55)!important; }

/* ─── Success ─── */
.success-glass { text-align:center; }
.success-icon { font-size:2.8rem; margin-bottom:10px; display:block; animation:float 2.2s ease-in-out infinite alternate; }
@keyframes float { from{transform:translateY(0)}to{transform:translateY(-10px)} }
.success-title { font-family:'Playfair Display',serif; font-size:clamp(1.55rem,4vw,2rem); font-weight:700; line-height:1.1; margin-bottom:12px; }
.success-title em { color:var(--accent); font-style:italic; }
.success-summary { font-size:.78rem; color:var(--text-dim); line-height:1.7; margin-bottom:18px; }
.success-summary strong { color:var(--text-light); }
.success-actions { display:flex; flex-direction:column; align-items:center; gap:10px; }
.restart-btn {
  background:none; border:none; font-family:'Space Grotesk',sans-serif;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; transition:color .2s;
}
.restart-btn:hover { color:var(--text-light); }

@media(max-width:520px){
  #nav{padding:14px 18px;}
  #progress-bar{top:60px;}
  .prog-station{padding:0 10px;}
  .prog-station span{font-size:.5rem;}
  .metal-grid{grid-template-columns:repeat(2,1fr);}
  .shape-grid{grid-template-columns:repeat(3,1fr);}
  .df-row{grid-template-columns:1fr;}
  .qty-options{grid-template-columns:repeat(3,1fr);}
  #altitude{display:none;}
}