/* ──────────────────────────────────────────────────────────────
   Comply.Land button system (.cl-btn)
   One button, six decisions:
   1 Size      48px tall, 24px side padding, 44px hit target
   2 Label     16px, weight 600, sentence case, verb + object
   3 Contrast  dark label on orange, visible edge on every ground
   4 Depth     lit top edge (1px white at 16%) + soft tinted shadow
   5 Detail    pill radius, one 20px icon with a 10px gap
   6 Motion    hover 200ms, press sinks 1px, spinner then check
   ────────────────────────────────────────────────────────────── */

:root {
  --btn-h: 48px;
  --btn-h-lg: 56px;
  --btn-h-sm: 40px;
  --btn-pad: 24px;
  --btn-pad-lg: 32px;
  --btn-pad-sm: 18px;
  --btn-font: 16px;
  --btn-font-lg: 17px;
  --btn-font-sm: 14px;
  --btn-weight: 600;
  --btn-radius: 999px;
  --btn-gap: 10px;
  --btn-icon: 20px;
  --btn-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --btn-ease: cubic-bezier(0.2, 0, 0, 1);
  --btn-time: 200ms;
  --btn-shadow-orange: 0 8px 24px rgba(232, 148, 58, 0.28);
  --btn-shadow-orange-hover: 0 10px 28px rgba(232, 148, 58, 0.38);
  --btn-shadow-teal: 0 8px 24px rgba(26, 74, 74, 0.28);
  --btn-shadow-teal-hover: 0 10px 28px rgba(26, 74, 74, 0.38);
  --btn-shadow-dark: 0 8px 24px rgba(28, 25, 23, 0.22);
  --btn-shadow-pressed: 0 3px 10px rgba(28, 25, 23, 0.18);
}

/* ── 1 Size, 2 Label, 5 Detail ── */
.cl-btn.cl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  box-sizing: border-box;
  min-height: var(--btn-h);
  padding: 10px var(--btn-pad);
  /* No margin reset here: spacing around a button belongs to the page (its .x-cta rule),
     and this rule loads after page CSS, so a reset would wipe every margin-top. */
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  transition:
    background-color var(--btn-time) var(--btn-ease),
    border-color var(--btn-time) var(--btn-ease),
    color var(--btn-time) var(--btn-ease),
    box-shadow var(--btn-time) var(--btn-ease),
    transform 100ms var(--btn-ease);
}
.cl-btn.cl-btn:hover { text-decoration: none; }

/* 44px hit target even when the visual is smaller (small variant, tight rows). */
.cl-btn.cl-btn::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
  border-radius: inherit;
}

.cl-btn > svg,
.cl-btn > img,
.cl-btn.cl-btn > .cl-btn-icon {
  flex: none;
  width: var(--btn-icon);
  height: var(--btn-icon);
}

.cl-btn.cl-btn--lg { min-height: var(--btn-h-lg); padding: 12px var(--btn-pad-lg); font-size: var(--btn-font-lg); }
.cl-btn.cl-btn--sm { min-height: var(--btn-h-sm); padding: 6px var(--btn-pad-sm); font-size: var(--btn-font-sm); }
.cl-btn.cl-btn--block { display: flex; width: 100%; }
.cl-btn.cl-btn--icon { padding: 0; width: var(--btn-h); }
.cl-btn.cl-btn--icon.cl-btn--sm { width: var(--btn-h-sm); }
.cl-btn.cl-btn--icon.cl-btn--lg { width: var(--btn-h-lg); }

/* ── 3 Contrast, 4 Depth: variants (brand colours only) ── */

