:root{
    --primary:#114784;

    /* Page background */
    --bg:wheat;

    /* Cards / surfaces */
    --card:#ffffff;

    /* Text */
    --text:#101828;
    --muted:rgba(16,24,40,0.65);

    /* Lines / borders */
    --line:rgba(16,24,40,0.10);

    /* Shadow / radius */
    --shadow:0 10px 30px rgba(16,24,40,0.08);
    --radius:18px;

    /* ===== Booking dialog "cream" theme ===== */
    --dlgHeaderTop:#ead6b7;
    --dlgHeaderBottom:#e1caa4;
    --dlgBodyTop:#fbf7f1;
    --dlgBodyBottom:#f4ede3;
    --dlgFooter:#f7f0e6;
    --dlgBorder:rgba(90,70,50,0.18);
    --dlgSep:rgba(90,70,50,0.12);
    --dlgText:#4f3b28;
    --dlgText2:#5a4632;

    --chipBg:rgba(255,255,255,0.65);
    --chipBorder:rgba(90,70,50,0.18);
    --chipActive:#caa46b;
    --chipActiveBorder:#b58d51;
}

/* =========================================
   BASE
   ========================================= */
*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color:var(--text);
    background:var(--bg);
}

a{
    color:inherit;
    text-decoration:none;
}

.container{
    max-width:1100px;
    margin:0 auto;
    padding:18px;
}

/* =========================================
   TOPBAR / NAV
   ========================================= */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0 18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:.4px;
}

.logo{
    width:40px;
    height:40px;
    border-radius:12px;
    background:linear-gradient(180deg, rgba(17,71,132,0.25), rgba(17,71,132,0.06));
    border:1px solid rgba(17,71,132,0.18);
    display:grid;
    place-items:center;
    font-weight:900;
    color:var(--primary);
}

.nav{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn{
    height:40px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:var(--card);
    box-shadow:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:650;
    cursor:pointer;
}

.btn.primary{
    background:var(--primary);
    border-color:rgba(17,71,132,0.4);
    color:#fff;
}

.btn.ghost{
    background:transparent;
}

/* =========================================
   HERO
   ========================================= */
.hero{
    background:linear-gradient(180deg, rgba(17,71,132,0.12), rgba(17,71,132,0.03));
    border:1px solid rgba(17,71,132,0.14);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:22px;
    margin-bottom:18px;
}

.hero h1{
    margin:0 0 6px 0;
    color:var(--primary);
    font-size:28px;
    line-height:1.2;
}

.hero p{
    margin:0 0 16px 0;
    color:var(--muted);
    max-width:720px;
}

/* =========================================
   GRID / CARDS
   ========================================= */
.grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:14px;
}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:16px;
}

.card h2{
    margin:0 0 10px;
    font-size:18px;
}

/* =========================================
   FORMS
   ========================================= */
label{
    font-size:13px;
    color:var(--muted);
    font-weight:650;
    display:block;
    margin-bottom:6px;
}

input, select, textarea{
    height:42px;
    border-radius:12px;
    border:1px solid var(--line);
    padding:0 12px;
    outline:none;
    background:#fff;
    font-size:14px;
    width:100%;
}

/* =========================================
   BOOKING GRID (your custom layout)
   ========================================= */
.booking-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:12px;
    margin-top:8px;
}

.col-12{
    grid-column:span 12;
}
.col-6{
    grid-column:span 6;
}
.col-4{
    grid-column:span 4;
}

.left{
    grid-column:span 7;
}
.right{
    grid-column:span 5;
}

.pillrow{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}

.pill{
    font-size:13px;
    border:1px solid var(--line);
    background:rgba(16,24,40,0.02);
    border-radius:999px;
    padding:6px 10px;
    color:rgba(16,24,40,0.75);
}

.muted{
    color:var(--muted);
    opacity:.75;
    font-size:13px;
}

/* =========================================
   ANNOUNCEMENTS / BADGES
   ========================================= */
.ann{
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    background:#fff;
    margin-bottom:10px;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:750;
    border:1px solid var(--line);
    background:rgba(16,24,40,0.02);
    margin-right:8px;
}

