/* niptonline.se – Kassa. Scoped under .niptco så den inte krockar med temat. */

.niptco{
  --cream:#f6efe6;
  --sand:#efe7db;
  --white:#ffffff;
  --ink:#21243b;
  --ink-soft:#3b3e56;
  --body:#736c66;
  --muted:#9c948b;
  --rose:#b5677a;
  --rose-deep:#9c5a6c;
  --rose-hover:#a3576a;
  --rose-pale:#f7dfe2;
  --blush:#f7e7e4;
  --mist:#e9ddd3;
  --line:#e6dccc;
  --field-line:#dccfbe;
  --ok:#4f7a5f;
  --err:#b23b4e;
  --shadow: 0 1px 2px rgba(33,36,59,.04), 0 14px 34px -14px rgba(33,36,59,.16);
  --r-lg:24px; --r-md:16px; --r-sm:12px; --r-pill:9999px;
  --serif:'Recoleta', 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Neue Haas Grotesk', 'Helvetica Neue', 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --disp-soft:"SOFT" 60, "WONK" 0;

  max-width:1140px;
  margin:0 auto;
  padding:8px 0 64px;
  font-family:var(--sans);
  color:var(--body);
  font-size:15px;
  line-height:1.55;
}
.niptco *,.niptco *::before,.niptco *::after{ box-sizing:border-box; }
.niptco h1,.niptco h2{ margin:0; font-family:var(--serif); font-weight:700; color:var(--ink); font-optical-sizing:auto; font-variation-settings:var(--disp-soft),"wght" 700; text-wrap:balance; }
.niptco p{ margin:0; }
.niptco a{ color:var(--rose-deep); }
.niptco :focus-visible{ outline:2px solid var(--rose); outline-offset:2px; border-radius:4px; }
.niptco-sr{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---- header + progress ---- */
.niptco-head{ padding:12px 30px 8px; }
.niptco-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--rose); margin-bottom:12px;
}
.niptco-head h1{ font-size:34px; line-height:1.15; letter-spacing:-.01em; text-wrap:balance; }
.niptco-lede{ margin-top:12px; max-width:52ch; color:var(--body); }

.niptco-progress{
  display:flex; align-items:center; gap:14px;
  margin:24px 0 32px;
  padding:0 30px;
  font-size:13px; font-weight:600; color:var(--muted); flex-wrap:wrap;
}
.niptco-progress .step{ display:flex; align-items:center; gap:8px; }
.niptco-progress .dot{
  width:22px; height:22px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  border:1.5px solid var(--field-line); background:var(--white);
  font-size:12px; color:var(--muted);
}
.niptco-progress .step.done .dot{ background:var(--rose); border-color:var(--rose); color:#fff; }
.niptco-progress .step.done{ color:var(--ink-soft); }
.niptco-progress .step.active .dot{ border-color:var(--rose); color:var(--rose); }
.niptco-progress .step.active{ color:var(--ink); }
.niptco-progress .bar{ flex:1; height:1.5px; background:var(--line); min-width:16px; }
.niptco-progress .dot svg{ width:12px; height:12px; }

/* ---- layout ---- */
.niptco-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) 384px;
  gap:28px;
  align-items:start;
}
.niptco-form-col{ display:flex; flex-direction:column; gap:18px; }

.niptco-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.niptco-card-body{ padding:28px 30px; }
.niptco-card h2{ font-size:19px; }
.niptco-h2-sm{ font-size:19px; }
.niptco-hint{ font-size:13px; color:var(--muted); margin-top:4px; }
.niptco-muted{ color:var(--muted); font-weight:400; }

