/* Auto-generated from the original style.css during code reorganization.
   Grouped by component so each concern can be found and debugged independently. */

/* Appointment CTA banner + booking form */
/* ==========================================================
APPOINTMENT CTA
========================================================== */

.appointment-cta{

padding:140px 0;

background:linear-gradient(135deg,#0B7285,#12BFC2);

}

.cta-wrapper{

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

align-items:center;

}

/* ==========================================================
   CTA CONTENT
========================================================== */

.cta-left{

    position:relative;

    z-index:2;

}

.cta-left h2{

    font-size:58px;

    line-height:1.12;

    font-weight:800;

    color:#fff;

    margin:24px 0;

    letter-spacing:-1px;

    text-shadow:

        0 8px 24px rgba(0,0,0,.18);

}

.cta-left p{

    max-width:640px;

    font-size:19px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    margin-bottom:40px;

}

/* ==========================================================
   TRUST ROW
========================================================== */

.trust-row{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:42px;

}

.trust-row span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

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

    color:#fff;

    font-size:14px;

    font-weight:600;

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.trust-row span:hover{

    transform:translateY(-4px);

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

    box-shadow:

        0 12px 28px rgba(0,0,0,.15);

}

/* ==========================================================
   CALL BUTTON
========================================================== */

.secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 42px;

    border-radius:999px;

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

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:17px;

    font-weight:700;

    text-decoration:none;

    transition:

        transform .35s ease,

        background .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.secondary:hover{

    transform:

        translateY(-4px);

    background:#fff;

    border-color:#fff;

    color:var(--primary);

    box-shadow:

        0 18px 40px rgba(255,255,255,.28);

}

/* ==========================================================
   CONTACT CARD
========================================================== */

.contact-card{

    position:relative;

    overflow:hidden;

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

    border-radius:30px;

    padding:42px;

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

    box-shadow:

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

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

/* ==========================================
   CONTACT CARD SHINE
========================================== */

.contact-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:70%;

    height:100%;

    pointer-events:none;

    background:

        linear-gradient(

            110deg,

            transparent 0%,

            rgba(255,255,255,.10) 35%,

            rgba(255,255,255,.45) 50%,

            rgba(255,255,255,.10) 65%,

            transparent 100%

        );

    transform:skewX(-25deg);

    transition:left .9s ease;

}

.contact-card:hover::after{

    left:170%;

}

.contact-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:

        linear-gradient(

            90deg,

            var(--secondary),

            var(--primary)

        );

}

.contact-card:hover{

    transform:

        translateY(-10px)

        scale(1.015);

    box-shadow:

        0 40px 100px rgba(0,0,0,.22),

        0 15px 40px rgba(0,168,150,.12);

}

/* ==========================================================
   TITLE
========================================================== */

.contact-card h3{

    font-size:30px;

    font-weight:700;

    color:var(--dark);

    margin-bottom:30px;

}

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

.contact-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.contact-card li{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 0;

    font-size:16px;

    line-height:1.7;

    color:var(--text);

    border-bottom:1px solid rgba(10,105,120,.08);

    transition:

        transform .30s ease,

        color .30s ease;

}

.contact-card li:last-child{

    border:none;

}

.contact-card li:hover{

    transform:translateX(6px);

    color:var(--primary);

}

/* ==========================================================
   ICONS
========================================================== */

.contact-card li::before{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--primary)

        );

    color:#fff;

    font-size:18px;

    box-shadow:

        0 10px 24px rgba(0,168,150,.22);

}

/* Individual Icons */

.contact-card li:nth-child(1)::before{

    content:"📍";

}

.contact-card li:nth-child(2)::before{

    content:"📞";

}

.contact-card li:nth-child(3)::before{

    content:"🕒";

}

.contact-card li:nth-child(4)::before{

    content:"🚑";

}

/* Hide original emoji */

.contact-card li{

    position:relative;

}

.contact-card li{

    text-indent:0;

}


/* ==========================================================
   APPOINTMENT BOOKING
========================================================== */

.appointment{
    position:relative;
    padding:100px 0;
    background:linear-gradient(135deg,#f7fbff 0%,#edf7ff 100%);
    overflow:hidden;
}

.appointment::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(42,157,143,.08);
    top:-180px;
    right:-150px;
    filter:blur(10px);
}

.appointment::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(32,108,184,.06);
    bottom:-150px;
    left:-120px;
    filter:blur(10px);
}

.appointment .container{
    position:relative;
    z-index:2;
}

.appointment-wrapper{
    margin-top:50px;
}

/* ==========================================================
   APPOINTMENT FORM
========================================================== */

.appointment-form{

    position:relative;

    overflow:hidden;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:30px;

    padding:55px;

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

    box-shadow:

        0 25px 70px rgba(0,0,0,.08);

}

.appointment-form::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:

        linear-gradient(

            90deg,

            var(--secondary),

            var(--primary)

        );

}

/* ==========================================================
   GRID
========================================================== */

.form-grid{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(0,1fr));

    gap:26px;

}

/* ==========================================================
   LABELS
========================================================== */

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:24px;

}

.form-group label{

    margin-bottom:10px;

    font-size:15px;

    font-weight:700;

    color:var(--dark);

    letter-spacing:.2px;

}

