/* ============================================
   CS Boost Public Styles v2
   Click Studio — clickstudio.co.za
   ============================================ */

:root {
  --csb-primary:  #1a1917;
  --csb-accent:   #c9a96e;
  --csb-text:     #1a1917;
  --csb-bg:       #f5f4f0;
  --csb-border:   #e2dfd9;
  --csb-mid:      #6b6860;
  --csb-ghost:    #a8a49d;
  --csb-white:    #ffffff;
  --csb-green:    #2d6641;
  --csb-red:      #a82820;
  --csb-radius:   0px;
  --csb-on-primary: #ffffff;
}

/* ════════════════════════════════════════════
   FREE GIFT WIDGET
════════════════════════════════════════════ */

/* Scoped reset — only inside widget */
.csb-gift-widget,
.csb-gift-widget * {
  box-sizing: border-box !important;
}

.csb-gift-widget {
  display: block !important;
  background: var(--csb-white) !important;
  border: 1px solid var(--csb-border) !important;
  border-top: 3px solid var(--csb-accent) !important;
  margin: 20px 0 !important;
  font-family: inherit !important;
  -webkit-font-smoothing: antialiased;
  position: relative !important;
  overflow: visible !important;
}

/* Header */
.csb-gift-widget .csb-gift-header {
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid var(--csb-border) !important;
}

.csb-gift-widget .csb-gift-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--csb-accent) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1 !important;
  background: none !important;
  border: none !important;
}

.csb-gift-widget .csb-gift-headline {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--csb-text) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  border: none !important;
  background: none !important;
}

.csb-gift-widget .csb-gift-subhead {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--csb-mid) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

.csb-gift-widget .csb-gift-urgency {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--csb-red) !important;
  margin: 8px 0 0 !important;
  padding: 4px 10px !important;
  background: #fdf2f1 !important;
  border: 1px solid #f0c4c1 !important;
  line-height: 1 !important;
}

/* Options grid */
.csb-gift-widget .csb-gift-options {
  display: flex !important;
  flex-wrap: nowrap !important;
  border-bottom: 1px solid var(--csb-border) !important;
}

/* Single option card */
.csb-gift-widget .csb-gift-option {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  cursor: pointer !important;
  position: relative !important;
  border: none !important;
  border-right: 1px solid var(--csb-border) !important;
  background: var(--csb-white) !important;
  transition: background .15s !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: 2px solid transparent !important;
  outline-offset: -2px !important;
}
.csb-gift-widget .csb-gift-option:last-child {
  border-right: none !important;
}
.csb-gift-widget .csb-gift-option:hover {
  background: #fafaf8 !important;
}
.csb-gift-widget .csb-gift-option.csb-selected {
  outline-color: var(--csb-primary) !important;
  background: var(--csb-white) !important;
  z-index: 1;
}

/* Hidden radio */
.csb-gift-widget .csb-gift-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ── IMAGE AREA — uses aspect-ratio, NOT padding-top (immune to resets) ── */
.csb-gift-widget .csb-gift-img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  background: var(--csb-bg) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.csb-gift-widget .csb-gift-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  position: static !important;
  top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

/* Info block */
.csb-gift-widget .csb-gift-info {
  padding: 10px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
}

