/* Paradise Cocktails Mix Calculator - dark glass theme */
.pcmix{--ink:#eaf2f8;--dim:rgba(234,242,248,.62);--faint:rgba(234,242,248,.38);--line:rgba(255,255,255,.09);--gold:#e0af5e;--syrup:#ff8a73;--water:#6cc8ee;--panel-r:22px;
 background:radial-gradient(120% 140% at 85% -20%,#12507a 0%,#0b3251 38%,#071f33 100%);
 border:1px solid var(--line);border-radius:var(--panel-r);padding:36px 34px;margin:30px 0;
 font-size:15px;line-height:1.55;color:var(--ink);max-width:840px;position:relative;overflow:hidden;
 box-shadow:0 30px 60px -30px rgba(4,20,34,.55),0 2px 8px rgba(4,20,34,.25);}
.pcmix::before{content:"";position:absolute;inset:0;border-radius:var(--panel-r);pointer-events:none;
 background:linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 30%);}
.pcmix *{box-sizing:border-box;}
.pcmix .pcmix-h{margin:0 0 22px;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}

/* preset chips */
.pcmix .pcmix-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px;border:0;}
.pcmix .pcmix-tab{flex:0 1 auto;cursor:pointer;border:1px solid var(--line);border-radius:999px;
 background:rgba(255,255,255,.05);color:var(--dim);padding:9px 12px;margin:0;font:inherit;font-size:13px;white-space:nowrap;
 line-height:1.2;letter-spacing:0;transition:all .18s ease;}
.pcmix .pcmix-tab:hover{color:var(--ink);border-color:rgba(255,255,255,.28);transform:translateY(-1px);}
.pcmix .pcmix-tabs .pcmix-tab.is-on{background:linear-gradient(135deg,#f0c273,#d99b3e) !important;border-color:transparent !important;
 color:#132437 !important;border-radius:999px !important;font-weight:700;box-shadow:0 6px 20px -6px rgba(224,175,94,.55);transform:translateY(-1px);}

/* inputs */
.pcmix .pcmix-row{margin-bottom:20px;position:relative;}
.pcmix .pcmix-row label,.pcmix .pcmix-lab{display:block;font-weight:600;margin-bottom:9px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
.pcmix .pcmix-inline{display:flex;align-items:center;gap:10px;}
.pcmix input[type=number]{width:130px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
 font:inherit;font-size:19px;font-weight:600;background:rgba(6,20,33,.6);color:var(--ink);transition:border-color .15s;}
.pcmix input[type=number]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,175,94,.18);}
.pcmix .pcmix-unit{color:var(--dim);font-size:14px;}

/* strength chips */
.pcmix .pcmix-radios{display:flex;flex-wrap:wrap;gap:9px;}
.pcmix .pcmix-radio{flex:1 1 118px;display:block;position:relative;cursor:pointer;border:1px solid var(--line);
 border-radius:14px;padding:12px 10px;background:rgba(255,255,255,.05);text-align:center;transition:all .18s ease;}
.pcmix .pcmix-radio:hover{border-color:rgba(255,255,255,.3);transform:translateY(-1px);}
.pcmix .pcmix-radio input{position:absolute;opacity:0;width:0;height:0;}
.pcmix .pcmix-rt{display:block;font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:.02em;}
.pcmix .pcmix-rs{display:block;font-size:11px;color:var(--faint);margin-top:3px;}
.pcmix .pcmix-radio.is-on,.pcmix .pcmix-radio:has(input:checked){background:linear-gradient(160deg,rgba(224,175,94,.22),rgba(224,175,94,.08));
 border-color:rgba(224,175,94,.65);box-shadow:0 8px 22px -10px rgba(224,175,94,.4),inset 0 0 0 1px rgba(224,175,94,.25);}
.pcmix .pcmix-radio.is-on .pcmix-rt,.pcmix .pcmix-radio:has(input:checked) .pcmix-rt{color:var(--gold);}
.pcmix .pcmix-radio.is-on .pcmix-rs,.pcmix .pcmix-radio:has(input:checked) .pcmix-rs{color:rgba(224,175,94,.75);}
.pcmix .pcmix-radio input:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* the pour bar */
.pcmix .pcmix-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;margin:28px 0 8px;
 background:rgba(6,20,33,.55);border:1px solid var(--line);}
