/* S3 Checkout – default styles. Fonts and images from assets/ only. */
@font-face {
  font-family: 'Gilroy-Regular';
  src: url('assets/fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy-Bold';
  src: url('assets/fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --main-color: #6D4EEC;
  --main-color-hover: #5a3fd4;
  --primary-purple: var(--main-color);
  --primary-purple-hover: var(--main-color-hover);
  --bg-input: #fff;
  --border-input: rgba(0, 0, 0, 0.173);
  --text-dark: #212529;
  --font-family: 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --spacing-1: clamp(0.5 * 1rem, calc((10 / 1920) * 100vw), calc((10 / 1920) * 100vw));
  --spacing-2: clamp(1 * 1rem, calc((20 / 1920) * 100vw), calc((20 / 1920) * 100vw));
  --spacing-3: clamp(1.5 * 1rem, calc((30 / 1920) * 100vw), calc((30 / 1920) * 100vw));
  --spacing-4: clamp(2 * 1rem, calc((40 / 1920) * 100vw), calc((40 / 1920) * 100vw));
  --spacing-5: clamp(2.5 * 1rem, calc((50 / 1920) * 100vw), calc((50 / 1920) * 100vw));
  --spacing-6: clamp(3 * 1rem, calc((60 / 1920) * 100vw), calc((60 / 1920) * 100vw));
  --spacing-7: clamp(3.5 * 1rem, calc((70 / 1920) * 100vw), calc((70 / 1920) * 100vw));
  --spacing-8: clamp(4 * 1rem, calc((80 / 1920) * 100vw), calc((80 / 1920) * 100vw));
  --spacing-9: clamp(4.5 * 1rem, calc((90 / 1920) * 100vw), calc((90 / 1920) * 100vw));
  --spacing-10: clamp(5 * 1rem, calc((100 / 1920) * 100vw), calc((100 / 1920) * 100vw));
  --spacing-11: clamp(5.5 * 1rem, calc((110 / 1920) * 100vw), calc((110 / 1920) * 100vw));
  --spacing-12: clamp(6 * 1rem, calc((120 / 1920) * 100vw), calc((120 / 1920) * 100vw));
}

@media screen and (max-width: 768px) {
  .container, .s3-navbar-container, main .container {
    max-width: 96% !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(15px, var(--spacing-2));
    padding-right: max(15px, var(--spacing-2));
    box-sizing: border-box;
  }
}

@media screen and (min-width: 769px) {
  .s3-navbar-container.container, main .container {
    width: 100%;
    max-width: min(70.27vw, 1620px);
    margin-left: auto;
    margin-right: auto;
    padding-left: max(15px, var(--spacing-2));
    padding-right: max(15px, var(--spacing-2));
    box-sizing: border-box;
  }
}

@media screen and (min-width: 1920px) {
  .s3-navbar-container.container, main .container { max-width: 1620px; }
}

/* Layout – Bootstrap provides .row, .col-*, .d-*, .order-*, etc. Override .container only. */
body { font-family: var(--font-family); min-height: 100vh; color: var(--text-dark); background: #fff; margin: 0; }
.container { width: 100%; max-width: min(70.27vw, 1620px); margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; box-sizing: border-box; }

/* Mobile: vertical spacing between stacked columns (image row vs text row) */
@media (max-width: 991px) {
  .landing-row .order-2 { margin-top: 1.5rem; }
}

/* Spacing */
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }

/* Navbar */
.s3-navbar { z-index: 5; box-shadow: 0 0 9px rgba(0, 0, 0, 0.16); background: #fff !important; padding-top: 1rem; padding-bottom: 1rem; }
.s3-navbar .container { display: flex; align-items: center; }
.s3-logo { display: inline-block; text-decoration: none; color: inherit; }
.s3-logo-img { height: 32px; width: auto; max-width: 139px; vertical-align: middle; }

/* Typography */
.primary_purple { color: var(--primary-purple); }
.bold { font-weight: 700; }
main h1, main h2 { font-weight: 700; font-family: 'Gilroy-Bold', var(--font-family); color: var(--text-dark); margin: 0 0 0.5rem 0; }
.text-muted { color: #6c757d !important; }
.text-success { color: #198754 !important; }
.text-dark { color: #212529 !important; }
.text-secondary { color: #6c757d !important; }
.text-danger { color: #dc3545 !important; }
.fw-bold { font-weight: 700; }
/* Theme accent: bold + main color (overridden per theme) */
.s3-theme-accent { color: var(--main-color); font-weight: 700; }

/* Already subscribed block (top level) */
.already-subscribed { background: #EFEBFF; border-radius: 10px; padding: 2rem; }
.already-subscribed .btn-link.home_button_purple { display: inline-block; text-decoration: none; color: #fff; padding: 17px 24px; margin-top: 0.5rem; border-radius: 1rem; background-color: var(--primary-purple); font-weight: 700; border: none; cursor: pointer; }

/* Landing price line (italic) */
.landing-price { font-style: italic; }

/* Subscribe button: full width on mobile, 33.3% (col-lg-4) on desktop; keep inside constraints */
.btn-subscribe { width: 100%; max-width: 100%; box-sizing: border-box; }
/* Button row: no negative margin; align buttons to start (not center) */
#default-hero .row.mt-4 { margin-left: 0; margin-right: 0; justify-content: flex-start !important; }
#default-hero .row.mt-4 .col-12 { padding-left: 0; padding-right: 0; }
#default-hero .row.mt-4 .col-12 .btn-subscribe { margin-bottom: 0.5rem; }
@media (min-width: 992px) {
  .col-lg-4 .btn-subscribe { max-width: 100%; }
}

/* When already subscribed: hide all other main content and show only #already-subscribed */
body.already-subscribed-visible #default-hero,
body.already-subscribed-visible #default-why-giftbox,
body.already-subscribed-visible #theme1-content {
  display: none !important;
}

/* Default theme: Why Giftbox? section (light purple, full-width section) */
.s3-why-giftbox {
  margin-top: 3rem;
  padding: 3rem 0 4rem;
  background: #EDE7F6;
}
.s3-why-heading {
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.5rem 0;
}
.s3-why-intro {
  color: #4b5563;
  line-height: 1.65;
  margin-bottom: 2rem;
  max-width: 720px;
}
.s3-why-cards { margin-bottom: 2rem; }
@media (max-width: 991px) {
  .s3-why-cards [class*="col"] { margin-bottom: 1.5rem; }
  .s3-why-cards [class*="col"]:last-child { margin-bottom: 0; }
}
.s3-why-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
}
.s3-why-icon {
  color: var(--main-color);
  margin-bottom: 0.5rem;
}
.s3-why-icon .s3-why-svg {
  width: 48px;
  height: 48px;
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
  color: var(--main-color);
}
.s3-why-title {
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.5rem 0;
}
.s3-why-desc {
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}
/* Why Giftbox CTA: same layout and width as default-hero subscribe row */
.s3-why-cta.row.mt-4 { margin-left: 0; margin-right: 0; justify-content: flex-start !important; }
.s3-why-cta .col-12 { padding-left: 0; padding-right: 0; }
.s3-why-cta .btn-subscribe { margin-bottom: 0.5rem; }

/* Discount image and fallback badge */
.discount-img { max-width: 100%; height: auto; max-height: 180px; display: block; }
.s3-discount-badge { background: var(--primary-purple); color: #fff; font-weight: 700; text-align: center; padding: 1rem 1.25rem; border-radius: 12px; line-height: 1.3; }

/* Buttons */
.home_button_purple {
  padding: 17px;
  background-color: var(--primary-purple);
  color: #fff;
  border: none;
  border-radius: 1rem;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-family: inherit;
}
.home_button_purple::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 12px;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.802 9.824'%3E%3Cpath d='M14.033,8.882a.6.6,0,0,0,0,.853L16.8,12.5H2.66a.6.6,0,1,0,0,1.2H16.784l-2.75,2.744a.6.6,0,0,0,.847.847L18.7,13.469a.528.528,0,0,0,0-.763L14.886,8.882a.6.6,0,0,0-.853,0Z' transform='translate(-2.06 -8.704)' fill='%23fff' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.home_button_purple:hover:not(:disabled) { background-color: var(--primary-purple-hover); color: #fff; }
.home_button_purple:disabled {
  background-color: #9ca3af !important;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}
.btn { font-family: inherit; cursor: pointer; }
.btn-outline { background: #fff; border: 1px solid #ddd; border-radius: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; }

/* Plan cards */
.plan-card {
  padding: 1rem;
  border-radius: 0.375rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  color: var(--text-dark);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.plan-card:hover { border-color: var(--primary-purple); background: #e9ecef; }
.plan-card.selected { background: var(--primary-purple); color: #fff; border-color: var(--primary-purple); }
.plan-card .plan-name, .plan-card .plan-price { font-weight: 700; }

/* Form */
.form-label { margin-bottom: 0.5rem; display: block; color: var(--text-dark); }
.form-control {
  display: block;
  width: 100%;
  padding: 1rem;
  line-height: 1.5;
  border: 1px solid var(--border-input);
  border-radius: 0.5rem;
  background: var(--bg-input);
  color: var(--text-dark);
  box-sizing: border-box;
}
.form-control:focus { border-color: var(--primary-purple); outline: none; box-shadow: 0 0 0 0.2rem rgba(109, 78, 236, 0.25); }
.checkoutForm .form-control { background-color: var(--bg-input); border: 1px solid var(--border-input); }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 0.375rem; }
.alert-danger { background-color: #f8d7da; border: 1px solid #f5c2c7; color: #842029; }
.alert-info, .s3-alert-info { background-color: #cff4fc; border: 1px solid #b6effb; color: #055160; }

/* Modal overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem;
  box-sizing: border-box;
}
.modal-overlay.visible,
.modal-overlay[aria-hidden="false"] {
  display: flex;
  animation: modal-backdrop-in 0.3s ease forwards;
}
.modal-overlay.visible .modal-dialog,
.modal-overlay[aria-hidden="false"] .modal-dialog {
  animation: modal-dialog-in 0.35s ease forwards;
}
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.modal-dialog {
  background: #fff;
  border-radius: 15px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  position: relative;
}
.modal-content { padding: 0; }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.5rem 0;
}
.modal-title { margin: 0; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 0 0.25rem;
}
.modal-close:hover { color: #000; }
.modal-body { padding: 1.5rem; }
.verify-overlay .modal-dialog { background: #EFEBFF; padding: 1.5rem; }
.s3-verify-box .form-control { background: #fff; border: 1px solid var(--border-input); border-radius: 0.5rem; padding: 0.65rem 0.75rem; }
.s3-verify-box .form-control:focus { border-color: var(--primary-purple); outline: none; }
/* Slightly reduce vertical spacing inside verify form only */
.s3-verify-box h2 { margin-bottom: 0.5rem !important; }
.s3-verify-box > p.text-dark.mb-3 { margin-bottom: 0.75rem !important; }
.s3-verify-box #verify-identity-form .d-flex.flex-column { margin-top: 0.6rem !important; }
.s3-verify-box #verify-identity-form .d-flex.flex-column:first-child { margin-top: 0 !important; }
.s3-verify-box #verify-identity-form .mt-3 { margin-top: 0.65rem !important; }
.s3-verify-box #verify-forgot-password { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.s3-verify-box #verify-signin-btn.mt-4 { margin-top: 0.85rem !important; }
.s3-verify-box .s3-social-separator { margin: 1rem 0 !important; }
.s3-verify-box .s3-social-separator.mt-4 { margin-top: 1rem !important; }
.s3-verify-box #verify-social-wrap.mt-3 { margin-top: 0.65rem !important; }
.s3-verify-box .gap-2 { gap: 0.6rem !important; }
/* Password wrapper: input must have right padding so toggle doesn't cover click/focus area */
.password-wrap { position: relative; }
.password-wrap .form-control {
  padding-right: 44px;
}
.s3-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--main-color);
  padding: 4px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.s3-password-toggle:hover { background: rgba(124, 58, 237, 0.08); }
.s3-password-toggle { color: var(--main-color); }
.s3-password-toggle:hover { background: color-mix(in srgb, var(--main-color) 8%, transparent); }
.s3-password-toggle:focus { outline: 2px solid var(--main-color); outline-offset: 2px; }
/* Eye icon: theme color via mask so SVGs follow --main-color */
.s3-eye-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--main-color);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.s3-eye-icon.s3-eye-show {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E");
}
.s3-eye-icon.s3-eye-hide {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21'/%3E%3C/svg%3E");
}

/* Verify identity view inside subscribe modal */
.verify-identity-in-modal { width: 100%; }
.s3-verify-back { color: var(--primary-purple); font-size: 0.95rem; text-decoration: none; }
.s3-verify-back:hover { text-decoration: underline; color: var(--primary-purple); }

/* Verify modal: "or use" separator (1.4rem) and full-width social buttons */
.s3-social-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  color: #6c757d;
  font-size: 1rem;
}
.s3-social-separator::before,
.s3-social-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dee2e6;
}
/* Verify: center the Google button via flex wrapper (forces horizontal center) */
.s3-google-btn-outer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.s3-google-btn-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
#verify-google-btn.s3-social-btn-wrap {
  width: 400px !important;
  max-width: 100%;
  min-width: 260px;
  height: 48px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
#verify-google-btn > div {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#verify-google-btn iframe {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}
/* Wrapper transparent so only the Google button (inner white) shows; no outer box */
.s3-social-btn-wrap {
  width: 100%;
  height: 48px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s3-social-btn-wrap > div {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.s3-social-btn-wrap iframe { width: 100% !important; min-width: 100% !important; }
.s3-social-btn {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #1f1f1f;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.s3-social-btn:hover:not(:disabled) {
  background-color: #f8f9fa;
  border-color: #dadce0;
}
.s3-social-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Payment iframe inside modal */
.payment-iframe-wrap { width: 100%; min-height: 70vh; border: none; border-radius: 12px; overflow: hidden; }
.payment-iframe-wrap.visible { display: block !important; }
#payment-iframe { width: 100%; min-height: 70vh; border: none; display: block; }

/* Loader */
#loader-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(206, 201, 227, 0.6);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}
#loader-overlay[aria-hidden="false"] {
  display: flex;
  pointer-events: auto;
  animation: modal-backdrop-in 0.25s ease forwards;
}
#loader-overlay .loader {
  animation: s3-loader-rotate 1s linear infinite;
  height: 50px;
  width: 50px;
  border: 3px solid transparent;
  border-top-color: var(--primary-purple);
  border-radius: 50%;
}
@keyframes s3-loader-rotate {
  to { transform: rotate(360deg); }
}

/* Subscribe form wrap fade / iframe show */
#subscribe-form-wrap.fade-out-down { animation: s3-fade-out 0.4s ease forwards; }
@keyframes s3-fade-out {
  to { opacity: 0; visibility: hidden; }
}
#payment-iframe-container.fade-in-up { animation: s3-fade-in 0.4s ease forwards; }
@keyframes s3-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}