/* Global Styles */
:root {
    --aq-gradient-from: #667eea;
    --aq-gradient-to: #764ba2;
    --aq-gradient-hover-from: #5568d3;
    --aq-gradient-hover-to: #6b3a8f;
}

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cinzel:wght@500;700&family=Cormorant+Garamond:wght@400;600;700&family=Oswald:wght@500;600;700&display=swap');

* {
    scroll-behavior: smooth;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

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

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Gradients */
.gradient-primary {
    background: linear-gradient(135deg, var(--aq-gradient-from) 0%, var(--aq-gradient-to) 100%);
}

.gradient-hover {
    background: linear-gradient(135deg, var(--aq-gradient-hover-from) 0%, var(--aq-gradient-hover-to) 100%);
}

/* Step Animations */
.step-fade {
    animation: fadeIn 0.4s ease-in-out;
}

/* Magic Button */
.magic-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--aq-gradient-from) 0%, var(--aq-gradient-to) 100%);
    transition: all 0.3s ease;
}

.magic-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.magic-button:hover::before {
    left: 100%;
}

.magic-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

/* Checkbox Custom Styling */
.checkbox-custom:checked {
    background-color: var(--aq-gradient-from);
    border-color: var(--aq-gradient-from);
}

/* Smooth transitions for step content */
.step-content {
    transition: opacity 0.3s ease;
}

.step-content.hidden {
    display: none;
}

/* Public Template Variants */
.template-variant-3 {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.template-variant-1 {
    background:
        radial-gradient(circle at 100% 0%, rgba(15, 23, 42, 0.09) 0 22%, transparent 40%),
        linear-gradient(180deg, #f1f5f9 0%, #ffffff 42%, #edf2f7 100%);
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: #0f172a;
}

.template-variant-1 .establishment-template header {
    backdrop-filter: blur(12px);
    background: rgba(248, 250, 252, 0.9);
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.template-variant-1 .establishment-template h1,
.template-variant-1 .establishment-template h2,
.template-variant-1 .establishment-template h3,
.template-variant-1 .establishment-template h4 {
    letter-spacing: -0.03em;
    color: #0f172a !important;
}

.template-variant-1 .establishment-template h1 {
    font-size: clamp(2.5rem, 5vw, 4.7rem) !important;
    line-height: 1 !important;
}

.template-variant-1 .establishment-template .bg-gradient-to-r,
.template-variant-1 .establishment-template .bg-clip-text,
.template-variant-1 .establishment-template .text-transparent {
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
}

.template-variant-1 .establishment-template .rounded-2xl,
.template-variant-1 .establishment-template .rounded-3xl,
.template-variant-1 .establishment-template .rounded-4xl,
.template-variant-1 .establishment-template .rounded-[2rem] {
    border-radius: 0.6rem !important;
}

.template-variant-1 .establishment-template .bg-white {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.template-variant-1 .establishment-template .shadow-sm,
.template-variant-1 .establishment-template .shadow-2xl {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

.template-variant-1 .establishment-template .magic-button {
    background: #0f172a;
    border-radius: 0.55rem !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.25);
}

.template-variant-1 .establishment-template .magic-button:hover {
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.32);
    transform: translateY(-3px);
}

.template-variant-1 .establishment-template .text-gray-600,
.template-variant-1 .establishment-template .text-gray-700,
.template-variant-1 .establishment-template .text-slate-600,
.template-variant-1 .establishment-template .text-slate-700 {
    color: #475569 !important;
}

.template-variant-1 .establishment-template #agendamento {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    color: #0f172a !important;
}

.template-variant-1 .establishment-template #agendamento h2,
.template-variant-1 .establishment-template #agendamento p,
.template-variant-1 .establishment-template #agendamento h3 {
    color: #0f172a !important;
}

.template-variant-1 .establishment-template #agendamento .text-white,
.template-variant-1 .establishment-template #agendamento .text-white\/70,
.template-variant-1 .establishment-template #agendamento .text-white\/80 {
    color: #0f172a !important;
}

