/* Dark jewel theme for the customer-facing order page (portal.html), matching views/landing.html.
   Loaded after styles.css and scoped to body.gem-dark, so the admin keeps the light look. */
body.gem-dark{
  --ink:#0b0613; --deep:#1a0b2e; --orchid:#c77dff; --gold-hi:#fff1c4; --gold-lo:#b98524;
  --purple:#c77dff; --purple-dark:#fff1c4; --gold:#f0c35a; --gold-soft:#fff1c4; --gold-deep:#b98524;
  --bg:#0b0613; --surface:rgba(255,255,255,.055); --text:#efe6ff; --muted:#b9a8d6;
  --border:rgba(255,255,255,.14); --danger:#ff8a80; --ok:#7be3a0; --warn:#ffb86b;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --serif:Cinzel,Georgia,"Times New Roman",serif;
  color-scheme:dark;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(123,63,228,.45), transparent 62%),
    radial-gradient(700px 480px at 8% 100%, rgba(199,125,255,.20), transparent 60%),
    radial-gradient(700px 480px at 96% 92%, rgba(240,195,90,.12), transparent 60%),
    linear-gradient(180deg,#1a0b2e,#0b0613 70%);
  background-attachment:fixed;
}
/* corner crystals */
body.gem-dark::before,body.gem-dark::after{content:"";position:fixed;z-index:0;pointer-events:none;bottom:-56px;
  width:150px;height:260px;opacity:.32;filter:drop-shadow(0 0 22px rgba(199,125,255,.55));
  background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(199,125,255,.75) 28%,rgba(123,63,228,.85) 55%,rgba(41,13,64,.9));
  clip-path:polygon(50% 0,82% 22%,100% 62%,68% 100%,30% 100%,0 60%,20% 20%)}
body.gem-dark::before{left:-40px;transform:rotate(14deg)}
body.gem-dark::after{right:-44px;transform:rotate(-16deg)}
body.gem-dark .wrap{position:relative;z-index:1}
@media(max-width:640px){body.gem-dark::before,body.gem-dark::after{opacity:.16}}

body.gem-dark a{color:var(--orchid)}

/* header */
body.gem-dark .portal-head img{width:88px;height:88px;
  box-shadow:0 0 0 2px rgba(240,195,90,.75), 0 0 30px rgba(199,125,255,.7), 0 0 80px rgba(123,63,228,.45)}
body.gem-dark .portal-head .brand{font-family:var(--serif);font-weight:800;font-size:38px;letter-spacing:.08em;line-height:1.1;
  background:linear-gradient(180deg,#fff1c4 0%,#f0c35a 45%,#b98524 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(240,195,90,.3))}
body.gem-dark .portal-head .tag{color:var(--muted)}

/* cards */
body.gem-dark .card{
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 45%,rgba(123,63,228,.12));
  border:1px solid rgba(240,195,90,.32);
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.gem-dark .card::before{height:2px;background:linear-gradient(90deg,transparent,#f0c35a,transparent)}
body.gem-dark .card h2,body.gem-dark .step,body.gem-dark h3{color:var(--gold-hi);letter-spacing:.03em}
body.gem-dark .step{font-weight:600;font-size:19px}

/* form controls */
body.gem-dark label{color:#e2d6f7}
body.gem-dark input,body.gem-dark select,body.gem-dark textarea{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:var(--text)}
body.gem-dark input::placeholder{color:#8f7fae}
body.gem-dark input:focus,body.gem-dark select:focus,body.gem-dark textarea:focus{
  outline:2px solid rgba(199,125,255,.55);border-color:var(--orchid)}
body.gem-dark select option{background:#1a0b2e;color:#efe6ff}
body.gem-dark input:-webkit-autofill{-webkit-text-fill-color:#efe6ff;
  box-shadow:0 0 0 1000px #24123d inset;caret-color:#efe6ff}

/* line items + totals */
body.gem-dark .item-row .unit,body.gem-dark .item-row .line{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--muted)}
body.gem-dark .item-row .rm{background:transparent;border-color:rgba(255,138,128,.4);color:var(--danger)}
body.gem-dark .item-row .rm:hover{background:rgba(255,138,128,.12)}
body.gem-dark .totals .grand td{color:var(--gold-hi);border-top-color:#f0c35a}

/* product picker */
body.gem-dark .combo-input.has-val{border-color:#f0c35a;background:rgba(199,125,255,.14)}
body.gem-dark .combo-list{background:#1c0f30;border:1px solid rgba(240,195,90,.4);box-shadow:0 18px 50px rgba(0,0,0,.65)}
body.gem-dark .combo-opt{color:var(--text)}
body.gem-dark .combo-opt.active,body.gem-dark .combo-opt:hover{background:rgba(199,125,255,.2);color:#fff}
body.gem-dark .combo-code{background:rgba(199,125,255,.2);color:#e3c4ff}

/* buttons */
body.gem-dark .btn{color:#2a1405;border-radius:999px;
  background:linear-gradient(180deg,#fff1c4,#f0c35a 55%,#b98524);
  box-shadow:0 6px 18px rgba(240,195,90,.28), inset 0 1px 0 rgba(255,255,255,.7)}
body.gem-dark .btn.ghost{background:transparent;color:var(--gold-hi);border:1px solid rgba(240,195,90,.45);box-shadow:none}
body.gem-dark .btn.ghost:hover{background:rgba(240,195,90,.1)}

/* group-buy picker + banners + messages */
body.gem-dark .gb-card{background:rgba(255,255,255,.05);border-color:rgba(240,195,90,.3)}
body.gem-dark .gb-card:hover{border-color:#f0c35a;box-shadow:0 0 30px rgba(199,125,255,.3)}
body.gem-dark .gb-card .gbnum{color:var(--gold-hi)}
body.gem-dark .gb-card .go{color:#f0c35a}
body.gem-dark .banner{background:rgba(199,125,255,.12);border-color:rgba(199,125,255,.32)}
body.gem-dark .banner b{color:var(--gold-hi)}
body.gem-dark .linkish{color:var(--orchid)}
body.gem-dark .flash.ok{background:rgba(123,227,160,.12);color:var(--ok);border-color:rgba(123,227,160,.35)}
body.gem-dark .flash.err{background:rgba(255,138,128,.12);color:var(--danger);border-color:rgba(255,138,128,.4)}

/* shipping choice */
body.gem-dark .ship-group h4{color:var(--gold-hi);letter-spacing:.03em}
body.gem-dark .ship-opt{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--text)}
body.gem-dark .ship-opt:hover{border-color:rgba(240,195,90,.5)}
body.gem-dark .ship-opt.on{border-color:#f0c35a;box-shadow:0 0 0 1px #f0c35a,0 0 22px rgba(199,125,255,.25);background:rgba(199,125,255,.12)}
body.gem-dark .ship-opt input{accent-color:#f0c35a}
body.gem-dark .ship-opt .p{color:var(--gold-hi)}