/* ============================================================
   ADA Sitewide CSS — loaded on every frontend page
   Portal bar, page-width fix, social icon sizing
   ============================================================ */

/* ── Portal Login Bar ── */
#ada-portal-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    background: linear-gradient(90deg, #0f1629 0%, #1a2744 100%);
    border-bottom: 2px solid #2e9ecf;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
    transition: transform .3s ease;
}
#ada-portal-bar.ada-pbar-hidden { transform: translateY(-100%); }
#ada-portal-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
}
#ada-portal-bar-label {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
#ada-portal-bar-btns {
    display: flex;
    gap: 8px;
    flex: 1;
}
.ada-pbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: .01em;
    transition: filter .15s, transform .15s;
    white-space: nowrap;
}
.ada-pbar-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ada-pbar-learner {
    background: #2e9ecf;
    color: #fff !important;
}
.ada-pbar-instructor {
    background: #e8a020;
    color: #111 !important;
}
#ada-portal-bar-close {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s;
}
#ada-portal-bar-close:hover { color: #e2e8f0; }

/* Push page body down so bar doesn't overlap content */
body { padding-top: 46px !important; }

/* Mobile: stack label off, shrink buttons */
@media (max-width: 600px) {
    #ada-portal-bar-label { display: none; }
    #ada-portal-bar-inner { padding: 0 10px; gap: 8px; }
    .ada-pbar-btn { padding: 7px 12px; font-size: 12px; }
}

/* ── Page Width Fix ─────────────────────────────────────────
   Elementor places the full-site widget (55e11c3) beside an
   empty placeholder (31ee02a) that eats ~568px on wide screens.
   Hiding the placeholder lets the site widget fill full width.
   ─────────────────────────────────────────────────────────── */
.elementor-element-31ee02a {
    display: none !important;
}
.elementor-element-55e11c3 {
    flex-grow: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   Amelia brand override
   ---------------------------------------------------------
   Amelia's own widgets (Customer Panel, Employee Panel, booking
   form) have no built-in style/branding settings anywhere in
   Amelia's admin or in their Elementor widget options — this is
   the only way to make them visually match the site. Scoped to
   Amelia's own stable class names (.amelia-v2-booking wrapper,
   am-* / el-* component classes), not IDs Amelia might change
   internally, but it is still overriding a third-party plugin's
   compiled styles rather than a supported setting, so treat it
   as best-effort: an Amelia update could change these class
   names and require this section to be re-checked.
   ============================================================ */
/* Amelia's compiled Vue styles are injected dynamically and can
   land after this stylesheet in the cascade with matching
   specificity, so plain class selectors lose ties even with
   !important. Repeating the scoping class (valid CSS — each
   repeat adds a class to the specificity count without needing
   duplicate classes in the actual markup) pushes these rules
   above anything Amelia ships internally. */
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking {
    --el-color-primary: #1B3A8C;
    font-family: 'Lato', sans-serif !important;
}
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-asi__header,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking h1,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking h2,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking h3 {
    font-family: 'Montserrat', sans-serif !important;
    color: #0F2347 !important;
}
/* Primary buttons (Sign In, Save, Book, etc.) */
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-button--primary,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-button--filled.am-button--primary,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-asi__btn.am-button--primary {
    background: #1B3A8C !important;
    border-color: #1B3A8C !important;
}
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-button--primary:hover,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-button--filled.am-button--primary:hover {
    background: #0F2347 !important;
    border-color: #0F2347 !important;
}
/* Secondary / outline buttons pick up the same navy for consistency */
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-button--outline.am-button--primary {
    color: #1B3A8C !important;
    border-color: #1B3A8C !important;
}
/* Input focus state */
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .el-input__inner:focus,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .el-input.is-active .el-input__inner {
    border-color: #1B3A8C !important;
}
/* Links inside Amelia widgets */
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking a {
    color: #1B3A8C !important;
}
/* Selected date/slot highlights, tabs, radios, checkboxes — all
   keyed off the same Element UI primary color variable above,
   but a few Amelia-specific classes hardcode it separately: */
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-tabs__item--active,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-radio__input.is-checked .am-radio__inner,
.amelia-v2-booking.amelia-v2-booking.amelia-v2-booking .am-checkbox__input.is-checked .am-checkbox__inner {
    color: #1B3A8C !important;
    border-color: #1B3A8C !important;
    background: #1B3A8C !important;
}


/* 2026-07-18: Hallmark homepage login cleanup */
body.page-id-510 main > .notice {
    display: none !important;
}
.ada-pbar-admin {
    background: #4f46e5;
    color: #fff !important;
}
.ada-pbar-franchise {
    background: #ffffff;
    color: #0f1629 !important;
    border: 1px solid #2e9ecf;
}
@media (max-width: 600px) {
    #ada-portal-bar-btns { gap: 5px; }
    .ada-pbar-btn { padding: 7px 8px; font-size: 11px; }
}


/* 2026-07-18: Final homepage top strip */
body.page-id-510 {
    padding-top: 0 !important;
}
#ada-portal-bar {
    display: none !important;
}
body.page-id-510 main > .notice {
    display: flex !important;
}
body.page-id-510 .portal-links a.ada-top-admin {
    border-color: var(--yellow);
    background: var(--yellow);
    color: var(--ink);
}


/* 2026-07-18: Button and phone strip polish */
body.page-id-510 main > .notice {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    justify-items: stretch !important;
}
body.page-id-510 main > .notice .portal-links {
    justify-self: center !important;
}
body.page-id-510 main > .notice .notice-phone {
    display: inline-block !important;
    justify-self: end !important;
    margin-left: auto !important;
}
body.page-id-510 .button.text-button {
    color: var(--ink) !important;
    border-color: var(--ink) !important;
    background: var(--white) !important;
}
body.page-id-510 .button.text-button:hover,
body.page-id-510 .button.text-button:focus {
    color: var(--ink) !important;
    border-color: var(--yellow) !important;
    background: var(--yellow) !important;
}
@media (max-width: 700px) {
    body.page-id-510 main > .notice {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }
    body.page-id-510 main > .notice .notice-phone {
        justify-self: center !important;
        margin-left: 0 !important;
    }
}