/*
 * style.css — Corelife Amelia Integration
 * Two-panel layout: dark sidebar left, white content right, footer bar bottom.
 * Matches Amelia's own step-booking visual pattern.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    --cai-blue:          #1e4db7;   /* Amelia sidebar blue */
    --cai-blue-hover:    #2558cc;
    --cai-blue-light:    #e8eef8;
    --cai-white:         #ffffff;
    --cai-border:        #dde3ee;
    --cai-text:          #1a2236;
    --cai-text-muted:    #6b7a99;
    --cai-error:         #c0392b;
    --cai-info:          #1563c5;
    --cai-radius-sm:     6px;
    --cai-radius:        10px;
    --cai-radius-lg:     14px;
    --cai-shadow:        0 4px 24px rgba(30,77,183,.10);
    --cai-font:          "Segoe UI", system-ui, -apple-system, sans-serif;
    --cai-sidebar-w:     220px;
    --cai-footer-h:      68px;
    --cai-transition:    0.18s ease;
}

.cai-flow [hidden] {
    display: none !important;
}

/* ── Outer wrapper ──────────────────────────────────────────────────────── */
.cai-flow {
    display:       grid;
    grid-template-columns: var(--cai-sidebar-w) 1fr;
    grid-template-rows:    1fr var(--cai-footer-h);
    grid-template-areas:
        "sidebar panel"
        "sidebar footer";
    min-height:    480px;
    max-width:     860px;
    margin:        0 auto;
    border-radius: var(--cai-radius-lg);
    box-shadow:    var(--cai-shadow);
    overflow:      hidden;
    font-family:   var(--cai-font);
    color:         var(--cai-text);
    background:    var(--cai-white);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.cai-sidebar {
    grid-area:      sidebar;
    background:     var(--cai-blue);
    display:        flex;
    flex-direction: column;
    justify-content: space-between;
    padding:        28px 0 0;
}

.cai-sidebar__nav {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        0 12px;
}

/* Nav item = one step row in the sidebar */
.cai-nav-item {
    display:        flex;
    align-items:    center;
    gap:            12px;
    width:          100%;
    padding:        12px 14px;
    border:         none;
    border-radius:  var(--cai-radius-sm);
    background:     transparent;
    color:          rgba(255,255,255,.65);
    font-family:    var(--cai-font);
    font-size:      14px;
    font-weight:    500;
    cursor:         pointer;
    text-align:     left;
    transition:     background var(--cai-transition), color var(--cai-transition);
}

.cai-nav-item:not(:disabled):hover {
    background: rgba(255,255,255,.12);
    color:      rgba(255,255,255,.90);
}

.cai-nav-item--active {
    background: rgba(255,255,255,.18) !important;
    color:      var(--cai-white) !important;
    font-weight: 600;
}

.cai-nav-item--done {
    color: rgba(255,255,255,.80);
}

.cai-nav-item:disabled {
    cursor: default;
    opacity: .55;
}

.cai-nav-item__icon {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.cai-nav-item__label {
    flex: 1;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* Toggle circle — hollow = pending, filled = done/active */
.cai-nav-item__toggle {
    width:         20px;
    height:        20px;
    border-radius: 50%;
    border:        2px solid rgba(255,255,255,.40);
    flex-shrink:   0;
    background:    transparent;
    transition:    background var(--cai-transition), border-color var(--cai-transition);
}

.cai-nav-item--active .cai-nav-item__toggle {
    background:    var(--cai-white);
    border-color:  var(--cai-white);
}

.cai-nav-item--done .cai-nav-item__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:    #16c60c;
    border-color:  #16c60c;
}

.cai-nav-item--done .cai-nav-item__toggle::before {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--cai-blue);
    border-bottom: 2px solid var(--cai-blue);
    transform: rotate(-45deg);
    margin-top: -1px;
}

/* Collapse button at sidebar bottom */
.cai-sidebar__collapse {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     16px 20px;
    border:      none;
    background:  transparent;
    color:       rgba(255,255,255,.60);
    font-family: var(--cai-font);
    font-size:   13px;
    cursor:      pointer;
    border-top:  1px solid rgba(255,255,255,.12);
    transition:  color var(--cai-transition);
    width:       100%;
    text-align:  left;
}

.cai-sidebar__collapse:hover { color: rgba(255,255,255,.90); }

/* Collapsed state — sidebar shows only icons */
.cai-flow.cai-flow--collapsed {
    --cai-sidebar-w: 60px;
}

.cai-flow--collapsed .cai-nav-item__label,
.cai-flow--collapsed .cai-nav-item__toggle,
.cai-flow--collapsed .cai-sidebar__collapse span {
    display: none;
}

.cai-flow--collapsed .cai-nav-item {
    justify-content: center;
    padding: 12px;
}

.cai-flow--collapsed .cai-sidebar__collapse {
    justify-content: center;
    padding: 16px;
}

/* ── Right panel ─────────────────────────────────────────────────────────── */
.cai-panel {
    grid-area:  panel;
    padding:    32px 36px 24px;
    overflow-y: auto;
    background: var(--cai-white);
    position:   relative;
}

/* Step visibility */
.cai-step        { display: none; }
.cai-step--active { display: block; }

.cai-panel__title {
    font-size:   22px;
    font-weight: 700;
    margin:      0 0 6px;
    color:       var(--cai-text);
}

.cai-card-box {
    max-width: 650px;
    margin: 30px auto;
    padding: 35px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    text-align: center;
}

.cai-step-message__thanks {
    font-size: 30px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 20px;
}

.cai-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 25px;
}