/* ---- valt paket ---- */
.niptco-pkg{
  position:relative; overflow:hidden;
  border:1.5px solid var(--rose-pale);
  background:linear-gradient(180deg,#ffffff 0%, #fffcfb 100%);
}
.niptco-pkg::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--rose-pale),var(--rose));
}
.niptco-pkg .niptco-card-body{ padding:26px 30px; }
.niptco-pkg-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.niptco-pkg-label{ font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--rose); }
.niptco-pkg-name{ font-family:var(--serif); font-size:25px; font-weight:640; color:var(--ink); margin-top:5px; line-height:1.1; font-optical-sizing:auto; font-variation-settings:var(--disp-soft),"wght" 640; }
.niptco-pkg-price{ font-family:var(--sans); font-weight:600; font-size:22px; letter-spacing:-0.01em; color:var(--rose-deep); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.niptco-pkg-price small{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.02em; margin-top:2px; }
.niptco-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.niptco-chip{
  font-size:12px; font-weight:600; color:var(--rose-deep);
  background:var(--blush); border-radius:var(--r-pill); padding:5px 12px;
}
.niptco-pkg-switch{ margin-top:18px; padding-top:16px; border-top:1px solid var(--mist); }
.niptco-switch-toggle{
  appearance:none; border:none; background:none; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--rose-deep);
  display:inline-flex; align-items:center; gap:6px; padding:2px;
}
.niptco-switch-toggle svg{ width:13px; height:13px; transition:transform .2s ease; }
.niptco-switch-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.niptco-switch-options{ display:none; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.niptco-switch-options.open{ display:grid; }
.niptco-opt{
  text-align:left; cursor:pointer;
  border:1.5px solid var(--field-line); background:var(--white);
  border-radius:var(--r-md); padding:13px 14px;
  font-family:var(--sans); transition:border-color .15s, background .15s;
}
.niptco-opt:hover{ border-color:var(--rose-pale); }
.niptco-opt[aria-pressed="true"]{ border-color:var(--rose); background:#fff6f8; }
.niptco-opt .on{ display:block; font-size:14px; font-weight:700; color:var(--ink); }
.niptco-opt .op{ display:block; font-size:12.5px; color:var(--body); font-variant-numeric:tabular-nums; margin-top:2px; }
.niptco-pkg-clear{ display:inline-block; margin-top:14px; padding:0; background:none; border:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.niptco-pkg-clear:hover{ color:var(--rose); }

/* ---- fält ---- */
.niptco-fields{ margin-top:20px; }
.niptco-field{ display:flex; flex-direction:column; }
.niptco-field + .niptco-field{ margin-top:16px; }
.niptco-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.niptco-row-2 .niptco-field + .niptco-field{ margin-top:0; }
.niptco-field label{
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  letter-spacing:.01em; margin-bottom:7px;
}
/* "(valfritt)"-hint i etiketter – eget klassnamn så det inte ärver
   paketväljarens .niptco-opt-box (ram/padding). */
.niptco-optional{ color:var(--muted); font-weight:500; font-size:12px; }
.niptco-field input{
  width:100%; height:48px; padding:0 15px;
  border:1px solid var(--field-line); border-radius:var(--r-sm);
  background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:15px;
  transition:border-color .15s, box-shadow .15s;
}
.niptco-field textarea{
  width:100%; padding:12px 15px;
  border:1px solid var(--field-line); border-radius:var(--r-sm);
  background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  resize:vertical; min-height:96px;
  transition:border-color .15s, box-shadow .15s;
}
.niptco-field input::placeholder,
.niptco-field textarea::placeholder{ color:#b9b0a6; }
.niptco-field input:focus,
.niptco-field textarea:focus{ outline:none; border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-pale); }
.niptco-field input[aria-invalid="true"]{ border-color:var(--err); box-shadow:0 0 0 3px rgba(178,59,78,.12); }
.niptco-field .msg{ font-size:12px; color:var(--err); margin-top:6px; min-height:0; }

/* inline valideringsmeddelanden */
.niptco-msg{
  margin:6px 0 0; font-size:12px; line-height:1.4; color:var(--err);
  display:flex; align-items:flex-start; gap:5px;
}
.niptco-msg:empty{ display:none; }
.niptco-msg::before{
  content:"!"; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-top:1px;
  border-radius:50%; background:var(--err); color:#fff;
  font-size:10px; font-weight:700; line-height:1;
}

/* Ja/Nej-boxar */
.niptco-yesno{ border:0; padding:0; margin:0; }
.niptco-yesno legend{
  padding:0; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  letter-spacing:.01em; margin-bottom:9px;
}
.niptco-yesno-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.niptco-yesno-opt{
  display:flex; align-items:center; justify-content:center; gap:9px;
  border:1.5px solid var(--field-line); border-radius:var(--r-sm);
  padding:13px 14px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:border-color .15s, background .15s, color .15s;
}
.niptco-yesno-opt:hover{ border-color:var(--rose-pale); }
.niptco-yesno-opt input{ accent-color:var(--rose); width:17px; height:17px; }
.niptco-yesno-opt:has(input:checked){ border-color:var(--rose); background:#fff6f8; color:var(--ink); }

.niptco-sub{ font-size:12px; color:var(--muted); margin-top:12px; display:flex; align-items:flex-start; gap:6px; line-height:1.45; }
.niptco-sub svg{ width:13px; height:13px; flex:none; margin-top:1px; color:var(--rose); }

.niptco-divider{ height:1px; background:var(--mist); margin:24px 0; }

.niptco-consent{
  display:flex; gap:12px; align-items:flex-start;
  font-size:13px; color:var(--body); line-height:1.5;
}
.niptco-consent input{ width:19px; height:19px; margin-top:1px; accent-color:var(--rose); flex:none; }

/* ---- summering ---- */
.niptco-rail{ position:sticky; top:24px; }
.niptco-rail .niptco-card-body{ padding:26px 28px; }
.niptco-rail-h{ font-size:16px; letter-spacing:.01em; }
.niptco-sum-pkg{ margin-top:18px; }
.niptco-sum-pkg .n{ font-family:var(--serif); font-size:20px; font-weight:640; color:var(--ink); font-optical-sizing:auto; font-variation-settings:var(--disp-soft),"wght" 640; }
.niptco-sum-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.niptco-sum-list li{ position:relative; padding-left:22px; font-size:13px; color:var(--body); line-height:1.45; }
.niptco-sum-list li::before{
  content:""; position:absolute; left:0; top:6px;
  width:12px; height:12px; border-radius:var(--r-pill);
  background:var(--blush); box-shadow:inset 0 0 0 1.5px var(--rose-pale);
}
.niptco-sum-rows{ margin-top:22px; padding-top:18px; border-top:1px solid var(--mist); display:flex; flex-direction:column; gap:11px; }
.niptco-sum-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--body); }
.niptco-sum-row .v{ font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.niptco-sum-row.free .v{ color:var(--ok); font-weight:600; }
.niptco-discount-row .v{ color:var(--ok); font-weight:600; }

/* Rabattkod */
.niptco-coupon{ margin-top:16px; }
.niptco-coupon-toggle{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--rose-deep);
  text-decoration:underline; text-underline-offset:3px;
}
.niptco-coupon-toggle[aria-expanded="true"]{ color:var(--muted); }
.niptco-coupon-panel{ margin-top:12px; }
.niptco-coupon-field{ display:flex; gap:8px; }
.niptco-coupon-field input{
  flex:1; min-width:0; padding:11px 13px;
  border:1px solid var(--field-line); border-radius:var(--r-sm); background:#fff;
  font-family:var(--sans); font-size:14px; color:var(--ink); text-transform:uppercase;
}
.niptco-coupon-field input:focus{ outline:none; border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-pale); }
.niptco-coupon-apply{
  flex:0 0 auto; padding:11px 18px; border:none; border-radius:var(--r-pill); cursor:pointer;
  background:var(--rose); color:#fff;
  font-family:var(--sans); font-size:14px; font-weight:600;
  transition:background .15s;
}
.niptco-coupon-apply:hover:not(:disabled){ background:var(--rose-hover); }
.niptco-coupon-apply:disabled{ opacity:.55; cursor:default; }
.niptco-coupon-msg{ margin-top:8px; font-size:13px; line-height:1.45; color:var(--err); }
.niptco-coupon-msg.ok{ color:var(--ok); }
.niptco-coupon-msg:empty{ display:none; }
.niptco-coupon-applied{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:4px; padding:10px 13px;
  background:var(--blush); border-radius:var(--r-sm);
  font-size:13.5px; color:var(--ink);
}
.niptco-coupon-remove{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--rose-deep);
  text-decoration:underline; text-underline-offset:3px;
}
.niptco-sum-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--mist);
}
.niptco-sum-total .l{ font-size:14px; font-weight:700; color:var(--ink); }
.niptco-sum-total .t{ font-family:var(--sans); font-weight:600; font-size:29px; letter-spacing:-0.01em; color:var(--ink); font-variant-numeric:tabular-nums; }

