/* GoedOnline — package card. Zakelijk en fijn afgewerkt. */

.package {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  gap: var(--sp-5);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}

.package:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--color-slate-300);
}

.package--featured {
  background: var(--color-slate-900);
  color: rgba(255, 255, 255, .9);
  border-color: var(--color-slate-800);
  box-shadow: var(--sh-lg);
}

.package--featured h3,
.package--featured .package__title {
  color: #fff;
}

.package--featured .package__sub,
.package--featured .package__feat li {
  color: rgba(255, 255, 255, .82);
}

.package--featured .package__price-old {
  color: rgba(255, 255, 255, .45);
}

.package--featured .package__price-now {
  color: #fff;
}

.package--featured .package__cta {
  --btn-bg: #fff;
  --btn-fg: var(--color-slate-900);
  --btn-bd: transparent;
  --btn-bg-hover: var(--color-cream-50);
}

.package--featured .package__details {
  color: rgba(255, 255, 255, .55);
}

.package__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-full);
  box-shadow: var(--sh-sm);
}

.package__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.package__best-voor {
  align-self: flex-start;
}

.package__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.package__sub {
  font-size: var(--fs-sm);
  color: var(--color-mute);
  margin: 0;
  line-height: var(--lh-snug);
}

.package__price {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.package--featured .package__price {
  border-color: rgba(255, 255, 255, .1);
}

.package__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.package__price-old {
  font-size: 0.9375rem;
  color: var(--color-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-feature-settings: "tnum";
}

.package__price-now {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--color-primary);
  font-feature-settings: "tnum";
}

.package__price-suffix {
  font-size: var(--fs-xs);
  color: var(--color-mute);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

.package__save {
  align-self: flex-start;
}

.package__feat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.package__feat li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
  line-height: var(--lh-snug);
}

.package__feat li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background-color: var(--color-cobalt-100);
  margin-top: 0.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4FB8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 20 7'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.package--featured .package__feat li::before {
  background-color: rgba(255, 255, 255, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 20 7'%3E%3C/polyline%3E%3C/svg%3E");
}

.package__cta-wrap {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.package__cta {
  width: 100%;
}

.package__details {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-mute);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

/* CMS toggle inside each package card */
.package__cms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--color-slate-50);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}

.package--featured .package__cms {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1);
}

.package__cms-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sp-3) var(--sp-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  color: var(--color-ink-soft);
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
  font-family: inherit;
}

.package--featured .package__cms-opt {
  color: rgba(255, 255, 255, .7);
}

.package__cms-opt:hover {
  background: rgba(255, 255, 255, .5);
  color: var(--color-ink);
}

.package--featured .package__cms-opt:hover {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .9);
}

.package__cms-opt.is-active {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--sh-xs);
}

.package--featured .package__cms-opt.is-active {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: none;
}

.package__cms-title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.package__cms-sub {
  font-size: 0.6875rem;
  color: var(--color-mute);
  letter-spacing: 0;
  font-weight: var(--weight-regular);
}

.package--featured .package__cms-sub {
  color: rgba(255, 255, 255, .55);
}

.package__cms-opt.is-active .package__cms-sub {
  color: var(--color-ink-soft);
}

.package--featured .package__cms-opt.is-active .package__cms-sub {
  color: rgba(255, 255, 255, .75);
}

/* Add-on grid below packages */
.addons {
  margin-top: var(--sp-9);
  padding-top: var(--sp-9);
  border-top: 1px solid var(--color-line-soft);
}

.addons__head {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
}

.addons__head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: var(--lh-snug);
}

.addons__lead {
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: var(--lh-relaxed);
  margin: 0;
}

.addons__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .addons__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin-inline: auto;
  }
}

.addon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}

.addon:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--color-slate-200);
}

.addon__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.addon__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--color-slate-50);
  color: var(--color-slate-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.addon__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-mute);
  margin-bottom: 2px;
}

