/** Shopify CDN: Minification failed

Line 43:0 All "@import" rules must come first

**/
/* saudi-cosrx-custom.css — Premium Saudi Royal Design System */

/* ═══════════ 1. FULL-WIDTH LAYOUT FIX ═══════════ */
#MainContent, .content-for-layout, main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════ 2. SECTION ISOLATION ═══════════ */
.shopify-section, .saudi-section {
  display: block;
  position: relative;
  clear: both;
  width: 100%;
  box-sizing: border-box;
}

/* ═══════════ 3. IMAGE SAFETY ═══════════ */
img, video, svg { max-width: 100% !important; height: auto; }
img[src*="cosrx-gallery-1"] { max-height: 220px !important; object-fit: cover !important; }

/* ═══════════ 4. SAUDI ROYAL COLOR TOKENS ═══════════ */
:root {
  --saudi-bg: #0c0a09;
  --saudi-card: #1c1917;
  --saudi-gold: #d4af37;
  --saudi-gold-light: #fbbf24;
  --saudi-emerald: #10b981;
  --saudi-emerald-deep: #043927;
  --saudi-text: #ffffff;
  --saudi-text-muted: #a8a29e;
  --saudi-border: rgba(212,175,55,0.3);
}

/* ═══════════ 5. TYPOGRAPHY ═══════════ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

body {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.8;
  background-color: var(--saudi-bg);
  color: var(--saudi-text);
  direction: rtl;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  margin-top: 0;
  color: var(--saudi-text);
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.75rem; }
h3 { font-size: 1.7rem; }
p, li { font-size: 1.25rem; }

.saudi-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* ═══════════ 6. MOTION KEYFRAMES ═══════════ */
@keyframes ambientBgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes appleFloating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes badgePop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 15px rgba(212,175,55,0.3); }
  50% { box-shadow: 0 0 30px rgba(212,175,55,0.6); }
  100% { box-shadow: 0 0 15px rgba(212,175,55,0.3); }
}

/* ═══════════ 7. SCROLL REVEAL ═══════════ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.16,1,0.3,1);
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ═══════════ 8. COMPONENT STYLES ═══════════ */

/* Ambient Background */
.ambient-motion-bg {
  background: linear-gradient(135deg, #0c0a09 0%, #062f1e 50%, #0c0a09 100%);
  background-size: 200% 200%;
  animation: ambientBgShift 25s ease infinite;
}

/* Floating Serum */
.floating-serum { animation: appleFloating 8s ease-in-out infinite; }

/* Bundle Cards */
.bundle-option-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bundle-option-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(212,175,55,0.15);
}

/* Sticky Mobile Bar */
.saudi-sticky-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(12,10,9,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(212,175,55,0.2);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.saudi-sticky-mobile-bar.is-active { transform: translateY(0); }
.saudi-sticky-mobile-bar .bar-product-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

/* WhatsApp Float */
.saudi-whatsapp-float {
  position: fixed;
  bottom: 80px;
  left: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(37,211,102,0.4);
  z-index: 998;
  transition: transform 0.3s ease;
}
.saudi-whatsapp-float:hover { transform: scale(1.1); }

/* Before/After Slider */
.before-after-slider-container {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 1/1;
}
.before-after-slider-container img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
}
.before-image-overlay {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  overflow: hidden;
}
.before-image-overlay img {
  width: 200%; max-width: 200% !important; right: 0;
}
.slider-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: var(--saudi-gold);
  right: 50%;
  transform: translateX(50%);
  z-index: 2;
  pointer-events: none;
}
.slider-handle::after {
  content: '◂ ▸';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  background: var(--saudi-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: bold;
}
input[type=range].before-after-range {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0; z-index: 3;
  cursor: ew-resize;
}

/* Riyal Symbol */
.saudi-riyal-symbol { display: inline-flex; height: 1.25em; vertical-align: middle; }

/* Gallery Cards */
.gallery-card {
  border: 1px solid var(--saudi-card);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.gallery-card:hover { border-color: var(--saudi-gold); }

/* FAQ Accordion */
.faq-accordion details {
  background: var(--saudi-card);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--saudi-border);
  overflow: hidden;
}
.faq-accordion summary {
  padding: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion .faq-content {
  padding: 0 1.25rem 1.25rem;
  color: var(--saudi-text-muted);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--saudi-gold), var(--saudi-gold-light));
  color: #000;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212,175,55,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulseGlow 2s infinite;
  text-align: center;
}
.btn-primary:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,175,55,0.5);
}

.btn-secondary {
  background: var(--saudi-emerald);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(16,185,129,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}
.btn-secondary:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,185,129,0.5);
}

/* ═══════════ 9. RESPONSIVE — TABLET (768-1023px) ═══════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }

  /* Hero */
  .saudi-hero-container { grid-template-columns: 1fr !important; }
  .hero-title { font-size: 2.2rem !important; }
  .carousel-slide img { height: 400px !important; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Ingredients */
  .ci-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Timeline */
  .ct-line { left: 20px !important; }
  .ct-step { width: 100% !important; padding-right: 0 !important; padding-left: 3rem !important; left: 0 !important; }
  .ct-dot { left: 10px !important; right: auto !important; }

  /* Reviews */
  .reviews-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Bundle */
  .bundles-wrapper { flex-direction: row !important; }
}

