/*==================================================
    APPOINTMENT PAGE
    ACHARYA ATUL
==================================================*/

/*==================================================
ROOT VARIABLES
==================================================*/

:root{

    --primary:#D4AF37;
    --primary-light:#F7D774;
    --primary-dark:#B78A18;

    --dark:#07101D;
    --dark2:#111827;
    --dark3:#1F2937;

    --white:#FFFFFF;

    --text:#CBD5E1;

    --gray:#94A3B8;

    --border:rgba(212,175,55,.18);

    --glass:rgba(255,255,255,.05);

    --radius:20px;

    --transition:.35s ease;

}

/*==================================================
COMMON
==================================================*/

.booking-wrapper{

    padding:100px 0;

    background:

    linear-gradient(

    180deg,

    #08111F,

    #111827

    );

}

.booking-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:600;

}

/*==================================================
HERO
==================================================*/

.appointment-hero{

    position:relative;

    overflow:hidden;

    padding:150px 20px 100px;

    text-align:center;

    background:

    radial-gradient(circle at top right,

    rgba(212,175,55,.18),

    transparent 30%),

    radial-gradient(circle at bottom left,

    rgba(212,175,55,.08),

    transparent 35%),

    linear-gradient(

    135deg,

    #07101D,

    #111827

    );

}

.appointment-hero::before{

    content:'';

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    rgba(212,175,55,.05);

    top:-220px;

    right:-220px;

}

.page-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    background:

    rgba(212,175,55,.12);

    border:

    1px solid rgba(212,175,55,.25);

    color:var(--primary);

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

}

.appointment-hero h1{

    margin:25px auto;

    max-width:900px;

    color:#fff;

    font-size:2.8rem;

    line-height:1.2;

    font-family:'Cinzel',serif;

}

.appointment-hero p{

    max-width:760px;

    margin:auto;

    color:var(--text);

    line-height:1.9;

    font-size:17px;

}

/*==================================================
LEFT SIDEBAR
==================================================*/

.booking-sidebar{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.sidebar-card{

    padding:35px;

    border-radius:24px;

    background:var(--glass);

    backdrop-filter:blur(12px);

    border:1px solid var(--border);

    transition:var(--transition);

}

.sidebar-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

}

.sidebar-card h2{

    margin:20px 0;

    color:#fff;

    font-size:2rem;

    line-height:1.3;

    font-family:'Cinzel',serif;

}

.sidebar-card p{

    color:var(--text);

    line-height:2;

}

/*==================================================
TRUST LIST
==================================================*/

.trust-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.trust-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:22px;

    border-radius:18px;

    background:var(--glass);

    border:1px solid var(--border);

    transition:var(--transition);

}

.trust-item:hover{

    transform:translateX(8px);

    border-color:var(--primary);

    box-shadow:

    0 15px 35px rgba(0,0,0,.25);

}

.trust-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-light)

    );

    color:#111;

    font-size:22px;

}

.trust-item h4{

    color:#fff;

    margin-bottom:6px;

}

.trust-item p{

    color:var(--gray);

    line-height:1.7;

    font-size:15px;

}

/*==================================================
CLIENT REVIEW
==================================================*/

.review-card{

    padding:30px;

    border-radius:22px;

    background:var(--glass);

    border:1px solid var(--border);

    transition:var(--transition);

}

.review-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

}

.stars{

    display:flex;

    gap:5px;

    margin-bottom:18px;

}

.stars i{

    color:#FFD700;

    font-size:18px;

}

.review-card p{

    color:var(--text);

    line-height:1.9;

    font-style:italic;

}

.review-card h5{

    margin-top:20px;

    color:var(--primary);

    font-size:15px;

}

/*==================================================
HELP CARD
==================================================*/

.help-card{

    padding:35px;

    border-radius:22px;

    text-align:center;

    background:

    linear-gradient(

    135deg,

    rgba(212,175,55,.08),

    rgba(255,255,255,.03)

    );

    border:1px solid var(--border);

}

.help-card h3{

    color:#fff;

    margin-bottom:15px;

    font-family:'Cinzel',serif;

}

.help-card p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:30px;

}

.help-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.help-buttons a{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:15px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);

}

.help-buttons a:first-child{

    background:#ffffff;

    color:#111827;

}

