/*
Theme Name: Phiarca Court Club Child
Theme URI: https://phiarca.com
Description: High-converting interactive child theme featuring the Phiarca sliding panels (Cart slider, Account dashboard, Sun/Moon theme toggle) fully integrated with WooCommerce and Elementor Pro.
Author: Google AI Studio Build Co-Pilot
Author URI: https://ai.studio/build
Template: hello-elementor
Version: 1.0.0
License: GNU GPLv2 or later
Text Domain: phiarca-child
*/

/* ==========================================================================
   PHLARCA COURT CLUB - MAIN STYLING OVERRIDES & THEME RESET
   ========================================================================== */

/* Custom Palette Variables for Theme States */
:root {
  --pearl: #FAF8F5;
  --charcoal: #121212;
  --gold: #D4AF37;
  --sapphire: #0F172A;
  --cloud: #E5E7EB;
  --amber: #f59e0b; /* tailwind amber-500 */
}

body.dark-theme-active {
  background-color: var(--charcoal) !important;
  color: var(--pearl) !important;
}

body.dark-theme-active .elementor-widget-container,
body.dark-theme-active .site-header,
body.dark-theme-active .site-footer {
  background-color: var(--charcoal);
  color: var(--pearl);
}

/* Base custom styles to guarantee smooth slide-out panel performance */
.phiarca-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: 100% !important;
  max-width: 480px !important;
  background: #FAF8F5 !important;
  color: #121212 !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15) !important;
  z-index: 999999 !important; /* higher than Elementor headers */
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.phiarca-drawer.is-active {
  transform: translateX(0) !important;
}

.phiarca-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(18, 18, 18, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 999990 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.phiarca-overlay.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   CSS ISOLATION & THEME NEUTRALIZATION LAYER
   ========================================================================== */

/* 1. Force Clean Typography */
.phiarca-drawer,
.phiarca-drawer * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  box-sizing: border-box !important;
  letter-spacing: normal;
  text-transform: none;
}

.phiarca-drawer .font-serif,
.phiarca-drawer .font-serif * {
  font-family: 'Space Grotesk', Georgia, serif !important;
}

.phiarca-drawer .font-mono,
.phiarca-drawer .font-mono * {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* 2. Absolute Reset for ALL buttons inside drawer */
.phiarca-drawer button,
.phiarca-drawer .phiarca-qty-minus,
.phiarca-drawer .phiarca-qty-plus,
.phiarca-drawer .phiarca-tab-btn,
.phiarca-drawer .phiarca-cart-remove {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  color: inherit !important;
  text-shadow: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  width: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* Restore styles for specific interactive buttons with Tailwind classes */
.phiarca-drawer button.bg-\[\#121212\] {
  background-color: #121212 !important;
  color: #ffffff !important;
}
.phiarca-drawer button.bg-\[\#121212\]:hover {
  background-color: var(--amber) !important;
}

.phiarca-drawer button.bg-amber-500 {
  background-color: var(--amber) !important;
  color: #121212 !important;
}
.phiarca-drawer button.bg-amber-500:hover {
  background-color: #ffffff !important;
  color: #121212 !important;
}

.phiarca-drawer button.phiarca-drawer-close {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 9999px !important;
  width: 32px !important;
  height: 32px !important;
}
.phiarca-drawer button.phiarca-drawer-close:hover {
  background-color: var(--amber) !important;
  color: #ffffff !important;
}

/* 3. Styling of tab controls */
.phiarca-drawer .phiarca-tab-btn {
  border-radius: 4px !important;
  flex: 1 !important;
  padding: 8px 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background-color: transparent !important;
  color: #6b7280 !important; /* text-gray-500 */
}
.phiarca-drawer .phiarca-tab-btn:hover {
  background-color: #f3f4f6 !important; /* bg-gray-100 */
}
.phiarca-drawer .phiarca-tab-btn.bg-\[\#121212\] {
  background-color: #121212 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 4. Quantity buttons in cart items */
.phiarca-drawer .phiarca-qty-minus,
.phiarca-drawer .phiarca-qty-plus {
  background-color: #f9fafb !important;
  color: #6b7280 !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  font-weight: bold !important;
}
.phiarca-drawer .phiarca-qty-minus:hover,
.phiarca-drawer .phiarca-qty-plus:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* 5. Clean Input Fields */
.phiarca-drawer input[type="text"],
.phiarca-drawer input[type="email"],
.phiarca-drawer input[type="password"] {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 12px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  color: #121212 !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
  height: auto !important;
}
.phiarca-drawer input[type="text"]:focus,
.phiarca-drawer input[type="email"]:focus,
.phiarca-drawer input[type="password"]:focus {
  border-color: var(--amber) !important;
}

/* 6. Clean Checkout Buttons links */
.phiarca-drawer a.bg-\[\#121212\] {
  background-color: #121212 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}
.phiarca-drawer a.bg-\[\#121212\]:hover {
  background-color: var(--amber) !important;
  transform: translateY(-1px) !important;
}

.phiarca-drawer a.border {
  border: 1px solid #e5e7eb !important;
  background-color: transparent !important;
  color: #4b5563 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 10px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.phiarca-drawer a.border:hover {
  background-color: #f9fafb !important;
  color: #121212 !important;
}

/* 7. Image and list resets */
.phiarca-drawer img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.phiarca-drawer select {
  height: auto !important;
  padding: 8px !important;
}

/* 8. Neutralize standard WooCommerce or Elementor list items if any leak */
.phiarca-drawer ul,
.phiarca-drawer li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 9. Prevent boxed icons or default border lines around SVG elements */
.phiarca-drawer svg,
.phiarca-drawer i[data-lucide],
#phiarca-theme-toggle svg,
#phiarca-account-trigger svg,
#phiarca-cart-trigger svg {
  border: none !important;
  border-width: 0px !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: inline-block;
  vertical-align: middle;
}

/* 10. Floating Header Triggers */
#phiarca-theme-toggle,
#phiarca-account-trigger,
#phiarca-cart-trigger,
button#phiarca-theme-toggle,
button#phiarca-account-trigger,
button#phiarca-cart-trigger {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0px !important;
  border-style: none !important;
  border-color: transparent !important;
  padding: 8px !important;
  color: inherit !important;
  cursor: pointer !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  outline-width: 0px !important;
  outline-color: transparent !important;
  border-radius: 9999px !important;
}

#phiarca-theme-toggle:hover,
#phiarca-account-trigger:hover,
#phiarca-cart-trigger:hover {
  color: var(--amber) !important;
  background-color: rgba(18, 18, 18, 0.03) !important;
}

body.dark-theme-active #phiarca-theme-toggle:hover,
body.dark-theme-active #phiarca-account-trigger:hover,
body.dark-theme-active #phiarca-cart-trigger:hover {
  background-color: rgba(250, 248, 245, 0.05) !important;
}

