/* ==========================================================================
   Brand Design System - Dra. Jacqueline Armijo
   Brand Book 1.0: Boutique Elegante + Calidez (Paleta Rosado Pastel)
   Paleta: Rosa Empolvado (#E8CBC8), Rosado Pastel (#D48C95), Rosado Suave (#C4727D),
           Marfil Rosado (#F5E6E6), Fondo Cálido (#FAF5F0), Dorado Sutil (#C9A668),
           Carbón Suave (#5A5A5A)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cinzel:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
    --color-blush: #E8CBC8;
    --color-blush-light: #F9F1F0;
    --color-rose-pastel: #D48C95;
    --color-rose-dark: #C4727D;
    --color-rose-soft: #EAB0B8;
    --color-ivory: #F5E6E6;
    --color-ivory-warm: #FAF5F0;
    --color-sand: #E7DCC9;
    --color-sand-light: #FBF8F4;
    --color-gold: #C9A668;
    --color-gold-light: #E8D3AA;
    --color-charcoal: #5A5A5A;
    --color-charcoal-dark: #333333;
    --color-charcoal-light: #7A7A7A;
}

/* Typography Utility Classes */
.font-script {
    font-family: 'Alex Brush', cursive;
}

.font-serif-title {
    font-family: 'Playfair Display', serif;
}

.font-brand-sub {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.25em;
}

/* Luxury Mesh Background Patterns */
.bg-boutique-pattern {
    background-color: #FAF5F0;
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(232, 203, 200, 0.55) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(212, 140, 149, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(245, 230, 230, 0.4) 0%, transparent 60%);
}

.bg-rose-mesh {
    background: linear-gradient(135deg, rgba(232, 203, 200, 0.3) 0%, rgba(245, 230, 230, 0.5) 50%, rgba(250, 245, 240, 0.9) 100%);
}

.bg-blush-mesh {
    background: linear-gradient(135deg, rgba(245, 230, 230, 0.8) 0%, rgba(250, 245, 240, 0.95) 100%);
}

/* Delicate Gold Border and Rings */
.border-gold-subtle {
    border-color: rgba(201, 166, 104, 0.35);
}

.gold-ring-decor {
    box-shadow: 0 0 0 1px rgba(201, 166, 104, 0.35), 0 0 0 5px rgba(201, 166, 104, 0.08);
}

/* Custom Scrollbar for horizontal date selector */
.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(90, 90, 90, 0.1);
    border-radius: 9999px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #D48C95;
    border-radius: 9999px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #C4727D;
}

/* Boutique Cards & Shadows */
.boutique-card {
    background: #FFFFFF;
    border: 1px solid rgba(232, 203, 200, 0.7);
    box-shadow: 0 10px 30px -10px rgba(90, 90, 90, 0.05), 0 4px 15px rgba(232, 203, 200, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.boutique-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 35px -10px rgba(90, 90, 90, 0.1), 0 8px 25px rgba(212, 140, 149, 0.25);
    border-color: rgba(212, 140, 149, 0.7);
}

/* Service Pills Selection in Booking */
.service-pill {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-pill:hover {
    border-color: #D48C95;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 140, 149, 0.2);
}

.service-pill.active {
    border-color: #D48C95;
    background-color: rgba(212, 140, 149, 0.15);
    box-shadow: 0 0 0 1.5px #D48C95, 0 4px 20px rgba(212, 140, 149, 0.25);
}

/* Date Pill Selector */
.date-pill {
    min-width: 82px;
    transition: all 0.25s ease;
}

.date-pill:hover:not(:disabled) {
    border-color: #D48C95;
    background-color: #4A4A4A;
    transform: translateY(-2px);
}

.date-pill.selected {
    background: linear-gradient(135deg, #D48C95, #C4727D);
    border-color: #EAB0B8;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(212, 140, 149, 0.4);
    transform: translateY(-2px) scale(1.02);
}

.date-pill.selected span {
    color: #ffffff !important;
}

/* Time Slot Buttons */
.time-slot-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.time-slot-btn:hover:not(:disabled) {
    border-color: #C9A668;
    background-color: #444444;
    color: #E8D3AA;
    transform: translateY(-1px);
}

.time-slot-btn.selected {
    background: linear-gradient(135deg, #C9A668, #B08D4E);
    border-color: #E8D3AA;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(201, 166, 104, 0.4);
}

/* Step Indicators */
.step-indicator.active .step-circle {
    background: linear-gradient(135deg, #D48C95, #C4727D);
    box-shadow: 0 0 0 4px rgba(212, 140, 149, 0.3);
}

.step-indicator.completed .step-circle {
    background-color: #D48C95;
}

/* Accordion FAQs */
details summary::-webkit-details-marker {
    display: none;
}

details[open] summary {
    color: #C4727D;
}

/* Smooth Focus */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(212, 140, 149, 0.4);
}

/* Soft Animations */
@keyframes floatSubtle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.animate-float-subtle {
    animation: floatSubtle 6s ease-in-out infinite;
}

/* Floating WhatsApp button pulse in Pastel Rose */
@keyframes pulseBoutique {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 140, 149, 0.6); }
    70% { box-shadow: 0 0 0 16px rgba(212, 140, 149, 0); }
}

.whatsapp-pulse {
    animation: pulseBoutique 2.5s infinite;
}