.help-buttons a:last-child{

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-light)

    );

    color:#111;

}

.help-buttons a:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(212,175,55,.20);

}

/*==================================================
BOOKING FORM CARD
==================================================*/

.booking-form-card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

    border:1px solid var(--border);

    border-radius:28px;

    padding:40px;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.35);

}

.booking-form-card::before{

    content:'';

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(212,175,55,.06);

    top:-130px;

    right:-130px;

}

.booking-header{

    position:relative;

    z-index:2;

    margin-bottom:40px;

}

.booking-header h2{

    color:#fff;

    font-size:2rem;

    margin-bottom:10px;

    font-family:'Cinzel',serif;

}

.booking-header p{

    color:var(--text);

    line-height:1.8;

}

/*==================================================
PROGRESS BAR
==================================================*/

.booking-progress{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:50px;

}

.progress-line{

    position:absolute;

    left:0;

    top:18px;

    width:100%;

    height:4px;

    background:rgba(255,255,255,.08);

    border-radius:30px;

    z-index:1;

}

.progress-fill{

    width:0;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
    90deg,
    var(--primary),
    var(--primary-light));

    transition:.45s ease;

}

.step{

    position:relative;

    z-index:2;

    text-align:center;

    width:33.33%;

}

.step .circle{

    width:42px;

    height:42px;

    margin:auto;

    border-radius:50%;

    background:#1F2937;

    border:2px solid rgba(255,255,255,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.step span{

    display:block;

    margin-top:10px;

    color:var(--gray);

    font-size:14px;

    font-weight:600;

}

.step.active .circle{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-light));

    color:#111;

    border:none;

    transform:scale(1.1);

}

.step.completed .circle{

    background:#16A34A;

    color:#fff;

    border:none;

}

.step.active span{

    color:#fff;

}

.step.completed span{

    color:#16A34A;

}

/*==================================================
FORM STEPS
==================================================*/

.form-step{

    display:none;

    animation:fadeStep .35s ease;

}

.form-step.active{

    display:block;

}

@keyframes fadeStep{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.form-step h3{

    color:#fff;

    font-size:1.7rem;

    margin-bottom:10px;

    font-family:'Cinzel',serif;

}

.step-description{

    color:var(--gray);

    margin-bottom:30px;

}

/*==================================================
FORM LAYOUT
==================================================*/

.form-row{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}

.form-group{

    margin-bottom:24px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    color:#fff;

    font-weight:600;

}

.form-group label span{

    color:#EF4444;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.04);

    color:#fff;

    font-size:15px;

    outline:none;

    transition:.35s;

}

.form-group textarea{

    resize:vertical;

    min-height:130px;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#94A3B8;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 18px rgba(212,175,55,.12);

}

/* Improve native select appearance */

.form-group select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23D4AF37' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5' stroke='%23D4AF37' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 16px center;

    padding-right:50px;

}

/*==================================================
BOOKING NOTE
==================================================*/

.booking-note{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:22px;

    margin:30px 0;

    border-radius:18px;

    background:rgba(212,175,55,.08);

    border:1px solid rgba(212,175,55,.15);

}

.booking-note-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-light));

    color:#111;

    font-size:20px;

}

.booking-note h4{

    color:#fff;

    margin-bottom:8px;

}

.booking-note p{

    color:var(--text);

    line-height:1.8;

}

/*==================================================
CHECKBOX
==================================================*/

.checkbox-group{

    margin-top:25px;

}

.checkbox-group label{

    display:flex;

    gap:12px;

    align-items:flex-start;

    color:var(--text);

    line-height:1.8;

    cursor:pointer;

}

.checkbox-group input{

    margin-top:4px;

    accent-color:var(--primary);

}

/*==================================================
WIZARD BUTTONS
==================================================*/

.wizard-buttons{

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:35px;

}

.prev-btn,
.next-btn,
.submit-btn{

    border:none;

    border-radius:50px;

    padding:16px 34px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.prev-btn{

    background:#1F2937;

    color:#fff;

}

.prev-btn:hover{

    background:#374151;

}

.next-btn,
.submit-btn{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-light));

    color:#111;

}

.next-btn:hover,
.submit-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(212,175,55,.30);

}