.cai-info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 18px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}


/* ── Form grid ──────────────────────────────────────────────────────────── */
.cai-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   18px 20px;
    margin-top:            20px;
}

.cai-field label,
.cai-field__label {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    margin-bottom: 6px;
    color:         var(--cai-text);
    letter-spacing: .01em;
}

.cai-required { color: var(--cai-error); margin-left: 2px; }

.cai-field input,
.cai-field select {
    width:         100%;
    padding:       10px 13px;
    border:        1.5px solid var(--cai-border);
    border-radius: var(--cai-radius-sm);
    font-size:     14px;
    font-family:   var(--cai-font);
    color:         var(--cai-text);
    background:    var(--cai-white);
    box-sizing:    border-box;
    transition:    border-color var(--cai-transition), box-shadow var(--cai-transition);
    outline:       none;
}

.cai-field input:focus,
.cai-field select:focus {
    border-color: var(--cai-blue);
    box-shadow:   0 0 0 3px rgba(30,77,183,.13);
}

.cai-field input::placeholder { color: #b0bac8; }

.cai-phone-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 0;
}

.cai-phone-row select {
    border-radius: var(--cai-radius-sm) 0 0 var(--cai-radius-sm);
    border-right: 0;
    padding: 10px 8px;
}

.cai-phone-row input {
    border-radius: 0 var(--cai-radius-sm) var(--cai-radius-sm) 0;
}

.cai-radio-row,
.cai-check-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 42px;
    padding: 9px 0;
}

.cai-radio-row label,
.cai-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-weight: 500;
}

.cai-radio-row input,
.cai-check-row input {
    width: auto;
    margin: 0;
}

.cai-field--invalid input,
.cai-field--invalid select,
.cai-field--invalid .cai-radio-row,
.cai-field--invalid .cai-check-row {
    border-color: var(--cai-error);
}

.cai-field--invalid input:focus,
.cai-field--invalid select:focus {
    border-color: var(--cai-error);
    box-shadow:   0 0 0 3px rgba(192,57,43,.13);
}

.cai-field__error {
    display:     block;
    min-height:  18px;
    margin-top:  5px;
    font-size:   12px;
    line-height: 1.35;
    color:       var(--cai-error);
}

/* Add card button */
.cai-card-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           9px;
    padding:       11px 22px;
    background:    var(--cai-blue);
    color:         var(--cai-white);
    border:        none;
    border-radius: var(--cai-radius-sm);
    font-size:     14px;
    font-weight:   600;
    font-family:   var(--cai-font);
    cursor:        pointer;
    transition:    background var(--cai-transition), transform var(--cai-transition);
}

