/* ============================================================================
   bc-premium.css — premium visual skin for the 5 core Business Card
   configurator pages (Standard / Die-Cut / Foil / Plastic / Silk).
   Pure presentation layer: no markup, IDs, or JS hooks are touched, so every
   dropdown, price calc, switcher and CTA keeps working exactly as before.
   Loaded AFTER each page's inline <style>, so these rules win on specificity
   ties. Scoped to structures that exist on these pages only — the shared
   premium-skin.css used sitewide is deliberately not modified.
   ========================================================================== */

/* ---- foundation: type + layered ambient background ---- */
body{
  font-family:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 480px at 12% 4%,  rgba(0,87,184,.075), transparent 62%),
    radial-gradient(760px 420px at 88% 12%, rgba(0,168,107,.055), transparent 60%),
    radial-gradient(680px 520px at 78% 86%, rgba(0,87,184,.05),  transparent 65%),
    radial-gradient(520px 380px at 6% 78%,  rgba(0,160,227,.045), transparent 60%),
    linear-gradient(180deg,#F8FAFC 0%, #f2f6fb 55%, #F8FAFC 100%);
  background-attachment:fixed;
}
@media (max-width:860px){ body{background-attachment:scroll} }

/* keep the header/topbar crisp above the ambient wash */
header{background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)}

/* breadcrumb breathing room */
.crumb{padding-top:20px;padding-bottom:18px;font-weight:600;letter-spacing:.01em}

/* ---- product showcase (left column) ---- */
.gmain{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 10px 30px rgba(15,23,42,.08),
    0 30px 60px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  position:relative;
}
.gmain:hover{
  transform:perspective(1100px) rotateX(1.2deg) rotateY(-1.6deg) scale(1.02);
  box-shadow:
    0 18px 40px rgba(15,23,42,.11),
    0 46px 90px rgba(0,87,184,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}
/* soft ambient glow pooled beneath the floating product */
.gmain::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:44px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(0,87,184,.16), transparent 75%);
  filter:blur(14px);pointer-events:none;
}
.gthumb{
  border-radius:12px;border:1.5px solid rgba(226,232,240,.9);background:rgba(255,255,255,.7);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.gthumb:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(15,23,42,.09)}