/* Primary: orange fill, dark label (7.3:1), lit top edge, orange-tinted shadow. */
.cl-btn.cl-btn--primary {
  background: var(--accent, #e8943a);
  border-color: var(--accent, #e8943a);
  color: #1c1917;
  box-shadow: var(--btn-edge), var(--btn-shadow-orange);
}
.cl-btn.cl-btn--primary:hover { background: var(--accent-hover, #d07a28); border-color: var(--accent-hover, #d07a28); color: #1c1917; box-shadow: var(--btn-edge), var(--btn-shadow-orange-hover); }

/* Teal: dark teal fill, white label (9.9:1). */
.cl-btn.cl-btn--teal {
  background: var(--teal, #1a4a4a);
  border-color: var(--teal, #1a4a4a);
  color: #ffffff;
  box-shadow: var(--btn-edge), var(--btn-shadow-teal);
}
.cl-btn.cl-btn--teal:hover { background: #0f3535; border-color: #0f3535; color: #ffffff; box-shadow: var(--btn-edge), var(--btn-shadow-teal-hover); }

/* Grey: warm grey fill with the orange-text rim, white label (7.4:1). Used on photo heroes. */
.cl-btn.cl-btn--grey {
  background: var(--warm-grey, #57534e);
  border-color: var(--accent-text, #9c5615);
  color: #ffffff;
  box-shadow: var(--btn-edge), var(--btn-shadow-dark);
}
.cl-btn.cl-btn--grey:hover { background: #6b6560; color: #ffffff; box-shadow: var(--btn-edge), 0 10px 28px rgba(28, 25, 23, 0.3); }

/* Dark: charcoal fill, white label (13:1). Card and band buttons on light grounds. */
.cl-btn.cl-btn--dark {
  background: var(--charcoal, #2d2d2d);
  border-color: var(--charcoal, #2d2d2d);
  color: #ffffff;
  box-shadow: var(--btn-edge), var(--btn-shadow-dark);
}
.cl-btn.cl-btn--dark:hover { background: #1c1917; border-color: #1c1917; color: #ffffff; box-shadow: var(--btn-edge), 0 10px 28px rgba(28, 25, 23, 0.3); }

/* Secondary dark: charcoal outline on light grounds. */
.cl-btn.cl-btn--secondary-dark {
  background: transparent;
  border-color: var(--charcoal, #2d2d2d);
  color: var(--charcoal, #2d2d2d);
  box-shadow: none;
}
.cl-btn.cl-btn--secondary-dark:hover { background: rgba(45, 45, 45, 0.08); }

/* Light: white fill, teal label. For dark grounds next to a primary button. */
.cl-btn.cl-btn--light {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--teal, #1a4a4a);
  box-shadow: var(--btn-shadow-dark);
}
.cl-btn.cl-btn--light:hover { background: #f5f3f0; border-color: #f5f3f0; color: var(--teal, #1a4a4a); box-shadow: 0 10px 28px rgba(28, 25, 23, 0.3); }

/* Secondary: outline on light grounds. Edge is the orange text tone (4.6:1 on white). No shadow. */
.cl-btn.cl-btn--secondary {
  background: transparent;
  border-color: var(--accent-text, #9c5615);
  color: var(--accent-text, #9c5615);
  box-shadow: none;
}
.cl-btn.cl-btn--secondary:hover { background: rgba(232, 148, 58, 0.12); color: #7a4210; border-color: #7a4210; }

/* Secondary teal: outline in teal on light grounds. */
.cl-btn.cl-btn--secondary-teal {
  background: transparent;
  border-color: var(--teal, #1a4a4a);
  color: var(--teal, #1a4a4a);
  box-shadow: none;
}
.cl-btn.cl-btn--secondary-teal:hover { background: rgba(26, 74, 74, 0.08); }

/* Outline light: white outline on dark grounds and photos. */
.cl-btn.cl-btn--outline-light {
  background: rgba(255, 255, 255, 0.04);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: none;
}
.cl-btn.cl-btn--outline-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #ffffff; color: #ffffff; }

/* Ghost: text-only action inside a card or row. Keeps the pill hit area. */
.cl-btn.cl-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--accent-text, #9c5615);
  box-shadow: none;
}
.cl-btn.cl-btn--ghost:hover { background: rgba(232, 148, 58, 0.12); }

/* Danger / unavailable (sold out). Not interactive. */
.cl-btn.cl-btn--disabled,
.cl-btn.cl-btn:disabled:not([data-state]),
.cl-btn[aria-disabled="true"]:not([data-state]) {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}
.cl-btn.cl-btn--sold-out {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 6 Motion ── */
/* Filled buttons sink 1px and their shadow collapses: the shadow is what makes the sink read as a press. */
.cl-btn.cl-btn:active:not(:disabled):not([aria-disabled="true"]):not([data-state]) {
  transform: translateY(1px);
  box-shadow: var(--btn-edge), var(--btn-shadow-pressed);
}
/* Outline and ghost buttons have no shadow, so moving them would just look like a jump.
   They stay put and go recessed instead: an inner shadow along the top edge and a deeper tint. */
.cl-btn.cl-btn--secondary:active, .cl-btn.cl-btn--secondary-teal:active, .cl-btn.cl-btn--secondary-dark:active,
.cl-btn.cl-btn--outline-light:active, .cl-btn.cl-btn--ghost:active {
  transform: none;
  box-shadow: inset 0 2px 4px rgba(28, 25, 23, 0.16);
}
.cl-btn.cl-btn--secondary:active, .cl-btn.cl-btn--ghost:active { background: rgba(232, 148, 58, 0.22); }
.cl-btn.cl-btn--secondary-teal:active { background: rgba(26, 74, 74, 0.16); }
.cl-btn.cl-btn--secondary-dark:active { background: rgba(45, 45, 45, 0.16); }
.cl-btn.cl-btn--outline-light:active { background: rgba(255, 255, 255, 0.24); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28); }

.cl-btn.cl-btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Submit states: data-state="loading" shows a spinner within 100ms, data-state="done" a check mark.
   Label stays in the DOM (transparent) so the button keeps its width. */
.cl-btn[data-state="loading"],
.cl-btn[data-state="done"] {
  color: transparent !important;
  pointer-events: none;
}
.cl-btn[data-state] > * { visibility: hidden; }
.cl-btn[data-state="loading"]::after,
.cl-btn[data-state="done"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  box-sizing: border-box;
  border-radius: 50%;
}
.cl-btn[data-state="loading"]::after {
  border: 2.5px solid rgba(28, 25, 23, 0.25);
  border-top-color: #1c1917;
  animation: cl-btn-spin 700ms linear infinite, cl-btn-fade-in 100ms var(--btn-ease) both;
}
.cl-btn[data-state="done"]::after {
  width: 18px;
  height: 10px;
  margin: -8px 0 0 -9px;
  border-radius: 0;
  border-left: 3px solid #1c1917;
  border-bottom: 3px solid #1c1917;
  transform: rotate(-45deg) scale(0.6);
  animation: cl-btn-check 300ms var(--btn-ease) forwards;
}
.cl-btn.cl-btn--teal[data-state]::after, .cl-btn.cl-btn--dark[data-state]::after, .cl-btn.cl-btn--grey[data-state]::after, .cl-btn.cl-btn--outline-light[data-state]::after, .cl-btn.cl-btn--sold-out[data-state]::after {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}
.cl-btn.cl-btn--teal[data-state="done"]::after, .cl-btn.cl-btn--dark[data-state="done"]::after, .cl-btn.cl-btn--grey[data-state="done"]::after, .cl-btn.cl-btn--outline-light[data-state="done"]::after {
  border-color: transparent;
  border-left-color: #ffffff;
  border-bottom-color: #ffffff;
}
.cl-btn.cl-btn--secondary[data-state]::after, .cl-btn.cl-btn--ghost[data-state]::after {
  border-color: rgba(156, 86, 21, 0.3);
  border-top-color: var(--accent-text, #9c5615);
}
.cl-btn.cl-btn--secondary[data-state="done"]::after, .cl-btn.cl-btn--ghost[data-state="done"]::after {
  border-color: transparent;
  border-left-color: var(--accent-text, #9c5615);
  border-bottom-color: var(--accent-text, #9c5615);
}

@keyframes cl-btn-spin { to { transform: rotate(360deg); } }
@keyframes cl-btn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl-btn-check {
  from { opacity: 0; transform: rotate(-45deg) scale(0.6); }
  to { opacity: 1; transform: rotate(-45deg) scale(1); }
}

/* Pill input group: an email field with the button inside the same pill (newsletter forms on dark grounds). */
.cl-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
}
.cl-input-group input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
}
.cl-input-group input::placeholder { color: rgba(255, 255, 255, 0.9); }
.cl-input-group input:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
.cl-input-group .cl-btn { flex: none; min-height: 44px; padding: 8px 20px; }
@media (max-width: 480px) {
  .cl-input-group { flex-wrap: wrap; border-radius: 28px; }
  .cl-input-group .cl-btn { width: 100%; }
}

/* Button rows: 12px between siblings, wrap on narrow screens. */
.cl-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

@media (max-width: 768px) {
  .cl-btn--lg { min-height: var(--btn-h); padding: 10px var(--btn-pad); font-size: var(--btn-font); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-btn { transition: none; }
  .cl-btn:active { transform: none; }
  .cl-btn[data-state="loading"]::after { animation-duration: 1.4s; }
  .cl-btn[data-state="done"]::after { animation: none; opacity: 1; transform: rotate(-45deg) scale(1); }
}