.badge.new{
    border-color:rgba(34,197,94,0.35);
    background:rgba(34,197,94,0.10);
}

.badge.important{
    border-color:rgba(245,158,11,0.35);
    background:rgba(245,158,11,0.10);
}

/* =========================================
   LOGIN
   ========================================= */
.loginBox{
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px;
    background:#fff;
    margin-bottom:12px;
}

.loginRow{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:8px;
}

.loginMeta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:6px;
    font-size:13px;
    color:var(--muted);
}

.checkboxLine{
    display:flex;
    align-items:center;
    gap:8px;
}

.tinyLink{
    text-decoration:underline;
    color:rgba(17,71,132,0.95);
}

.services .svc{
    grid-column:span 4;
}

/* =========================================
   FOOTER
   ========================================= */
footer{
    margin-top:18px;
    padding:16px 0 30px;
    color:var(--muted);
    font-size:13px;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 900px){
    .left, .right{
        grid-column:span 12;
    }
    .col-4, .col-6{
        grid-column:span 12;
    }
    .services .svc{
        grid-column:span 12;
    }
}

/* =========================================================
   PrimeFaces (SAGA) - Booking Dialog Cream Theme
   Applies ONLY to dialogs with styleClass="wheatDlg"
   ========================================================= */

/* overlay behind dialog */
.ui-widget-overlay{
    background: rgba(60,45,30,0.35) !important;
}

/* keep rounded edges globally */
.ui-dialog{
    border-radius: 18px;
    overflow: hidden;
}

/* titlebar rounding (global) */
.ui-dialog .ui-dialog-titlebar{
    border-radius: 16px 16px 0 0;
}

/* Do NOT make every dialog transparent; only non-wheat dialogs */
.ui-dialog:not(.wheatDlg) .ui-dialog-content{
    background: transparent;
}

/* dialog container */
.ui-dialog.wheatDlg{
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--dlgBorder) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.25) !important;
}

