/* ======================================
   SUNNY DENTAL CLINIC
   HMO APPOINTMENT SYSTEM
====================================== */

body{
    font-family:'Poppins',sans-serif;
    background:#f4f8fb;
    font-size:14px;
    color:#444;
}
/* Headings */

h2{
    font-size:26px;
    font-weight:700;
}

h3{
    font-size:22px;
    font-weight:600;
}

h4{
    font-size:18px;
    font-weight:600;
}

h5{
    font-size:16px;
    font-weight:600;
}

p{
    font-size:14px;
}

label{
    font-size:14px;
    font-weight:500;
}

/* Navbar */

.navbar{
    background:#fff !important;
}

/* Cards */

.card{
    border:none;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
}

/* Titles */

h2,h3,h4{
    font-weight:700;
}

/* Progress */

.progress{
    height:8px;
    border-radius:30px;
}

.progress-bar{
    transition:.4s;
}

/* Form */

.form-control,
.form-select{

    border-radius:12px;

    min-height:44px;

    border:1px solid #d7d7d7;

    font-size:14px;

    padding:10px 14px;

}

.form-control:focus,
.form-select:focus{

    border-color:#198754;

    box-shadow:0 0 0 .2rem rgba(25,135,84,.15);

}

/* Buttons */

.btn{

    border-radius:12px;

    padding:12px 28px;

    transition:.25s;

    font-weight:600;

}

.btn-success:hover{

    transform:translateY(-2px);

}

/* Upload */

input[type=file]{

    padding:12px;

}

/* HMO Image */

#hmoImage{

    width:100%;

    max-width:650px;

    max-height:500px;

    object-fit:contain;

    display:block;

    margin:auto;

}

/* Alerts */

.alert{

    border:none;

    border-radius:15px;

}

/* Review Table */

.table{

    border-radius:15px;

    overflow:hidden;

}

.table th{

    width:35%;

    background:#f8f9fa;

}

/* Animation */

.card{

    animation:fade .35s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:none;

}

}

/* Mobile */

@media(max-width:768px){

.card-body{

padding:25px;

}

.btn{

width:100%;

margin-top:10px;

}

}

.upload-box{

display:block;

text-align:center;

border:2px dashed #198754;

border-radius:18px;

padding:35px;

cursor:pointer;

transition:.3s;

background:white;

}

.upload-box:hover{

background:#f8fff9;

}

.booking-container{
    max-width:850px;
}


/* CUSTOM CALENDAR */

.custom-calendar {
    background: #ffffff;
    border: 1px solid #e6e9ec;
    border-radius: 18px;
    padding: 20px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.calendar-nav {
    border: none;
    background: #eaf7f0;
    color: #198754;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
}

.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-weekdays {
    margin-bottom: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
}

.calendar-day {
    min-height: 55px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    transition: 0.2s;
}

.calendar-day.available {
    background: #e8f7ef;
    color: #198754;
}

.calendar-day.waiting {
    background: #fff4cc;
    color: #8a6d00;
}

.calendar-day.full {
    background: #fde8e8;
    color: #b02a37;
    cursor: not-allowed;
}

.calendar-day.unavailable {
    background: #eceff1;
    color: #8a939a;
    cursor: not-allowed;
}

.calendar-day.selected {
    background: #198754 !important;
    color: #ffffff !important;
    border: 2px solid #146c43;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transform: scale(1.06);
}

.calendar-day.waiting.selected {
    background: #f6cc52 !important;
    color: #5f4b00 !important;
    border: 3px solid #d6a900;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transform: scale(1.06);
}

.calendar-day.empty {
    background: transparent;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
}

.calendar-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.available {
    background: #8ed5ad;
}

.legend-dot.waiting {
    background: #f6cc52;
}

.legend-dot.full {
    background: #e88989;
}

.legend-dot.unavailable {
    background: #adb5bd;
}


/* MOBILE */

@media (max-width: 576px) {

    .custom-calendar {
        padding: 12px;
    }

    .calendar-weekdays,
    .calendar-days {
        gap: 4px;
    }

    .calendar-day {
        min-height: 42px;
        font-size: 12px;
        padding: 4px;
    }

    .calendar-weekdays {
        font-size: 11px;
    }

    .calendar-legend {
        font-size: 11px;
        gap: 10px;
    }

}

.selected-date-box {
    background: #e8f7ef;
    border: 1px solid #b8dfc8;
    border-left: 5px solid #198754;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.selected-date-label {
    font-size: 12px;
    color: #6c757d;
}

.waiting-date-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e4c85c;
    color: #6b5700;
}

