/* AxelGo Delivery Frontend Styles - IMPORTANT VERSION */

:root {
  --axelgo-bg: #0D1A26 !important;
  --axelgo-card: #162331 !important;
  --axelgo-muted: #1D2B3D !important;
  --axelgo-text: #EAF2FF !important;
  --axelgo-subtle: #B5C7E3 !important;
  --axelgo-brand-gold: #EFAF00 !important;
  --axelgo-brand-gold-2: #FFC640 !important;
  --axelgo-brand-blue: #1E6AB0 !important;
  --axelgo-ok: #2ecc71 !important;
  --axelgo-warn: #ffb74d !important;
  --axelgo-err: #ff6b6b !important;
  --axelgo-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
  --axelgo-radius: 14px !important;
}

/* Container - Force Override WordPress */
.axelgo-delivery-container {
  background: var(--axelgo-bg) !important;
  color: var(--axelgo-text) !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, Arial, sans-serif !important;
  min-height: 100vh !important; /* Minimum viewport height */
  box-sizing: border-box !important;
  padding: 20px !important; /* Restored normal padding */
  margin: 0 !important;
  width: 100% !important;
  max-width: 100vw !important; /* Ensure it doesn't exceed viewport width */
  position: relative !important;
  z-index: 1 !important; /* Reduced z-index to prevent menu overlay issues */
  overflow-x: hidden !important; /* Prevent horizontal scroll */
  overflow-y: auto !important; /* Allow vertical scroll if needed */
  display: block !important; /* Use normal block layout */
}

.axelgo-delivery-container *,
.axelgo-delivery-container *::before,
.axelgo-delivery-container *::after {
  box-sizing: border-box !important;
}

