@import url(https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap);
/*
 * Shadow DOM CSS for Webflow Code Components
 *
 * Webflow renders code components inside Shadow DOM, which blocks
 * styles from the parent document. This file must be imported in
 * every .webflow.tsx file so the Webflow CLI bundles it inside
 * the Shadow DOM boundary.
 *
 * What's included:
 *   - Font imports (Google Fonts + custom @font-face)
 *   - Keyframe animations
 *   - Hover / active / focus states (can't be done with inline styles)
 *   - Media queries for mobile responsiveness
 *   - Shadow DOM fixes for shadows, transforms, transitions, borders
 */

/* ──────────────────────────────────────────────
   1. FONTS
   Shadow DOM can't access fonts from the parent document.
   ────────────────────────────────────────────── */

@font-face {
  font-family: "Sofia Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/65afb6f327861b43479ce5a2/68d2afb3953565aeb93c0d0c_Sofia%20Pro%20Light.woff2")
    format("woff2");
}

@font-face {
  font-family: "Optima Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/65afb6f327861b43479ce5a2/68d2af310413a8005581ccc2_OptimaLTPro-Roman.woff2")
    format("woff2");
}

/* ──────────────────────────────────────────────
   2. KEYFRAME ANIMATIONS
   ────────────────────────────────────────────── */

@keyframes olio-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes olio-fade-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
}

@keyframes olio-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes olio-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes olio-option-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes olio-popup-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes olio-popup-card-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes olio-popup-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes olio-popup-card-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

/* ──────────────────────────────────────────────
   3. HOVER / ACTIVE / FOCUS STATES
   These can't be done with inline styles.
   ────────────────────────────────────────────── */

/* Option buttons – hover & press */
.olio-option-btn {
  transition: all 0.2s ease;
}

.olio-option-btn:hover:not(.olio-option-selected) {
  border-color: #c9a3a8 !important;
  background: #fdf7f8 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(142, 80, 89, 0.08);
}

.olio-option-btn:active:not(.olio-option-selected) {
  transform: scale(0.98);
  box-shadow: none;
}

.olio-option-selected:hover {
  background: #7a4049 !important;
}

.olio-option-selected:active {
  transform: scale(0.98);
}

/* Info icon hover */
.olio-info-circle {
  transition: fill 0.2s ease;
}

.olio-info-icon:hover .olio-info-circle {
  fill: #8e5059;
}

.olio-info-icon:hover {
  color: #fff !important;
}

.olio-info-icon-selected:hover .olio-info-circle {
  fill: rgba(255, 255, 255, 0.25);
}

.olio-info-icon-selected:hover {
  color: #fff !important;
}

/* Primary button hover */
.olio-primary-btn {
  transition: all 0.2s ease;
}

.olio-primary-btn:hover:not(:disabled) {
  background: #7a4049 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(142, 80, 89, 0.25);
}

.olio-primary-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: none;
}

/* Staggered option entrance animation */
.olio-option-stagger {
  opacity: 0;
  animation: olio-option-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Input focus states */
.olio-input:focus {
  border-color: #c9a3a8 !important;
  box-shadow: 0 0 0 2px rgba(142, 80, 89, 0.1);
  outline: none;
}

/* Treatment recommendation cards */
.olio-treatment-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.olio-treatment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(61, 13, 17, 0.15);
}

.olio-treatment-card:active {
  transform: scale(0.98);
}

/* Staggered card entrance */
.olio-card-stagger {
  opacity: 0;
  animation: olio-option-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ──────────────────────────────────────────────
   4. MOBILE RESPONSIVENESS
   ────────────────────────────────────────────── */

/* Tablet: 3-column background grid */
@media (max-width: 1024px) {
  .olio-bg-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .olio-modal {
    padding: 24px 20px !important;
    min-height: auto !important;
    border-radius: 16px !important;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
  }

  .olio-options-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .olio-title {
    font-size: 24px !important;
  }

  .olio-nav-text {
    display: none !important;
  }

  .olio-form {
    max-width: 100% !important;
  }

  .olio-recommendations-grid {
    grid-template-columns: 1fr !important;
    max-width: 300px !important;
  }

  .olio-recommendations-title {
    font-size: 28px !important;
  }

  /* Mobile: 2-column background grid */
  .olio-bg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
}