.cai-card-btn:hover  { background: var(--cai-blue-hover); }
.cai-card-btn:active { transform: scale(.97); }
.cai-card-btn:disabled { opacity:.55; cursor:not-allowed; }

.cai-btn--loading {
    pointer-events: none;
}

/* ── Message area ──────────────────────────────────────────────────────── */
.cai-message {
    margin-top:    16px;
    padding:       12px 16px;
    border-radius: var(--cai-radius-sm);
    font-size:     13.5px;
    line-height:   1.5;
    border:        1px solid transparent;
}

.cai-message--success { background:#f0fdf4; border-color:#86efac; color:#15803d; }
.cai-message--error   { background:#fef2f2; border-color:#fca5a5; color:#b91c1c; }
.cai-message--info    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }

.cai-loading__spinner {
    width:         18px;
    height:        18px;
    border:        2.5px solid var(--cai-border);
    border-top:    2.5px solid var(--cai-blue);
    border-radius: 50%;
    flex-shrink:   0;
    animation:     cai-spin .7s linear infinite;
}

@keyframes cai-spin { to { transform: rotate(360deg); } }

/* ── Footer bar ─────────────────────────────────────────────────────────── */
.cai-footer {
    grid-area:   footer;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     0 36px;
    border-top:  1px solid var(--cai-border);
    background:  var(--cai-white);
}

.cai-footer__back {
    padding:       0;
    border:        none;
    background:    transparent;
    color:         var(--cai-text-muted);
    font-family:   var(--cai-font);
    font-size:     14px;
    font-weight:   500;
    cursor:        pointer;
    transition:    color var(--cai-transition);
}
.cai-footer__back:hover { color: var(--cai-text); }

.cai-footer__actions {
    display: flex;
    gap:     10px;
}

.cai-footer__continue {
    padding:       10px 28px;
    background:    var(--cai-blue);
    color:         var(--cai-white);
    border:        none;
    border-radius: var(--cai-radius-sm);
    font-family:   var(--cai-font);
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--cai-transition), transform var(--cai-transition);
}

.cai-footer__continue:hover  { background: var(--cai-blue-hover); }
.cai-footer__continue:active { transform: scale(.97); }
.cai-footer__continue:disabled { opacity:.55; cursor:not-allowed; }

/* ── Amelia container overrides ──────────────────────────────────────────── */
#cai-amelia-container {
    min-height: 520px;
    margin-top: 8px;
    position: relative;
}

.cai-amelia-container--loading {
    overflow: hidden;
}

.cai-amelia-container--loading::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(248,250,252,.96);
    border: 1px solid var(--cai-border);
    border-radius: var(--cai-radius-sm);
}

