/* ============================================
   FLY LUX CHECKOUT BRANDING
   Premium Travel Course Checkout Styling
   ============================================ */

/* ----- Google Fonts Import ----- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* ----- CSS Variables ----- */
:root {
  --fly-gold: #c4a052;
  --fly-gold-light: #d4b76a;
  --fly-gold-dark: #a68a3a;
  --fly-charcoal: #1c1c1c;
  --fly-charcoal-light: #2a2a2a;
  --fly-cream: #faf8f5;
  --fly-cream-dark: #f0ebe3;
  --fly-text-dark: #1a1a1a;
  --fly-text-muted: #6b6b6b;
  --fly-text-light: #999;
  --fly-success: #2d6a4f;
  --fly-error: #c1292e;
}

/* ----- Base Styles ----- */
body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: var(--fly-cream) !important;
  color: var(--fly-text-dark) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- Typography ----- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  color: var(--fly-charcoal) !important;
  letter-spacing: -0.02em;
}

/* Italic headings for emphasis */
h1 em, h2 em, h3 em, h4 em,
.h1 em, .h2 em, .h3 em, .h4 em {
  font-style: italic;
  color: var(--fly-gold) !important;
}

/* Body text */
p, span, div, label {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ----- Section / Page Background ----- */
.section,
.checkout-section,
[class*="kjb-embedded-checkout"] {
  background-color: var(--fly-cream) !important;
}

/* ----- Checkout Container ----- */
.kjb-embedded-checkout,
.checkout-container,
.checkout-wrapper {
  background: white !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--fly-cream-dark) !important;
  overflow: hidden;
}

/* Checkout header/title area */
.checkout-header,
.checkout-title,
.offer-header {
  background: var(--fly-charcoal) !important;
  color: white !important;
  padding: 32px !important;
  text-align: center;
}

.checkout-header h1,
.checkout-header h2,
.checkout-header h3,
.checkout-title,
.offer-title {
  color: white !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* Checkout price display */
.checkout-price,
.offer-price,
.price-display,
[class*="price"] {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--fly-gold) !important;
  font-weight: 500 !important;
}

.checkout-price .currency,
.price-currency {
  font-size: 0.6em;
  vertical-align: super;
}

/* ----- Form Styling ----- */
.form-group,
.checkout-form-group,
.kjb-form-group {
  margin-bottom: 20px !important;
}

/* Labels */
label,
.form-label,
.checkout-label,
.kjb-label {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fly-text-muted) !important;
  margin-bottom: 8px !important;
  display: block;
}

/* Input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea,
.form-control,
.checkout-input,
.kjb-input {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 16px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--fly-cream-dark) !important;
  border-radius: 2px !important;
  background: white !important;
  color: var(--fly-text-dark) !important;
  transition: all 0.3s ease !important;
  width: 100%;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.checkout-input:focus,
.kjb-input:focus {
  border-color: var(--fly-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196, 160, 82, 0.15) !important;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: var(--fly-text-light) !important;
  font-style: italic;
}

/* ----- Primary CTA Button ----- */
.btn,
.button,
.checkout-btn,
.kjb-btn,
button[type="submit"],
input[type="submit"],
.btn-primary,
.cta-button,
[class*="checkout"] button,
[class*="checkout"] .btn {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 18px 48px !important;
  background: var(--fly-gold) !important;
  color: white !important;
  border: none !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(196, 160, 82, 0.35) !important;
  animation: goldenPulse 3s ease-in-out infinite;
}

.btn:hover,
.button:hover,
.checkout-btn:hover,
.kjb-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover,
.cta-button:hover,
[class*="checkout"] button:hover,
[class*="checkout"] .btn:hover {
  background: var(--fly-gold-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 30px rgba(196, 160, 82, 0.45) !important;
}

@keyframes goldenPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(196, 160, 82, 0.35);
  }
  50% {
    box-shadow: 0 4px 30px rgba(196, 160, 82, 0.55), 0 0 40px rgba(196, 160, 82, 0.2);
  }
}