.pcmix .pcmix-seg{display:block;height:100%;width:0;transition:width .55s cubic-bezier(.22,.9,.35,1);}
.pcmix .pcmix-seg-syrup{background:linear-gradient(180deg,#ff9d85,#f0644c);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.pcmix .pcmix-seg-water{background:linear-gradient(180deg,#8ad4f2,#3fa8d8);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.pcmix .pcmix-seg-spirit{background:linear-gradient(180deg,#f2ca82,#d3952f);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}

/* results */
.pcmix .pcmix-out{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 18px;border:0;}
.pcmix .pcmix-card{flex:1 1 150px;border:1px solid var(--line);border-left:0;border-radius:16px;padding:20px 14px 17px;
 background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));text-align:center;position:relative;transition:transform .18s ease;}
.pcmix .pcmix-card:first-child{border-left:1px solid var(--line);}
.pcmix .pcmix-card::after{content:"";position:absolute;left:18%;right:18%;top:0;height:2px;border-radius:2px;}
.pcmix .pcmix-syrup::after{background:var(--syrup);}
.pcmix .pcmix-water::after{background:var(--water);}
.pcmix .pcmix-booze::after{background:var(--gold);}
.pcmix .pcmix-n{display:block;font-size:38px;font-weight:200;letter-spacing:-.02em;line-height:1.05;color:var(--ink);}
.pcmix .pcmix-syrup .pcmix-n{color:var(--syrup);text-shadow:0 0 24px rgba(255,138,115,.35);}
.pcmix .pcmix-water .pcmix-n{color:var(--water);text-shadow:0 0 24px rgba(108,200,238,.35);}
.pcmix .pcmix-booze .pcmix-n{color:var(--gold);text-shadow:0 0 24px rgba(224,175,94,.35);}
.pcmix .pcmix-n.pop{animation:pcmixpop .35s ease;}
@keyframes pcmixpop{0%{transform:scale(.92);opacity:.4;}100%{transform:scale(1);opacity:1;}}
.pcmix .pcmix-l{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:10px;}
.pcmix .pcmix-s{display:block;font-size:12.5px;color:var(--faint);margin-top:5px;min-height:1em;}

.pcmix .pcmix-yield{margin:0 0 12px;font-size:16.5px;font-weight:600;color:var(--ink);}
.pcmix .pcmix-note{margin:0;font-size:13px;line-height:1.65;color:var(--faint);}
.pcmix [hidden]{display:none !important;}

/* page shell (light, around the dark panel) */
.pcmix-page{max-width:840px;margin:0 auto;padding:8px 0 4px;color:#22303a;}
.pcmix-page .pcmix-eyebrow{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#b3803a;}
.pcmix-page .pcmix-title{margin:0 0 16px;font-size:clamp(30px,4.4vw,48px);line-height:1.08;font-weight:300;letter-spacing:-.02em;color:#0d3f5f;}
.pcmix-page .pcmix-lede{margin:0;max-width:60ch;font-size:17px;line-height:1.65;color:#5b6b78;}
.pcmix-page .pcmix{margin-top:32px;}
.pcmix-page .pcmix-steps{list-style:none;display:flex;flex-wrap:wrap;gap:26px;margin:36px 0 8px;padding:0;}
.pcmix-page .pcmix-steps li{list-style:none !important;flex:1 1 210px;margin:0;padding:0;font-size:14px;line-height:1.6;color:#6b7883;}
.pcmix-page .pcmix-steps li span{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;color:#b3803a;margin-bottom:8px;}
.pcmix-page .pcmix-steps li strong{display:block;font-size:15px;font-weight:600;color:#22303a;margin-bottom:5px;}

@media (max-width:640px){
 .pcmix{padding:24px 18px;border-radius:18px;}
 .pcmix .pcmix-card{flex:1 1 100%;border-left:1px solid var(--line);}
 .pcmix .pcmix-tab{flex:1 1 auto;padding:9px 12px;font-size:12.5px;text-align:center;}
 .pcmix .pcmix-n{font-size:32px;}
 .pcmix-page .pcmix-steps{gap:20px;}
}

/* centred shell for the copy appended to the FAQ page */
.pcmix-faqwrap{max-width:880px;margin:6px auto 54px;padding:0 20px;}
.pcmix-faqwrap .pcmix{margin:0 auto;}