/*
Theme Name: myTppy Brand Theme
Theme URI: https://mytppy.com
Description: Custom child theme for myTppy.com NFC business card platform. Built for Beaver Builder compatibility with a complete light/dark mode brand color system.
Author: myTppy
Author URI: https://mytppy.com
Template: bb-theme
Version: 2026.03.20-0222
Text Domain: mytppy
License: GPL-2.0-or-later

== Brand Colors ==
Primary (Tap Green): #0F9B7A (light) / #2ECDA7 (dark)
Secondary (NFC Violet): #6C63FF
Ink: #1A1A1A
Parchment: #F0EDE6
Alert: #F5634A
*/

/* ============================================
   CSS CUSTOM PROPERTIES — BRAND SYSTEM
   ============================================ */

:root {
  /* === Core Brand Colors === */
  --mytppy-green-900: #042E23;
  --mytppy-green-800: #084D3D;
  --mytppy-green-700: #0B7A5E;
  --mytppy-green-600: #0F9B7A;
  --mytppy-green-500: #1AB38D;
  --mytppy-green-400: #2ECDA7;
  --mytppy-green-300: #63DEBB;
  --mytppy-green-200: #A8F0D8;
  --mytppy-green-100: #D4F7EC;
  --mytppy-green-50:  #EEF9F5;

  --mytppy-violet-900: #2A2566;
  --mytppy-violet-800: #3D3899;
  --mytppy-violet-700: #524DCC;
  --mytppy-violet-600: #6C63FF;
  --mytppy-violet-500: #8880FF;
  --mytppy-violet-400: #A49EFF;
  --mytppy-violet-300: #C0BBFF;
  --mytppy-violet-200: #DDDAFF;
  --mytppy-violet-100: #EEECFF;
  --mytppy-violet-50:  #F7F6FF;

  --mytppy-ink:        #1A1A1A;
  --mytppy-parchment:  #F0EDE6;
  --mytppy-alert:      #F5634A;
  --mytppy-alert-light:#FDEBE7;
  --mytppy-success:    #0F9B7A;
  --mytppy-warning:    #E8A317;
  --mytppy-warning-light: #FDF3DC;

  /* === Neutral Scale === */
  --mytppy-gray-900: #1A1A1A;
  --mytppy-gray-800: #2D2D2D;
  --mytppy-gray-700: #404040;
  --mytppy-gray-600: #5C5C5C;
  --mytppy-gray-500: #7A7A7A;
  --mytppy-gray-400: #9E9E9E;
  --mytppy-gray-300: #BFBFBF;
  --mytppy-gray-200: #DCDCDC;
  --mytppy-gray-100: #EFEFEF;
  --mytppy-gray-50:  #F7F7F5;

  /* === Semantic Tokens (Light Mode Default) === */
  --color-primary:           var(--mytppy-green-600);
  --color-primary-hover:     var(--mytppy-green-700);
  --color-primary-active:    var(--mytppy-green-800);
  --color-primary-subtle:    var(--mytppy-green-50);
  --color-secondary:         var(--mytppy-violet-600);
  --color-secondary-hover:   var(--mytppy-violet-700);
  --color-secondary-subtle:  var(--mytppy-violet-50);

  --color-bg:                #FFFFFF;
  --color-bg-alt:            var(--mytppy-gray-50);
  --color-bg-elevated:       #FFFFFF;
  --color-bg-overlay:        rgba(0, 0, 0, 0.5);

  --color-text:              var(--mytppy-gray-900);
  --color-text-secondary:    var(--mytppy-gray-600);
  --color-text-tertiary:     var(--mytppy-gray-400);
  --color-text-on-primary:   #FFFFFF;
  --color-text-on-dark:      var(--mytppy-parchment);

  --color-border:            var(--mytppy-gray-200);
  --color-border-hover:      var(--mytppy-gray-300);
  --color-border-focus:      var(--mytppy-green-600);

  --color-link:              var(--mytppy-green-700);
  --color-link-hover:        var(--mytppy-green-800);

  /* === Logo paths (relative to theme) === */
  --mytppy-logo: url('images/mytppy-logo-light.png');
  --mytppy-logo-alt: url('images/mytppy-logo-dark.png');
  --mytppy-app-icon: url('images/mytppy-app-icon-light.png');
  --mytppy-app-icon-alt: url('images/mytppy-app-icon-dark.png');

  /* === Typography === */
  --font-heading:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* === Spacing === */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* === Radii === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill:  9999px;

  /* === Shadows === */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.16);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ============================================
   DARK MODE
   ============================================ */

