/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 * Note: Tailwind CSS is loaded separately in the layout via asset_path("tailwind.css")
 * because Propshaft doesn't process CSS @import statements.
 */

/* Google Fonts Import for UI Buttons */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&family=Outfit:wght@400;700;800;900&family=Roboto:wght@400;700;900&display=swap');

/* Font Family Utility Classes */
.font-sans { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }
.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }
.font-outfit { font-family: 'Outfit', sans-serif !important; }
.font-inter { font-family: 'Inter', sans-serif !important; }
.font-roboto { font-family: 'Roboto', sans-serif !important; }
.font-display { font-family: 'Outfit', 'Inter', system-ui, sans-serif !important; font-weight: 900 !important; letter-spacing: 0.05em !important; }

/* Background - Black (except Admin panel) */
html:not(:has(body.admin-body)),
body:not(.admin-body) {
  background-color: #000000 !important;
}

/* Text Color - White (for all text except headings and Admin panel) */
body:not(.admin-body) {
  color: #ffffff !important;
}

/* Ensure common text content elements are white (except inside Admin panel) */
body:not(.admin-body) p,
body:not(.admin-body) span,
body:not(.admin-body) div,
body:not(.admin-body) a,
body:not(.admin-body) li,
body:not(.admin-body) td,
body:not(.admin-body) th,
body:not(.admin-body) label {
  color: #ffffff !important;
}

/* Brand color variables */
:root {
  --brand-pink: #D6006E;
  --brand-blue: #1E50A2;
  --brand-green: #00A859;
  --brand-gold: #FFD700;
}

/* Title Color - Brand Pink and Bold */
/* All headings (h1-h6) are styled with the brand pink color and bold font weight */
/* Using higher specificity (html body) to override Tailwind base styles */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  color: var(--brand-pink) !important;
  font-weight: bold !important;
}

/*
 * Brand color utilities must beat body:not(.admin-body) span|div|a|... white overrides
 * (specificity 0,1,2). Prefix with the same body:not(.admin-body) selector.
 */
/* Product modal tokens — beat global white text overrides (same approach as cards). */
body:not(.admin-body) .product-modal-themed h2.product-modal-title,
body:not(.admin-body) .product-modal-themed .product-modal-title,
.admin-body .product-modal-themed h2.product-modal-title,
.admin-body .product-modal-themed .product-modal-title {
  color: var(--modal-title-color, #ffffff) !important;
}

body:not(.admin-body) .product-modal-themed p.product-modal-price,
body:not(.admin-body) .product-modal-themed .product-modal-price,
.admin-body .product-modal-themed p.product-modal-price,
.admin-body .product-modal-themed .product-modal-price {
  color: var(--modal-price-color, #f472b6) !important;
}

body:not(.admin-body) .product-modal-themed p.product-modal-description,
body:not(.admin-body) .product-modal-themed .product-modal-description,
.admin-body .product-modal-themed p.product-modal-description,
.admin-body .product-modal-themed .product-modal-description {
  color: var(--modal-description-color, #d1d5db) !important;
}

body:not(.admin-body) .product-modal-themed .product-modal-cart-btn,
.admin-body .product-modal-themed .product-modal-cart-btn {
  color: var(--modal-cart-text-color, #ffffff) !important;
}
body:not(.admin-body) .text-brand-pink,
.text-brand-pink {
  color: var(--brand-pink) !important;
}

body:not(.admin-body) .text-brand-blue,
.text-brand-blue {
  color: var(--brand-blue) !important;
}

body:not(.admin-body) .text-brand-green,
.text-brand-green {
  color: var(--brand-green) !important;
}

body:not(.admin-body) .text-brand-gold,
.text-brand-gold {
  color: var(--brand-gold) !important;
}

/* Background utilities for brand colors */
body:not(.admin-body) .bg-brand-pink,
.bg-brand-pink {
  background-color: var(--brand-pink) !important;
}

body:not(.admin-body) .bg-brand-gold,
.bg-brand-gold {
  background-color: var(--brand-gold) !important;
}

/* Border utilities for brand colors */
body:not(.admin-body) .border-brand-pink,
.border-brand-pink {
  border-color: var(--brand-pink) !important;
}

body:not(.admin-body) .border-brand-gold,
.border-brand-gold {
  border-color: var(--brand-gold) !important;
}

/* Hover utilities */
body:not(.admin-body) .hover\:text-brand-pink:hover,
.hover\:text-brand-pink:hover {
  color: var(--brand-pink) !important;
}

body:not(.admin-body) .hover\:text-brand-blue:hover,
.hover\:text-brand-blue:hover {
  color: var(--brand-blue) !important;
}

body:not(.admin-body) .hover\:text-brand-gold:hover,
.hover\:text-brand-gold:hover {
  color: var(--brand-gold) !important;
}

body:not(.admin-body) .hover\:border-brand-pink:hover,
.hover\:border-brand-pink:hover {
  border-color: var(--brand-pink) !important;
}

body:not(.admin-body) .hover\:bg-brand-pink\/10:hover,
.hover\:bg-brand-pink\/10:hover {
  background-color: color-mix(in srgb, var(--brand-pink) 10%, transparent) !important;
}

body:not(.admin-body) .hover\:bg-brand-pink\/15:hover,
.hover\:bg-brand-pink\/15:hover {
  background-color: color-mix(in srgb, var(--brand-pink) 15%, transparent) !important;
}

/* Focus utilities */
body:not(.admin-body) .focus\:ring-brand-pink:focus,
.focus\:ring-brand-pink:focus {
  --tw-ring-color: var(--brand-pink);
}

body:not(.admin-body) .focus\:border-brand-pink:focus,
.focus\:border-brand-pink:focus {
  border-color: var(--brand-pink) !important;
}

/* Subtle glow effect for brand-gold (used in carousel) */
.glow-gold {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.15),
    0 0 30px rgba(255, 215, 0, 0.08);
}

.hover\:glow-gold:hover {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2),
    0 0 40px rgba(255, 215, 0, 0.1);
}

/* Google Maps Autocomplete Dropdown Fixes */
/* Override global white text for the autocomplete dropdown */
.pac-container {
  background-color: #ffffff !important;
  z-index: 10000 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  margin-top: 2px !important;
}

.pac-item {
  color: #000000 !important;
  cursor: pointer !important;
}

.pac-item:hover {
  background-color: #f0f0f0 !important;
}

/* Ensure all children (spans, divs) inside the dropdown are black */
.pac-container *,
.pac-item *,
.pac-item-query {
  color: #000000 !important;
}

/*
 * Style-effect shimmer: animated highlight sweep for buttons/tags/headings.
 * Not expressible as a single Tailwind utility; used by StyleEffectsHelper.
 */
@keyframes style-effect-shimmer {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

.style-effect-shimmer {
  overflow: hidden;
}

.style-effect-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  );
  transform: translateX(-130%);
  animation: style-effect-shimmer 2.4s ease-in-out infinite;
}