.gthumb.on{border-color:#0057B8;box-shadow:0 0 0 3px rgba(0,87,184,.14)}

/* checklist ticks pick up the secondary accent */
.checklist li span{color:#00A86B;font-weight:800}

/* info tabs as soft pills */
.tabs2{gap:8px;border-bottom:none;padding-bottom:2px;flex-wrap:wrap}
.tab2{
  border:1px solid rgba(226,232,240,.9);border-radius:999px;padding:9px 18px;
  background:rgba(255,255,255,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .3s ease;
}
.tab2:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(15,23,42,.07)}
.tab2.on{
  background:linear-gradient(135deg,#0066d6,#0057B8);color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(0,87,184,.28);
}
.tabpane.on{
  background:rgba(255,255,255,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:20px;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}

/* ---- configuration panel: floating glass card ---- */
.panel{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.75);
  border-radius:20px;
  padding:26px;
  box-shadow:
    0 10px 30px rgba(15,23,42,.08),
    0 30px 60px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.panel h1{font-size:24px;font-weight:800;letter-spacing:-.02em;color:#0f172a}
.rate{color:#64748b}
.rate b{color:#f59e0b}

/* field labels */
.opt label{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#475569;margin-bottom:7px;display:block;
}

/* premium dropdowns: custom chevron, soft focus ring, hover lift */
.opt select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;
  border:1.5px solid rgba(226,232,240,.95);
  border-radius:14px;
  padding:13px 42px 13px 15px;
  font-size:15px;font-weight:600;color:#0f172a;font-family:inherit;
  background:rgba(255,255,255,.85) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.opt select:hover{border-color:#94a3b8;transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.07)}
.opt select:focus{outline:none;border-color:#0057B8;box-shadow:0 0 0 4px rgba(0,87,184,.13),0 6px 16px rgba(15,23,42,.06)}
.opt{margin-bottom:15px}

/* numeric dimension/quantity inputs (.szrow/.custom-qty — Transfer Stickers'
   custom width/height and custom-quantity fields) get the same premium shape */
.szrow input,.custom-qty input{
  border:1.5px solid rgba(226,232,240,.95);border-radius:14px;
  background:rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.szrow input:hover,.custom-qty input:hover{border-color:#94a3b8;transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.07)}
.szrow input:focus,.custom-qty input:focus{outline:none;border-color:#0057B8;box-shadow:0 0 0 4px rgba(0,87,184,.13),0 6px 16px rgba(15,23,42,.06)}

/* spec-card compatibility: on the Blueprint-engine variant pages js/site.js
   groups .opt fields into .spec-card sections and injects its own select CSS at
   runtime (after this file loads) — these higher-specificity rules keep the
   premium dropdown shape/chevron winning inside those cards too */
.panel .spec-card{background:transparent;border:none;box-shadow:none;padding:0}
.panel .spec-card .opt select{
  border:1.5px solid rgba(226,232,240,.95);border-radius:14px;
  padding:13px 42px 13px 15px;box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.panel .spec-card .opt select:hover{border-color:#94a3b8;box-shadow:0 6px 16px rgba(15,23,42,.07)}
.panel .spec-card .opt select:focus-visible{outline:none;border-color:#0057B8;box-shadow:0 0 0 4px rgba(0,87,184,.13)}
.panel .spec-card>.spec-card-t{color:#475569;letter-spacing:.06em}

/* tooltip glyphs */
.opt label span[title]{color:#94a3b8;cursor:help;font-weight:600;transition:color .3s ease}
.opt label span[title]:hover{color:#0057B8}

/* Business Card Type switcher boxes */
.bctype-box{
  border-radius:14px;border:1.5px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.8);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.bctype-box:hover{border-color:#0057B8;transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,87,184,.14)}
.bctype-box.on{
  border-color:#0057B8;background:linear-gradient(180deg,#f0f7ff,#e8f2fe);
  box-shadow:0 6px 16px rgba(0,87,184,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
.bctype-box svg{transition:transform .3s ease}
.bctype-box:hover svg{transform:scale(1.12)}
.bctype-check{background:linear-gradient(135deg,#0066d6,#0057B8);box-shadow:0 3px 8px rgba(0,87,184,.4)}

/* price display */
.price-box{
  background:linear-gradient(135deg, rgba(240,249,244,.9), rgba(232,244,255,.9));
  border:1px solid rgba(255,255,255,.8);
  border-radius:16px;padding:17px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(15,23,42,.05);
  flex-wrap:wrap;
}
.price-box .ppiece{flex-basis:100%;text-align:right;margin-top:2px}
.price-box .lbl{color:#475569;letter-spacing:.03em}
.price-box .amt{color:#00A86B;letter-spacing:-.02em;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.ppiece{color:#64748b}

/* ---- CTAs ---- */
.panel .btn{
  border-radius:14px;padding:15px 26px;font-size:14.5px;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(135deg,#0066d6 0%,#0057B8 100%);
  box-shadow:0 8px 22px rgba(0,87,184,.32), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, filter .3s ease;
  width:100%;margin-bottom:10px;
}
.panel .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,87,184,.42), 0 0 24px rgba(0,102,214,.22), inset 0 1px 0 rgba(255,255,255,.25);
  filter:brightness(1.05);
  background:linear-gradient(135deg,#0066d6 0%,#0057B8 100%);
}
.panel .btn:active{transform:translateY(0) scale(.985);box-shadow:0 5px 14px rgba(0,87,184,.3)}
/* the outlined secondary CTA (Design Online) keeps its inline colors; upgrade shape only */
.panel .btn[style]{box-shadow:0 4px 14px rgba(15,23,42,.07)}
.panel .btn[style]:hover{box-shadow:0 10px 24px rgba(0,87,184,.16)}

.buylinks a{font-weight:700;color:#0057B8;transition:color .3s ease}
.buylinks a:hover{color:#003f86;text-decoration:underline}

/* ---- supporting sections as soft layers ---- */
.sec.alt{background:rgba(245,248,251,.6)}
.way{
  background:rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.75);border-radius:18px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
  transition:transform .3s ease, box-shadow .3s ease;
}
.way:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,23,42,.09)}
.way .num{background:linear-gradient(135deg,#0066d6,#0057B8);box-shadow:0 6px 14px rgba(0,87,184,.3)}

/* FAQ accordions */
.faq details{
  background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.75);border-radius:14px;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
  transition:box-shadow .3s ease;
}
.faq details:hover{box-shadow:0 10px 24px rgba(15,23,42,.07)}
.faq details[open]{box-shadow:0 12px 28px rgba(0,87,184,.09)}

/* ---- transparent-plastic note card (plastic page) ---- */
#sidesNote{
  border-radius:12px;background:rgba(232,244,255,.8);border:1px solid rgba(0,87,184,.14);
  padding:10px 13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---- sticker-type tile switcher (.sktype) — same concept as .bctype-box,
   different classname on the Custom Stickers configurator ---- */
.sktype{
  border-radius:14px;border:1.5px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.8);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.sktype:hover{border-color:#0057B8;transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,87,184,.14)}
.sktype.on{
  border-color:#0057B8;background:linear-gradient(180deg,#f0f7ff,#e8f2fe);
  box-shadow:0 6px 16px rgba(0,87,184,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
.sktype .ti{transition:transform .3s ease}
.sktype:hover .ti{transform:scale(1.12)}
.sktype .ckb{background:linear-gradient(135deg,#0066d6,#0057B8);box-shadow:0 3px 8px rgba(0,87,184,.4)}

/* ---- bottom review/template tab strip (.pdtabs/.pdtab) — pill treatment ---- */
.pdtabs{gap:8px;border-bottom:none;padding-bottom:2px}
.pdtab{
  border:1px solid rgba(226,232,240,.9);border-radius:999px;padding:10px 20px;
  background:rgba(255,255,255,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .3s ease;
}
.pdtab:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(15,23,42,.07)}
.pdtab.on{
  background:linear-gradient(135deg,#0066d6,#0057B8);color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(0,87,184,.28);
}
.pdquote{
  background:rgba(232,244,255,.7);border-left:none;border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  position:relative;
}
.pdquote::before{content:'';position:absolute;left:0;top:12%;bottom:12%;width:4px;border-radius:2px;background:linear-gradient(180deg,#0066d6,#00A86B)}
.rvcard{
  background:rgba(255,255,255,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.75);border-radius:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:transform .3s ease, box-shadow .3s ease;
}
.rvcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.08)}
.ptable{border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.ptable thead{background:rgba(0,87,184,.06)}

/* ---- motion hygiene ---- */
@media (prefers-reduced-motion: reduce){
  .gmain,.gmain:hover,.gthumb,.tab2,.bctype-box,.panel .btn,.way,.opt select,.sktype,.pdtab,.rvcard{transition:none;transform:none}
}