[data-theme="dark"],
.dark-mode,
body.fl-builder-dark {
  --color-primary:           var(--mytppy-green-400);
  --color-primary-hover:     var(--mytppy-green-300);
  --color-primary-active:    var(--mytppy-green-500);
  --color-primary-subtle:    var(--mytppy-green-900);
  --color-secondary:         var(--mytppy-violet-400);
  --color-secondary-hover:   var(--mytppy-violet-300);
  --color-secondary-subtle:  var(--mytppy-violet-900);

  --color-bg:                #111111;
  --color-bg-alt:            #1A1A1A;
  --color-bg-elevated:       #222222;
  --color-bg-overlay:        rgba(0, 0, 0, 0.7);

  --color-text:              var(--mytppy-parchment);
  --color-text-secondary:    var(--mytppy-gray-400);
  --color-text-tertiary:     var(--mytppy-gray-500);
  --color-text-on-primary:   var(--mytppy-green-900);
  --color-text-on-dark:      var(--mytppy-parchment);

  --color-border:            var(--mytppy-gray-700);
  --color-border-hover:      var(--mytppy-gray-600);
  --color-border-focus:      var(--mytppy-green-400);

  --color-link:              var(--mytppy-green-400);
  --color-link-hover:        var(--mytppy-green-300);

  --mytppy-logo: url('images/mytppy-logo-dark.png');
  --mytppy-app-icon: url('images/mytppy-app-icon-dark.png');

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:           var(--mytppy-green-400);
    --color-primary-hover:     var(--mytppy-green-300);
    --color-primary-active:    var(--mytppy-green-500);
    --color-primary-subtle:    var(--mytppy-green-900);
    --color-secondary:         var(--mytppy-violet-400);
    --color-secondary-hover:   var(--mytppy-violet-300);
    --color-secondary-subtle:  var(--mytppy-violet-900);

    --color-bg:                #111111;
    --color-bg-alt:            #1A1A1A;
    --color-bg-elevated:       #222222;
    --color-bg-overlay:        rgba(0, 0, 0, 0.7);

    --color-text:              var(--mytppy-parchment);
    --color-text-secondary:    var(--mytppy-gray-400);
    --color-text-tertiary:     var(--mytppy-gray-500);
    --color-text-on-primary:   var(--mytppy-green-900);
    --color-text-on-dark:      var(--mytppy-parchment);

    --color-border:            var(--mytppy-gray-700);
    --color-border-hover:      var(--mytppy-gray-600);
    --color-border-focus:      var(--mytppy-green-400);

    --color-link:              var(--mytppy-green-400);
    --color-link-hover:        var(--mytppy-green-300);

    --mytppy-logo: url('images/mytppy-logo-dark.png');
    --mytppy-app-icon: url('images/mytppy-app-icon-dark.png');

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }


a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

/* ============================================
   LOGO — AUTO DARK/LIGHT SWITCHING
   ============================================ */

.mytppy-logo {
  display: inline-block;
  max-width: 200px;
  height: auto;
}

.mytppy-logo-dark  { display: none; }
.mytppy-logo-light { display: inline-block; }

[data-theme="dark"] .mytppy-logo-dark  { display: inline-block; }
[data-theme="dark"] .mytppy-logo-light { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mytppy-logo-dark  { display: inline-block; }
  :root:not([data-theme="light"]) .mytppy-logo-light { display: none; }
}

.mytppy-logo-bg {
  background-image: var(--mytppy-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================
   UTILITY CLASSES (Beaver Builder friendly)
   ============================================ */

.mytppy-section-dark {
  background-color: var(--mytppy-ink);
  color: var(--mytppy-parchment);
}

.mytppy-section-dark .fl-module-content h1,
.mytppy-section-dark .fl-module-content h2,
.mytppy-section-dark .fl-module-content h3,
.mytppy-section-dark .fl-module-content h4 {
  color: var(--mytppy-parchment);
}

.mytppy-section-dark a {
  color: var(--mytppy-green-400);
}

.mytppy-section-dark .mytppy-logo-light { display: none !important; }
.mytppy-section-dark .mytppy-logo-dark  { display: inline-block !important; }

.mytppy-section-light {
  background-color: #FFFFFF;
  color: var(--mytppy-ink);
}

.mytppy-section-light .mytppy-logo-dark  { display: none !important; }
.mytppy-section-light .mytppy-logo-light { display: inline-block !important; }

.mytppy-section-alt {
  background-color: var(--color-bg-alt);
}

.mytppy-section-brand {
  background-color: var(--mytppy-green-600);
  color: #FFFFFF;
}

.mytppy-section-brand h1,
.mytppy-section-brand h2,
.mytppy-section-brand h3,
.mytppy-section-brand h4 {
  color: #FFFFFF;
}

/* ============================================
   BUTTONS
   ============================================ */

.mytppy-btn,
.fl-button-group .mytppy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  gap: 0.5rem;
}

.mytppy-btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.mytppy-btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.mytppy-btn-secondary {
  background-color: var(--color-secondary);
  color: #FFFFFF;
  border-color: var(--color-secondary);
}
.mytppy-btn-secondary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.mytppy-btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.mytppy-btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.mytppy-btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.mytppy-btn-ghost:hover {
  background-color: var(--color-primary-subtle);
  color: var(--color-primary);
}

.mytppy-btn-lg {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
  border-radius: var(--radius-xl);
}

.mytppy-btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

/* ============================================
   CARDS
   ============================================ */

.mytppy-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: all var(--transition-base);
}

.mytppy-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.mytppy-card-flat {
  background-color: var(--color-bg-alt);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */

.mytppy-theme-toggle-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: all var(--transition-fast);
}

.mytppy-theme-toggle-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-subtle);
}

.mytppy-icon-sun  { display: none; }
.mytppy-icon-moon { display: block; }

[data-theme="dark"] .mytppy-icon-sun  { display: block; }
[data-theme="dark"] .mytppy-icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mytppy-icon-sun  { display: block; }
  :root:not([data-theme="light"]) .mytppy-icon-moon { display: none; }
}