.template-variant-1 .establishment-template #agendamento .bg-white\/10,
.template-variant-1 .establishment-template #agendamento .bg-white\/15,
.template-variant-1 .establishment-template #agendamento .bg-white\/25 {
    background: rgba(255, 255, 255, 0.72) !important;
}

.template-variant-1 .establishment-template #agendamento .border-white\/25,
.template-variant-1 .establishment-template #agendamento .border-white\/30 {
    border-color: rgba(15, 23, 42, 0.18) !important;
}

.template-variant-1 .establishment-template .quick-slot {
    border-radius: 0.45rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.template-variant-2 {
    background:
        repeating-linear-gradient(0deg, rgba(184, 146, 90, 0.05), rgba(184, 146, 90, 0.05) 1px, transparent 1px, transparent 44px),
        linear-gradient(180deg, #0d0d0d 0%, #151515 48%, #0a0a0a 100%);
    color: #efe3d0;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
}

.template-variant-2 body,
body.template-variant-2 {
    background: #0a0a0a !important;
    color: #efe3d0;
}

.template-variant-2 .establishment-template,
.template-variant-2 .establishment-template.bg-gray-50,
.template-variant-2 .establishment-template.text-gray-900 {
    background:
        radial-gradient(circle at top right, rgba(184, 146, 90, 0.14), transparent 42%),
        linear-gradient(180deg, #0c0c0c 0%, #121212 50%, #090909 100%) !important;
    color: #efe3d0 !important;
}

.template-variant-2 .establishment-template main,
.template-variant-2 .establishment-template section,
.template-variant-2 .establishment-template footer {
    background-color: transparent !important;
}

.template-variant-2 .establishment-template header {
    backdrop-filter: blur(6px);
    background: rgba(12, 12, 12, 0.96);
    border-bottom: 2px solid rgba(184, 146, 90, 0.45);
}

.template-variant-2 .establishment-template header a,
.template-variant-2 .establishment-template header button,
.template-variant-2 .establishment-template header i,
.template-variant-2 .establishment-template header span {
    color: #f1dfc3 !important;
}

.template-variant-2 .establishment-template section {
    color: #efe3d0;
}

.template-variant-2 .establishment-template h1,
.template-variant-2 .establishment-template h2,
.template-variant-2 .establishment-template h3,
.template-variant-2 .establishment-template h4 {
    font-family: "Oswald", "Cinzel", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f4e8d7 !important;
}

.template-variant-2 .establishment-template h1 {
    font-size: clamp(2.3rem, 4.6vw, 4.3rem) !important;
    line-height: 1.05 !important;
}

.template-variant-2 .establishment-template .bg-gradient-to-r,
.template-variant-2 .establishment-template .bg-clip-text,
.template-variant-2 .establishment-template .text-transparent {
    background: none !important;
    -webkit-text-fill-color: #f4e8d7 !important;
    color: #f4e8d7 !important;
}

.template-variant-2 .establishment-template .bg-gradient-to-br,
.template-variant-2 .establishment-template .gradient-primary,
.template-variant-2 .establishment-template .gradient-hover {
    background: linear-gradient(135deg, #121212 0%, #2b2013 55%, #141414 100%) !important;
}

.template-variant-2 .establishment-template .text-gray-600,
.template-variant-2 .establishment-template .text-gray-700,
.template-variant-2 .establishment-template .text-slate-600,
.template-variant-2 .establishment-template .text-slate-700 {
    color: #cfb992 !important;
}

.template-variant-2 .establishment-template .magic-button {
    background: linear-gradient(135deg, #725734 0%, #b89159 100%);
    border-radius: 0.15rem !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.template-variant-2 .establishment-template .magic-button:hover {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.52);
}

.template-variant-2 .establishment-template .bg-white {
    background-color: #151515 !important;
}

.template-variant-2 .establishment-template .bg-gray-50,
.template-variant-2 .establishment-template .bg-gray-100,
.template-variant-2 .establishment-template .bg-gray-200,
.template-variant-2 .establishment-template .bg-slate-50,
.template-variant-2 .establishment-template .bg-slate-100,
.template-variant-2 .establishment-template .bg-slate-200 {
    background-color: #111111 !important;
}

.template-variant-2 .establishment-template .bg-amber-50,
.template-variant-2 .establishment-template .bg-yellow-50,
.template-variant-2 .establishment-template .bg-yellow-100 {
    background-color: #2a2115 !important;
}

.template-variant-2 .establishment-template .bg-white\/10,
.template-variant-2 .establishment-template .bg-white\/15,
.template-variant-2 .establishment-template .bg-white\/20,
.template-variant-2 .establishment-template .bg-white\/25 {
    background-color: rgba(24, 20, 14, 0.88) !important;
}

.template-variant-2 .establishment-template .border-slate-200,
.template-variant-2 .establishment-template .border-gray-200,
.template-variant-2 .establishment-template .border {
    border-color: rgba(176, 138, 87, 0.38) !important;
}

.template-variant-2 .establishment-template .rounded-2xl,
.template-variant-2 .establishment-template .rounded-3xl,
.template-variant-2 .establishment-template .rounded-4xl,
.template-variant-2 .establishment-template .rounded-[2rem],
.template-variant-2 .establishment-template .rounded-full {
    border-radius: 0.08rem !important;
}

.template-variant-2 .establishment-template .shadow-sm,
.template-variant-2 .establishment-template .shadow-2xl {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48) !important;
}

.template-variant-2 .establishment-template .text-gray-900,
.template-variant-2 .establishment-template .text-slate-900 {
    color: #f4e8d7 !important;
}

.template-variant-2 .establishment-template .text-gray-800,
.template-variant-2 .establishment-template .text-slate-800,
.template-variant-2 .establishment-template .text-gray-700,
.template-variant-2 .establishment-template .text-slate-700,
.template-variant-2 .establishment-template .text-gray-600,
.template-variant-2 .establishment-template .text-slate-600,
.template-variant-2 .establishment-template .text-gray-500,
.template-variant-2 .establishment-template .text-slate-500 {
    color: #d7bf97 !important;
}

.template-variant-2 .establishment-template #agendamento {
    background: linear-gradient(135deg, #121212 0%, #2a2117 50%, #0e0e0e 100%) !important;
}

.template-variant-2 .establishment-template #scheduling-wizard,
.template-variant-2 .establishment-template #scheduling-wizard .bg-gray-100,
.template-variant-2 .establishment-template #scheduling-wizard .bg-gray-50 {
    background: #121212 !important;
    border: 1px solid rgba(184, 146, 90, 0.32) !important;
}

.template-variant-2 .establishment-template #scheduling-wizard input,
.template-variant-2 .establishment-template #scheduling-wizard select,
.template-variant-2 .establishment-template #scheduling-wizard textarea {
    background: #0f0f0f !important;
    color: #f4e8d7 !important;
    border-color: rgba(184, 146, 90, 0.35) !important;
}

.template-variant-2 .establishment-template #scheduling-wizard input::placeholder,
.template-variant-2 .establishment-template #scheduling-wizard textarea::placeholder {
    color: #b69a70 !important;
}

.template-variant-2 .establishment-template #wizard-prev {
    background: #2a2115 !important;
    color: #f0dfc5 !important;
    border: 1px solid rgba(184, 146, 90, 0.35) !important;
}