/* betalsätt */
.niptco-pay-methods{ border:0; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:8px; }
.niptco-method{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--field-line); border-radius:var(--r-sm);
  padding:12px 14px; cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:border-color .15s, background .15s;
}
.niptco-method:hover{ border-color:var(--rose-pale); }
.niptco-method input{ accent-color:var(--rose); width:17px; height:17px; }
.niptco-method:has(input:checked){ border-color:var(--rose); background:#fff6f8; color:var(--ink); }

/* Stripe Payment Element */
.niptco-pe-wrap{ margin-top:20px; min-height:44px; }
#niptco-payment-element{ }
.niptco-card-errors{ font-size:12.5px; color:var(--err); margin:9px 0 0; min-height:0; }
.niptco-card-errors:empty{ display:none; }

.niptco-pay{
  width:100%; margin-top:16px; height:54px;
  border:none; border-radius:var(--r-pill); cursor:pointer;
  background:var(--rose); color:#fff;
  font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.01em;
  box-shadow:0 12px 26px -8px rgba(181,103,122,.5);
  transition:transform .16s ease, background .16s ease;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.niptco-pay svg{ width:16px; height:16px; }
.niptco-pay:hover:not(:disabled){ transform:translateY(-2px); background:var(--rose-hover); }
.niptco-pay:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

.niptco-redirect-note{
  margin-top:13px; font-size:12px; color:var(--muted);
  display:flex; align-items:flex-start; gap:7px; line-height:1.45;
}
.niptco-redirect-note svg{ width:13px; height:13px; flex:none; margin-top:1px; }

.niptco-error{
  margin-top:14px; padding:12px 14px;
  background:#fdf1f2; border:1px solid #f0cdd3; border-radius:var(--r-sm);
  font-size:13px; color:var(--err); line-height:1.5;
}

.niptco-trust{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--mist);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.02em;
}
.niptco-trust .ppair{ display:flex; align-items:center; gap:6px; }
.niptco-trust svg{ width:14px; height:14px; }
.niptco-trust .tags{ display:flex; gap:6px; margin-left:auto; }
.niptco-trust .tag{
  font-size:10px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-soft); background:var(--sand);
  border:1px solid var(--line); border-radius:6px; padding:3px 7px;
}