.csb-gift-widget .csb-gift-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--csb-text) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.csb-gift-widget .csb-gift-desc {
  font-size: 11px !important;
  font-weight: 300 !important;
  color: var(--csb-mid) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.csb-gift-widget .csb-gift-value {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--csb-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Selected tick */
.csb-gift-widget .csb-gift-check {
  display: none !important;
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--csb-primary) !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  z-index: 2 !important;
}
.csb-gift-widget .csb-gift-option.csb-selected .csb-gift-check {
  display: flex !important;
}

/* Footer note */
.csb-gift-widget .csb-gift-note {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-style: italic !important;
  color: var(--csb-ghost) !important;
  padding: 9px 14px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  background: none !important;
  border: none !important;
}

/* Required alert */
.csb-gift-required {
  display: none;
  font-size: 12px !important;
  color: var(--csb-red) !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  background: #fdf2f1 !important;
  border-top: 1px solid #f0c4c1 !important;
}
.csb-gift-required.show { display: block !important; }

/* Shake animation */
@keyframes csb-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.csb-gift-shake { animation: csb-shake .3s ease; }

/* Cart badges */
.csb-cart-gift-badge {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  background: var(--csb-accent) !important;
  color: #fff !important;
}
.csb-cart-bump-badge {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  background: var(--csb-primary) !important;
  color: #fff !important;
}
.csb-free-badge {
  font-weight: 700 !important;
  color: var(--csb-green) !important;
  letter-spacing: .04em !important;
}

/* ════════════════════════════════════════════
   ORDER BUMP — all via CSS vars
════════════════════════════════════════════ */

.csb-bump,
.csb-bump * {
  box-sizing: border-box !important;
}

.csb-bump {
  position: relative !important;
  margin: 16px 0 !important;
  font-family: inherit !important;
  -webkit-font-smoothing: antialiased;
}

/* CLEAN */
.csb-bump-clean {
  background: var(--csb-bg) !important;
  border: 1px solid var(--csb-border) !important;
  border-left: 3px solid var(--csb-accent) !important;
}
.csb-bump-clean.csb-bump-accepted {
  background: var(--csb-white) !important;
  border-color: var(--csb-accent) !important;
}

/* BOLD */
.csb-bump-bold {
  background: var(--csb-bg) !important;
  border: 2px solid var(--csb-primary) !important;
}

/* OUTLINED */
.csb-bump-outlined {
  background: var(--csb-white) !important;
  border: 1.5px dashed var(--csb-border) !important;
}
.csb-bump-outlined.csb-bump-accepted {
  border-style: solid !important;
  border-color: var(--csb-accent) !important;
}

/* Badge */
.csb-bump .csb-bump-badge {
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  background: var(--csb-accent) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  line-height: 1.6 !important;
  border: none !important;
}

/* Inner */
.csb-bump .csb-bump-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 14px 10px !important;
}

.csb-bump .csb-bump-img {
  width: 72px !important;
  height: 72px !important;
  flex-shrink: 0 !important;
  background: var(--csb-white) !important;
  border: 1px solid var(--csb-border) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.csb-bump .csb-bump-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 5px !important;
  margin: 0 !important;
  position: static !important;
}

.csb-bump .csb-bump-eyebrow {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--csb-accent) !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.csb-bump .csb-bump-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--csb-text) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.csb-bump .csb-bump-desc {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--csb-mid) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}
.csb-bump .csb-bump-pricing {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.csb-bump .csb-bump-was {
  font-size: 12px !important;
  color: var(--csb-ghost) !important;
  text-decoration: line-through !important;
}
.csb-bump .csb-bump-now {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--csb-text) !important;
}

/* CTA — no hardcoded dark, uses vars */
.csb-bump .csb-bump-cta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  border-top: 1px solid var(--csb-border) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .15s !important;
  user-select: none !important;
  margin: 0 !important;
}
.csb-bump .csb-bump-cta:hover {
  background: rgba(0,0,0,.025) !important;
}
.csb-bump .csb-bump-cta.csb-accepted {
  border-top-color: var(--csb-accent) !important;
}

.csb-bump .csb-bump-check { display: none !important; }

.csb-bump .csb-bump-box {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--csb-border) !important;
  background: var(--csb-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  transition: background .15s, border-color .15s, color .15s !important;
  border-radius: var(--csb-radius) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.csb-bump .csb-bump-cta.csb-accepted .csb-bump-box {
  background: var(--csb-primary) !important;
  border-color: var(--csb-primary) !important;
  color: var(--csb-white) !important;
}

.csb-bump .csb-bump-cta-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--csb-text) !important;
  flex: 1 !important;
  letter-spacing: .02em !important;
  margin: 0 !important;
  padding: 0 !important;
}
.csb-bump .csb-bump-cta.csb-accepted .csb-bump-cta-label {
  color: var(--csb-primary) !important;
}

/* Loading */
.csb-bump .csb-bump-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.csb-bump .csb-bump-spinner {
  width: 22px !important; height: 22px !important;
  border: 2px solid var(--csb-border) !important;
  border-top-color: var(--csb-primary) !important;
  border-radius: 50% !important;
  animation: csb-spin .6s linear infinite !important;
}
@keyframes csb-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .csb-gift-widget .csb-gift-options { flex-wrap: wrap !important; }
  .csb-gift-widget .csb-gift-option { flex: 1 1 calc(50% - 1px) !important; }
  .csb-bump .csb-bump-inner { gap: 10px !important; }
  .csb-bump .csb-bump-img { width: 56px !important; height: 56px !important; }
}