/* Secondary/outline buttons */
.btn-secondary,
.btn-outline,
.checkout-btn-secondary {
  background: transparent !important;
  color: var(--fly-charcoal) !important;
  border: 1px solid var(--fly-charcoal) !important;
  box-shadow: none !important;
  animation: none !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.checkout-btn-secondary:hover {
  background: var(--fly-charcoal) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* ----- Checkout Card/Box Styling ----- */
.checkout-box,
.checkout-card,
.order-summary,
.payment-section {
  background: white !important;
  border-radius: 4px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}

/* Secure checkout badge/trust indicators */
.secure-badge,
.trust-badge,
.payment-icons,
[class*="secure"],
[class*="trust"] {
  color: var(--fly-text-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ----- Pricing Tiers/Options ----- */
.pricing-option,
.plan-option,
.offer-option {
  border: 1px solid var(--fly-cream-dark) !important;
  border-radius: 4px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}

.pricing-option:hover,
.plan-option:hover,
.offer-option:hover {
  border-color: var(--fly-gold) !important;
  box-shadow: 0 8px 24px rgba(196, 160, 82, 0.15) !important;
}

.pricing-option.selected,
.plan-option.selected,
.offer-option.selected,
.pricing-option.active,
.plan-option.active,
.offer-option.active {
  border-color: var(--fly-gold) !important;
  background: rgba(196, 160, 82, 0.05) !important;
}

/* Tier labels/badges */
.tier-label,
.plan-name,
.pricing-label {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--fly-gold) !important;
  margin-bottom: 8px !important;
}

/* Popular/recommended badge */
.popular-badge,
.recommended-badge,
[class*="popular"],
[class*="recommended"] {
  background: var(--fly-gold) !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 2px !important;
}

/* ----- Order Summary ----- */
.order-summary-title,
.summary-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.5rem !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--fly-cream-dark) !important;
}

.order-item,
.summary-item,
.line-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--fly-cream-dark);
}

.order-total,
.summary-total,
.total-line {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  padding-top: 16px !important;
  margin-top: 16px !important;
  border-top: 2px solid var(--fly-charcoal) !important;
}

/* ----- Guarantee Section ----- */
.guarantee,
.guarantee-section,
[class*="guarantee"] {
  background: var(--fly-cream-dark) !important;
  border-radius: 4px !important;
  padding: 24px !important;
  margin: 24px 0 !important;
  text-align: center;
}

.guarantee-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--fly-charcoal) !important;
  margin-bottom: 12px !important;
}

/* ----- Countdown Timer ----- */
.countdown,
.timer,
[class*="countdown"] {
  background: var(--fly-charcoal) !important;
  color: white !important;
  padding: 20px !important;
  border-radius: 4px !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

.countdown-number,
.timer-digit {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2rem !important;
  color: var(--fly-gold) !important;
  font-weight: 500 !important;
}

.countdown-label,
.timer-label {
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  opacity: 0.7;
}

/* ----- Testimonials/Social Proof ----- */
.testimonial,
.review,
[class*="testimonial"] {
  background: white !important;
  border-left: 3px solid var(--fly-gold) !important;
  padding: 24px !important;
  margin: 16px 0 !important;
}

.testimonial-text,
.review-text {
  font-style: italic !important;
  color: var(--fly-text-dark) !important;
  margin-bottom: 12px !important;
}

.testimonial-author,
.review-author {
  font-size: 14px !important;
  color: var(--fly-text-muted) !important;
  font-weight: 600 !important;
}

/* ----- Checkboxes & Radio Buttons ----- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--fly-gold) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--fly-gold) !important;
  border-color: var(--fly-gold) !important;
}

/* Custom checkbox styling */
.custom-checkbox,
.custom-radio {
  position: relative;
  padding-left: 32px;
  cursor: pointer;
}

.custom-checkbox input,
.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox .checkmark,
.custom-radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: white;
  border: 2px solid var(--fly-cream-dark);
  border-radius: 2px;
  transition: all 0.2s ease;
}