.template-variant-2 .establishment-template #wizard-next {
    background: linear-gradient(135deg, #725734 0%, #b89159 100%) !important;
    color: #0d0d0d !important;
}

.template-variant-2 #mobileMenu,
.template-variant-2 #custom-modal .bg-white {
    background: #111111 !important;
    border-color: rgba(184, 146, 90, 0.35) !important;
}

.template-variant-2 .establishment-template #agendamento .bg-white\/10,
.template-variant-2 .establishment-template #agendamento .bg-white\/15,
.template-variant-2 .establishment-template #agendamento .bg-white\/25 {
    background: rgba(14, 14, 14, 0.78) !important;
}

.template-variant-2 .establishment-template #agendamento .border-white\/25,
.template-variant-2 .establishment-template #agendamento .border-white\/30 {
    border-color: rgba(184, 146, 90, 0.38) !important;
}

.template-variant-2 .establishment-template #agendamento .text-white,
.template-variant-2 .establishment-template #agendamento .text-white\/70,
.template-variant-2 .establishment-template #agendamento .text-white\/80 {
    color: #f4e8d7 !important;
}

.template-variant-2 .establishment-template .quick-slot,
.template-variant-2 .establishment-template .professional-card,
.template-variant-2 .establishment-template .date-option {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(184, 146, 90, 0.35) !important;
}