/* overlay */
.niptco-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(246,239,230,.86);
  backdrop-filter:blur(2px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  text-align:center; padding:32px;
  font-family:var(--sans); font-size:15px; color:var(--ink-soft);
}
/* hidden-attributet måste vinna över display:flex ovan */
.niptco-overlay[hidden]{ display:none; }
.niptco-error[hidden]{ display:none; }
.niptco-overlay p{ max-width:32ch; }
.niptco-spinner{
  width:44px; height:44px; border-radius:50%;
  border:3px solid var(--rose-pale); border-top-color:var(--rose);
  animation:niptco-spin .9s linear infinite;
}
@keyframes niptco-spin{ to{ transform:rotate(360deg); } }

@media (max-width: 920px){
  .niptco-grid{ grid-template-columns:1fr; }
  /* Naturlig ordning på mobil: valt paket -> dina uppgifter -> summering + betala.
     (Ingen order-omkastning – summeringen ska ligga sist, inte överst.) */
  .niptco-rail{ position:static; }
  .niptco-switch-options{ grid-template-columns:1fr; }
  .niptco-head h1{ font-size:28px; }
}
@media (max-width: 560px){
  .niptco-row-2{ grid-template-columns:1fr; gap:16px; }
  .niptco-row-2 .niptco-field + .niptco-field{ margin-top:16px; }
  .niptco-card-body,.niptco-pkg .niptco-card-body,.niptco-rail .niptco-card-body{ padding:22px 20px; }
  .niptco-head{ padding-left:20px; padding-right:20px; }
  .niptco-progress{ padding-left:20px; padding-right:20px; }
}
@media (prefers-reduced-motion: reduce){
  .niptco *{ transition:none!important; animation:none!important; }
  .niptco-pay:hover:not(:disabled){ transform:none; }
  .niptco-spinner{ animation:niptco-spin 1.4s linear infinite; }
}