/* ============================================================
   Ayurveda Life – Custom CSS (Tailwind CDN supplement)
   Styles here handle things @apply can't do from a CDN build.
   ============================================================ */

/* ---------- Form inputs (Django renders without Tailwind classes) ---------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    border: 1.5px solid #e7e5e4;
    font-size: 0.875rem;
    color: #292524;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
input:focus,
select:focus,
textarea:focus {
    border-color: #2d6a4f;
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12);
}
input.is-invalid,
select.is-invalid {
    border-color: #ef4444;
}

/* ---------- Dosha questionnaire option cards ---------- */
.dosha-option {
    position: relative;
    margin-bottom: 0.5rem;
}
.dosha-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.dosha-option-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e7e5e4;
    border-radius: 0.875rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #57534e;
    background: #fafaf9;
    transition: all 0.18s ease;
    line-height: 1.4;
}
.dosha-option-card::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid #d6d3d1;
    background: #fff;
    transition: all 0.18s ease;
}
.dosha-option-card:hover {
    border-color: #74c69d;
    background: #f0fdf4;
    color: #1b4332;
}
.dosha-option-card:hover::before {
    border-color: #40916c;
}
.dosha-option input[type="checkbox"]:checked + .dosha-option-card {
    border-color: #2d6a4f;
    background: #d8f3dc;
    color: #1b4332;
    font-weight: 500;
}
.dosha-option input[type="checkbox"]:checked + .dosha-option-card::before {
    background: #2d6a4f;
    border-color: #2d6a4f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.5 3.5L6 11 2.5 7.5l-1 1L6 13l8.5-8.5z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ---------- Page loader ---------- */
#page-loader {
    transition: opacity 0.4s ease;
}
#page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Hero carousel transitions ---------- */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Counter animation ---------- */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fadeSlideUp 0.6s ease forwards;
}

/* ---------- Service card hover reveal ---------- */
.service-card .service-overlay {
    transform: translateY(100%);
    transition: transform 0.4s ease;
}
.service-card:hover .service-overlay {
    transform: translateY(0);
}

/* ---------- Testimonial carousel (CSS-only fade) ---------- */
.testimonial-track {
    position: relative;
}
.testimonial-item-fade {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}
.testimonial-item-fade.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

/* ---------- Accordion smooth transition ---------- */
.accord-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.accord-body.open {
    max-height: 3000px;
}

/* ---------- Progress bar ---------- */
.progress-bar-fill {
    transition: width 0.4s ease;
}

/* ---------- Breadcrumb/page-header gradient ---------- */
.page-header-gradient {
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 60%, #40916c 100%);
}

/* ---------- Scrollbar (optional polish) ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f5f5f4; }
::-webkit-scrollbar-thumb { background: #a8a29e; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #78716c; }