/* ═══════════ 10. RESPONSIVE — MOBILE (<768px) ═══════════ */
@media (max-width: 767px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.7rem !important; }
  h3 { font-size: 1.3rem !important; }
  body { font-size: 1.1rem !important; }
  p, li { font-size: 1.1rem !important; }

  .saudi-container { padding: 0 0.75rem; }

  /* Hero */
  .saudi-hero-container { grid-template-columns: 1fr !important; gap: 25px !important; }
  .hero-title { font-size: 1.8rem !important; }
  .carousel-slide img { height: 300px !important; }
  .cta-button { font-size: 1.1rem !important; padding: 14px 15px !important; }
  .price-box { padding: 15px !important; }
  .current-price { font-size: 2rem !important; }
  .trust-bullets { gap: 8px !important; }
  .trust-bullets li { font-size: 0.85rem !important; padding: 6px 10px !important; }
  .city-banner { font-size: 0.8rem !important; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .gallery-main-title { font-size: 1.5rem !important; }
  .card-media-wrapper { height: 150px !important; }
  .gallery-emoji { font-size: 3rem !important; }
  .card-label { font-size: 0.85rem !important; padding: 10px 5px !important; }
  .gallery-modal-box { padding: 20px !important; max-height: 85vh !important; }
  .gallery-modal-body h3 { font-size: 1.3rem !important; }
  .gallery-modal-cta { font-size: 1.1rem !important; padding: 12px !important; }
  .trust-marquee { padding: 8px 0 !important; }
  .marquee-content span { font-size: 0.9rem !important; padding: 0 20px !important; }

  /* Ingredients */
  .ci-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
  .ci-title { font-size: 1.5rem !important; }
  .ci-molecule-icon { font-size: 4rem !important; }
  .ci-card { padding: 1.5rem !important; }
  .ci-trust-bar { flex-direction: column !important; gap: 10px !important; }

  /* Quiz */
  .cq-types-grid { flex-wrap: wrap !important; gap: 10px !important; }
  .cq-type-card { flex: 0 0 calc(50% - 5px) !important; padding: 1rem 0.5rem !important; }
  .cq-type-card:last-child { flex: 0 0 100% !important; max-width: 100% !important; }
  .cq-title { font-size: 1.5rem !important; }
  .cq-result-card { padding: 1.5rem 1rem !important; }
  .cq-match-percentage { font-size: 2rem !important; }
  .cq-cta-button { font-size: 1.2rem !important; padding: 0.8rem 2rem !important; }

  /* Timeline */
  .ct-title { font-size: 1.6rem !important; }
  .ct-line { left: 20px !important; }
  .ct-step { width: 100% !important; padding-right: 0 !important; padding-left: 3rem !important; left: 0 !important; }
  .ct-dot { left: 10px !important; right: auto !important; }
  .ct-content { padding: 1.5rem !important; }
  .ct-step-title { font-size: 1.1rem !important; }
  .ct-cta-button { font-size: 1.2rem !important; padding: 0.8rem 2rem !important; }
  .ct-comparison { padding: 1.5rem !important; }
  .ct-comp-text { font-size: 1.1rem !important; }
  .ct-comp-text span { font-size: 1.5rem !important; }

  /* Bundle / Checkout */
  .bundles-wrapper { flex-direction: column !important; }
  .checkout-title { font-size: 1.5rem !important; }
  .bundle-name { font-size: 1.1rem !important; }
  .price-new { font-size: 1.5rem !important; }
  .cod-form { padding: 20px !important; }
  .submit-btn { font-size: 1.1rem !important; padding: 15px !important; }

  /* Trust Reviews */
  .reviews-title { font-size: 1.5rem !important; }
  .stats-bar { flex-direction: column !important; padding: 20px !important; gap: 15px !important; }
  .stat-item { min-width: auto !important; justify-content: flex-start !important; }
  .stat-value { font-size: 1.4rem !important; }
  .reviews-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
  .review-card { padding: 20px !important; }
  .reviews-cta { font-size: 1rem !important; padding: 12px 25px !important; }

  /* FAQ */
  .faq-title { font-size: 1.5rem !important; }
  .faq-item summary { font-size: 1rem !important; padding: 15px 18px !important; }
  .faq-answer { padding: 0 18px 18px !important; }

  /* Sticky Mobile Bar */
  .saudi-sticky-mobile-bar { display: flex !important; }
  .saudi-sticky-mobile-bar .bar-product-img { width: 35px !important; height: 35px !important; }

  /* Cart */
  .cart-panel { max-width: 100% !important; }
}

/* ═══════════ 11. SMALL MOBILE (<400px) ═══════════ */
@media (max-width: 399px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .card-media-wrapper { height: 120px !important; }
  .carousel-slide img { height: 250px !important; }
  .cq-type-card { flex: 0 0 100% !important; }
  .bundle-card { padding: 15px !important; }
  .hero-description { font-size: 0.95rem !important; }
  .expand-details-btn { font-size: 0.95rem !important; }
}

/* ═══════════ 12. CUSTOM WHITE TRANSPARENT CURRENCY SYMBOL ═══════════ */
.saudi-riyal-official-symbol {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  background: transparent !important;
  margin-inline-start: 4px;
}

.saudi-riyal-img {
  height: 1.15em !important;
  width: auto !important;
  max-height: 1.3em !important;
  display: inline-block !important;
  vertical-align: middle !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: brightness(0) invert(1) !important; /* Forces pure white symbol color */
  object-fit: contain !important;
}

.currency-coin-symbol {
  display: inline-block !important;
  height: 1.15em !important;
  width: 1.0em !important;
  vertical-align: middle !important;
  background-color: #ffffff !important; /* Pure white fill */
  -webkit-mask-image: var(--currency-sar-mask) !important;
  mask-image: var(--currency-sar-mask) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.3)) !important;
}