/* =========================================================
   Main container
   ========================================================= */

.branch-dialog-content {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
}


.modern-branch-dialog .ui-dialog-content {
    padding: 0 !important;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}


/* =========================================================
   Modern Branch Dialog
   ========================================================= */

.modern-branch-dialog {
    width: min(92vw, 500px) !important;
    max-width: 500px !important;
}

/* =========================================================
   Header
   ========================================================= */

.branch-dialog-header {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 22px 24px;

    background: linear-gradient(
        135deg,
        #f5f8ff 0%,
        #ffffff 100%
    );

    border-bottom: 1px solid #e8ecf3;
}

.branch-dialog-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #eef3ff;

    color: #1d4ed8;

    font-size: 12px;
}

.branch-dialog-header-text {
    min-width: 0;
}

.branch-dialog-header h2 {
    margin: 0;

    font-size: clamp(12px, 2vw, 14px);

    font-weight: 700;

    line-height: 1.3;

    color: #172033;
}

.branch-dialog-header p {
    margin: 5px 0 0;

    font-size: clamp(12px, 1.5vw, 14px);

    line-height: 1.5;

    color: #687386;
}

/* =========================================================
   Body
   ========================================================= */

.branch-dialog-body {
    padding: 24px;
}

.branch-label {
    display: block;

    margin-bottom: 9px;

    font-size: clamp(11px, 1.5vw, 12px);

    font-weight: 600;

    line-height: 1.5;

    color: #344054;
}


/* =========================================================
   Dropdown
   ========================================================= */

.branch-select {
    width: 100% !important;
}




.branch-select .ui-selectonemenu-label {
    height: 36px !important;

    line-height: 36px  !important;;
    
    box-sizing: border-box;

    display: flex !important;
    align-items: center;

    padding: 5px 5px !important;
  
    border: 1px solid #d0d5dd;

    border-radius: 10px;

    background: #ffffff;

    color: #344054;

    font-size: 12px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.branch-select:hover .ui-selectonemenu-label {
    border-color: #98a2b3;
}

.branch-select.ui-state-focus .ui-selectonemenu-label {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* Dropdown button */

.branch-select .ui-selectonemenu-trigger {
    width: 42px;

    border: none;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   Footer
   ========================================================= */

.branch-dialog-footer {
    padding: 0 24px 24px;
}


/* =========================================================
   Continue button
   ========================================================= */

.branch-continue-btn {
    width: 100% !important;

    height: 46px;

    border: none !important;

    border-radius: 10px !important;

    background: #1d4ed8 !important;

    background-image: none !important;

    color: #ffffff !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.branch-continue-btn:hover {
    background: #1e40af !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(29, 78, 216, 0.25);
}

.branch-continue-btn:active {
    transform: translateY(0);
}


/* =========================================================
   Error message
   ========================================================= */

.branch-error-message {
    display: block;

    margin-top: 12px;

    padding: 9px 12px;

    border-radius: 8px;

    background: #fef2f2;

    color: #dc2626 !important;

    font-size: 12px;

    line-height: 1.4;
}


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

@media (max-width: 600px) {

    .modern-branch-dialog {
        width: 94vw !important;
        max-width: 94vw !important;
    }

    .modern-branch-dialog .ui-dialog-content {
        max-height: 90vh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
    }

    .branch-dialog-header {
        padding: 18px;

        gap: 12px;
    }

    .branch-dialog-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;

        border-radius: 11px;

        font-size: 14px;
    }

    .branch-dialog-body {
        padding: 20px 18px;
    }

    .branch-dialog-footer {
        padding: 0 18px 20px;
    }

    .branch-select .ui-selectonemenu-label {
        height: 24px;

        font-size: 12px;
    }

    .branch-continue-btn {
        height: 44px;
    }
}


/* =========================================================
   Small mobile
   ========================================================= */

@media (max-width: 360px) {

    .modern-branch-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
    }

    .branch-dialog-header {
        padding: 16px;
    }

    .branch-dialog-body {
        padding: 16px;
    }

    .branch-dialog-footer {
        padding: 0 16px 16px;
    }

    .branch-dialog-header h2 {
        font-size: 12px;
    }

    .branch-dialog-header p {
        font-size: 11px;
    }
}


/* Main calendar + time slot layout */
.appointment-selection {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 25px;
    width: 100%;
    margin-top: 20px;
}


/* Calendar */
.calendar-container {
    flex: 1;
    min-width: 0;
}


/* Time slot area */
.time-slot-container {
    width: 180px;
    flex-shrink: 0;
    padding-top: 10px;
}


.time-slot-title {
    display: block;
    margin-bottom: 12px;

    font-size: clamp(12px, 1.5vw, 14px);
    font-weight: 600;
    color: #344054;
}


/* Buttons vertically */
.time-slot-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    font-size: 11px;
}


/* Individual button */
.time-slot-btn {
    width: 100% !important;
    min-height: 48px;

    border: 1px solid #d0d5dd !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #344054 !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/* Hover */
.time-slot-btn:hover {
    background: #f5f8ff !important;
    border-color: #2563eb !important;
    transform: translateY(-1px);
}


/* Selected */
.time-slot-btn.selected {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}


.time-slot-btn.selected:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}


.three-button-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 500px;
}


.one-button-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 500px;
    margin-top: 3px;
}


.slot-button {
    width: 100%;
    min-height: 45px;
    padding: 10px 15px;

    border: 1px solid #d0d5dd;
    border-radius: 10px;

    background: #ffffff;
    color: #344054;

    font-size: clamp(11px, 1.5vw, 12px);
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
    
    justify-content: flex-start !important;
}

.slot-button:hover {
    border-color: #2563eb;
    background: #f5f8ff;
}

.slot-button:active {
    transform: scale(0.98);
}

@media (max-width: 600px) {

    .three-button-container {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
    }

    .slot-button {
        min-height: 44px;
    }
}


.appointment-grid {
    width: 100%;
}

.appointment-grid > tbody > tr > td {
    vertical-align: top;
    padding: 10px;
}

@media (max-width: 700px) {

    .appointment-grid,
    .appointment-grid > tbody,
    .appointment-grid > tbody > tr,
    .appointment-grid > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .appointment-grid > tbody > tr > td {
        padding: 5px 0;
    }
}



.three-button-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 500px;
}

.slot-button {
    width: 100%;
    min-height: 45px;
    padding: 10px 15px;
     margin: 2px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;

    background: #ffffff;
    color: #344054;

    font-size: clamp(11px, 1.5vw, 12px);
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}

.slot-button:hover {
    border-color: #2563eb;
    background: #f5f8ff;
}

.slot-button:active {
    transform: scale(0.98);
}

.time-slot-title {
    font-size: clamp(11px, 2vw, 12px);
    font-weight: bold;
    margin: 2px;
}