/* ==========================================================================
   Chatonsportif Buy Button + Modal + Thank You
   Brand color: terracotta #C46A4A
   Font: Nunito, sans-serif
   ========================================================================== */

/* CSS variables for easy theming */
:root {
  --chs-color: #C46A4A;
  --chs-color-hover: #b45c3d;
  --chs-color-active: #9d4e34;
  --chs-color-tint: rgba(196, 106, 74, 0.15);
  --chs-color-shadow: rgba(196, 106, 74, 0.3);
  --chs-font: 'Nunito', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   BUY BUTTON (widget output) — matches the static design provided
   We mostly let Elementor controls drive the look, so this only enforces
   the structural defaults. Visual props (colors, padding, font-size) come
   from Elementor → no !important here unless absolutely necessary.
   ========================================================================== */
/* ==========================================================================
   BUY BUTTON (widget output) — matches the static design provided
   We use !important pretty aggressively here because Elementor / themes
   often inject button styles globally with high specificity. This ensures
   the button looks consistent regardless of where it sits on the page.
   ========================================================================== */
.chs-buy-btn-wrap {
  width: 100%;
  display: block;
}
.chs-buy-btn,
button.chs-buy-btn,
.chs-buy-btn-wrap > .chs-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: var(--chs-color) !important;
  color: #fff !important;
  font-family: var(--chs-font) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  width: 100% !important;
  max-width: 478px !important;
  box-shadow: 0 4px 16px var(--chs-color-shadow) !important;
  letter-spacing: 0.17px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  text-shadow: none !important;
  box-sizing: border-box !important;
}
.chs-buy-btn:hover,
.chs-buy-btn:focus,
.chs-buy-btn:active,
button.chs-buy-btn:hover,
button.chs-buy-btn:focus,
button.chs-buy-btn:active {
  background: var(--chs-color-hover) !important;
  color: #fff !important;
  outline: 0 !important;
  border: 0 !important;
  box-shadow: 0 4px 16px var(--chs-color-shadow) !important;
}
/* Show focus ring only for keyboard users (not mouse clicks) */
.chs-buy-btn:focus-visible {
  outline: 3px solid var(--chs-color-tint) !important;
  outline-offset: 2px !important;
}
.chs-buy-btn:active {
  background: var(--chs-color-active) !important;
  transform: scale(0.98) !important;
}
.chs-buy-btn::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}
.chs-buy-btn span {
  font: inherit !important;
  color: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
}
.chs-buy-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* ==========================================================================
   MODAL — email capture before redirect to Stripe
   All rules are forced with !important because themes/Elementor often
   inject button/input styles globally; we want the modal to look identical
   regardless of which theme it lives in.
   ========================================================================== */

.chs-modal,
.chs-modal *,
.chs-modal *::before,
.chs-modal *::after {
  box-sizing: border-box !important;
}

.chs-modal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease;
  font-family: var(--chs-font) !important;
}
.chs-modal.is-open {
  display: flex !important;
  opacity: 1 !important;
}

.chs-modal__box {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 40px 32px 28px !important;
  margin: 0 !important;
  max-width: 440px !important;
  width: 100% !important;
  position: relative !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  transform: scale(0.95);
  transition: transform .25s ease;
  font-family: inherit !important;
  color: #111 !important;
  text-align: left;
}
.chs-modal.is-open .chs-modal__box { transform: scale(1); }

/* CLOSE button — `all: unset` strips theme styles, then we re-apply ours */
.chs-modal__close {
  all: unset !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #888 !important;
  transition: background-color .2s ease, color .2s ease !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}
.chs-modal__close:hover,
.chs-modal__close:focus,
.chs-modal__close:active {
  background: #f4f4f4 !important;
  color: #111 !important;
}
.chs-modal__close svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

.chs-modal__title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.chs-modal__subtitle {
  font-size: 14px !important;
  color: #555 !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  font-family: inherit !important;
  font-weight: 400 !important;
}

.chs-modal__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.chs-modal__input {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 1.5px solid #d4d4d4 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  display: block !important;
}
.chs-modal__input::placeholder {
  color: #999 !important;
  opacity: 1 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
.chs-modal__input:hover {
  border-color: #aaa !important;
}
.chs-modal__input:focus,
.chs-modal__input:focus-visible {
  border-color: var(--chs-color) !important;
  box-shadow: 0 0 0 3px var(--chs-color-tint) !important;
  outline: none !important;
}

/* Honeypot — hidden field bots will fill, real users won't see */
.chs-modal__hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  visibility: hidden !important;
}