/* Toggle switch variant */
.mytppy-theme-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.mytppy-theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.mytppy-theme-switch-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--color-border);
  border-radius: 26px;
  transition: background-color var(--transition-fast);
}

.mytppy-theme-switch-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; bottom: 3px;
  background-color: #FFFFFF;
  border-radius: 50%;
  transition: transform var(--transition-fast);
}

.mytppy-theme-switch input:checked + .mytppy-theme-switch-slider {
  background-color: var(--color-primary);
}

.mytppy-theme-switch input:checked + .mytppy-theme-switch-slider::before {
  transform: translateX(22px);
}

/* ============================================
   NFC TAP ANIMATION
   ============================================ */

@keyframes tapRipple {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

.mytppy-tap-ripple {
  position: relative;
}

.mytppy-tap-ripple::before,
.mytppy-tap-ripple::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  animation: tapRipple 2s ease-out infinite;
}

.mytppy-tap-ripple::after {
  animation-delay: 0.6s;
}

/* ============================================
   BEAVER BUILDER / BB THEME OVERRIDES
   ============================================ */

.fl-builder-content .fl-button {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-lg) !important;
}

.fl-row.mytppy-section-dark .fl-row-content-wrap {
  background-color: var(--mytppy-ink);
}

.fl-builder-content .fl-module-heading .fl-heading {
  font-family: var(--font-heading);
}

/* BB Theme header logo area */
.fl-page-header .fl-page-header-logo img {
  max-height: 60px;
  width: auto;
}

/* BB Theme nav styling */
.fl-page-nav .navbar-nav > li > a {
  font-family: var(--font-body);
  transition: color var(--transition-fast);
}

.fl-page-nav .navbar-nav > li > a:hover {
  color: var(--color-primary) !important;
}

/* Form fields */
.fl-builder-content input[type="text"],
.fl-builder-content input[type="email"],
.fl-builder-content input[type="tel"],
.fl-builder-content input[type="url"],
.fl-builder-content textarea,
.fl-builder-content select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 16px;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fl-builder-content input:focus,
.fl-builder-content textarea:focus,
.fl-builder-content select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

/* ============================================
   WOOCOMMERCE DARK MODE
   ============================================ */

/* Product pages */
[data-theme="dark"] .woocommerce .products .product,
[data-theme="dark"] .woocommerce ul.products li.product {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

[data-theme="dark"] .woocommerce ul.products li.product .woocommerce-loop-product__title,
[data-theme="dark"] .woocommerce ul.products li.product h2 {
    color: var(--color-text);
}

[data-theme="dark"] .woocommerce ul.products li.product .price,
[data-theme="dark"] .woocommerce div.product p.price,
[data-theme="dark"] .woocommerce div.product span.price {
    color: var(--color-primary);
}

[data-theme="dark"] .woocommerce .product .summary {
    color: var(--color-text);
}

[data-theme="dark"] .woocommerce .product .woocommerce-product-details__short-description {
    color: var(--color-text-secondary);
}

/* Cart */
[data-theme="dark"] .woocommerce table.shop_table {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .woocommerce table.shop_table th {
    background-color: var(--color-bg-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .woocommerce table.shop_table td {
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .woocommerce table.shop_table tbody tr:nth-child(even) {
    background-color: var(--color-bg-alt);
}

[data-theme="dark"] .woocommerce .cart-collaterals .cart_totals {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Checkout */
[data-theme="dark"] .woocommerce form.checkout,
[data-theme="dark"] .woocommerce-checkout #payment {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .woocommerce-checkout #payment div.payment_box {
    background-color: var(--color-bg-alt);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .woocommerce-checkout #payment ul.payment_methods {
    border-color: var(--color-border);
}

[data-theme="dark"] .woocommerce form .form-row label {
    color: var(--color-text);
}

[data-theme="dark"] .woocommerce form .form-row input.input-text,
[data-theme="dark"] .woocommerce form .form-row textarea,
[data-theme="dark"] .woocommerce form .form-row select {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .woocommerce form .form-row input.input-text:focus,
[data-theme="dark"] .woocommerce form .form-row textarea:focus,
[data-theme="dark"] .woocommerce form .form-row select:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(46, 205, 167, 0.15);
}

/* Buttons */
[data-theme="dark"] .woocommerce a.button,
[data-theme="dark"] .woocommerce button.button,
[data-theme="dark"] .woocommerce input.button,
[data-theme="dark"] .woocommerce #respond input#submit {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

[data-theme="dark"] .woocommerce a.button:hover,
[data-theme="dark"] .woocommerce button.button:hover,
[data-theme="dark"] .woocommerce input.button:hover,
[data-theme="dark"] .woocommerce #respond input#submit:hover {
    background-color: var(--color-primary-hover);
}

[data-theme="dark"] .woocommerce a.button.alt,
[data-theme="dark"] .woocommerce button.button.alt,
[data-theme="dark"] .woocommerce input.button.alt {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

[data-theme="dark"] .woocommerce a.button.alt:hover,
[data-theme="dark"] .woocommerce button.button.alt:hover,
[data-theme="dark"] .woocommerce input.button.alt:hover {
    background-color: var(--color-primary-hover);
}

/* My Account */
[data-theme="dark"] .woocommerce-MyAccount-navigation ul {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[data-theme="dark"] .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .woocommerce-MyAccount-navigation ul li a {
    color: var(--color-text);
    padding: 0.75rem 1rem;
    display: block;
    transition: all var(--transition-fast);
}

[data-theme="dark"] .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary);
}

[data-theme="dark"] .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary);
    font-weight: 600;
}

[data-theme="dark"] .woocommerce-MyAccount-content {
    color: var(--color-text);
}

/* Order details */
[data-theme="dark"] .woocommerce-order-details,
[data-theme="dark"] .woocommerce-customer-details {
    color: var(--color-text);
}

/* Notices */
[data-theme="dark"] .woocommerce-message,
[data-theme="dark"] .woocommerce-info {
    background-color: var(--color-bg-elevated);
    border-top-color: var(--color-primary);
    color: var(--color-text);
}

[data-theme="dark"] .woocommerce-error {
    background-color: var(--color-bg-elevated);
    border-top-color: var(--mytppy-alert);
    color: var(--color-text);
}

[data-theme="dark"] .woocommerce-message::before,
[data-theme="dark"] .woocommerce-info::before {
    color: var(--color-primary);
}

/* Reviews */
[data-theme="dark"] .woocommerce #reviews #comments ol.commentlist li .comment-text {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Widgets */
[data-theme="dark"] .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    background-color: var(--color-bg-alt);
}

[data-theme="dark"] .woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    background-color: var(--color-primary);
}