.addon__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0;
  line-height: var(--lh-snug);
}

.addon__desc {
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
  line-height: var(--lh-relaxed);
  margin: 0;
}

.addon__feat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.addon__feat li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

.addon__feat li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-cobalt-500);
  flex-shrink: 0;
}

.addon__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  font-family: var(--font-display);
}

.addon__price-old {
  font-size: 0.875rem;
  color: var(--color-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-feature-settings: "tnum";
  font-weight: var(--weight-regular);
}

.addon__price-now {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: "tnum";
}

.addon__price-suffix {
  font-size: 0.75rem;
  color: var(--color-mute);
  font-weight: var(--weight-regular);
}

.addons__hint {
  text-align: center;
  color: var(--color-mute);
  font-size: 0.8125rem;
  margin-top: var(--sp-5);
}

/* Add-on active/locked states */
.addon { position: relative; }

.addon__state-badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--r-full);
  background: var(--color-cobalt-100);
  color: var(--color-cobalt-700);
}

.addon__state-badge--locked {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

.addon.is-active {
  border-color: var(--color-cobalt-500);
  box-shadow: var(--sh-glow), var(--sh-md);
}

.addon.is-active .addon__state-badge {
  display: inline-flex;
}

.addon.is-active .addon__icon {
  background: var(--color-cobalt-100);
  color: var(--color-cobalt-700);
}

.addon--locked {
  background: var(--color-cream-50);
  border-style: solid;
}

.addon--locked .addon__state-badge {
  display: inline-flex;
}

.addon--locked .addon__icon {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

.addon__cta.is-disabled {
  pointer-events: none;
  opacity: 0.7;
  background: var(--color-cobalt-100);
  color: var(--color-cobalt-700);
  border-color: var(--color-cobalt-300);
}

.addon__lock-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--color-slate-50);
  border: 1px solid var(--color-line);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.addon__lock-note svg {
  flex-shrink: 0;
  color: var(--color-slate-600);
  margin-top: 1px;
}

/* Cart "Verplicht" indicator (replaces remove link for hosting) */
.cart-locked-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--r-full);
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

.qty-locked {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-slate-50);
  border: 1px solid var(--color-line);
  border-radius: var(--r-sm);
  font-feature-settings: "tnum";
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}

/* Requires-note (used by e-commerce -> WordPress dependency) */
.addon__requires-note {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--color-cobalt-100);
  border: 1px solid rgba(42, 79, 184, .15);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  color: var(--color-cobalt-700);
  line-height: 1.45;
}

.addon__requires-note svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Adjust addon button-as-button visual parity */
.addon__cta {
  cursor: pointer;
}

.addon__cta.is-disabled {
  cursor: default;
}

/* On larger viewports we now have 4 add-ons → flexible 2-up wrap */
@media (min-width: 1100px) {
  .addons__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 920px;
  }
}

/* Two-step flow: package CTA dual labels */
.package__cta {
  position: relative;
}

.package__cta-active {
  display: none;
}

.package--selected {
  border-color: var(--color-cobalt-500);
  box-shadow: var(--sh-glow), var(--sh-md);
}

.package--selected .package__cta {
  --btn-bg: var(--color-success);
  --btn-fg: #fff;
  --btn-bg-hover: var(--color-success);
  cursor: default;
}

.package--selected .package__cta::after {
  display: none;
}

.package--selected .package__cta-default { display: none; }
.package--selected .package__cta-active { display: inline; }

/* Featured (donker) pakket: andere selected-look */
.package--featured.package--selected {
  border-color: var(--color-cobalt-400);
  box-shadow: 0 0 0 4px rgba(110, 137, 230, .25), var(--sh-xl);
}

/* Nudge boven add-ons na selectie */
.addons__nudge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-cobalt-100);
  border: 1px solid rgba(42, 79, 184, .15);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  color: var(--color-cobalt-700);
  margin: 0 auto;
}

