/*
 * Banner-preview-card + "Personalise your banner" extras-fieldset
 * component styles, shared by the Cart and Checkout pages (see
 * bb_render_banner_preview() / bb_render_extras_panel() in
 * includes/site-birthdaybanner.php -- both markup-only functions, this is
 * their one shared stylesheet so the two pages never drift out of sync
 * with two copies of the same rules).
 *
 * Loaded on is_cart() || is_checkout() only (site-birthdaybanner.php,
 * "bb-order-shared" enqueue).
 */

/* --- Banner preview card (standalone, or a carousel slide) --- */

.bb-banner-preview { margin: 0 0 22px; }

.bb-checkout-visual-eyebrow {
  font-family: var(--bb-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bb-muted);
  display: block;
  margin: 0 0 10px;
}
.bb-checkout-visual-card {
  background: var(--bb-white);
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: var(--bb-radius-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
}
.bb-checkout-visual-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  background: var(--bb-gradient-135);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-checkout-visual-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-checkout-visual-fallback-icon { font-size: 42px; }
.bb-checkout-visual-body {
  padding: 18px 22px 22px;
}
.bb-checkout-visual-body h3 { margin: 0 0 4px; font-size: 17px; }
.bb-checkout-visual-meta {
  font-family: var(--bb-font-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bb-blue);
  margin: 0 0 6px;
}
.bb-checkout-visual-desc { margin: 0; font-size: 13.5px; color: var(--bb-body); line-height: 1.55; }
.bb-checkout-visual-card + .bb-checkout-visual-card { margin-top: 14px; }

/* --- Multi-banner carousel (2+ banners in the cart) ---
   One full-size slide visible at a time (same card markup/styling as the
   single-banner case above) with prev/next arrows + dot nav, rather than
   stacking N cards. Slides sit in normal flow (not stretched/absolutely
   positioned) -- only the active one is ever displayed, so no shared
   height is needed; the card just resizes to whichever slide is showing. */

.bb-checkout-visual-carousel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bb-checkout-visual-track {
  position: relative;
}
.bb-checkout-visual-slide {
  display: none;
}
.bb-checkout-visual-slide.is-active { display: flex; }
.bb-checkout-visual-nav {
  /* Anchored to .bb-checkout-visual-stage (fixed 4:3 aspect ratio), which
     stays a stable target regardless of how tall the rest of the slide's
     text content is. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, .12);
  background: var(--bb-white);
  color: var(--bb-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sh-card);
  z-index: 2;
}
.bb-checkout-visual-nav:hover { border-color: var(--bb-blue); color: var(--bb-blue); }
.bb-checkout-visual-prev { left: 10px; }
.bb-checkout-visual-next { right: 10px; }
.bb-checkout-visual-dots {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.bb-checkout-visual-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: width .16s var(--bb-ease), background .16s var(--bb-ease);
}
.bb-checkout-visual-dot.is-active { width: 20px; background: var(--bb-blue); }

/* --- Extras / upsell fieldset --- */

.bb-checkout-extras {
  position: relative;
  overflow: hidden;
  background: var(--bb-white);
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: var(--bb-radius-card);
  padding: 20px 24px 6px;
  margin: 0 0 22px;
}
/* Same 3px gradient-135 bar the checkout cards use (checkout-birthdaybanner.css) --
   ties this card back to the rest of the site's shared accent line. */
.bb-checkout-extras::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--bb-gradient-135);
}
/* <summary>, not a plain heading -- native disclosure toggle, so it needs
   its own cursor/marker treatment on top of the heading styling. Same
   blue-outline icon badge the checkout cards use for their own headings
   (see checkout-birthdaybanner.css). */
.bb-checkout-extras-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  font-family: var(--bb-font-heading);
  color: var(--bb-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bb-checkout-extras-title::-webkit-details-marker { display: none; }
.bb-checkout-extras-title::before {
  content: '🎁';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1.5px solid var(--bb-blue);
  border-radius: 9px;
  background: var(--bb-surface-blue);
  font-size: 15px;
  line-height: 1;
}
.bb-checkout-extras-title::after {
  content: '\25BE';
  margin-left: 8px;
  color: var(--bb-muted);
  transition: transform .16s var(--bb-ease);
}
.bb-checkout-extras[open] .bb-checkout-extras-title::after { transform: rotate(180deg); }
.bb-checkout-extras-hint {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bb-font-body);
  font-size: 12.5px;
  font-weight: 600;
}
.bb-checkout-extras-count { color: var(--bb-muted); }
/* Explicit "See more"/"See less" text -- the chevron alone wasn't a clear
   enough "click here to open/close this" affordance. Only one of the two
   labels is ever visible, swapped by the <details>'s own [open] state (no
   JS needed). */
.bb-checkout-extras-toggle-label {
  color: var(--bb-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bb-checkout-extras-title:hover .bb-checkout-extras-toggle-label { color: var(--bb-coral); }
.bb-checkout-extras-less { display: none; }
.bb-checkout-extras[open] .bb-checkout-extras-more { display: none; }
.bb-checkout-extras[open] .bb-checkout-extras-less { display: inline; }
.bb-checkout-extras-sub { margin: 10px 0 14px; font-size: 12.5px; color: var(--bb-muted); }
.bb-checkout-extra-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--bb-border);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .16s var(--bb-ease), background .16s var(--bb-ease);
}
.bb-checkout-extra-row:has(input:checked) {
  border-color: var(--bb-blue);
  background: rgba(79, 130, 195, .05);
}
.bb-checkout-extra-row input { width: 18px; height: 18px; accent-color: var(--bb-blue); cursor: pointer; flex-shrink: 0; }
.bb-checkout-extra-label { flex: 1; font-size: 14px; color: var(--bb-ink); }
.bb-checkout-extra-price { font-family: var(--bb-font-heading); font-size: 13px; font-weight: 700; color: var(--bb-ink); }