/* ============================================================
   Aatman Wellness Centre — Brand Override CSS
   Overrides Wivana template with Panchkarma saffron/gold theme
============================================================ */

/* --- Color Palette Override --- */
:root {
    --heading-color: #2C1A0E;
    --color-main: #8B6914;
    --color-darker: #5C4009;
    --color-lighter: #D4AA5F;
    --color-subtle: #FDF6E3;
    --color-border: #fdfaf3;
    --color-error: #E22D2D;
    --color-warning: #E2D52D;
    --color-info: #2663cf;
    --color-success: #20bd3c;
    --text-color-1: #6B5B45;
    --text-color-2: #c2ac90;
    --font-1: "Philosopher";
    --font-2: "Lato";
}

/* --- Aatman Logo sizing --- */
.aatman-logo {
    height: 80px;
    width: auto;
    object-fit: contain;
}

/* --- Hero: use real clinic photo --- */
.bg-hero {
    background-image: url('../assets/9R6A2478.JPG');
    background-size: cover;
    background-position: center top;
}

/* --- About page overlay --- */
.about-bg {
    background-image: linear-gradient(rgba(44,26,14,0.65), rgba(44,26,14,0.65)), url('../assets/9R6A2503.JPG');
    background-size: cover;
    background-position: center;
    height: 512px;
}

/* --- CEO/Director quote bg --- */
.bg-ceo {
    background-image: linear-gradient(rgba(44,26,14,0.7), rgba(44,26,14,0.7)), url('../assets/9R6A2521.JPG');
    width: 100%;
    background-size: cover;
    background-position: center;
}

/* --- Choose Us overlay --- */
.bg-choose-us {
    background-image: linear-gradient(rgba(44,26,14,0.65), rgba(44,26,14,0.65)), url('../assets/9R6A2526.JPG');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

/* --- Service section bg images using real assets --- */
.bg-service-1 { background-image: url('../assets/9R6A2483.JPG'); }
.bg-service-2 { background-image: url('../assets/9R6A2498.JPG'); }
.bg-service-3 { background-image: url('../assets/9R6A2501.JPG'); }
.bg-service-4 { background-image: url('../assets/9R6A2508.JPG'); }

/* --- 404 overlay --- */
.bg-404 {
    background-image: linear-gradient(rgba(44,26,14,0.65), rgba(44,26,14,0.65)), url('../assets/9R6A2533.JPG');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

/* --- Top bar accent line --- */
.border-hero {
    border-bottom: 1px solid rgba(212,170,95,0.4);
}

/* --- Accent gold badges --- */
.badge-gold {
    display: inline-block;
    background: rgba(139,105,20,0.15);
    color: var(--color-main);
    border: 1px solid var(--color-lighter);
    border-radius: 50px;
    padding: 4px 16px;
    font-size: 13px;
    font-family: var(--font-2);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- Disease Cards --- */
.disease-card {
    border: 1px solid #e5d9c3;
    border-radius: 14px;
    padding: 28px 24px;
    background: var(--color-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
}
.disease-card:hover {
    border-color: var(--color-lighter);
    box-shadow: 0 8px 32px rgba(139,105,20,0.12);
    transform: translateY(-4px);
}
.disease-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(139,105,20,0.1);
    border: 1px solid rgba(139,105,20,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 16px;
    color: var(--color-main);
}

/* --- Director page specific --- */
.director-hero {
    background: linear-gradient(135deg, var(--color-darker) 0%, #8B6914 100%);
    min-height: 420px;
}
.director-photo-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(44,26,14,0.25);
    border: 4px solid var(--color-lighter);
}
.director-photo {
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: center top;
}
.director-stat {
    text-align: center;
    padding: 24px;
    background: var(--color-border);
    border-radius: 12px;
    border: 1px solid #e5d9c3;
}
.director-stat-number {
    font-size: 42px;
    font-family: var(--font-1);
    color: var(--color-main);
    font-weight: 700;
    line-height: 1;
}
.director-stat-label {
    font-size: 14px;
    color: var(--text-color-1);
    font-family: var(--font-2);
    margin-top: 6px;
}

/* --- Service Detail cards --- */
.service-detail-header {
    background: linear-gradient(135deg, var(--color-darker) 0%, var(--color-main) 100%);
    min-height: 320px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    margin-bottom: 40px;
}
.benefit-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(139,105,20,0.08);
    border: 1px solid var(--color-lighter);
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 14px;
    font-family: var(--font-2);
    color: var(--color-darker);
    margin: 6px;
    transition: background 0.2s;
}
.benefit-chip:hover {
    background: rgba(139,105,20,0.16);
}

/* --- Package card featured --- */
.package-card.featured {
    border: 2px solid var(--color-main);
    background: linear-gradient(160deg, #fff9ec 0%, #fdf6e3 100%);
}
.package-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-main);
    color: white;
    border-radius: 50px;
    padding: 4px 20px;
    font-size: 13px;
    font-family: var(--font-2);
    white-space: nowrap;
}
.package-price {
    font-family: var(--font-1);
    font-size: 48px;
    color: var(--color-main);
    font-weight: 700;
    line-height: 1;
}
.package-duration {
    font-family: var(--font-2);
    font-size: 14px;
    color: var(--text-color-1);
}
.package-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #ecdfc8;
    font-family: var(--font-2);
    font-size: 14px;
    color: var(--text-color-1);
}
.package-feature:last-child {
    border-bottom: none;
}
.package-feature i {
    color: var(--color-main);
    margin-top: 2px;
    flex-shrink: 0;
}

/* --- Blog category tags --- */
.blog-tag {
    display: inline-block;
    background: rgba(139,105,20,0.1);
    color: var(--color-main);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 12px;
    font-family: var(--font-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Contact map & info --- */
.contact-info-card {
    background: var(--color-border);
    border: 1px solid #e5d9c3;
    border-radius: 14px;
    padding: 28px;
    height: 100%;
}
.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(139,105,20,0.12);
    border: 1px solid var(--color-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-main);
    font-size: 18px;
    flex-shrink: 0;
}

/* --- Section label style --- */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.section-label .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-main);
}
.section-label span {
    font-family: var(--font-2);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-main);
    font-weight: 600;
}

/* --- Panchkarma step cards --- */
.process-step {
    position: relative;
    padding: 32px 28px;
    background: var(--color-border);
    border: 1px solid #e5d9c3;
    border-radius: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
    height: 100%;
}
.process-step:hover {
    border-color: var(--color-lighter);
    box-shadow: 0 8px 32px rgba(139,105,20,0.1);
}
.process-num {
    font-family: var(--font-1);
    font-size: 52px;
    color: rgba(139,105,20,0.15);
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: 16px;
    right: 20px;
}

/* --- Testimonial avatar ring --- */
.testimonial-circle, .testimonial-circle-first {
    border: 2px solid var(--color-lighter);
}

/* --- Footer override --- */
.footer-link {
    color: var(--text-color-2);
    font-family: var(--font-2);
    font-size: 14px;
    transition: color 0.3s;
}
.footer-link:hover { color: var(--color-lighter); }

/* --- Responsive for director photo --- */
@media (max-width: 992px) {
    .director-photo { height: 400px; }
}
@media (max-width: 450px) {
    .director-photo { height: 300px; }
    .package-price { font-size: 36px; }
}