.custom-checkbox input:checked ~ .checkmark,
.custom-radio input:checked ~ .checkmark {
  background-color: var(--fly-gold);
  border-color: var(--fly-gold);
}

/* ----- Error States ----- */
.error,
.error-message,
.invalid-feedback,
[class*="error"] {
  color: var(--fly-error) !important;
  font-size: 14px !important;
  margin-top: 6px !important;
}

input.error,
input.is-invalid,
input[aria-invalid="true"] {
  border-color: var(--fly-error) !important;
}

/* ----- Success States ----- */
.success,
.success-message,
[class*="success"] {
  color: var(--fly-success) !important;
}

/* ----- Loading States ----- */
.loading,
.spinner,
[class*="loading"] {
  color: var(--fly-gold) !important;
}

/* ----- Links ----- */
a {
  color: var(--fly-gold) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--fly-gold-light) !important;
}

/* Footer links */
.footer a,
.checkout-footer a {
  color: var(--fly-text-muted) !important;
}

.footer a:hover,
.checkout-footer a:hover {
  color: var(--fly-gold) !important;
}

/* ----- Dividers ----- */
hr,
.divider {
  border: none !important;
  border-top: 1px solid var(--fly-cream-dark) !important;
  margin: 24px 0 !important;
}

/* ----- Payment Form Specifics ----- */
.payment-form,
.credit-card-form,
[class*="payment"] {
  background: var(--fly-cream) !important;
  border-radius: 4px !important;
  padding: 24px !important;
  margin-top: 24px !important;
}

.payment-form label,
.credit-card-form label {
  color: var(--fly-text-muted) !important;
}

/* Card icons */
.card-icons,
.payment-methods {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  opacity: 0.7;
}

/* ----- Mobile Optimizations ----- */
@media (max-width: 768px) {
  .checkout-container,
  .checkout-wrapper {
    margin: 16px !important;
    border-radius: 4px !important;
  }

  .checkout-box,
  .checkout-card,
  .order-summary,
  .payment-section {
    padding: 20px !important;
  }

  .btn,
  .button,
  .checkout-btn,
  button[type="submit"] {
    width: 100% !important;
    padding: 16px 24px !important;
  }

  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.25rem !important; }
}

/* ----- Print Styles ----- */
@media print {
  .btn,
  .button,
  .checkout-btn {
    background: var(--fly-charcoal) !important;
    box-shadow: none !important;
  }
}

/* ----- Accessibility Focus States ----- */
*:focus-visible {
  outline: 2px solid var(--fly-gold) !important;
  outline-offset: 2px !important;
}

/* ----- Kajabi-Specific Overrides ----- */
/* Kajabi checkout form wrapper */
.kjb-checkout,
.kjb-checkout-form {
  background: transparent !important;
}

/* Kajabi embedded checkout styling */
.kjb-embedded-checkout {
  background: white !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
}

/* Kajabi buttons */
.kjb-button,
.kjb-btn-primary {
  background: var(--fly-gold) !important;
  border-radius: 2px !important;
}

/* Kajabi form fields */
.kjb-form-control {
  border-radius: 2px !important;
  border-color: var(--fly-cream-dark) !important;
}

.kjb-form-control:focus {
  border-color: var(--fly-gold) !important;
  box-shadow: 0 0 0 3px rgba(196, 160, 82, 0.15) !important;
}

/* Kajabi pricing card */
.kjb-pricing-card {
  border-radius: 4px !important;
  border: 1px solid var(--fly-cream-dark) !important;
}

.kjb-pricing-card.selected,
.kjb-pricing-card:hover {
  border-color: var(--fly-gold) !important;
}

/* ----- Custom Utility Classes ----- */
.text-gold { color: var(--fly-gold) !important; }
.text-charcoal { color: var(--fly-charcoal) !important; }
.text-muted { color: var(--fly-text-muted) !important; }
.bg-cream { background-color: var(--fly-cream) !important; }
.bg-charcoal { background-color: var(--fly-charcoal) !important; }
.bg-gold { background-color: var(--fly-gold) !important; }