/* SUBMIT button — same approach as buy button (terracotta) */
.chs-modal__submit {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 20px !important;
  background: var(--chs-color) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.17px !important;
  font-family: inherit !important;
  line-height: 1 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px var(--chs-color-shadow) !important;
  transition: background-color .2s ease, transform .1s ease !important;
  text-align: center !important;
}
.chs-modal__submit:hover,
.chs-modal__submit:focus {
  background: var(--chs-color-hover) !important;
  color: #ffffff !important;
}
.chs-modal__submit:active {
  background: var(--chs-color-active) !important;
  transform: scale(0.98) !important;
}
.chs-modal__submit[disabled] {
  opacity: 0.6 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.chs-modal__footer {
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 11px !important;
  color: #888 !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
}

.chs-modal__msg {
  margin: 12px 0 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  text-align: center !important;
  display: none !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}
.chs-modal__msg.is-error {
  background: #fde8e8 !important;
  color: #b91c1c !important;
  display: block !important;
}
.chs-modal__msg.is-success {
  background: #dcfce7 !important;
  color: #166534 !important;
  display: block !important;
}

.chs-modal__spinner {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: chs-spin .7s linear infinite !important;
  flex-shrink: 0 !important;
}
@keyframes chs-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .chs-modal__box { padding: 32px 22px 22px !important; }
  .chs-modal__title { font-size: 20px !important; }
  .chs-modal__input, .chs-modal__submit { height: 50px !important; min-height: 50px !important; }
}

/* ==========================================================================
   THANK YOU — post-payment confirmation (rendered by [chs_order_complete])
   Designed to match the site's cream/terracotta palette.
   ========================================================================== */
.chs-thankyou,
.chs-thankyou * {
  box-sizing: border-box !important;
  font-family: var(--chs-font) !important;
}
.chs-thankyou {
  max-width: 640px !important;
  margin: 40px auto !important;
  padding: 56px 40px 48px !important;
  text-align: center !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 40px rgba(196, 106, 74, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(196, 106, 74, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Subtle terracotta accent stripe at the top */
.chs-thankyou::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  background: linear-gradient(90deg, var(--chs-color), var(--chs-color-hover)) !important;
}

.chs-thankyou__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  margin: 0 auto 24px !important;
  color: #fff !important;
  line-height: 1 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}
.chs-thankyou--success .chs-thankyou__icon {
  background: #22c55e !important;
}
.chs-thankyou--warning .chs-thankyou__icon {
  background: #f59e0b !important;
}

.chs-thankyou__title {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}
.chs-thankyou__text {
  font-size: 17px !important;
  color: #444 !important;
  line-height: 1.6 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
}
.chs-thankyou__text strong {
  color: var(--chs-color) !important;
  font-weight: 700 !important;
}
.chs-thankyou__hint {
  font-size: 14px !important;
  color: #888 !important;
  line-height: 1.5 !important;
  margin: 24px 0 0 0 !important;
  padding: 16px 20px !important;
  background: #fef7f4 !important;
  border-radius: 10px !important;
  border-left: 3px solid var(--chs-color) !important;
  text-align: left !important;
}
.chs-thankyou a {
  color: var(--chs-color) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}
.chs-thankyou a:hover {
  color: var(--chs-color-hover) !important;
}
/* Optional CTA button inside thank-you (e.g. "back to home") */
.chs-thankyou__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 28px !important;
  padding: 14px 28px !important;
  background: var(--chs-color) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  border: 0 !important;
  box-shadow: 0 4px 16px var(--chs-color-shadow) !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
}
.chs-thankyou__cta:hover {
  background: var(--chs-color-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.chs-thankyou--generic .chs-thankyou__title {
  color: var(--chs-color) !important;
}

@media (max-width: 500px) {
  .chs-thankyou { padding: 40px 24px 32px !important; margin: 20px 16px !important; }
  .chs-thankyou__title { font-size: 26px !important; }
  .chs-thankyou__text { font-size: 16px !important; }
  .chs-thankyou__icon { width: 64px !important; height: 64px !important; font-size: 36px !important; }
}