.cai-amelia-container--loading::after {
    content: 'Loading calendar...';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 21;
    transform: translate(-50%, -50%);
    color: var(--cai-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.cai-step #cai-amelia-container .amelia-v2-booking {opacity:1; visibility: visible; height:100%;}
.cai-step #cai-amelia-container .amelia-v2-booking .am-fs-sb{display: none !important;}

/*******saeed_css_start*********/
.virtual-booking-form .cai-flow {max-width: 100%; grid-template-columns: max-content; }
.virtual-booking-form .cai-panel .cai-form-grid .cai-field .cai-phone-row {border: 1.5px solid #dde3ee; border-radius: 9px; }
.virtual-booking-form .cai-panel .cai-form-grid .cai-field .cai-phone-row select {border: none; border-radius: 10px; }
.virtual-booking-form .cai-panel .cai-form-grid .cai-field .cai-phone-row input {border: none; }
.virtual-booking-form aside.cai-sidebar .cai-sidebar__collapse {display: none; }
.virtual-booking-form .cai-footer__actions button {font-size: 17px; }
.virtual-booking-form .cai-panel h2.cai-panel__title {line-height: normal; font-size: 40px;}
.virtual-booking-form .cai-panel .cai-card-box {max-width: 100%; margin-bottom: 15px; margin-top: 20px;} 
.virtual-booking-form .cai-panel .cai-card-box .cai-step-message__thanks {color: #009000; margin-bottom: 12px; line-height: normal;}
.virtual-booking-form .cai-panel .cai-card-box  p.cai-desc {margin-bottom: 15px; } 
.virtual-booking-form .cai-panel .cai-info-box {max-width: 550px; margin: auto; color: #000; padding: 30px; background: #ff131b1a; border: none; } 
.virtual-booking-form .cai-panel .cai-info-box p {font-size: 18px; font-weight: 500; line-height: 27px; }
.virtual-booking-form section#cai-step-2 .cai-card-btn {margin: auto !important; display: flex; font-size: 17px; }
.page-id-13500 .elementor-location-footer {padding-top: 100px; }
.virtual-booking-form .cai-field__error:empty {display: none; }
.virtual-booking-form .cai-form-grid label {line-height: normal; }
.virtual-booking-form .cai-footer {padding-bottom: 24px; }
.virtual-booking-form .cai-footer {display: block; width: 100%; padding-bottom: 24px; border-top: 0; }
.virtual-booking-form .cai-flow {max-width: 100%; grid-template-columns: max-content; --cai-footer-h: 92px; }
.virtual-booking-form .cai-panel .cai-info-box .header {font-size: 22px; display: flex; align-items: center; justify-content: center; column-gap: 8px; color: red; margin-bottom: 8px; }
.virtual-booking-form .cai-flow[data-current-step="2"] footer.cai-footer {display: flex; align-items: center; }
.virtual-booking-form .cai-flow[data-current-step="3"] .amelia-v2-booking div#amelia-container {margin-left: 0; max-width: 100%; margin-bottom: 0px; }
.virtual-booking-form .cai-flow[data-current-step="3"] .cai-panel div#cai-amelia-container {min-height: auto !important; margin-top: 0;}
.virtual-booking-form .cai-flow[data-current-step="3"] .amelia-v2-booking div#amelia-container {max-width: 100%; margin-bottom: 0px; justify-content: flex-start; margin-top: 0 !important;}
.virtual-booking-form .cai-flow[data-current-step="3"] .am-fs__main .am-fs__main-content.am-fs__congrats.am-fs__main-content .am-fs__congrats-info span:first-child {font-weight: bold !important; color: #000 !important; }
.virtual-booking-form .cai-footer__actions .cai-btn--loading {display: flex; column-gap: 8px; align-items: center; justify-content: center;}
.virtual-booking-form .cai-flow[data-current-step="3"] .cai-panel {padding: 0; }
.virtual-booking-form .cai-flow[data-current-step="3"] .cai-panel .am-fs__main-heading {box-shadow: none !important;padding-bottom: 10px !important;} 
.virtual-booking-form .cai-flow[data-current-step="3"] .amelia-v2-booking div#amelia-container .am-fs__main-footer {box-shadow: none; padding-right: 43px; }
.virtual-booking-form .amelia-v2-booking #amelia-container .am-fs__main-footer {bottom: auto; padding-right: 10px ;}
.virtual-booking-form .amelia-v2-booking #amelia-container .am-fs__main-content.am-fs__congrats {height: auto; }

.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__main-footer {padding-right: 30px !important; bottom: auto !important; }
.virtual-booking-form .amelia-v2-booking #amelia-container .am-fs__main-content.am-fs__congrats {height: auto; }
.virtual-booking-form .amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell .fc-daygrid-day-frame {width: calc(100% - 15px) !important; height: calc(100% - 13px) !important; font-size: 18px; }
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) {max-width: 100% !important; }
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__main-content.am-fs__congrats.am-fs__main-content {padding-left: 35px !important; padding-right: 35px !important; }


/*******saeed_css_end*********/







/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.virtual-booking-form .cai-flow[data-current-step="2"] footer.cai-footer {display: block;}
.virtual-booking-form .cai-flow[data-current-step="2"] footer.cai-footer button {width: 100%; margin-bottom: 10px; }
.virtual-booking-form .cai-flow {max-width: 100%;  } 
.virtual-booking-form .cai-panel .cai-card-box {padding: 20px; }
.virtual-booking-form .cai-flow {grid-template-rows: auto; } 

}

@media (max-width: 946px) {
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__congrats-main p {color: #000 !important; }
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__congrats-main span {color: #000 !important; }
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__congrats-main a.am-fs-sb-cs-cals-card {border: 1px solid #ccc !important; }
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__main-content.am-fs__congrats.am-fs-sb-atc.am-fs__main-content {background: #fff !important; }
.virtual-booking-form .am-fs__main-content.am-fs__congrats.am-fs-sb-atc.am-fs__main-content {height: calc(100% - 56px) !important; }
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__congrats-main {margin-top: 0 !important; }
}



@media (max-width: 921px) {
.virtual-booking-form .cai-form-grid {grid-template-columns: 1fr; }
}



@media (max-width: 767px) {
.virtual-booking-form .cai-footer__actions button {font-size: 16px; }
.virtual-booking-form .cai-panel .cai-info-box {max-width: 100%; padding: 15px;}
.virtual-booking-form .cai-panel .cai-card-box {padding: 20px; }
.virtual-booking-form .cai-footer {display: block; width: 100%; padding-top: 10px;  }
.virtual-booking-form .cai-footer .cai-footer__actions {width: 100% !important; display: block; margin-left: auto; margin-right: 0; text-align: right; }
.clinic-reveal-container.is-open .e-con-inner {padding-top: 0; }
.virtual-booking-form .cai-panel .cai-info-box p {font-size: 16px; line-height: 23px;} 
.virtual-booking-form .cai-panel h2.cai-panel__title {font-size: 22px !important; line-height: normal !important; margin: 0 !important; }
.virtual-booking-form .cai-panel .cai-card-box {margin-top: 15px; }
.virtual-booking-form .cai-flow {grid-template-columns: auto; }
.virtual-booking-form .cai-panel .cai-card-box .cai-step-message__thanks {font-size: 22px !important; line-height: normal !important; margin-bottom: 3px !important; } 
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__main-content.am-fs__congrats.am-fs__main-content {padding-left: 20px !important; padding-right: 20px !important; }
.virtual-booking-form .am-fs__main:has(.am-fs__congrats) .am-fs__main-content.am-fs__congrats.am-fs__main-content .am-fs__congrats-info.am-fs__congrats-info-mobile {margin-top: 0 !important; }
}


@media (max-width: 680px) {
    .cai-flow {
        grid-template-columns: 1fr;
        grid-template-rows:    auto 1fr auto;
        grid-template-areas:
            "sidebar"
            "panel"
            "footer";
        border-radius: var(--cai-radius);
    }

    .cai-sidebar {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0;
        overflow-x: auto;
    }

    .cai-sidebar__nav {
        flex-direction: row;
        padding: 12px;
        gap: 6px;
    }

    .cai-sidebar__collapse { display: none; }

    .cai-nav-item {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 14px;
        font-size: 11px;
        white-space: nowrap;
    }

    .cai-nav-item__toggle { display: none; }

    .cai-panel { padding: 20px 18px 16px; }

    .cai-form-grid { grid-template-columns: 1fr; }

    .cai-footer { padding: 0 18px; }
    .virtual-booking-form aside.cai-sidebar button.cai-nav-item {row-gap: 10px; }

}

@media (max-width: 500px) {
.virtual-booking-form .cai-footer button {width: 100%; }
.virtual-booking-form .cai-panel .cai-card-box {padding: 15px; }
.virtual-booking-form section#cai-step-2 .cai-card-btn {font-size: 15px; padding-left: 20px; padding-right: 20px; }
.virtual-booking-form .cai-flow[data-current-step="2"] footer.cai-footer button {font-size: 15px; padding-left: 20px; padding-right: 20px; }
.virtual-booking-form .amelia-v2-booking #amelia-container .am-advsc.fc-theme-standard td.am-advsc__dayGridMonth-cell .fc-daygrid-day-frame {width: calc(100% - 8px) !important; height: calc(100% - 6px) !important; }
}