/* title bar */
.ui-dialog.wheatDlg .ui-dialog-titlebar{
    background: linear-gradient(180deg, var(--dlgHeaderTop) 0%, var(--dlgHeaderBottom) 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
}

/* title */
.ui-dialog.wheatDlg .ui-dialog-title{
    color: var(--dlgText) !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
}

/* close icon */
.ui-dialog.wheatDlg .ui-dialog-titlebar .ui-dialog-titlebar-icon{
    border-radius: 10px !important;
    transition: background .15s ease;
}
.ui-dialog.wheatDlg .ui-dialog-titlebar .ui-dialog-titlebar-icon:hover{
    background: rgba(255,255,255,0.55) !important;
}

/* body background */
.ui-dialog.wheatDlg .ui-dialog-content{
    background: linear-gradient(180deg, var(--dlgBodyTop) 0%, var(--dlgBodyBottom) 100%) !important;
    padding: 16px 18px 12px 18px !important;
}

/* footer (covers Saga button pane too) */
.ui-dialog.wheatDlg .ui-dialog-footer,
.ui-dialog.wheatDlg .ui-dialog-buttonpane{
    background: var(--dlgFooter) !important;
    border-top: 1px solid var(--dlgSep) !important;
    padding: 12px 16px !important;
}

/* remove Saga panel/panelGrid backgrounds inside dialog */
.ui-dialog.wheatDlg .ui-panel,
.ui-dialog.wheatDlg .ui-panel-content,
.ui-dialog.wheatDlg .ui-panelgrid,
.ui-dialog.wheatDlg .ui-panelgrid-content{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* inputs inside dialog */
.ui-dialog.wheatDlg .ui-inputfield,
.ui-dialog.wheatDlg .ui-selectonemenu,
.ui-dialog.wheatDlg .ui-selectonemenu .ui-selectonemenu-label,
.ui-dialog.wheatDlg .ui-selectonemenu .ui-selectonemenu-trigger,
.ui-dialog.wheatDlg .ui-calendar input,
.ui-dialog.wheatDlg input,
.ui-dialog.wheatDlg select,
.ui-dialog.wheatDlg textarea{
    background: rgba(255,255,255,0.65) !important;
    border: 1px solid var(--chipBorder) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

/* the dropdown trigger separator */
.ui-dialog.wheatDlg .ui-selectonemenu .ui-selectonemenu-trigger{
    border-left: 1px solid var(--dlgSep) !important;
}

/* optional separators if you add <hr class="wheatSep" /> */
.wheatSep{
    border: 0;
    height: 1px;
    background: rgba(90,70,50,0.14);
    margin: 12px 0;
}

/* disclaimer banners */
.wheatNotice{
    background: rgba(245, 222, 179, 0.35);
    border: 1px solid rgba(16,24,40,0.12);
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
}

/* top banner */
.bookingNoticeTop{
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(90,70,50,0.16);
    border-left: 6px solid var(--chipActive);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--dlgText2);
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 12px;
}

/* slot buttons as chips */
.ui-dialog.wheatDlg .slotButtons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* if you use <p:selectOneButton>, neutralize the container */
.ui-dialog.wheatDlg .slotButtons .ui-selectonebutton{
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* neutral chip */
.ui-dialog.wheatDlg .slotButtons .ui-button{
    background: var(--chipBg) !important;
    border: 1px solid var(--chipBorder) !important;
    color: var(--dlgText) !important;
    padding: 8px 14px !important;
    min-width: 86px;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    margin: 0 !important;
}

/* active chip */
.ui-dialog.wheatDlg .slotButtons .ui-button.ui-state-active,
.ui-dialog.wheatDlg .slotButtons .ui-state-active{
    background: var(--chipActive) !important;
    border-color: var(--chipActiveBorder) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(181,141,81,0.35) !important;
}

/* =========================================================
   ✅ FIX: PrimeFaces DatePicker (Input + Icon horizontal)
   Applies inside the wheat booking dialog
   ========================================================= */

/* PrimeFaces DatePicker wrapper must be flex so icon doesn't drop */
.ui-dialog.wheatDlg .p-datepicker{
    display:flex !important;
    align-items:stretch !important;
    width:100% !important;
}

/* input takes remaining width */
.ui-dialog.wheatDlg .p-datepicker input.p-inputtext{
    flex:1 1 auto !important;
    width:100% !important;
}

/* the calendar button stays on the right */
.ui-dialog.wheatDlg .p-datepicker .p-datepicker-trigger{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-left:6px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:10px !important;
    border:1px solid var(--chipBorder) !important;
    background: rgba(255,255,255,0.65) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

/* if Saga adds wrapper span around input/button, force it to behave */
.ui-dialog.wheatDlg .p-datepicker .p-inputwrapper,
.ui-dialog.wheatDlg .p-datepicker .p-inputgroup,
.ui-dialog.wheatDlg .p-datepicker .p-inputgroup-addon{
    display:flex !important;
    align-items:center !important;
}

/* remove weird block behaviors that cause vertical stacking */
.ui-dialog.wheatDlg .p-datepicker,
.ui-dialog.wheatDlg .p-datepicker *{
    vertical-align:middle;
}
/* =========================================================
   ELAMA PORTAL – BOOKING TIME SLOT BUTTONS
   ========================================================= */

.slotButtonsWrap{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;              /* space between slots */
    margin-top: 8px;
}

/* Base slot appearance */
.slotBtn{
    display: inline-block;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(90,70,50,0.22);
    background: linear-gradient(to bottom, #fbf7f1, #f4ede3);
    color: #4f3b28;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    min-width: 70px;
    text-align: center;
}

/* Available slot hover */
.slotOk:hover{
    background: linear-gradient(to bottom, #ead6b7, #e1caa4);
    border-color: rgba(90,70,50,0.35);
    transform: translateY(-2px);
    cursor: pointer;
}

/* Selected slot */
.slotSel{
    background: linear-gradient(to bottom, #114784, #0f3e72);
    color: #ffffff !important;
    border-color: #114784;
    box-shadow: 0 0 0 3px rgba(17,71,132,0.18);
}

/* Not available slot */
.slotOff{
    opacity: 0.45;
    cursor: not-allowed;
    background: #f0e6d8;
}

/* Make layout clean on smaller screens */
@media (max-width: 768px){
    .slotButtonsWrap{
        gap: 10px;
    }

    .slotBtn{
        min-width: 60px;
        padding: 6px 10px;
        font-size: 13px;
    }
}
/* =========================================================
   ELAMA PORTAL – BOOKING SLOT FIXED SPACING
   ========================================================= */

#bkSlotWrap,
.slotButtonsWrap{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    row-gap: 14px !important;
    column-gap: 22px !important;   /* horizontal spacing */
}

/* Make sure each slot behaves like a block */
.slotBtn{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(90,70,50,0.22);
    background: linear-gradient(to bottom, #fbf7f1, #f4ede3);
    color: #4f3b28;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    min-width: 75px;
    text-align: center;
}

/* Available hover */
.slotOk:hover{
    background: linear-gradient(to bottom, #ead6b7, #e1caa4);
    border-color: rgba(90,70,50,0.35);
    transform: translateY(-2px);
    cursor: pointer;
}

/* Selected */
.slotSel{
    background: #114784 !important;
    color: #ffffff !important;
    border-color: #114784 !important;
    box-shadow: 0 0 0 3px rgba(17,71,132,0.18);
}

/* Not available */
.slotOff{
    opacity: 0.45;
    cursor: not-allowed;
    background: #f0e6d8;
}

/* Works for PrimeFaces datePicker that renders an input-group */
.wheatDlg .p-datepicker,
.wheatDlg .p-datepicker .p-inputgroup,
.wheatDlg .p-datepicker .p-inputgroup-input{
    display:flex !important;
    align-items:stretch !important;
    width:100% !important;
}

.wheatDlg .p-datepicker input.p-inputtext{
    flex: 1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
}

.wheatDlg .p-datepicker .p-datepicker-trigger,
.wheatDlg .p-datepicker button.p-datepicker-trigger{
    flex: 0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:42px !important;
    min-width:42px !important;
    margin-left:6px !important;
}

/* If some layout forces block stacking, neutralize it */
.wheatDlg .p-datepicker > span,
.wheatDlg .p-datepicker > div{
    display:flex !important;
    align-items:stretch !important;
    width:100% !important;
}
/* =========================================
   Compact ONLY this grid: patientFormPG
   ========================================= */

/* reduce the GRID gaps (this is the main spacing you see) */
div[id$="patientFormPG"] > .ui-panelgrid-content {
    row-gap: 6px !important;
    column-gap: 12px !important;
}

/* reduce cell padding */
div[id$="patientFormPG"] .ui-panelgrid-cell {
    padding: 2px 4px !important;
}

/* remove extra margins on primefaces inputs inside this grid */
div[id$="patientFormPG"] .ui-inputfield,
div[id$="patientFormPG"] .ui-selectonemenu,
div[id$="patientFormPG"] .ui-datepicker {
    margin: 0 !important;
}
/* =========================================================
   Use .compact-form to control spacing for PrimeFaces grid panelGrid
   ========================================================= */

/* Make the grid tighter ONLY when compact-form is present */
.form-grid.compact-form.ui-panelgrid .ui-panelgrid-content {
    gap: 4px !important;          /* controls vertical + horizontal spacing */
}

/* Reduce cell padding (also affects vertical spacing) */
.form-grid.compact-form.ui-panelgrid .ui-panelgrid-cell {
    padding: 2px 6px !important;
}

/* Use your columnClasses for styling */
.form-grid.compact-form .label-col {
    font-weight: 600;
    align-self: center;
}

.form-grid.compact-form .value-col {
    align-self: center;
}
.readMore {
    display:inline-block;
    margin-top:6px;
    font-weight:600;
    text-decoration:none;
}
.readMore:hover {
    text-decoration:underline;
}
.ann {
    border:1px solid rgba(90,70,50,0.18);
    background:#fff;
    border-radius:18px;
    padding:14px 16px;
    margin-bottom:12px;
}