/* Global Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans', sans-serif;
  background: linear-gradient(135deg, #d4f1e8 0%, #ffd4b8 50%, #e8d4f1 100%);
  min-height: 100vh;
  color: #2c5f5d;
  overflow: hidden;
}

body.loaded {
  overflow: auto;
}



/* Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d4f1e8 0%, #ffd4b8 50%, #e8d4f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1), 
              visibility 0.8s cubic-bezier(0.4, 0.0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  overflow: hidden;
}

.loading-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
}

.loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
}

.loading-logo {
  max-width: 280px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
  animation: floatPulse 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

/* Animations */
@keyframes floatPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
  }
  25% {
    transform: translateY(-10px) scale(1.02);
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.25));
  }
  50% {
    transform: translateY(0) scale(1.05);
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
  }
  75% {
    transform: translateY(-10px) scale(1.02);
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.25));
  }
}

@keyframes shimmer {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Performance Optimization - GPU Acceleration */
.loading-screen,
.section,
.nav-btn,
.cta-btn,
.modal {
  will-change: transform, opacity;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(240, 249, 248, 0.5);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff9a76 0%, #ffd89b 100%);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff8c69 0%, #ffc87b 100%);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #ff9a76 rgba(240, 249, 248, 0.5);
}

/* Snipcart Theme Customization */
#snipcart {
  /* Colors */
  --color-default: #2c5f5d;
  --color-alt: #5a9997;
  --color-icon: #5ebdb8;
  --color-success: #2e7d32;
  --color-error: #ff8c69;

  --color-link: #5ebdb8;
  --color-link-hover: #7dd3ce;
  --color-link-active: #5ebdb8;
  --color-link-focus: #5ebdb8;

  --color-input: #2c5f5d;
  --color-input-hover: #2c5f5d;
  --color-input-focus: #2c5f5d;
  --color-input-checked: white;
  --color-input-disabled: #a0c5c3;
  --color-input-error: #ff8c69;
  --color-inputLabel: #2c5f5d;
  --color-inputLabel-hover: #5ebdb8;
  --color-inputLabel-focus: #5ebdb8;
  --color-inputIcon: #5a9997;
  --color-inputIcon-hover: #5ebdb8;
  --color-inputIcon-focus: #5ebdb8;
  --color-inputIcon-checked: white;
  --color-inputIcon-error: #ff8c69;
  --color-inputPlaceholder: #a0c5c3;

  --color-buttonPrimary: white;
  --color-buttonPrimary-hover: white;
  --color-buttonPrimary-active: white;
  --color-buttonPrimary-focus: white;
  --color-buttonPrimary-disabled: #a0c5c3;
  --color-buttonPrimary-success: white;
  --color-buttonPrimary-error: white;

  --color-buttonSecondary: #5ebdb8;
  --color-buttonSecondary-hover: #7dd3ce;
  --color-buttonSecondary-active: #5ebdb8;
  --color-buttonSecondary-focus: #5ebdb8;
  --color-buttonSecondary-disabled: #a0c5c3;
  --color-buttonSecondary-success: #2e7d32;
  --color-buttonSecondary-error: #ff8c69;

  --color-badge: #5ebdb8;
  --color-badge-active: #ff8c69;
  --color-badge-disabled: #a0c5c3;

  /* Border colors */
  --borderColor-default: rgba(94, 189, 184, 0.2);
  --borderColor-error: rgba(255, 140, 105, 0.3);

  --borderColor-link: transparent;
  --borderColor-link-hover: transparent;
  --borderColor-link-active: transparent;
  --borderColor-link-focus: rgba(94, 189, 184, 0.3);

  --borderColor-input: rgba(94, 189, 184, 0.3);
  --borderColor-input-hover: #5ebdb8;
  --borderColor-input-focus: #5ebdb8;
  --borderColor-input-checked: #5ebdb8;
  --borderColor-input-disabled: rgba(94, 189, 184, 0.2);
  --borderColor-input-error: #ff8c69;

  --borderColor-buttonPrimary: transparent;
  --borderColor-buttonPrimary-hover: transparent;
  --borderColor-buttonPrimary-focus: transparent;
  --borderColor-buttonPrimary-disabled: transparent;
  --borderColor-buttonPrimary-success: transparent;
  --borderColor-buttonPrimary-error: transparent;

  --borderColor-buttonSecondary: rgba(94, 189, 184, 0.3);
  --borderColor-buttonSecondary-hover: #5ebdb8;
  --borderColor-buttonSecondary-focus: #5ebdb8;
  --borderColor-buttonSecondary-disabled: rgba(94, 189, 184, 0.2);
  --borderColor-buttonSecondary-success: #2e7d32;
  --borderColor-buttonSecondary-error: #ff8c69;

  --borderColor-badge: transparent;
  --borderColor-badge-active: transparent;
  --borderColor-badge-disabled: transparent;

  /* Background colors */
  --bgColor-default: white;
  --bgColor-alt: #f0f9f8;
  --bgColor-success: rgba(200, 230, 201, 0.3);
  --bgColor-error: rgba(255, 154, 118, 0.2);
  --bgColor-info: rgba(94, 189, 184, 0.1);

  --bgColor-modal: white;
  --bgColor-modalVeil: rgba(44, 95, 93, 0.5);

  --bgColor-link: transparent;
  --bgColor-link-hover: rgba(94, 189, 184, 0.1);
  --bgColor-link-active: rgba(94, 189, 184, 0.15);
  --bgColor-link-focus: rgba(94, 189, 184, 0.1);

  --bgColor-input: white;
  --bgColor-input-hover: white;
  --bgColor-input-focus: white;
  --bgColor-input-checked: #5ebdb8;
  --bgColor-input-disabled: #f0f9f8;
  --bgColor-input-error: white;
  --bgColor-input-autofill: rgba(255, 245, 235, 0.5);

  --bgColor-buttonPrimary: linear-gradient(135deg, #ff9a76 0%, #ffd89b 100%);
  --bgColor-buttonPrimary-hover: linear-gradient(135deg, #ff8c69 0%, #ffc87b 100%);
  --bgColor-buttonPrimary-active: linear-gradient(135deg, #ff9a76 0%, #ffd89b 100%);
  --bgColor-buttonPrimary-focus: linear-gradient(135deg, #ff9a76 0%, #ffd89b 100%);
  --bgColor-buttonPrimary-disabled: #e0e0e0;
  --bgColor-buttonPrimary-success: linear-gradient(135deg, #66bb6a 0%, #81c784 100%);
  --bgColor-buttonPrimary-error: linear-gradient(135deg, #ff8c69 0%, #ffa07a 100%);

  --bgColor-buttonSecondary: white;
  --bgColor-buttonSecondary-hover: #f0f9f8;
  --bgColor-buttonSecondary-active: white;
  --bgColor-buttonSecondary-focus: white;
  --bgColor-buttonSecondary-disabled: #f0f9f8;
  --bgColor-buttonSecondary-success: rgba(200, 230, 201, 0.3);
  --bgColor-buttonSecondary-error: rgba(255, 154, 118, 0.2);

  --bgColor-badge: rgba(94, 189, 184, 0.1);
  --bgColor-badge-active: rgba(255, 154, 118, 0.2);
  --bgColor-badge-disabled: #f0f9f8;

  /* Shadows */
  --shadow-default: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.15);

  --shadow-link-focus: 0 0 0 3px rgba(94, 189, 184, 0.2);

  --shadow-input-hover: 0 0 0 3px rgba(94, 189, 184, 0.1);
  --shadow-input-focus: 0 0 0 3px rgba(94, 189, 184, 0.2);
  --shadow-input-checked: 0 0 0 3px rgba(94, 189, 184, 0.2);

  --shadow-buttonPrimary-hover: 0 6px 16px rgba(255, 154, 118, 0.4);
  --shadow-buttonPrimary-active: 0 2px 8px rgba(255, 154, 118, 0.3);
  --shadow-buttonPrimary-focus: 0 0 0 3px rgba(255, 154, 118, 0.3);

  --shadow-buttonSecondary-hover: 0 4px 12px rgba(94, 189, 184, 0.2);
  --shadow-buttonSecondary-active: 0 2px 8px rgba(94, 189, 184, 0.15);
  --shadow-buttonSecondary-focus: 0 0 0 3px rgba(94, 189, 184, 0.2);
}

/* Force visibility of Snipcart checkout buttons - comprehensive overrides */
.snipcart__button--primary,
.snipcart-checkout-button,
.snipcart__button--checkout,
button[class*="snipcart"][class*="checkout"],
button[class*="snipcart"][class*="primary"],
.snipcart-cart-summary__checkout-button,
.snipcart-cart-button--checkout,
.snipcart__actions--link.snipcart__button--highlight,
.snipcart-summary__checkout,
[class*="snipcart"][class*="checkout"][class*="button"] {
  color: white !important;
  background: linear-gradient(135deg, #ff9a76 0%, #ffd89b 100%) !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  border-radius: 25px !important;
  box-shadow: 0 4px 12px rgba(255, 154, 118, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  font-size: 15px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.snipcart__button--primary:hover,
.snipcart-checkout-button:hover,
.snipcart__button--checkout:hover,
.snipcart-cart-summary__checkout-button:hover,
.snipcart__actions--link.snipcart__button--highlight:hover {
  background: linear-gradient(135deg, #ff8c69 0%, #ffc87b 100%) !important;
  box-shadow: 0 6px 16px rgba(255, 154, 118, 0.4) !important;
  transform: translateY(-2px) !important;
  color: white !important;
}

/* Ensure cart summary buttons are always visible */
.snipcart-cart-summary-fees__footer,
.snipcart-cart-summary__content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Make sure button text is visible */
.snipcart__button--primary span,
.snipcart__button--checkout span,
.snipcart-cart-summary__checkout-button span {
  color: white !important;
  opacity: 1 !important;
  visibility: visible !important;
}