/**
 * Astra Theme Color Integration
 * All colors inherit from Astra theme customizer settings
 * This file ensures complete visual consistency with Astra
 */

/* ==========================================================================
   ELEMENTOR GLOBAL COLOR INTEGRATION
   ========================================================================== */

/* Map Elementor global colors to our system */
:root {
  /* Fallback to Elementor global colors if Astra colors are not available */
  --ast-theme-color: var(--e-global-color-accent, #25ad61);
  --ast-link-color: var(--e-global-color-primary, #6ec1e4);
  --ast-link-hover-color: var(--e-global-color-accent, #25ad61);
  --ast-text-color: var(--e-global-color-text, #7a7a7a);
  --ast-heading-color: var(--e-global-color-secondary, #54595f);

  /* Astra global colors from Elementor integration */
  --ast-global-color-0: var(--e-global-color-astglobalcolor0, #ffffff);
  --ast-global-color-1: var(--e-global-color-astglobalcolor1, #1a1a1a);
  --ast-global-color-2: var(--e-global-color-astglobalcolor2, #66cc66);

  /* Specific colors from production site Elementor CSS */
  --ast-menu-hover-color: #66cc66;
  --ast-menu-text-color: #d7d7d7;
  --ast-menu-bg-color: #ffffff;
  --ast-dark-text: #1a1a1a;
  --ast-light-text: #ffffff;

  /* Fallback to Elementor typography if Astra typography is not set */
  --ast-font-family-body: var(--e-global-typography-text-font-family, "Roboto");
  --ast-font-family-heading: var(
    --e-global-typography-primary-font-family,
    "Roboto"
  );
  --ast-font-weight-body: var(--e-global-typography-text-font-weight, 400);
  --ast-font-weight-heading: var(
    --e-global-typography-primary-font-weight,
    600
  );

  /* Container width from Elementor */
  --ast-container-width: 1200px;
  --ast-content-width: 1500px;

  /* Widget spacing from Elementor */
  --kit-widget-spacing: 20px;
}

/* ==========================================================================
   TEXT SELECTION AND USER SELECT STYLING
   ========================================================================== */

/* Ensure text selection is visible and doesn't disappear */
::selection {
  background-color: var(
    --ast-theme-color,
    var(--e-global-color-accent, #25ad61)
  );
  color: #ffffff;
}

::-moz-selection {
  background-color: var(
    --ast-theme-color,
    var(--e-global-color-accent, #25ad61)
  );
  color: #ffffff;
}

/* Ensure all text is selectable */
body,
.cages-product,
.cages-booking-card,
.cages-subscription-card,
.cages-order-card,
.site-footer,
.footer-widget,
.cages-functionality-container,
.cages-booking-container,
.cages-subscription-container,
.cages-registration-form-container,
.cages-login-form-container {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* Only apply dark background to specific functionality pages, not globally */
.cages-functionality-container,
.cages-booking-container,
.cages-subscription-container,
.cages-registration-form-container,
.cages-login-form-container,
.cages-membership-page {
  background-color: inherit; /* preferred */
}

html,
body,
#page {
  background-color: inherit; /* preferred */
}

.cages-global-footer,
.cages-footer-container,
.cages-footer-bottom {
  background-color: #1e2736;
}

/* Prevent text from disappearing on selection */
.cages-product::selection,
.cages-booking-card::selection,
.cages-subscription-card::selection,
.cages-order-card::selection,
.site-footer::selection,
.footer-widget::selection {
  background-color: var(
    --ast-theme-color,
    var(--e-global-color-accent, #25ad61)
  );
  color: #ffffff;
}

.cages-product::-moz-selection,
.cages-booking-card::-moz-selection,
.cages-subscription-card::-moz-selection,
.cages-order-card::-moz-selection,
.site-footer::-moz-selection,
.footer-widget::-moz-selection {
  background-color: var(
    --ast-theme-color,
    var(--e-global-color-accent, #25ad61)
  );
  color: #ffffff;
}

/* Ensure text visibility on double-click */
.cages-product *,
.cages-booking-card *,
.cages-subscription-card *,
.cages-order-card *,
.site-footer *,
.footer-widget * {
  color: inherit;
}

.cages-product *:hover,
.cages-booking-card *:hover,
.cages-subscription-card *:hover,
.cages-order-card *:hover,
.site-footer *:hover,
.footer-widget *:hover {
  color: inherit;
}

/* ==========================================================================
   GENERAL HOVER STATES AND INTERACTIVE ELEMENTS
   ========================================================================== */

/* General hover effects for interactive elements */
a:hover,
button:hover,
input:hover,
select:hover,
textarea:hover,
.card:hover,
.cages-product:hover,
.cages-booking-card:hover,
.cages-subscription-card:hover,
.cages-order-card:hover {
  transition: var(--ast-transition, all 0.2s ease);
}

/* Card hover effects */
/* Navigation hover effects */

/* Form element hover effects */
.cages-input:hover,
.cages-textarea:hover,
.cages-select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover {
  background-color: var(--ast-form-field-bg-color, #f8f9fa);
  border-color: var(--ast-theme-color, var(--e-global-color-accent, #25ad61));
}

/* Button hover enhancements */
.wlm-btn:hover,
.cages-button:hover,
.cages-register-btn:hover,
.cages-login-btn:hover,
.cages-cta-button:hover,
.cages-product .button:hover,
button.cages-action-btn:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Focus states for accessibility */
.cages-input:focus,
.cages-textarea:focus,
.cages-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus,
button:focus,
a:focus {
  outline: 2px solid
    var(--ast-theme-color, var(--e-global-color-accent, #25ad61));
  outline-offset: 2px;
}

/* ==========================================================================
   BACKGROUND COLOR FIXES
   ========================================================================== */

/* Limit the dark background to page content wrappers only */
body.wp-singular .site-content,
body.wp-singular #content,
body.wp-singular .content-area,
body.wp-singular #primary,
body.wp-singular .ast-plain-container .site-content,
body.wp-singular .ast-plain-container #content,
body.wp-singular .ast-plain-container .content-area,
body.wp-singular .ast-plain-container #primary,
body.wp-singular .ast-separate-container .site-content,
body.wp-singular .ast-separate-container #content,
body.wp-singular .ast-separate-container .content-area,
body.wp-singular .ast-separate-container #primary,
body.wp-singular .cages-functionality-container,
body.wp-singular .cages-booking-container,
body.wp-singular .cages-subscription-container,
body.wp-singular .cages-registration-form-container,
body.wp-singular .cages-login-form-container {
  background-color: #1e2736 !important;
}

/* Container backgrounds with better hover states */
.cages-product,
.cages-booking-card,
.cages-subscription-card,
.cages-order-card {
  background-color: #ffffff;
  transition: all 0.2s ease;
}

body.wp-singular.ast-plain-container .site-main > article,
body.wp-singular.ast-plain-container .site-main > .page,
body.wp-singular.ast-plain-container .site-main > .post,
body.wp-singular.ast-separate-container .site-main > article,
body.wp-singular.ast-separate-container .site-main > .page,
body.wp-singular.ast-separate-container .site-main > .post,
body.wp-singular.ast-separate-container
  .ast-article-single:not(.ast-related-post) {
  background: #1e2736 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   ASTRA COLOR INHERITANCE
   ========================================================================== */

/* Text colors */
.cages-functionality-container,
.cages-booking-container,
.cages-subscription-container,
.cages-registration-form-container,
.cages-login-form-container {
  color: var(--ast-text-color, var(--e-global-color-text, #7a7a7a));
}

/* Heading colors */
h1,
h2,
h3,
h4,
h5,
h6,
.cages-section-title,
.cages-page-title {
  color: var(--ast-heading-color, var(--e-global-color-secondary, #54595f));
}

/* Link colors */

/* Button colors - Primary */
.wlm-btn,
.cages-button,
.cages-register-btn,
.cages-login-btn,
.cages-cta-button,
.cages-product .button,
button.cages-action-btn,
.button {
  background-color: var(
    --ast-button-bg-color,
    var(--ast-theme-color, var(--e-global-color-accent, #25ad61))
  );
  color: var(--ast-button-text-color, #ffffff);
  border-color: var(
    --ast-button-border-color,
    var(
      --ast-button-bg-color,
      var(--ast-theme-color, var(--e-global-color-accent, #25ad61))
    )
  );
}

/* Button hover colors */
.wlm-btn:hover,
.cages-button:hover,
.cages-register-btn:hover,
.cages-login-btn:hover,
.cages-cta-button:hover,
.cages-product .button:hover,
button.cages-action-btn:hover,
.button:hover {
  background-color: var(
    --ast-button-hover-bg-color,
    var(--ds-color-hover-surface, #e7f6ff)
  );
  color: var(--ast-button-hover-text-color, var(--ds-color-primary, #0085ff));
  border-color: var(
    --ast-button-hover-border-color,
    var(--ds-color-hover-surface, #e7f6ff)
  );
}

/* WooCommerce My Account Buttons Fix */
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-Button.button,
.woocommerce-form-login .button,
.woocommerce-form-register .button {
  background-color: #20b07a !important; /* TURF Green */
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 12px 32px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: none !important;
  transition: all 0.3s ease !important;
  min-height: 48px !important;
  cursor: pointer !important;
}

.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-form-register .woocommerce-form-register__submit:hover,
.woocommerce-Button.button:hover,
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Secondary button colors */
.wlm-btn.secondary,
.cages-button.secondary {
  background-color: transparent;
  color: var(
    --ast-button-bg-color,
    var(--ast-theme-color, var(--e-global-color-accent, #25ad61))
  );
  border-color: var(
    --ast-button-border-color,
    var(
      --ast-button-bg-color,
      var(--ast-theme-color, var(--e-global-color-accent, #25ad61))
    )
  );
}

.wlm-btn.secondary:hover,
.cages-button.secondary:hover {
  background-color: var(
    --ast-button-bg-color,
    var(--ast-theme-color, var(--e-global-color-accent, #25ad61))
  );
  color: var(--ast-button-text-color, #ffffff);
}

/* Card and container backgrounds */
.cages-product,
.cages-booking-card,
.cages-subscription-card,
.cages-order-card,
.wlm-qr-modal-content,
.wlm-alert-box,
.wlm-cancel-booking-modal-content,
.wlm-subscription-content,
.cages-modal-content {
  background-color: #ffffff;
  border-color: #e1e1e1;
}

/* Modal overlay */
.wlm-qr-modal,
.wlm-alert-modal,
.wlm-confirm-booking-modal,
.wlm-cancel-booking-modal,
.wlm-subscription-modal,
.cages-modal {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Form elements */
.cages-input,
.cages-textarea,
.cages-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  background-color: var(--ast-form-field-bg-color, #ffffff);
  color: var(--ast-text-color, var(--e-global-color-text, #7a7a7a));
  border-color: var(--ast-border-color, #e1e1e1);
}

.cages-input:focus,
.cages-textarea:focus,
.cages-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--ast-theme-color, var(--e-global-color-accent, #25ad61));
  box-shadow: 0 0 0 2px
    var(--ast-theme-color, var(--e-global-color-accent, #25ad61));
}

/* Table styling */
.cages-table {
  color: var(--ast-text-color, var(--e-global-color-text, #7a7a7a));
}

.cages-table th {
  color: var(--ast-heading-color, var(--e-global-color-secondary, #54595f));
  border-bottom-color: var(--ast-border-color, #e1e1e1);
}

.cages-table td {
  border-bottom-color: var(--ast-border-color, #e1e1e1);
}

/* Alert and notice colors */
.cages-notice,
.cages-success,
.cages-error,
.cages-warning,
.cages-info,
.wlm-alert,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-left-color: var(
    --ast-theme-color,
    var(--e-global-color-accent, #25ad61)
  );
  background-color: var(--ast-theme-color, #25ad61) !important;
  color: #ffffff !important;
  padding: 20px !important;
  border-radius: 8px !important;
}

.cages-notice p,
.cages-success p,
.cages-error p,
.cages-warning p,
.cages-info p,
.wlm-alert p,
.woocommerce-message p,
.woocommerce-info p,
.woocommerce-error p,
.cages-notice strong,
.cages-success strong,
.cages-error strong,
.cages-warning strong,
.cages-info strong,
.wlm-alert strong,
.woocommerce-message strong,
.woocommerce-info strong,
.woocommerce-error strong,
.cages-notice h1,
.cages-notice h2,
.cages-notice h3,
.woocommerce-message h1,
.woocommerce-message h2,
.woocommerce-message h3 {
  color: #ffffff !important;
  margin: 0 !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.cages-notice .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  color: #1c2535 !important;
  border-radius: 30px !important;
  padding: 8px 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  line-height: 1 !important;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.cages-notice .button:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Price colors */
.cages-product .price,
.cages-subscription-card__price {
  color: var(--ast-heading-color, var(--e-global-color-secondary, #54595f));
}

/* Navigation active state */

/* ==========================================================================
   FOOTER COLOR INTEGRATION
   ========================================================================== */

/* Footer widgets and general footer styling */
.site-footer,
.footer-widget-area,
.footer-widget,
.ast-footer-copyright,
.ast-small-footer {
  color: var(--ast-text-color, var(--e-global-color-text, #7a7a7a));
  background-color: var(
    --ast-footer-bg-color,
    var(--ast-global-color-1, var(--e-global-color-astglobalcolor1, #1a1a1a))
  );
}

/* Footer headings */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.footer-widget .widget-title,
.footer-widget-area .widget-title {
  color: var(--ast-heading-color, var(--e-global-color-secondary, #54595f));
}

/* Footer links */
.site-footer a,
.footer-widget a,
.ast-footer-copyright a,
.ast-small-footer a {
  color: var(--ast-link-color, var(--e-global-color-primary, #6ec1e4));
}

.site-footer a:hover,
.footer-widget a:hover,
.ast-footer-copyright a:hover,
.ast-small-footer a:hover {
  color: var(--ast-link-hover-color, var(--e-global-color-accent, #25ad61));
}

/* Footer buttons */
.site-footer .button,
.site-footer .wlm-btn,
.site-footer .cages-button {
  background-color: var(
    --ast-button-bg-color,
    var(--ast-theme-color, var(--e-global-color-accent, #25ad61))
  );
  color: var(--ast-button-text-color, #ffffff);
  border-color: var(
    --ast-button-border-color,
    var(
      --ast-button-bg-color,
      var(--ast-theme-color, var(--e-global-color-accent, #25ad61))
    )
  );
}

.site-footer .button:hover,
.site-footer .wlm-btn:hover,
.site-footer .cages-button:hover {
  background-color: var(
    --ast-button-hover-bg-color,
    var(--ds-color-hover-surface, #e7f6ff)
  );
  color: var(--ast-button-hover-text-color, var(--ds-color-primary, #0085ff));
  border-color: var(
    --ast-button-hover-border-color,
    var(--ds-color-hover-surface, #e7f6ff)
  );
}

/* Footer copyright and small footer */
.ast-footer-copyright,
.ast-small-footer {
  border-top-color: var(--ast-border-color, #e1e1e1);
  background-color: var(
    --ast-footer-copyright-bg,
    var(--ast-global-color-0, #ffffff)
  );
}

/* Footer widget containers */
.footer-widget-area .widget,
.footer-widget .widget {
  background-color: transparent;
  border-color: var(--ast-border-color, #e1e1e1);
}

/* Footer form elements */
.site-footer input,
.site-footer textarea,
.site-footer select {
  background-color: var(--ast-form-field-bg-color, #ffffff);
  color: var(--ast-text-color, var(--e-global-color-text, #7a7a7a));
  border-color: var(--ast-border-color, #e1e1e1);
}

.site-footer input:focus,
.site-footer textarea:focus,
.site-footer select:focus {
  border-color: var(--ast-theme-color, var(--e-global-color-accent, #25ad61));
  box-shadow: 0 0 0 2px
    var(--ast-theme-color, var(--e-global-color-accent, #25ad61));
}

/* ==========================================================================
   ADVANCED MENU STYLING (Production Site Integration)
   ========================================================================== */

/* Menu container styling */
.eael-advanced-menu-container {
  background-color: transparent;
}

/* Menu toggle button */
.eael-advanced-menu-toggle {
  background-color: var(
    --ast-global-color-1,
    var(--e-global-color-astglobalcolor1, #1a1a1a)
  );
  color: var(--ast-light-text, #ffffff);
}

.eael-advanced-menu-toggle i {
  color: var(--ast-light-text, #ffffff);
}

/* Menu links and hover states */
.eael-advanced-menu li > a:hover span i,
.eael-advanced-menu .eael-advanced-menu-indicator:hover i {
  color: var(--ast-menu-hover-color, #66cc66);
}

.eael-advanced-menu .eael-advanced-menu-indicator:hover svg path,
.eael-advanced-menu.eael-advanced-menu-horizontal li a:hover span svg path {
  fill: var(--ast-menu-hover-color, #66cc66);
}

/* Sub-menu styling */
.eael-advanced-menu li ul li > a {
  color: var(--ast-menu-text-color, #d7d7d7);
  background-color: rgba(255, 255, 255, 0);
}

.eael-advanced-menu li ul li:hover > a,
.eael-advanced-menu li ul li.current-menu-item > a.eael-item-active,
.eael-advanced-menu li ul li.current-menu-ancestor > a.eael-item-active {
  color: var(--ast-menu-hover-color, #66cc66);
  background-color: rgba(255, 255, 255, 0);
}

/* Sub-menu icons */
.eael-advanced-menu.eael-advanced-menu-horizontal ul li i,
.eael-advanced-menu li ul li .eael-advanced-menu-indicator i,
.eael-advanced-menu
  li
  ul
  li
  .eael-advanced-menu-indicator.eael-dropdown-indicator
  i {
  color: var(--ast-menu-text-color, #d7d7d7);
}

.eael-advanced-menu.eael-advanced-menu-horizontal li ul li a span svg path,
.eael-advanced-menu.eael-advanced-menu-vertical li ul li a span svg path,
.eael-advanced-menu.eael-advanced-menu-vertical
  .sub-menu
  .eael-dropdown-indicator
  svg
  path {
  fill: var(--ast-menu-text-color, #d7d7d7);
}

/* Sub-menu hover states */
.eael-advanced-menu.eael-advanced-menu-horizontal li ul li a:hover i,
.eael-advanced-menu.eael-advanced-menu-vertical
  .eael-advanced-menu-indicator.eael-dropdown-indicator:hover
  i {
  color: var(--ast-menu-hover-color, #66cc66);
}

.eael-advanced-menu.eael-advanced-menu-horizontal
  li
  ul
  li
  a:hover
  span
  svg
  path,
.eael-advanced-menu.eael-advanced-menu-vertical
  .eael-advanced-menu-indicator.eael-dropdown-indicator:hover
  svg
  path {
  fill: var(--ast-menu-hover-color, #66cc66);
}

/* Menu indicator styling */
.eael-advanced-menu li .eael-advanced-menu-indicator {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}

/* Responsive menu spacing */
@media (max-width: 1024px) {
  .eael-advanced-menu li ul {
    border-radius: 0;
    padding: 0;
  }
}

@media (max-width: 767px) {
  .eael-advanced-menu li > a,
  .eael-advanced-menu-container .eael-advanced-menu-toggle-text {
    letter-spacing: 0;
  }
}

/* ==========================================================================
   ELEMENTOR CONTAINER INTEGRATION
   ========================================================================== */

/* Use Elementor container settings as fallback */
@media (min-width: 1025px) {
  .cages-functionality-container,
  .cages-booking-container,
  .cages-subscription-container,
  .cages-registration-form-container,
  .cages-login-form-container {
    max-width: var(--ast-container-width, 1200px);
  }
}

@media (max-width: 1024px) {
  .cages-functionality-container,
  .cages-booking-container,
  .cages-subscription-container,
  .cages-registration-form-container,
  .cages-login-form-container {
    max-width: 1024px;
  }
}

@media (max-width: 767px) {
  .cages-functionality-container,
  .cages-booking-container,
  .cages-subscription-container,
  .cages-registration-form-container,
  .cages-login-form-container {
    max-width: 767px;
  }
}

/* ==========================================================================
   DARK MODE SUPPORT (if Astra has dark mode)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .ast-dark-site .cages-product,
  .ast-dark-site .cages-booking-card,
  .ast-dark-site .cages-subscription-card,
  .ast-dark-site .cages-order-card {
    background-color: var(--ast-container-bg-color, #1a1a1a);
    border-color: var(--ast-border-color, #333333);
  }

  .ast-dark-site .cages-input,
  .ast-dark-site .cages-textarea,
  .ast-dark-site .cages-select,
  .ast-dark-site input[type="text"],
  .ast-dark-site input[type="email"],
  .ast-dark-site input[type="password"],
  .ast-dark-site input[type="tel"],
  .ast-dark-site select,
  .ast-dark-site textarea {
    background-color: var(--ast-form-field-bg-color, #2a2a2a);
    border-color: var(--ast-border-color, #333333);
  }
}