/* Header */
.axelgo-header {
  position: static !important; /* Changed from sticky to static to prevent page jumping */
  top: auto !important;
  z-index: 5 !important; /* Reduced z-index to prevent menu overlay issues */
  background: linear-gradient(180deg, #0D1A26 0%, #0f1e2b 100%) !important;
  border-bottom: 1px solid #203247 !important;
  padding: 15px 16px !important; /* Reduced padding to save space */
  margin-bottom: 15px !important; /* Reduced margin to save space */
  border-radius: var(--axelgo-radius) !important;
  flex-shrink: 0 !important; /* Don't shrink header */
}

.axelgo-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.axelgo-brand-logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: radial-gradient(120% 120% at 30% 20%, #1E6AB0 0%, #0D1A26 60%) !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #1e3248 !important;
  box-shadow: var(--axelgo-shadow) !important;
}

.axelgo-brand-logo span {
  font-weight: 800 !important;
  color: var(--axelgo-brand-gold) !important;
  font-size: 16px !important;
}

.axelgo-brand h1 {
  margin: 0 !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
}

.axelgo-brand .axel {
  color: var(--axelgo-brand-gold) !important;
}

.axelgo-brand .go {
  color: var(--axelgo-brand-blue) !important;
}

/* Main Layout */
.axelgo-main {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 15px !important; /* Increased padding */
  display: block !important; /* Use normal block layout */
  width: 100% !important;
  box-sizing: border-box !important;
}

.axelgo-grid {
  display: grid !important;
  gap: 18px !important; /* Restore normal gap */
  margin: 22px 0 !important; /* Restore normal margin */
  grid-template-columns: 1.2fr 0.8fr !important;
}

@media (max-width: 940px) {
  .axelgo-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Cards */
.axelgo-card {
  background: linear-gradient(180deg, var(--axelgo-card), #132536) !important;
  border: 1px solid #1f3247 !important;
  border-radius: var(--axelgo-radius) !important;
  box-shadow: var(--axelgo-shadow) !important;
  padding: 18px !important; /* Restored normal padding */
  display: block !important; /* Use normal block layout */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Typography - Force Override */
.axelgo-delivery-container h2 {
  margin: 0 0 12px 0 !important; /* Restore normal margin */
  font-size: 1.25rem !important; /* Restore normal font size */
  color: var(--axelgo-brand-gold) !important;
  font-weight: 700 !important;
}

.axelgo-delivery-container label {
  display: block !important;
  margin: 12px 0 6px 0 !important; /* Restore normal margin */
  color: var(--axelgo-subtle) !important;
  font-weight: 600 !important;
  font-size: 14px !important; /* Restore normal font size */
}


.axelgo-delivery-container input:focus,
.axelgo-delivery-container select:focus, 
.axelgo-delivery-container textarea:focus {
  border-color: var(--axelgo-brand-blue) !important;
  box-shadow: 0 0 0 2px rgba(30, 106, 176, 0.2) !important;
  outline: none !important;
}

.axelgo-delivery-container input[type="number"] {
  -moz-appearance: textfield !important;
}

.axelgo-delivery-container input[type="number"]::-webkit-outer-spin-button,
.axelgo-delivery-container input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Layout Helpers */
.axelgo-row {
  display: grid !important;
  gap: 12px !important; /* Restore normal gap */
  grid-template-columns: 1fr 1fr !important;
}

@media (max-width: 720px) {
  .axelgo-row {
    grid-template-columns: 1fr !important;
  }
  
  /* Keep options horizontal on mobile */
  .axelgo-opts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important; /* Smaller gap on mobile */
  }
  
  .axelgo-opt {
    flex: 1 !important; /* Allow options to grow */
    min-width: 0 !important; /* Allow shrinking */
  }
}

/* Options */
.axelgo-opts {
  display: flex !important; /* Changed from grid to flex for horizontal layout */
  flex-wrap: wrap !important; /* Allow wrapping if needed */
  gap: 10px !important; /* Restore normal gap */
  margin-top: 8px !important; /* Restore normal margin */
}

.axelgo-opt {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-weight: normal !important;
  line-height: 1.4 !important; /* Ensure consistent line height */
  vertical-align: middle !important; /* Vertical alignment */
}

.axelgo-opt input {
  width: auto !important;
  margin: 0 !important;
  transform: scale(1.2) !important;
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  vertical-align: middle !important; /* Align checkbox with text */
  margin-top: -2px !important; /* Fine-tune vertical position */
}

.axelgo-opt label {
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

/* Hints */
.axelgo-hint {
  font-size: 0.9rem !important; /* Restore normal font size */
  color: var(--axelgo-subtle) !important;
  margin-top: 4px !important; /* Restore normal margin */
  font-style: italic !important;
}

/* Pills */
.axelgo-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #0f1e2b !important;
  border: 1px solid #23364b !important;
  color: var(--axelgo-subtle) !important;
  font-size: 0.85rem !important;
}

.axelgo-pill.axelgo-ok {
  border-color: #214d36 !important;
  color: #a1e9c2 !important;
}

.axelgo-pill.axelgo-warn {
  border-color: #4d4021 !important;
  color: #ffe1b3 !important;
}

.axelgo-pill.axelgo-err {
  border-color: #4d2121 !important;
  color: #ffc7c7 !important;
}

/* Buttons - Force Override WordPress Button Styles */
.axelgo-delivery-container button {
  border: 0 !important;
  border-radius: 12px !important; /* Restore normal border radius */
  padding: 12px 14px !important; /* Restore normal padding */
  font-weight: 700 !important;
  cursor: pointer !important;
  background: linear-gradient(180deg, var(--axelgo-brand-gold), var(--axelgo-brand-gold-2)) !important;
  color: #14110b !important;
  box-shadow: 0 8px 20px rgba(239, 175, 0, 0.25) !important; /* Restore normal shadow */
  transition: all 0.3s ease !important;
  font-family: inherit !important;
  font-size: 14px !important; /* Restore normal font size */
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
  vertical-align: middle !important;
  user-select: none !important;
  line-height: 1.5 !important; /* Restore normal line height */
  min-height: auto !important;
  width: auto !important;
}

.axelgo-delivery-container button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(239, 175, 0, 0.35) !important;
  background: linear-gradient(180deg, #FFC640, #FFD700) !important;
}

.axelgo-delivery-container button:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 4px 10px rgba(239, 175, 0, 0.15) !important;
}

.axelgo-delivery-container button.axelgo-secondary {
  background: #0f1e2b !important;
  color: var(--axelgo-text) !important;
  border: 1px solid #24364a !important;
  box-shadow: none !important;
}

.axelgo-delivery-container button.axelgo-secondary:hover {
  background: #1a2834 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Call to Action */
.axelgo-cta {
  display: flex !important;
  gap: 12px !important; /* Restore normal gap */
  align-items: center !important;
  margin-top: 16px !important; /* Restore normal margin */
}

/* Estimate Section */
.axelgo-total {
  font-size: 2.2rem !important; /* Restore normal font size */
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  color: var(--axelgo-brand-gold) !important;
  text-align: right !important;
  margin-top: 16px !important; /* Restore normal margin */
  line-height: 1.2 !important;
}

.axelgo-breakdown {
  font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
  background: #0f1e2b !important;
  border: 1px solid #24364a !important;
  border-radius: 12px !important; /* Restore normal border radius */
  padding: 12px !important; /* Restore normal padding */
  white-space: pre-wrap !important;
  font-size: 0.9rem !important; /* Restore normal font size */
  line-height: 1.5 !important; /* Restore normal line height */
  color: var(--axelgo-text) !important;
  overflow-x: auto !important;
}

/* Footer */
.axelgo-footer {
  padding: 28px 16px !important;
  color: #8aa0be !important;
  text-align: center !important;
  font-size: 0.9rem !important;
  margin-top: 40px !important;
  border-top: 1px solid #203247 !important;
}

/* Messages */
.axelgo-messages {
  position: absolute !important; /* Changed from fixed to absolute to prevent page jumping */
  top: 20px !important;
  right: 20px !important;
  z-index: 100 !important; /* Reduced z-index to prevent menu overlay issues */
  max-width: 400px !important;
}

.axelgo-message {
  background: var(--axelgo-card) !important;
  border: 1px solid #1f3247 !important;
  border-radius: var(--axelgo-radius) !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
  box-shadow: var(--axelgo-shadow) !important;
  animation: slideIn 0.3s ease !important;
}

.axelgo-message.success {
  border-color: var(--axelgo-ok) !important;
  background: linear-gradient(180deg, #1a4d32, #0f2619) !important;
}

.axelgo-message.error {
  border-color: var(--axelgo-err) !important;
  background: linear-gradient(180deg, #4d1a1a, #2b0f0f) !important;
}

@keyframes slideIn {
  from {
    transform: translateX(100%) !important;
    opacity: 0 !important;
  }
  to {
    transform: translateX(0) !important;
    opacity: 1 !important;
  }
}


.axelgo-spinner {
  width: 50px !important;
  height: 50px !important;
  border: 4px solid #24364a !important;
  border-top: 4px solid var(--axelgo-brand-gold) !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
  margin-bottom: 20px !important;
}

@keyframes spin {
  0% { transform: rotate(0deg) !important; }
  100% { transform: rotate(360deg) !important; }
}

.axelgo-loading p {
  color: var(--axelgo-text) !important;
  font-size: 1.1rem !important;
  margin: 0 !important;
}

/* Form Validation */
.axelgo-field-error {
  border-color: var(--axelgo-err) !important;
}

.axelgo-field-error-message {
  color: var(--axelgo-err) !important;
  font-size: 0.8rem !important;
  margin-top: 4px !important;
}

/* Responsive Design */
@media (max-width: 720px) {
  .axelgo-delivery-container {
    padding: 15px !important; /* Increased padding for mobile to prevent cutoff */
  }
  
  .axelgo-header {
    padding: 15px !important; /* Increased header padding */
    margin-bottom: 15px !important;
  }
  
  .axelgo-brand h1 {
    font-size: 1.25rem !important;
  }
  
  .axelgo-main {
    padding: 0 10px !important; /* Increased padding for mobile */
  }
  
  .axelgo-card {
    padding: 15px !important; /* Increased card padding for mobile */
  }
  
  .axelgo-cta {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .axelgo-delivery-container button {
    width: 100% !important;
  }
  
  .axelgo-total {
    font-size: 1.8rem !important;
    text-align: center !important;
  }
  
  .axelgo-messages {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    max-width: none !important;
  }
  
  /* MOBILE SCROLL FIXES */
  .axelgo-delivery-container {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .axelgo-breakdown {
    font-size: 0.8rem !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Form inputs mobile optimization */
  .axelgo-delivery-container input:not([type="checkbox"]):not([type="radio"]),
  .axelgo-delivery-container select,
  .axelgo-delivery-container textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
    -webkit-appearance: none !important;
    border-radius: 8px !important;
  }
  
  /* Keep checkbox and radio appearance */
  .axelgo-delivery-container input[type="checkbox"],
  .axelgo-delivery-container input[type="radio"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Mobile touch targets */
  .axelgo-delivery-container button,
  .axelgo-delivery-container input[type="checkbox"],
  .axelgo-delivery-container input[type="radio"] {
    min-height: 44px !important; /* iOS recommended touch target */
  }
  
  /* Prevent horizontal scroll */
  .axelgo-grid {
    overflow-x: hidden !important;
  }
  
  .axelgo-row {
    overflow-x: hidden !important;
  }
}

@media (max-width: 480px) {
  .axelgo-brand {
    gap: 10px !important;
  }
  
  .axelgo-brand-logo {
    width: 36px !important;
    height: 36px !important;
  }
  
  .axelgo-brand h1 {
    font-size: 1.1rem !important;
  }
  
  .axelgo-grid {
    margin: 16px 0 !important;
    gap: 16px !important;
  }
  
  .axelgo-card {
    padding: 14px !important;
  }
  
  .axelgo-delivery-container input, 
  .axelgo-delivery-container select, 
  .axelgo-delivery-container textarea {
    padding: 10px !important;
  }
  
  .axelgo-delivery-container button {
    padding: 10px 12px !important;
  }
}

/* Override WordPress Core Styles */
.axelgo-delivery-container .wp-block-button__link {
  all: unset !important;
}

.axelgo-delivery-container .button,
.axelgo-delivery-container .btn {
  all: unset !important;
}

/* Force Container Styling Even in WordPress */
body .axelgo-delivery-container {
  background: var(--axelgo-bg) !important;
  color: var(--axelgo-text) !important;
}

/* Ensure No WordPress Theme Override */
.entry-content .axelgo-delivery-container,
.post-content .axelgo-delivery-container,
.page-content .axelgo-delivery-container,
article .axelgo-delivery-container {
  background: var(--axelgo-bg) !important;
  color: var(--axelgo-text) !important;
  padding: 20px !important;
  border-radius: var(--axelgo-radius) !important;
}

/* MENU OVERLAY FIXES */
/* Prevent WordPress menu from overlaying form */
.axelgo-delivery-container {
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure WordPress navigation doesn't interfere */
body.admin-bar .axelgo-delivery-container {
  margin-top: 0 !important;
}

/* Prevent page jumping from WordPress admin bar */
body.admin-bar {
  padding-top: 0 !important;
}

/* Ensure body doesn't have fixed positioning that causes jumping */
body {
  position: static !important;
  overflow-x: hidden !important;
}

/* Fix for common WordPress menu z-index issues */
.nav-menu,
.main-navigation,
.site-navigation,
.menu-toggle,
.mobile-menu {
  z-index: 9999 !important;
}

/* Ensure form stays below WordPress menus */
.axelgo-delivery-container * {
  position: static !important; /* Changed from relative to static to prevent page jumping */
  z-index: auto !important;
}

/* Specific fixes for common WordPress themes */
.twenty-twenty-one .axelgo-delivery-container,
.twenty-twenty-two .axelgo-delivery-container,
.twenty-twenty-three .axelgo-delivery-container,
.twenty-twenty-four .axelgo-delivery-container {
  z-index: 1 !important;
}

/* CRITICAL: Prevent page jumping from any WordPress CSS */
html, body {
  overflow-x: hidden !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Ensure all checkboxes and radios are visible and aligned */
.axelgo-delivery-container input[type="checkbox"],
.axelgo-delivery-container input[type="radio"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  vertical-align: middle !important;
  margin-top: -2px !important;
}

.axelgo-delivery-container input[type="radio"] {
  -webkit-appearance: radio !important;
  appearance: radio !important;
}

/* Prevent WordPress admin bar from causing page jumps */
#wpadminbar {
  position: fixed !important;
  z-index: 99999 !important;
}

/* Ensure our container is never affected by WordPress positioning */
.axelgo-delivery-container,
.axelgo-delivery-container * {
  position: static !important;
  transform: none !important;
  transition: none !important;
}

/* Override any WordPress theme positioning */
body .axelgo-delivery-container {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}