.addons__nudge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--color-cobalt-600);
  color: #fff;
}

/* Continue bar onderaan add-ons */
.addons-continue {
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--r-xl);
  transition: border-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
  max-width: 920px;
  margin-inline: auto;
}

.addons-continue.is-armed {
  border-color: var(--color-slate-300);
  box-shadow: var(--sh-md);
}

.addons-continue__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  justify-content: space-between;
}

.addons-continue__summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
}

.addons-continue__label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-mute);
}

.addons-continue__value {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 1rem;
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
}

.addons-continue__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-feature-settings: "tnum";
  text-align: right;
}

.addons-continue__total-label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-mute);
}

.addons-continue__total strong {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.addons-continue__total-mo {
  font-size: 0.75rem;
  color: var(--color-mute);
}

.addons-continue__total-mo strong {
  font-size: 0.875rem;
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

.addons-continue__cta {
  flex-shrink: 0;
}

.addons-continue__cta:disabled,
.addons-continue__cta.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--color-slate-200);
  color: var(--color-slate-600);
  box-shadow: none;
}

@media (max-width: 720px) {
  .addons-continue {
    padding: var(--sp-4);
  }
  .addons-continue__inner {
    gap: var(--sp-4);
  }
  .addons-continue__total {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
  .addons-continue__cta {
    width: 100%;
  }
}

/* Disabled in-card CMS option (Onepager → no WordPress) */
.package__cms--locked {
  position: relative;
}

.package__cms-opt.is-disabled,
.package__cms-opt[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  background: transparent !important;
  color: var(--color-mute) !important;
  box-shadow: none !important;
}

.package__cms-opt.is-disabled:hover {
  background: transparent !important;
  color: var(--color-mute) !important;
}

.package__cms-opt.is-disabled .package__cms-title {
  text-decoration: line-through;
  text-decoration-color: var(--color-line);
  text-decoration-thickness: 1px;
}

.package__cms-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  color: var(--color-mute);
}

.package--featured .package__cms-opt.is-disabled .package__cms-title {
  text-decoration-color: rgba(255, 255, 255, .25);
}

/* Add-on card blocked (e.g. WordPress when only Onepager is selected) */
.addon--blocked {
  opacity: 0.55;
  background: var(--color-slate-50);
  border-style: dashed;
  pointer-events: none;
}

.addon--blocked .addon__title,
.addon--blocked .addon__price-now {
  color: var(--color-mute);
}

.addon--blocked .addon__cta {
  pointer-events: auto;
}

/* Billing toggle (monthly ↔ yearly) inside continue-bar */
.billing-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-line-soft);
}

@media (min-width: 720px) {
  .billing-toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
  }
}

.billing-toggle__label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-mute);
}

.billing-toggle__switch {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  background: var(--color-slate-50);
  border: 1px solid var(--color-line);
  border-radius: var(--r-full);
}

.billing-toggle__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}

.billing-toggle__opt:hover {
  color: var(--color-ink);
}

.billing-toggle__opt.is-active {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--sh-xs);
}

.billing-toggle__save {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--color-cobalt-100);
  color: var(--color-cobalt-700);
  border-radius: var(--r-full);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.billing-toggle__opt.is-active .billing-toggle__save {
  background: var(--color-success);
  color: #fff;
}

/* Strike-through for the "old yearly" total in continue-bar */
.addons-continue__strike {
  display: inline-block;
  margin-left: var(--sp-2);
  color: var(--color-mute);
  font-size: 0.75rem;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Cart billing badge on yearly items */
.cart-billing-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-2);
  padding: 2px 7px;
  background: var(--color-cobalt-100);
  color: var(--color-cobalt-700);
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.billing-toggle__hint {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  color: var(--color-mute);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.billing-toggle__opt.is-active .billing-toggle__hint {
  color: var(--color-ink-soft);
}