/* Quantity input */
[data-theme="dark"] .woocommerce .quantity .qty,
[data-theme="dark"] .woocommerce .quantity input[type="number"] {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    -webkit-appearance: none;
}

/* Native select elements (shop ordering, variations, etc.) */
[data-theme="dark"] .woocommerce-ordering select,
[data-theme="dark"] .woocommerce select,
[data-theme="dark"] .woocommerce .orderby,
[data-theme="dark"] .woocommerce form select {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .woocommerce-ordering select option,
[data-theme="dark"] .woocommerce select option {
    background-color: var(--color-bg-elevated);
    color: var(--color-text);
}

/* Product page native inputs */
[data-theme="dark"] .woocommerce div.product form.cart select,
[data-theme="dark"] .woocommerce div.product form.cart input[type="number"] {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* Coupon */
[data-theme="dark"] .woocommerce .coupon input.input-text {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* Select2 (WooCommerce uses select2 for dropdowns) */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    background-color: var(--color-bg-elevated);
    color: var(--color-text);
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Tabs (product page) */
[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
}

[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: var(--color-bg-alt);
    border-color: var(--color-border);
}

[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: var(--color-bg-elevated);
    border-bottom-color: var(--color-bg-elevated);
}

[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-text);
}

[data-theme="dark"] .woocommerce div.product .woocommerce-tabs .panel {
    background-color: var(--color-bg-elevated);
    color: var(--color-text);
}

/* Sale badge */
[data-theme="dark"] .woocommerce span.onsale {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* Star rating */
[data-theme="dark"] .woocommerce .star-rating span::before {
    color: var(--mytppy-warning);
}

/* WooCommerce Blocks Checkout — Dark Mode */
[data-theme="dark"] .wc-block-checkout input[type="text"],
[data-theme="dark"] .wc-block-checkout input[type="email"],
[data-theme="dark"] .wc-block-checkout input[type="tel"],
[data-theme="dark"] .wc-block-checkout input[type="password"],
[data-theme="dark"] .wc-block-checkout input[type="search"],
[data-theme="dark"] .wc-block-checkout input[type="url"],
[data-theme="dark"] .wc-block-checkout input[type="number"],
[data-theme="dark"] .wc-block-checkout textarea,
[data-theme="dark"] .wc-block-checkout select,
[data-theme="dark"] .wc-block-checkout .wc-blocks-components-select__select {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .wc-block-checkout input::placeholder,
[data-theme="dark"] .wc-block-checkout textarea::placeholder {
    color: var(--color-text-tertiary) !important;
}

/* Floating labels (used as placeholders in WC Blocks) */
[data-theme="dark"] .wc-block-components-text-input label,
[data-theme="dark"] .wc-block-components-address-form label,
[data-theme="dark"] .wc-blocks-components-select label {
    color: var(--color-text-secondary) !important;
}

/* Section headings and text */
[data-theme="dark"] .wc-block-checkout fieldset legend,
[data-theme="dark"] .wc-block-checkout .wc-block-components-title,
[data-theme="dark"] .wc-block-checkout h2,
[data-theme="dark"] .wc-block-checkout h3 {
    color: var(--color-text) !important;
}

[data-theme="dark"] .wc-block-checkout p,
[data-theme="dark"] .wc-block-checkout span,
[data-theme="dark"] .wc-block-checkout label {
    color: var(--color-text) !important;
}

/* Order summary sidebar */
[data-theme="dark"] .wc-block-components-order-summary,
[data-theme="dark"] .wc-block-components-totals-wrapper,
[data-theme="dark"] .wc-block-components-panel {
    background-color: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .wc-block-components-order-summary-item__description {
    color: var(--color-text-secondary) !important;
}

/* Radio buttons and checkboxes */
[data-theme="dark"] .wc-block-components-radio-control__option,
[data-theme="dark"] .wc-block-components-checkbox {
    color: var(--color-text) !important;
}

[data-theme="dark"] .wc-block-components-radio-control__input,
[data-theme="dark"] .wc-block-components-checkbox__input {
    accent-color: var(--color-primary);
}

/* Payment options box */
[data-theme="dark"] .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
}

/* Select dropdowns */
[data-theme="dark"] .wc-block-checkout .wc-blocks-components-select__container {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
}

/* Express checkout separator */
[data-theme="dark"] .wc-block-components-express-payment--light {
    background-color: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .wc-block-components-express-payment__title-container {
    color: var(--color-text-secondary) !important;
}

/* Delivery method tabs */
[data-theme="dark"] .wc-block-checkout__shipping-method-option--selected {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .wc-block-checkout__shipping-method-container {
    border-color: var(--color-border) !important;
}

/* Focus states */
[data-theme="dark"] .wc-block-checkout input:focus,
[data-theme="dark"] .wc-block-checkout textarea:focus,
[data-theme="dark"] .wc-block-checkout select:focus {
    border-color: var(--color-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(46, 205, 167, 0.15) !important;
}

/* prefers-color-scheme fallback */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wc-block-checkout input[type="text"],
    :root:not([data-theme="light"]) .wc-block-checkout input[type="email"],
    :root:not([data-theme="light"]) .wc-block-checkout input[type="tel"],
    :root:not([data-theme="light"]) .wc-block-checkout textarea,
    :root:not([data-theme="light"]) .wc-block-checkout select,
    :root:not([data-theme="light"]) .wc-block-checkout .wc-blocks-components-select__select {
        background-color: var(--color-bg-alt) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }

    :root:not([data-theme="light"]) .wc-block-checkout input::placeholder,
    :root:not([data-theme="light"]) .wc-block-checkout textarea::placeholder {
        color: var(--color-text-tertiary) !important;
    }

    :root:not([data-theme="light"]) .wc-block-components-text-input label,
    :root:not([data-theme="light"]) .wc-block-components-address-form label,
    :root:not([data-theme="light"]) .wc-blocks-components-select label {
        color: var(--color-text-secondary) !important;
    }

    :root:not([data-theme="light"]) .wc-block-checkout p,
    :root:not([data-theme="light"]) .wc-block-checkout span,
    :root:not([data-theme="light"]) .wc-block-checkout label {
        color: var(--color-text) !important;
    }

    :root:not([data-theme="light"]) .wc-block-components-order-summary,
    :root:not([data-theme="light"]) .wc-block-components-totals-wrapper,
    :root:not([data-theme="light"]) .wc-block-components-panel {
        background-color: var(--color-bg-elevated) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    :root:not([data-theme="light"]) .wc-block-checkout__shipping-method-option--selected {
        background-color: var(--color-bg-alt) !important;
        color: var(--color-text) !important;
    }

    :root:not([data-theme="light"]) .wc-block-checkout__shipping-method-container {
        border-color: var(--color-border) !important;
    }
}

/* ============================================
   BB THEME STRUCTURAL DARK MODE OVERRIDES
   BB Theme's parent CSS uses hardcoded colors that
   override the child theme's CSS variable approach.
   These !important rules ensure dark mode works on
   all BB Theme structural wrappers.
   ============================================ */

/* Page shell */
[data-theme="dark"] body,
[data-theme="dark"] .fl-page,
[data-theme="dark"] .fl-page-content,
[data-theme="dark"] .fl-content,
[data-theme="dark"] .fl-content-wrap {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* Header */
[data-theme="dark"] .fl-page-header,
[data-theme="dark"] .fl-page-header-wrap,
[data-theme="dark"] .fl-page-header-container,
[data-theme="dark"] .fl-page-header-row {
    background-color: var(--color-bg-alt) !important;
    border-color: var(--color-border) !important;
}

/* Fixed / Shrink header */
[data-theme="dark"] .fl-page-header-fixed,
[data-theme="dark"] .fl-page-header-fixed .fl-page-header-wrap {
    background-color: var(--color-bg-alt) !important;
}

/* Top bar */
[data-theme="dark"] .fl-page-bar {
    background-color: var(--color-bg-elevated) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .fl-page-bar-text,
[data-theme="dark"] .fl-page-bar a {
    color: var(--color-text-secondary) !important;
}

/* Navigation */
[data-theme="dark"] .fl-page-nav,
[data-theme="dark"] .fl-page-nav-wrap {
    background-color: var(--color-bg-alt) !important;
}

[data-theme="dark"] .fl-page-nav .navbar-nav > li > a {
    color: var(--color-text) !important;
}

[data-theme="dark"] .fl-page-nav .navbar-nav > li > a:hover,
[data-theme="dark"] .fl-page-nav .navbar-nav > li > a:focus {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .fl-page-nav .navbar-nav > li.current-menu-item > a,
[data-theme="dark"] .fl-page-nav .navbar-nav > li.current_page_item > a {
    color: var(--color-primary) !important;
}

/* Sub-menus / Dropdowns */
[data-theme="dark"] .fl-page-nav ul.sub-menu,
[data-theme="dark"] .fl-page-nav .navbar-nav ul.sub-menu {
    background-color: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .fl-page-nav ul.sub-menu li a {
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .fl-page-nav ul.sub-menu li a:hover {
    background-color: var(--color-primary-subtle) !important;
    color: var(--color-primary) !important;
}

/* Footer */
[data-theme="dark"] .fl-page-footer,
[data-theme="dark"] .fl-page-footer-wrap,
[data-theme="dark"] .fl-page-footer-widgets,
[data-theme="dark"] .fl-page-footer-widgets-wrap {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .fl-page-footer a {
    color: var(--color-link) !important;
}

[data-theme="dark"] .fl-page-footer a:hover {
    color: var(--color-link-hover) !important;
}

/* Headings inside BB Theme page */
[data-theme="dark"] .fl-page h1,
[data-theme="dark"] .fl-page h2,
[data-theme="dark"] .fl-page h3,
[data-theme="dark"] .fl-page h4,
[data-theme="dark"] .fl-page h5,
[data-theme="dark"] .fl-page h6 {
    color: var(--color-text) !important;
}

/* Body text and lists */
[data-theme="dark"] .fl-page p,
[data-theme="dark"] .fl-page li,
[data-theme="dark"] .fl-module-content {
    color: var(--color-text) !important;
}

/* Links */
[data-theme="dark"] .fl-page a:not(.mytppy-btn):not(.fl-button):not(.button):not(.woocommerce a.button):not([class*="mtpy-"]):not(.nfc-install-app-action):not(.add-contact-btn):not(.social-link):not(.contact-link):not(.payment-method-link) {
    color: var(--color-link) !important;
}

[data-theme="dark"] .fl-page a:not(.mytppy-btn):not(.fl-button):not(.button):not(.woocommerce a.button):not([class*="mtpy-"]):not(.nfc-install-app-action):not(.add-contact-btn):not(.social-link):not(.contact-link):not(.payment-method-link):hover {
    color: var(--color-link-hover) !important;
}

/* BB Builder rows & modules */
[data-theme="dark"] .fl-row-content-wrap {
    background-color: transparent !important;
}

[data-theme="dark"] .fl-col-content {
    color: var(--color-text) !important;
}

/* BB Theme widgets */
[data-theme="dark"] .fl-page .widget,
[data-theme="dark"] .fl-page .widget-title {
    color: var(--color-text) !important;
}

/* prefers-color-scheme fallback for key structural elements */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body,
    :root:not([data-theme="light"]) .fl-page,
    :root:not([data-theme="light"]) .fl-page-content,
    :root:not([data-theme="light"]) .fl-content {
        background-color: var(--color-bg) !important;
        color: var(--color-text) !important;
    }
    :root:not([data-theme="light"]) .fl-page-header,
    :root:not([data-theme="light"]) .fl-page-header-wrap,
    :root:not([data-theme="light"]) .fl-page-nav,
    :root:not([data-theme="light"]) .fl-page-nav-wrap {
        background-color: var(--color-bg-alt) !important;
    }
    :root:not([data-theme="light"]) .fl-page-nav .navbar-nav > li > a {
        color: var(--color-text) !important;
    }
    :root:not([data-theme="light"]) .fl-page-footer,
    :root:not([data-theme="light"]) .fl-page-footer-wrap {
        background-color: var(--color-bg-alt) !important;
        color: var(--color-text) !important;
    }
    :root:not([data-theme="light"]) .fl-page h1,
    :root:not([data-theme="light"]) .fl-page h2,
    :root:not([data-theme="light"]) .fl-page h3,
    :root:not([data-theme="light"]) .fl-page h4,
    :root:not([data-theme="light"]) .fl-page h5,
    :root:not([data-theme="light"]) .fl-page h6 {
        color: var(--color-text) !important;
    }
    :root:not([data-theme="light"]) .fl-page p,
    :root:not([data-theme="light"]) .fl-page li,
    :root:not([data-theme="light"]) .fl-module-content {
        color: var(--color-text) !important;
    }
}

/* ============================================
   GRAVITY FORMS
   Override GF's CSS custom properties to map to
   the myTppy brand design system. This avoids
   fighting GF specificity with !important.
   ============================================ */

/* Form wrapper — card style matching login page */
.gform_wrapper.gform-theme {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  max-width: 560px;
  margin: var(--space-lg) auto;

  /*
   * GF CSS variable overrides.
   * !important is required because GF injects an inline <style> with
   * ID+attribute selectors (#gform_wrapper_N[data-form-index].gform-theme)
   * that would otherwise beat class-only selectors.
   */

  /* Colors → myTppy brand */
  --gf-color-primary: var(--color-primary) !important;
  --gf-color-primary-rgb: 15, 155, 122 !important;
  --gf-color-primary-contrast: var(--color-text-on-primary) !important;
  --gf-color-primary-contrast-rgb: 255, 255, 255 !important;
  --gf-color-primary-darker: var(--color-primary-hover) !important;
  --gf-color-primary-lighter: var(--color-primary-hover) !important;

  /* Input controls */
  --gf-color-in-ctrl: var(--color-bg) !important;
  --gf-color-in-ctrl-contrast: var(--color-text) !important;
  --gf-color-in-ctrl-contrast-rgb: 26, 26, 26 !important;
  --gf-color-in-ctrl-darker: var(--color-bg-alt) !important;
  --gf-color-in-ctrl-lighter: var(--color-bg-alt) !important;
  --gf-color-in-ctrl-dark-lighter: var(--color-border) !important;
  --gf-color-in-ctrl-dark-darker: var(--color-text) !important;
  --gf-color-in-ctrl-light-darker: var(--color-border) !important;
  --gf-color-in-ctrl-light-lighter: var(--color-bg-alt) !important;
  --gf-ctrl-border-color: var(--color-border) !important;
  --gf-ctrl-border-color-focus: var(--color-border-focus) !important;
  --gf-ctrl-bg-color: var(--color-bg) !important;
  --gf-ctrl-color: var(--color-text) !important;

  /* Outside controls (labels, descriptions) */
  --gf-color-out-ctrl-dark: var(--color-text-secondary) !important;
  --gf-color-out-ctrl-dark-darker: var(--color-text) !important;
  --gf-color-out-ctrl-dark-lighter: var(--color-text-secondary) !important;
  --gf-color-out-ctrl-light: var(--color-border) !important;
  --gf-color-out-ctrl-light-darker: var(--color-border-hover) !important;
  --gf-color-out-ctrl-light-lighter: var(--color-bg-alt) !important;

  /* Radius */
  --gf-radius: 8px !important;
  --gf-radius-max-sm: 4px !important;
  --gf-radius-max-md: 8px !important;
  --gf-radius-max-lg: 12px !important;
  --gf-ctrl-btn-radius: 12px !important;

  /* Sizing — slightly taller inputs */
  --gf-ctrl-size: 44px !important;
  --gf-ctrl-size-sm: 36px !important;
  --gf-ctrl-size-md: 44px !important;
  --gf-ctrl-size-lg: 48px !important;

  /* Typography */
  --gf-font-family-base: var(--font-body) !important;
  --gf-font-size-primary: 16px !important;
  --gf-font-weight-secondary: 600 !important;
  --gf-ctrl-btn-font-family: var(--font-body) !important;
  --gf-ctrl-btn-font-weight: 600 !important;
  --gf-ctrl-btn-font-size-md: 16px !important;

  /* Button sizing */
  --gf-ctrl-btn-size-md: 48px !important;
  --gf-ctrl-btn-padding-x-md: 24px !important;
  --gf-ctrl-btn-shadow: none !important;
  --gf-ctrl-btn-shadow-hover: var(--shadow-md) !important;

  /* Label colors (GF inline style sets these separately) */
  --gf-ctrl-label-color-primary: var(--color-text) !important;
  --gf-ctrl-label-color-secondary: var(--color-text) !important;

  /* In-control primary (checkbox/radio accents) */
  --gf-color-in-ctrl-primary: var(--color-primary) !important;
  --gf-color-in-ctrl-primary-rgb: 15, 155, 122 !important;
  --gf-color-in-ctrl-primary-contrast: var(--color-text-on-primary) !important;

  /* Focus ring */
  --gf-ctrl-outline-color-focus: var(--color-primary-subtle) !important;
  --gf-ctrl-outline-width-focus: 3px !important;

  /* Transitions */
  --gf-transition-duration: 0.15s !important;
}

/* Full-width submit button */
.gform_wrapper.gform-theme .gform_footer .gform_button {
  width: 100% !important;
  max-width: none !important;
}

/* Footer area */
.gform_wrapper.gform-theme .gform_footer {
  margin-top: var(--space-lg);
  padding-top: 0;
}

/* Validation errors */
.gform_wrapper.gform-theme .gfield_error {
  --gf-ctrl-border-color: var(--mytppy-alert);
  --gf-ctrl-border-color-focus: var(--mytppy-alert);
  --gf-ctrl-outline-color-focus: var(--mytppy-alert-light);
}

.gform_wrapper.gform-theme .gfield_error .gfield_label,
.gform_wrapper.gform-theme .validation_message {
  color: var(--mytppy-alert);
}

.gform_wrapper.gform-theme .gform_validation_errors,
.gform_wrapper.gform-theme .validation_error {
  border-color: var(--mytppy-alert);
  background-color: var(--mytppy-alert-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--mytppy-alert);
}

/* Confirmation message */
.gform_confirmation_message {
  background-color: var(--color-primary-subtle);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Checkbox / Radio */
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
  accent-color: var(--color-primary);
}

/* --- Gravity Forms Dark Mode --- */
[data-theme="dark"] .gform_wrapper.gform-theme {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);

  --gf-color-primary: var(--color-primary) !important;
  --gf-color-primary-rgb: 46, 205, 167 !important;
  --gf-color-primary-darker: var(--color-primary-hover) !important;
  --gf-color-primary-lighter: var(--color-primary-hover) !important;
  --gf-color-in-ctrl: var(--color-bg-alt) !important;
  --gf-color-in-ctrl-contrast: var(--color-text) !important;
  --gf-color-in-ctrl-contrast-rgb: 240, 237, 230 !important;
  --gf-color-in-ctrl-darker: var(--color-bg) !important;
  --gf-color-in-ctrl-lighter: var(--color-bg-elevated) !important;
  --gf-color-in-ctrl-dark-lighter: var(--color-border) !important;
  --gf-color-in-ctrl-dark-darker: var(--color-text) !important;
  --gf-color-in-ctrl-light-darker: var(--color-border) !important;
  --gf-color-in-ctrl-light-lighter: var(--color-bg-alt) !important;
  --gf-ctrl-border-color: var(--color-border) !important;
  --gf-ctrl-border-color-focus: var(--color-border-focus) !important;
  --gf-ctrl-bg-color: var(--color-bg-alt) !important;
  --gf-ctrl-color: var(--color-text) !important;
  --gf-color-out-ctrl-dark: var(--color-text-secondary) !important;
  --gf-color-out-ctrl-dark-darker: var(--color-text) !important;
  --gf-color-out-ctrl-dark-lighter: var(--color-text-secondary) !important;
  --gf-color-out-ctrl-light: var(--color-border) !important;
  --gf-color-out-ctrl-light-darker: var(--color-border-hover) !important;
  --gf-color-out-ctrl-light-lighter: var(--color-bg-alt) !important;
  --gf-ctrl-label-color-primary: var(--color-text) !important;
  --gf-ctrl-label-color-secondary: var(--color-text) !important;
  --gf-color-in-ctrl-primary: var(--color-primary) !important;
  --gf-color-in-ctrl-primary-rgb: 46, 205, 167 !important;
  --gf-ctrl-outline-color-focus: rgba(46, 205, 167, 0.15) !important;
}

/* Direct input overrides — GF framework doesn't apply its own
   CSS variables to inputs reliably, so we set properties directly */
[data-theme="dark"] .gform_wrapper.gform-theme input[type="text"],
[data-theme="dark"] .gform_wrapper.gform-theme input[type="email"],
[data-theme="dark"] .gform_wrapper.gform-theme input[type="password"],
[data-theme="dark"] .gform_wrapper.gform-theme input[type="tel"],
[data-theme="dark"] .gform_wrapper.gform-theme input[type="url"],
[data-theme="dark"] .gform_wrapper.gform-theme input[type="number"],
[data-theme="dark"] .gform_wrapper.gform-theme textarea,
[data-theme="dark"] .gform_wrapper.gform-theme select {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .gform_wrapper.gform-theme input:focus,
[data-theme="dark"] .gform_wrapper.gform-theme textarea:focus,
[data-theme="dark"] .gform_wrapper.gform-theme select:focus {
    border-color: var(--color-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(46, 205, 167, 0.15) !important;
}

/* prefers-color-scheme fallback for Gravity Forms */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gform_wrapper.gform-theme {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);

    --gf-color-primary: var(--color-primary) !important;
    --gf-color-primary-rgb: 46, 205, 167 !important;
    --gf-color-in-ctrl: var(--color-bg-alt) !important;
    --gf-color-in-ctrl-contrast: var(--color-text) !important;
    --gf-ctrl-border-color: var(--color-border) !important;
    --gf-ctrl-border-color-focus: var(--color-border-focus) !important;
    --gf-ctrl-bg-color: var(--color-bg-alt) !important;
    --gf-ctrl-color: var(--color-text) !important;
    --gf-color-out-ctrl-dark: var(--color-text-secondary) !important;
    --gf-color-out-ctrl-dark-darker: var(--color-text) !important;
    --gf-color-out-ctrl-light: var(--color-border) !important;
    --gf-ctrl-label-color-primary: var(--color-text) !important;
    --gf-ctrl-label-color-secondary: var(--color-text) !important;
    --gf-ctrl-outline-color-focus: rgba(46, 205, 167, 0.15) !important;
  }

  :root:not([data-theme="light"]) .gform_wrapper.gform-theme input[type="text"],
  :root:not([data-theme="light"]) .gform_wrapper.gform-theme input[type="email"],
  :root:not([data-theme="light"]) .gform_wrapper.gform-theme input[type="password"],
  :root:not([data-theme="light"]) .gform_wrapper.gform-theme textarea,
  :root:not([data-theme="light"]) .gform_wrapper.gform-theme select {
      background-color: var(--color-bg-alt) !important;
      color: var(--color-text) !important;
      border-color: var(--color-border) !important;
  }
}

/* ============================================
   ADMIN BAR DARK MODE TOGGLE
   ============================================ */

#wp-admin-bar-mytppy-dark-mode-toggle .ab-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    cursor: pointer !important;
}

#wp-admin-bar-mytppy-dark-mode-toggle .mytppy-adminbar-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

#wp-admin-bar-mytppy-dark-mode-toggle .mytppy-adminbar-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#wp-admin-bar-mytppy-dark-mode-toggle .mytppy-adminbar-sun {
    display: none;
}

#wp-admin-bar-mytppy-dark-mode-toggle .mytppy-adminbar-moon {
    display: inline-flex;
}

[data-theme="dark"] #wp-admin-bar-mytppy-dark-mode-toggle .mytppy-adminbar-sun {
    display: inline-flex;
}

[data-theme="dark"] #wp-admin-bar-mytppy-dark-mode-toggle .mytppy-adminbar-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #wp-admin-bar-mytppy-dark-mode-toggle .mytppy-adminbar-sun {
        display: inline-flex;
    }
    :root:not([data-theme="light"]) #wp-admin-bar-mytppy-dark-mode-toggle .mytppy-adminbar-moon {
        display: none;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.25rem;
    --text-4xl: 1.875rem;
    --text-3xl: 1.5rem;
  }

  .mytppy-btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: var(--text-base);
  }

  .mytppy-logo {
    max-width: 150px;
  }

  .gform_wrapper.gform-theme {
    padding: var(--space-lg) var(--space-md);
    margin: var(--space-md) auto;
  }
}