/**
 * Renewal page [flexauto_renewal_checkout] — forces dark theme on the page so
 * it matches single-flexauto_product (rest of the plugin). Mirrors the
 * approach used by body.single-flexauto_product in product-page-design.css.
 *
 * Brand-kit hex vars (set via wp_options.flexauto_brand_colors):
 *   --flexauto-primary    #DA7530
 *   --flexauto-accent     #FFB077
 *   --flexauto-success    #22a06b
 *   --flexauto-danger     #b32d2e
 *   --flexauto-background #0a0f1f
 *   --flexauto-surface    #131d34
 *   --flexauto-text       #ffffff
 *   --flexauto-muted      #8a96b0
 *
 * Specificity is body.flexauto-renewal-landing prefixed so theme/Elementor
 * cannot override.
 */

/* Force dark theme + dark page background on the WP theme content wrappers,
   same way body.single-flexauto_product is handled in product-page-design.css */
body.flexauto-renewal-landing,
html.flexauto-renewal-landing {
  --flexauto-background: 222 47% 6% !important;
  --flexauto-foreground: 210 40% 98% !important;
  --flexauto-card: 222 47% 9% !important;
  --flexauto-card-foreground: 210 40% 98% !important;
  --flexauto-secondary: 222 47% 14% !important;
  --flexauto-secondary-foreground: 210 40% 98% !important;
  --flexauto-muted-foreground: 215 20% 65% !important;
  --flexauto-border: 222 47% 18% !important;
  --flexauto-input: 222 47% 14% !important;
  background: var(--flexauto-background-hex, #0a0f1f) !important;
  color: var(--flexauto-text, #ffffff) !important;
}

body.flexauto-renewal-landing .site,
body.flexauto-renewal-landing .site-main,
body.flexauto-renewal-landing .site-content,
body.flexauto-renewal-landing .content-area,
body.flexauto-renewal-landing #content,
body.flexauto-renewal-landing #main,
body.flexauto-renewal-landing main,
body.flexauto-renewal-landing main.site-main,
body.flexauto-renewal-landing .entry-content,
body.flexauto-renewal-landing .post,
body.flexauto-renewal-landing article,
body.flexauto-renewal-landing .elementor,
body.flexauto-renewal-landing .elementor-section,
body.flexauto-renewal-landing .elementor-container,
body.flexauto-renewal-landing .elementor-widget-theme-post-content,
body.flexauto-renewal-landing .wp-block-group,
body.flexauto-renewal-landing .wp-block-post-content {
  background: #0a0f1f !important;
  background-color: #0a0f1f !important;
  color: #ffffff !important;
}

/* Hide the WP theme's auto-generated post title (we render our own) */
body.flexauto-renewal-landing .wp-block-post-title,
body.flexauto-renewal-landing .entry-title,
body.flexauto-renewal-landing main .wp-block-post-title,
body.flexauto-renewal-landing .elementor-page-title {
  display: none !important;
}

/* ===========================================================
   Renewal root wrapper
   =========================================================== */
body.flexauto-renewal-landing .flexauto-renewal-root {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 1rem 2.5rem;
  color: #ffffff !important;
  background: transparent;
}

body.flexauto-renewal-landing .flexauto-renewal-error {
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: #131d34 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-expiry-notice {
  background: rgba(255, 176, 119, 0.12) !important;
  border: 1px solid var(--flexauto-accent, #FFB077);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-expiry-notice strong {
  color: var(--flexauto-accent, #FFB077) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-config-card {
  background: var(--flexauto-surface, #131d34) !important;
  background-color: var(--flexauto-surface, #131d34) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-heading {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-heading-sub {
  font-weight: 400;
  color: var(--flexauto-muted, #8a96b0) !important;
  font-size: 15px;
}

body.flexauto-renewal-landing .flexauto-renewal-fields {
  display: grid;
  gap: 16px;
}

body.flexauto-renewal-landing .flexauto-renewal-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

body.flexauto-renewal-landing .flexauto-renewal-field-row--muted {
  background: rgba(255, 255, 255, 0.04) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-field-row--plain {
  background: rgba(255, 255, 255, 0.02) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-field-row--compact {
  padding-top: 10px;
  padding-bottom: 10px;
}

body.flexauto-renewal-landing .flexauto-renewal-field-row--emphasis {
  border-width: 2px;
  border-color: rgba(218, 117, 48, 0.4) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-field-row--tools {
  flex-wrap: wrap;
}

body.flexauto-renewal-landing .flexauto-renewal-label {
  flex: 0 0 140px;
  font-size: 13px;
  font-weight: 600;
  color: var(--flexauto-muted, #8a96b0) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-label--soft {
  font-weight: 400;
}

body.flexauto-renewal-landing .flexauto-renewal-value {
  flex: 1;
  font-size: 14px;
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-value--mono {
  font-family: ui-monospace, monospace;
}

body.flexauto-renewal-landing .flexauto-renewal-field-grow {
  flex: 1;
  min-width: 0;
}

body.flexauto-renewal-landing .flexauto-renewal-pill {
  font-size: 11px;
  color: var(--flexauto-muted, #8a96b0) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  padding: 2px 8px;
  border-radius: 4px;
}

body.flexauto-renewal-landing .flexauto-renewal-device-hint {
  font-family: system-ui, sans-serif;
  font-size: 12px;
  color: var(--flexauto-muted, #8a96b0) !important;
  margin-left: 8px;
}

body.flexauto-renewal-landing .flexauto-renewal-inline-radios {
  flex: 1;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

body.flexauto-renewal-landing .flexauto-renewal-inline-radios--sm {
  gap: 12px;
}

body.flexauto-renewal-landing .flexauto-renewal-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-radio-label--sm {
  font-size: 13px;
}

body.flexauto-renewal-landing .flexauto-renewal-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--flexauto-primary, #DA7530);
}

body.flexauto-renewal-landing .flexauto-renewal-radio--sm {
  width: 15px;
  height: 15px;
}

/* ===========================================================
   Selects + options — must be readable on dark surface
   =========================================================== */
body.flexauto-renewal-landing select,
body.flexauto-renewal-landing .flexauto-renewal-select,
body.flexauto-renewal-landing select.flexauto-renewal-select,
body.flexauto-renewal-landing select.renewal-extra-device-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 6px;
  font-size: 14px;
  background: #131d34 !important;
  background-color: #131d34 !important;
  color: #ffffff !important;
  appearance: auto;
  -webkit-appearance: menulist;
}

body.flexauto-renewal-landing select option,
body.flexauto-renewal-landing .flexauto-renewal-select option,
body.flexauto-renewal-landing select.flexauto-renewal-select option,
body.flexauto-renewal-landing select.renewal-extra-device-select option {
  background: #131d34 !important;
  background-color: #131d34 !important;
  color: #ffffff !important;
}

body.flexauto-renewal-landing select:focus,
body.flexauto-renewal-landing .flexauto-renewal-select:focus {
  outline: 2px solid var(--flexauto-primary, #DA7530) !important;
  outline-offset: 1px;
}

body.flexauto-renewal-landing .flexauto-renewal-select--sm {
  font-size: 13px;
  flex: 1;
  min-width: 0;
}

body.flexauto-renewal-landing .flexauto-renewal-field-row--tools .flexauto-renewal-select--sm {
  flex: 1;
}

body.flexauto-renewal-landing .flexauto-renewal-price-tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--flexauto-primary, #DA7530) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-extra-accounts-wrap {
  display: none;
  grid-column: 1 / -1;
}

body.flexauto-renewal-landing .flexauto-renewal-extra-section {
  display: none;
  margin-top: 8px;
}

body.flexauto-renewal-landing .flexauto-renewal-extra-panel {
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(218, 117, 48, 0.35);
  background: linear-gradient(
    135deg,
    rgba(218, 117, 48, 0.12),
    rgba(255, 255, 255, 0.04)
  ) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-extra-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--flexauto-primary, #DA7530) !important;
  margin-bottom: 12px;
}

body.flexauto-renewal-landing .flexauto-renewal-extra-panel-inner {
  display: grid;
  gap: 10px;
}

body.flexauto-renewal-landing .flexauto-renewal-extra-row {
  display: none;
  align-items: center;
  gap: 12px;
}

/* ===========================================================
   Inputs (text, email, password, etc)
   =========================================================== */
body.flexauto-renewal-landing input[type="text"].flexauto-renewal-input,
body.flexauto-renewal-landing input[type="email"].flexauto-renewal-input,
body.flexauto-renewal-landing input[type="password"].flexauto-renewal-input,
body.flexauto-renewal-landing .flexauto-renewal-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 6px;
  font-size: 14px;
  background: #131d34 !important;
  background-color: #131d34 !important;
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-input::placeholder {
  color: var(--flexauto-muted, #8a96b0) !important;
  opacity: 0.7;
}

body.flexauto-renewal-landing .flexauto-renewal-input:focus {
  outline: 2px solid var(--flexauto-primary, #DA7530) !important;
  outline-offset: 1px;
}

body.flexauto-renewal-landing .flexauto-renewal-input--sm {
  font-size: 13px;
}

body.flexauto-renewal-landing .flexauto-renewal-input--mono {
  font-family: ui-monospace, monospace;
}

/* ===========================================================
   Total + submit
   =========================================================== */
body.flexauto-renewal-landing .flexauto-renewal-price-banner {
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(218, 117, 48, 0.35);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(218, 117, 48, 0.18),
    rgba(255, 255, 255, 0.04)
  ) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-price-banner-label {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-price-banner-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--flexauto-primary, #DA7530) !important;
}

body.flexauto-renewal-landing .flexauto-renewal-submit {
  margin-top: 20px;
  width: 100%;
  background: var(--flexauto-primary, #DA7530) !important;
  color: #ffffff !important;
  border: none;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, filter 0.2s;
}

body.flexauto-renewal-landing .flexauto-renewal-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

body.flexauto-renewal-landing .flexauto-renewal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.flexauto-renewal-landing .flexauto-renewal-cart-msg {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
}

body.flexauto-renewal-landing .flexauto-renewal-cart-msg--error {
  background: rgba(179, 45, 46, 0.18) !important;
  border-color: var(--flexauto-danger, #b32d2e) !important;
  color: #fca5a5 !important;
}

body.flexauto-renewal-landing .flexauto-renewal-checkout-embed {
  margin-top: 0.5rem;
}

body.flexauto-renewal-landing .flexauto-checkout-container {
  color: #ffffff !important;
}