/*==================================================
BOOKING SUMMARY
==================================================*/

.booking-summary{

    margin:35px 0;

    padding:30px;

    border-radius:22px;

    background:rgba(255,255,255,.04);

    border:1px solid var(--border);

}

.booking-summary h4{

    color:#fff;

    font-size:1.4rem;

    margin-bottom:25px;

    font-family:'Cinzel', serif;

}

.summary-table{

    width:100%;

    border-collapse:collapse;

}

.summary-table tr{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.summary-table tr:last-child{

    border-bottom:none;

}

.summary-table td{

    padding:16px 10px;

    color:var(--text);

}

.summary-table td:first-child{

    color:#fff;

    font-weight:600;

    width:40%;

}

.summary-table td:last-child{

    text-align:right;

    color:var(--primary);

    font-weight:600;

}

/*==================================================
PAYMENT OPTIONS
==================================================*/

.payment-options{

    margin-top:40px;

}

.payment-options h4{

    color:#fff;

    margin-bottom:20px;

    font-size:1.3rem;

    font-family:'Cinzel', serif;

}

.payment-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px;

    margin-bottom:18px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.10);

    cursor:pointer;

    transition:var(--transition);

}

.payment-card:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

    box-shadow:

    0 18px 40px rgba(0,0,0,.25);

}

.payment-card input{

    margin-top:5px;

    accent-color:var(--primary);

    transform:scale(1.2);

}

.payment-card strong{

    display:block;

    color:#fff;

    margin-bottom:8px;

    font-size:16px;

}

.payment-card p{

    color:var(--gray);

    line-height:1.7;

    margin:0;

}

/*==================================================
FILE UPLOAD
==================================================*/

input[type="file"]{

    padding:14px;

    background:rgba(255,255,255,.05);

    border:1px dashed var(--primary);

    border-radius:14px;

    color:var(--gray);

    cursor:pointer;

}

input[type="file"]::file-selector-button{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-light));

    color:#111;

    border:none;

    padding:10px 18px;

    border-radius:30px;

    cursor:pointer;

    margin-right:15px;

    font-weight:600;

}

/*==================================================
TERMS BOX
==================================================*/

.terms-box{

    margin-top:30px;

    padding:20px;

    border-radius:16px;

    background:rgba(212,175,55,.06);

    border:1px solid rgba(212,175,55,.15);

}

.terms-box label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:var(--text);

    line-height:1.8;

    cursor:pointer;

}

.terms-box input{

    margin-top:4px;

    accent-color:var(--primary);

}

/*==================================================
FAQ SECTION
==================================================*/

.appointment-faq{

    padding:110px 0;

    background:#111827;

}

.faq-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

    margin-top:60px;

}

.faq-card{

    padding:30px;

    border-radius:20px;

    background:rgba(255,255,255,.04);

    border:1px solid var(--border);

    transition:var(--transition);

}

.faq-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}

.faq-card h3{

    color:#fff;

    margin-bottom:15px;

    font-size:1.2rem;

}

.faq-card p{

    color:var(--gray);

    line-height:1.9;

}

/*==================================================
SUPPORT CTA
==================================================*/

.appointment-support{

    padding:110px 0;

    background:linear-gradient(
    135deg,
    #07101D,
    #111827);

}

.support-box{

    padding:60px 40px;

    text-align:center;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(16px);

    border:1px solid var(--border);

}

.support-box h2{

    color:#fff;

    font-size:2.5rem;

    margin-bottom:20px;

    font-family:'Cinzel', serif;

}

.support-box p{

    max-width:700px;

    margin:0 auto 35px;

    color:var(--text);

    line-height:1.9;

}

.support-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

    justify-content:center;

    align-items:center;

}

.support-buttons a{

    min-width:220px;

    text-decoration:none;

    padding:16px 30px;

    border-radius:50px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:var(--transition);

}

.btn-outline{

    background:transparent;

    color:#fff;

    border:2px solid var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#111;

}

.support-buttons .btn-primary{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-light));

    color:#111;

}

.support-buttons .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(212,175,55,.30);

}

/*==================================================
LUXURY GLOW EFFECTS
==================================================*/

