/* One button system for the public site.

   The theme grew several button styles that override each other: .theme_button alone has
   three definitions in style.css, and a phone rule there shrank every one of them to 11px.
   This file loads after everything else and sets the size, type, shape and colours for all
   of them, so a button looks the same on every page and device.

   Sizes: default 48px tall (44px on phones, the minimum comfortable tap target), and small
   40px for buttons inside cards, filters and the top bar. Widths are left to each page, so
   full-width form buttons on phones stay full width.

   The ":not(#ub0):not(#ub1)" prefix gives every rule here the same, ID-level weight, so it
   beats page styles and older !important rules, while inside this file order decides
   (:where adds no weight of its own). */

:root {
    --ub-pink: #f906a0;
    --ub-pink-deep: #c8027f;
    --ub-grad: linear-gradient(135deg, #f906a0 0%, #d0047f 100%);
    --ub-grad-hover: linear-gradient(135deg, #e0048f 0%, #b0036f 100%);
    --ub-ring: 0 0 0 3px rgba(249, 6, 160, .35);
}

/* ---------- Shared shape and type ---------- */
html body:not(#ub0):not(#ub1) :where(
    .theme_button, .ks-servicebtn, .bp-btn, .careers-cta a, .careers-apply, .qk-apply-btn, .apply-now-btn,
    .career-ty .ty-actions a, .reg-pay-btn, .pay-receipt-btn, .card-cta, .la-close-btn,
    .btn_fill, .btn_outline, .direction_btn, .course_list_page .btn
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: 48px !important;
    height: auto !important;
    padding: 10px 28px !important;
    border-radius: 999px !important;
    border: 1.5px solid transparent !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    text-align: center;
    text-decoration: none !important;
    white-space: normal;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease !important;
}

/* Small: inside cards, filters and the top bar, kept on one line. Branch card buttons are
   small on wider screens only, where the cards are narrow. */
html body:not(#ub0):not(#ub1) :where(.ks-servicebtn, .careers-apply, .card-cta, .direction_btn, .course_list_page .btn, .btn_fill, .btn_outline,
    .nav-verify-btn, .nav-apply-btn, .theme_button.nav-verify-btn, .theme_button.nav-apply-btn) {
    min-height: 40px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
}

/* Course cards hold two buttons side by side. Where a card is too narrow for both, they
   stack, each full width, instead of running past the card edge. */
html body:not(#ub0):not(#ub1) :where(.ks-service-more) {
    flex-wrap: wrap !important;
    gap: 8px !important;
}
html body:not(#ub0):not(#ub1) :where(.ks-service-more .ks-servicebtn) {
    flex: 1 1 auto;
    margin: 0 !important;
}

/* ---------- Primary: pink ---------- */
html body:not(#ub0):not(#ub1) :where(
    .theme_button, .ks-servicebtn, .bp-btn, .careers-cta a, .qk-apply-btn, .career-ty .ty-btn-pink,
    .reg-pay-btn, .pay-receipt-btn, .card-cta, .la-close-btn, .btn_fill, .direction_btn, .course_list_page .btn-primary
) {
    background: var(--ub-grad) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(249, 6, 160, .22) !important;
}
@media (hover: hover) {
    html body:not(#ub0):not(#ub1) :where(
        .theme_button, .ks-servicebtn, .bp-btn, .careers-cta a, .qk-apply-btn, .career-ty .ty-btn-pink,
        .reg-pay-btn, .pay-receipt-btn, .card-cta, .la-close-btn, .btn_fill, .direction_btn, .course_list_page .btn-primary
    ):hover {
        background: var(--ub-grad-hover) !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(249, 6, 160, .32) !important;
    }
}

/* ---------- Dark: kept where a page uses it on a light background (careers) ---------- */
html body:not(#ub0):not(#ub1) :where(.careers-apply, .apply-now-btn) {
    background: #241019 !important;
    color: #fff !important;
    box-shadow: none !important;
}
@media (hover: hover) {
    html body:not(#ub0):not(#ub1) :where(.careers-apply, .apply-now-btn):hover { background: var(--ub-pink-deep) !important; color: #fff !important; }
}

/* ---------- White: on photos and dark sections ---------- */
html body:not(#ub0):not(#ub1) .theme-btn-s2.theme_button {
    background: #fff !important;
    color: var(--ub-pink-deep) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18) !important;
}
@media (hover: hover) {
    html body:not(#ub0):not(#ub1) .theme-btn-s2.theme_button:hover { background: #ffe6f4 !important; color: var(--ub-pink-deep) !important; }
}

/* ---------- Outline on dark backgrounds ---------- */
html body:not(#ub0):not(#ub1) :where(.theme_button.outline, .bp-btn.ghost,
    .ks-service-style-2 .ks-service-item .ks-service-more .ks-servicebtn:last-child:not(:first-child)) {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .65) !important;
    box-shadow: none !important;
}
@media (hover: hover) {
    html body:not(#ub0):not(#ub1) :where(.theme_button.outline, .bp-btn.ghost,
        .ks-service-style-2 .ks-service-item .ks-service-more .ks-servicebtn:last-child:not(:first-child)):hover {
        background: #fff !important;
        color: var(--ub-pink-deep) !important;
        border-color: #fff !important;
    }
}

/* ---------- Outline on light backgrounds ---------- */
html body:not(#ub0):not(#ub1) :where(.btn_outline, .career-ty .ty-btn-ghost, .course_list_page .btn-secondary, .pay-receipt-btn.is-plain) {
    background: #fff !important;
    color: var(--ub-pink-deep) !important;
    border-color: var(--ub-pink) !important;
    box-shadow: none !important;
}
@media (hover: hover) {
    html body:not(#ub0):not(#ub1) :where(.btn_outline, .career-ty .ty-btn-ghost, .course_list_page .btn-secondary, .pay-receipt-btn.is-plain):hover {
        background: var(--ub-pink) !important;
        color: #fff !important;
    }
}

/* ---------- States ---------- */
html body:not(#ub0):not(#ub1) :where(
    .theme_button, .ks-servicebtn, .bp-btn, .careers-cta a, .careers-apply, .qk-apply-btn, .apply-now-btn,
    .career-ty .ty-actions a, .reg-pay-btn, .pay-receipt-btn, .card-cta, .la-close-btn,
    .btn_fill, .btn_outline, .direction_btn, .course_list_page .btn
):active {
    transform: scale(.97) !important;
}
html body:not(#ub0):not(#ub1) :where(
    .theme_button, .ks-servicebtn, .bp-btn, .careers-cta a, .careers-apply, .qk-apply-btn, .apply-now-btn,
    .career-ty .ty-actions a, .reg-pay-btn, .pay-receipt-btn, .card-cta, .la-close-btn,
    .btn_fill, .btn_outline, .direction_btn, .course_list_page .btn
):focus-visible {
    outline: none !important;
    box-shadow: var(--ub-ring) !important;
}
html body:not(#ub0):not(#ub1) :where(.theme_button, .bp-btn, .reg-pay-btn, .pay-receipt-btn, .course_list_page .btn):is(:disabled, [disabled], .disabled) {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
    html body:not(#ub0):not(#ub1) :where(
        .theme_button, .bp-btn, .careers-cta a, .qk-apply-btn, .apply-now-btn,
        .career-ty .ty-actions a, .reg-pay-btn, .pay-receipt-btn, .la-close-btn, .btn_fill, .btn_outline
    ) {
        min-height: 44px !important;
        padding: 10px 22px !important;
        font-size: 14px !important;
    }
    html body:not(#ub0):not(#ub1) :where(.ks-servicebtn, .careers-apply, .card-cta, .direction_btn, .course_list_page .btn,
        .theme_button.nav-verify-btn, .theme_button.nav-apply-btn) {
        min-height: 40px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}

/* The scrolling strip at the top of phones is a thin ticker, so its buttons are compact. */
@media (max-width: 767.98px) {
    html body:not(#ub0):not(#ub1) :where(.marquee-track .nav-verify-btn, .marquee-track .nav-apply-btn) {
        min-height: 30px !important;
        padding: 5px 14px !important;
        font-size: 12px !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body:not(#ub0):not(#ub1) :where(.theme_button, .ks-servicebtn, .bp-btn, .careers-apply, .reg-pay-btn, .btn_fill, .btn_outline) {
        transition: none !important;
        transform: none !important;
    }
}