.waiting-date-note strong {
    display: block;
    margin-bottom: 4px;
    color: #8a6d00;
}

.waiting-date-note p {
    font-size: 13px;
    line-height: 1.5;
}

.review-waiting-note {
    background: #fff4cc;
    border-left: 4px solid #f6cc52;
    border-radius: 8px;
    padding: 12px 14px;
    color: #6b5700;
}

.review-waiting-note strong {
    display: block;
    margin-bottom: 4px;
    color: #8a6d00;
}


/* REVIEW PAGE - MOBILE */

@media (max-width: 576px) {

    .table {
        width: 100%;
        table-layout: fixed;
        font-size: 13px;
    }

    .table th {
        width: 38% !important;
        white-space: normal;
        word-break: break-word;
        padding: 8px;
    }

    .table td {
        width: 62%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        padding: 8px;
    }

}


/* =========================
   MULTIPLE PATIENT FORM
========================= */

.patient-form-card {
    border: 1px solid #e2e6e4;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}

.patient-form-card + .patient-form-card {
    margin-top: 20px;
}

.patient-identity-header {
    border-bottom: 1px solid #e5e7e9;
    padding-bottom: 12px;
}

/* =========================
   REVIEW PAGE
========================= */

.review-section,
.review-patient-card {
    border: 1px solid #e2e6e4;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.review-section > h5 {
    padding: 16px 18px 0;
}

.review-patient-header {
    padding: 16px 18px;
    background: #f8faf9;
    border-bottom: 1px solid #e2e6e4;
}

.review-section table,
.review-patient-card table {
    margin-bottom: 0;
}

.review-section th,
.review-patient-card th {
    background: #fafafa;
    font-weight: 600;
}

.review-section td,
.review-patient-card td {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* MOBILE */

@media (max-width: 576px) {

    .review-section table,
    .review-patient-card table {
        table-layout: fixed;
        width: 100%;
    }

    .review-section th,
    .review-patient-card th {
        width: 40% !important;
        font-size: 12px;
    }

    .review-section td,
    .review-patient-card td {
        font-size: 12px;
    }

}

.more-than-five-note {
    font-size: 13px;
    line-height: 1.5;
}

/* =========================
   ALTERNATIVE APPOINTMENT
========================= */

.alternative-date-section {
    padding: 16px;
    border: 1px solid #e2e6e4;
    border-radius: 10px;
    background: #fafbfa;
}

.alternative-date-section .form-text {
    font-size: 12px;
    line-height: 1.5;
}

/* =========================
   OUTSIDE BOOKING WINDOW
========================= */

.calendar-day.outside-window {
    background: #ffffff;
    color: #c5c5c5;
    border-color: #eeeeee;
    cursor: not-allowed;
}

.calendar-day.outside-window:hover {
    background: #ffffff;
    transform: none;
}

.calendar-day.outside-window:disabled {
    opacity: 1;
}

.legend-dot.outside-window {
    background: #ffffff;
    border: 1px solid #d9d9d9;
}

/* =========================
   MOBILE BUTTON SPACING
========================= */

@media (max-width: 768px) {

    .d-flex.flex-column-reverse.flex-md-row.justify-content-between {
        gap: 8px !important;
    }

    .d-flex.flex-column-reverse.flex-md-row.justify-content-between .btn {
        margin-top: 0;
    }

}