.booking-form-card:hover,
.sidebar-card:hover,
.review-card:hover,
.help-card:hover,
.booking-summary:hover,
.faq-card:hover{

    box-shadow:
    0 0 0 1px rgba(212,175,55,.18),
    0 25px 60px rgba(0,0,0,.35),
    0 0 30px rgba(212,175,55,.08);

}

/*==================================================
RESPONSIVE DESIGN
==================================================*/

/* =========================
Tablet (768px and above)
========================= */

@media (min-width:768px){

    .form-row{

        grid-template-columns:1fr 1fr;

    }

    .faq-grid{

        grid-template-columns:1fr 1fr;

    }

    .support-buttons{

        flex-direction:row;

    }

}

/* =========================
Desktop (992px and above)
========================= */

@media (min-width:992px){

    .booking-grid{

        grid-template-columns:380px 1fr;

        align-items:start;

    }

    .booking-sidebar{

        position:sticky;

        top:120px;

    }

    .booking-form-card{

        padding:50px;

    }

    .appointment-hero{

        padding:170px 0 120px;

    }

    .appointment-hero h1{

        font-size:3.4rem;

    }

    .appointment-hero p{

        font-size:18px;

    }

}

/* =========================
Large Desktop
========================= */

@media (min-width:1200px){

    .appointment-hero h1{

        font-size:4rem;

    }

    .booking-form-card{

        padding:60px;

    }

}

/* =========================
Mobile
========================= */

@media (max-width:767px){

    .appointment-hero{

        padding:120px 20px 70px;

    }

    .appointment-hero h1{

        font-size:2rem;

    }

    .appointment-hero p{

        font-size:15px;

        line-height:1.8;

    }

    .booking-wrapper{

        padding:70px 0;

    }

    .sidebar-card,
    .review-card,
    .help-card,
    .booking-form-card,
    .booking-summary,
    .faq-card,
    .support-box{

        padding:25px;

    }

    .booking-progress{

        margin-bottom:35px;

    }

    .step span{

        font-size:12px;

    }

    .step .circle{

        width:36px;

        height:36px;

        font-size:14px;

    }

    .wizard-buttons{

        flex-direction:column;

    }

    .prev-btn,
    .next-btn,
    .submit-btn{

        width:100%;

    }

    .summary-table td{

        display:block;

        width:100%;

        text-align:left !important;

        padding:8px 0;

    }

    .summary-table tr{

        display:block;

        margin-bottom:18px;

        border-bottom:1px solid rgba(255,255,255,.08);

        padding-bottom:10px;

    }

    .payment-card{

        flex-direction:column;

        gap:12px;

    }

    .booking-note{

        flex-direction:column;

        text-align:center;

    }

    .booking-note-icon{

        margin:auto;

    }

    .help-buttons{

        flex-direction:column;

    }

    .support-box h2{

        font-size:2rem;

    }

}

/* =========================
Small Mobile
========================= */

@media (max-width:480px){

    .appointment-hero h1{

        font-size:1.8rem;

    }

    .booking-header h2{

        font-size:1.6rem;

    }

    .form-step h3{

        font-size:1.4rem;

    }

    .support-box h2{

        font-size:1.7rem;

    }

    .sidebar-card h2{

        font-size:1.6rem;

    }

    .page-tag{

        font-size:12px;

        padding:8px 16px;

    }

}

/*==================================================
SMOOTH ANIMATIONS
==================================================*/

html{

    scroll-behavior:smooth;

}

.booking-form-card,
.sidebar-card,
.review-card,
.help-card,
.faq-card,
.payment-card,
.trust-item{

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}

/*==================================================
CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08111F;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    180deg,
    var(--primary),
    var(--primary-light));

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/*==================================================
INPUT AUTOFILL FIX
==================================================*/

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #111827 inset !important;

    -webkit-text-fill-color:#ffffff !important;

    transition:background-color 5000s ease-in-out 0s;

}

/*==================================================
FOCUS ACCESSIBILITY
==================================================*/

button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus{

    outline:2px solid rgba(212,175,55,.45);

    outline-offset:3px;

}

/*==================================================
UTILITY CLASSES
==================================================*/

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.gold-text{

    color:var(--primary);

}

.hidden{

    display:none !important;

}

/*==================================================
END OF APPOINTMENT CSS
==================================================*/