#phiarca-theme-toggle:focus,
#phiarca-account-trigger:focus,
#phiarca-cart-trigger:focus,
#phiarca-theme-toggle:active,
#phiarca-account-trigger:active,
#phiarca-cart-trigger:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 11. CRUSH ALL UNWANTED PINK BORDERS & ENFORCE POLISHED STYLING */
.phiarca-drawer button,
.phiarca-drawer button:focus,
.phiarca-drawer button:active,
.phiarca-drawer button:hover,
.phiarca-drawer .phiarca-tab-btn,
.phiarca-drawer .phiarca-tab-btn:focus,
.phiarca-drawer .phiarca-tab-btn:active,
.phiarca-drawer .phiarca-tab-btn:hover {
  border: 0px solid transparent !important;
  border-width: 0px !important;
  outline: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline-color: transparent !important;
}

/* Ensure active/inactive tab buttons have clean styles free of any borders */
.phiarca-drawer .phiarca-tab-btn {
  border: none !important;
  border-width: 0px !important;
  background-color: transparent !important;
}

.phiarca-drawer .phiarca-tab-btn.bg-\[\#121212\] {
  background-color: #121212 !important;
  color: #ffffff !important;
  border: none !important;
  border-width: 0px !important;
}

.phiarca-drawer .phiarca-tab-btn:not(.bg-\[\#121212\]) {
  background-color: transparent !important;
  color: #6b7280 !important;
}

.phiarca-drawer .phiarca-tab-btn:not(.bg-\[\#121212\]):hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Smooth Progression Bar Animation */
.phiarca-drawer .phiarca-cart-summary-fragment .rounded-full > div {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ==========================================================================
   SMOOTH STICKY HEADER & COLOR SHIFTING ANIMATION
   ========================================================================== */

/* Target the Elementor header container */
.elementor-location-header,
.site-header,
header.site-header,
.phiarca-sticky-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99990 !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Scrolled state: shifts background, text color, and adds gorgeous subtle shadow */
.elementor-location-header.is-scrolled,
.site-header.is-scrolled,
header.site-header.is-scrolled,
.phiarca-sticky-header.is-scrolled {
  background-color: rgba(250, 248, 245, 0.95) !important; /* Off-white glassmorphism */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(18, 18, 18, 0.05) !important;
  box-shadow: 0 4px 30px rgba(18, 18, 18, 0.02) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Dark mode active header modifications */
body.dark-theme-active .elementor-location-header.is-scrolled,
body.dark-theme-active .site-header.is-scrolled,
body.dark-theme-active header.site-header.is-scrolled,
body.dark-theme-active .phiarca-sticky-header.is-scrolled {
  background-color: rgba(18, 18, 18, 0.95) !important;
  border-bottom: 1px solid rgba(250, 248, 245, 0.05) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
}