/* ==========================================================
   INPUTS
========================================================== */

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

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    border:1px solid rgba(10,105,120,.12);

    background:#fff;

    font-size:15px;

    color:var(--text);

    transition:

        border-color .35s ease,

        box-shadow .35s ease,

        transform .35s ease;

    outline:none;

}

.form-group textarea{

    resize:vertical;

    min-height:160px;

}

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

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

    border-color:var(--secondary);

    box-shadow:

        0 0 0 5px rgba(0,168,150,.12);

    transform:translateY(-2px);

}

/* ==========================================================
   PLACEHOLDERS
========================================================== */

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

    color:#9AA8B3;

}

/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.appointment-form .btn-primary{

    margin-top:10px;

    min-width:260px;

    padding:18px 42px;

    border:none;

    border-radius:999px;

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--primary)

        );

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        filter .35s ease;

    box-shadow:

        0 18px 40px rgba(0,168,150,.28);

}

.appointment-form .btn-primary:hover{

    transform:

        translateY(-4px);

    filter:brightness(1.05);

    box-shadow:

        0 25px 55px rgba(0,168,150,.35);

}

@media(max-width:991px){

    .appointment-form{

        padding:35px;

    }

}

@media(max-width:768px){

    .form-grid{

        grid-template-columns:1fr;

    }

    .appointment-form{

        padding:30px 25px;

    }

    .appointment-form .btn-primary{

        width:100%;

    }

}

/* ==========================================================
   FORM VALIDATION
========================================================== */

.error-message{

    display:block;

    min-height:20px;

    margin-top:8px;

    color:#dc2626;

    font-size:.85rem;

    font-weight:500;

}

.input-error{

    border-color:#dc2626 !important;

    box-shadow:0 0 0 4px rgba(220,38,38,.12) !important;

}

.input-success{

    border-color:#16a34a !important;

    box-shadow:0 0 0 4px rgba(22,163,74,.12) !important;

}

/* ==========================================================
   APPOINTMENT FINAL POLISH
========================================================== */

/* Smooth transitions */

.form-group input,
.form-group select,
.form-group textarea,
.appointment-form .btn-primary{

    transition:

        all .35s ease;

}

/* Disabled button */

.appointment-form .btn-primary:disabled{

    opacity:.65;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/* Appointment message */

.appointment-message{

    margin-top:10px;

    font-size:14px;

    font-weight:600;

    color:var(--primary);

    min-height:20px;

}

/* Error messages */

.error-message{

    margin-top:8px;

    font-size:13px;

    font-weight:500;

    color:#DC2626;

    min-height:18px;

}

/* Success */

.input-success{

    border-color:#16A34A !important;

    box-shadow:

        0 0 0 5px rgba(22,163,74,.12) !important;

}

/* Error */

.input-error{

    border-color:#DC2626 !important;

    box-shadow:

        0 0 0 5px rgba(220,38,38,.12) !important;

}

/* Select */

.form-group select{

    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' viewBox='0 0 24 24' fill='none' stroke='%230A6978' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:18px;

    padding-right:50px;

}

/* Date */

input[type="date"]{

    cursor:pointer;

}

/* Time */

#appointmentTime{

    cursor:pointer;

}

/* Autofill */

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

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset;

    -webkit-text-fill-color:#333;

}

/* Button active */

.appointment-form .btn-primary:active{

    transform:scale(.98);

}

/* Better textarea */

textarea{

    line-height:1.8;

}

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

@media (max-width:992px){

    .appointment{

        padding:90px 0;

    }

    .cta-wrapper{

        grid-template-columns:1fr;

        gap:40px;

        padding:45px;

    }

    .cta-left{

        text-align:center;

    }

    .trust-row{

        justify-content:center;

    }

    .cta-left p{

        margin-left:auto;

        margin-right:auto;

    }

}

@media (max-width:768px){

    .appointment-form{

        padding:35px 28px;

    }

    .cta-wrapper{

        padding:35px;

    }

    .cta-left h2{

        font-size:40px;

    }

    .trust-row{

        gap:12px;

    }

    .trust-row span{

        font-size:13px;

    }

    .appointment-form .btn-primary{

        width:100%;

        min-width:100%;

    }

}

@media (max-width:480px){

    .appointment{

        padding:80px 0;

    }

    .cta-wrapper{

        padding:28px;

        border-radius:24px;

    }

    .appointment-form{

        padding:24px;

        border-radius:24px;

    }

    .cta-left h2{

        font-size:32px;

    }

    .cta-left p{

        font-size:16px;

    }

    .trust-row{

        flex-direction:column;

        align-items:stretch;

    }

    .trust-row span{

        justify-content:center;

    }

}

/* ==========================================================
   CONTACT CARD SHINE
========================================================== */

.contact-card{

    position:relative;

    overflow:hidden;

}

.contact-card .card-shine{

    position:absolute;

    top:0;

    left:-140%;

    width:70%;

    height:100%;

    pointer-events:none;

    z-index:1;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:skewX(-25deg);

    transition:left .9s ease;

}

.contact-card:hover .card-shine{

    left:170%;

}

.contact-card > *:not(.card-shine){

    position:relative;

    z-index:3;

}