.template-variant-2 .establishment-template #servicos {
    background: linear-gradient(180deg, #0f0f0f 0%, #20180f 55%, #0b0b0b 100%) !important;
}

.template-variant-2 .establishment-template #servicos .bg-gradient-to-b,
.template-variant-2 .establishment-template #servicos .bg-white,
.template-variant-2 .establishment-template #servicos .shadow-md {
    background: #111111 !important;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(184, 146, 90, 0.35) !important;
}

.template-variant-2 .establishment-template #servicos h2,
.template-variant-2 .establishment-template #servicos h3,
.template-variant-2 .establishment-template #servicos .text-gray-900,
.template-variant-2 .establishment-template #servicos .text-gray-800 {
    color: #f4e8d7 !important;
}

.template-variant-2 .establishment-template #servicos p,
.template-variant-2 .establishment-template #servicos .text-gray-600,
.template-variant-2 .establishment-template #servicos .text-gray-700 {
    color: #d7bf97 !important;
}

.template-variant-2 .establishment-template #servicos button {
    background: linear-gradient(135deg, #725734 0%, #b89159 100%) !important;
    color: #0f0f0f !important;
    border-radius: 0.1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .template-variant-2 .establishment-template header nav {
        padding-top: 0.7rem !important;
        padding-bottom: 0.7rem !important;
    }

    .template-variant-2 #mobileMenu .container {
        padding-top: 0.9rem !important;
        padding-bottom: 0.9rem !important;
    }

    .template-variant-2 #mobileMenu a,
    .template-variant-2 #mobileMenu button {
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
        border: 1px solid rgba(184, 146, 90, 0.35);
        border-radius: 0.1rem !important;
    }

    .template-variant-2 .establishment-template section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .template-variant-2 .establishment-template .magic-button,
    .template-variant-2 .establishment-template a[href*='wa.me'] {
        width: 100%;
        justify-content: center;
    }

    .template-variant-2 .establishment-template .grid.gap-4.md\:grid-cols-3 {
        gap: 0.75rem !important;
    }

    .template-variant-2 .establishment-template .grid.gap-4.md\:grid-cols-3 > div,
    .template-variant-2 .establishment-template #servicos .grid > div {
        padding: 1rem !important;
    }

    .template-variant-2 .establishment-template #agendamento {
        padding-top: 3.4rem !important;
        padding-bottom: 3.4rem !important;
    }

    .template-variant-2 .establishment-template #scheduling-wizard > .bg-gray-50.px-6.py-4.flex.justify-between {
        display: flex !important;
        flex-direction: column-reverse;
        gap: 0.7rem;
    }

    .template-variant-2 .establishment-template #wizard-prev,
    .template-variant-2 .establishment-template #wizard-next {
        width: 100%;
    }
}