/*
 * Plugin UI shared by every form and My Account page:
 *  - inline alerts (ShowAlert / ShowError in PHP, showAlert in helpers.js): Bootstrap .alert boxes with a dismiss button
 *  - toasts (showToastError / Warning / Success / Information in helpers.js): jquery.toast
 *  - the account bar (.myaccount-content-top): customer name and Add Account button
 * The site is square-cornered (account bar, sidebar, form card; buttons ~3px), so these are too. Text meets WCAG AAA
 * (7:1) against its background. Only the plugin's own alerts are matched (they all carry button.close[data-dismiss=alert]),
 * so theme alerts elsewhere keep their look. !important where Bootstrap / sb-admin or jquery.toast's inline styles set
 * the same property.
 */

/* ---- inline alerts ------------------------------------------------------------------------------------------------- */
.alert[role="alert"]:has(> button.close[data-dismiss="alert"]) {
    --btcac-tone: #084f8f;/* title and icon: >= 7:1 on the tint */
    --btcac-tone-bg: #f0f7fe;
    --btcac-tone-line: #cfe2f5;
    position: relative;
    display: block;
    margin: 0 0 12px !important;
    padding: 14px 60px 14px 56px !important;
    border: 1px solid var(--btcac-tone-line) !important;
    border-radius: 0 !important;
    background: var(--btcac-tone-bg) !important;
    box-shadow: 0 1px 3px rgba(58, 59, 69, 0.08);
    color: #1d2327 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: left;
    animation: btcac-message-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Above the account bar (ShowAlert / ShowError prepend there): that bar is a WPBakery inner row whose -15px side margins
   make it wider than its column, square and flush with the sidebar. The alerts take the same edges, so they read as
   part of the bar. */
.alert[role="alert"]:has(> button.close[data-dismiss="alert"]):has(~ .myaccount-content-top) {
    margin-right: -15px !important;
    margin-left: -15px !important;
    border-left-color: transparent !important;
}

.alert-danger[role="alert"]:has(> button.close[data-dismiss="alert"]) {
    --btcac-tone: #8f1d14;
    --btcac-tone-bg: #fef3f2;
    --btcac-tone-line: #f6d0cc;
}

.alert-warning[role="alert"]:has(> button.close[data-dismiss="alert"]) {
    --btcac-tone: #7a4207;
    --btcac-tone-bg: #fffaeb;
    --btcac-tone-line: #f1dca6;
}

.alert-success[role="alert"]:has(> button.close[data-dismiss="alert"]) {
    --btcac-tone: #165c26;
    --btcac-tone-bg: #f1f9f2;
    --btcac-tone-line: #c8e6cd;
}

/* the leading "Error:" / "Tip:" / "Success:" */
.alert[role="alert"]:has(> button.close[data-dismiss="alert"]) > strong:first-child {
    margin-right: 2px;
    font-weight: 700;
    color: var(--btcac-tone);
}

/* its icon, in a white circle at the start of the strip */
.alert[role="alert"]:has(> button.close[data-dismiss="alert"]) > strong:first-child > i {
    position: absolute;
    top: 13px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 !important;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--btcac-tone-line);
    color: var(--btcac-tone);
    font-size: 13px;
    line-height: 1;
}

.alert[role="alert"]:has(> button.close[data-dismiss="alert"]) a,
.alert[role="alert"]:has(> button.close[data-dismiss="alert"]) .alert-link {
    color: var(--btcac-tone) !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* close: a 40px target, high-contrast cross */
.alert[role="alert"] > button.close[data-dismiss="alert"] {
    position: absolute;
    top: 50%;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 40px;
    height: 40px;
    margin: -20px 0 0;
    padding: 0 !important;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #3a434b !important;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    opacity: 1;
    cursor: pointer;
    transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.alert[role="alert"] > button.close[data-dismiss="alert"]:hover {
    background: rgba(16, 24, 40, 0.07);
    color: #1d2327 !important;
    opacity: 1;
}

.alert[role="alert"] > button.close[data-dismiss="alert"]:focus-visible {
    outline: 2px solid #09569e;
    outline-offset: 0;
}

@media (max-width: 600px) {
    .alert[role="alert"]:has(> button.close[data-dismiss="alert"]) {
        padding: 12px 52px 12px 50px !important;
        font-size: 14px !important;
    }

    .alert[role="alert"]:has(> button.close[data-dismiss="alert"]) > strong:first-child > i {
        top: 11px;
        left: 14px;
    }

    .alert[role="alert"] > button.close[data-dismiss="alert"] {
        right: 4px;
        width: 44px;
        height: 44px;
        margin-top: -22px;
    }
}

/* ---- colour roles -----------------------------------------------------------------------------------------------------
 * Green is the brand and "where you are": the sidebar, the selected bundle, prices.
 * One blue is "do something": every action button and focus ring. #09569e carries white text at 7.4:1 (AAA).
 * Before: four blues (Add Account #4e73df, ARForms buttons #0c7cd5, Confirm, focus #077BDD) next to the green.
 */

/* ---- account bar ----------------------------------------------------------------------------------------------------- */
.myaccount-content-top .text-gray-600 {
    color: #3a434b !important;/* customer name: 10:1 (was #858796, 3.6:1) */
}

.myaccount-content-top .btn-primary {
    border-color: #09569e !important;
    border-radius: 3px;
    background-color: #09569e !important;/* the action blue (was #4e73df, 4.3:1) */
    color: #fff !important;
}

.myaccount-content-top .btn-primary:hover,
.myaccount-content-top .btn-primary:focus {
    border-color: #074680 !important;
    background-color: #074680 !important;
}

/* ---- form buttons (every ARForms form) ---------------------------------------------------------------------------------
 * ARForms colours its buttons per form through the form's id with !important (#arffrm_<id>_container .arfsubmitbutton
 * .arf_submit_btn.arf_submit_btn_flat); the :not(#btcac-scope) gives these rules the same id weight plus one class.
 */
.arf_form_outer_wrapper:not(#btcac-scope) .arfsubmitbutton .arf_submit_btn.arf_submit_btn_flat,
.arf_form_outer_wrapper:not(#btcac-scope) .arf_confirmation_summary_submit_wrapper .arf_submit_btn {
    border-color: #09569e !important;
    background: #09569e !important;
    color: #fff !important;
}

.arf_form_outer_wrapper:not(#btcac-scope) .arfsubmitbutton .arf_submit_btn.arf_submit_btn_flat:hover,
.arf_form_outer_wrapper:not(#btcac-scope) .arf_confirmation_summary_submit_wrapper .arf_submit_btn:hover {
    border-color: #074680 !important;
    background: #074680 !important;
}

/* "Edit" on the confirm summary: the secondary action, outlined in the same blue */
.arf_form_outer_wrapper:not(#btcac-scope) .arf_confirmation_summary_submit_wrapper .arf_modify_button {
    border: 1px solid #09569e !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #09569e !important;
}

.arf_form_outer_wrapper:not(#btcac-scope) .arf_confirmation_summary_submit_wrapper .arf_modify_button:hover {
    background: #eef4fa !important;
    color: #074680 !important;
}

.arf_form_outer_wrapper:not(#btcac-scope) .arfsubmitbutton .arf_submit_btn:focus-visible,
.arf_form_outer_wrapper:not(#btcac-scope) .arf_confirmation_summary_submit_wrapper button:focus-visible,
.myaccount-content-top .btn-primary:focus-visible {
    outline: 2px solid #09569e !important;
    outline-offset: 2px;
}

.myaccount-content-top .btn-primary .text-white-50 {
    color: #fff !important;
}

/* ---- My Account sidebar ---------------------------------------------------------------------------------------------
 * The page builder column (.myaccount-col.left) ran from #00723B to a bright #39B54A with 80% white text: 4.5:1 at the
 * top, 2.2:1 at the bottom. It now deepens instead (BTC green to a darker green), so full-white text stays 7.2-10:1.
 */
.myaccount-col.left {
    background-color: #006534 !important;
    background-image: linear-gradient(180deg, #006534 0%, #004d28 100%) !important;
}

.myaccount-col.left .myaccount-menu a {
    color: #fff !important;
    transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.myaccount-col.left .myaccount-menu a:hover,
.myaccount-col.left .myaccount-menu a:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

.myaccount-col.left .myaccount-menu a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* menu icons (drawn on the list item) */
.myaccount-col.left .myaccount-menu li::before {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ---- toasts (jquery.toast sets the colours inline, hence !important) ----------------------------------------------- */
.jq-toast-wrap {
    width: 380px !important;
    max-width: calc(100vw - 32px);
}

.jq-toast-wrap .jq-toast-single {
    --btcac-tone: #084f8f;
    position: relative;
    margin: 0 0 10px !important;
    padding: 14px 48px 16px 52px !important;
    border: 1px solid #d5dbe0 !important;
    border-radius: 4px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);
    color: #1d2327 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    overflow: hidden;
}

.jq-toast-wrap .jq-icon-error { --btcac-tone: #8f1d14; }
.jq-toast-wrap .jq-icon-warning { --btcac-tone: #7a4207; }
.jq-toast-wrap .jq-icon-success { --btcac-tone: #165c26; }
.jq-toast-wrap .jq-icon-info { --btcac-tone: #084f8f; }

/* icon from Font Awesome (already loaded by the plugin) instead of jquery.toast's white images */
.jq-toast-wrap .jq-toast-single.jq-has-icon::before {
    position: absolute;
    top: 13px;
    left: 16px;
    color: var(--btcac-tone);
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.jq-toast-wrap .jq-icon-error::before { content: "\f06a"; }
.jq-toast-wrap .jq-icon-warning::before { content: "\f071"; }
.jq-toast-wrap .jq-icon-success::before { content: "\f058"; }
.jq-toast-wrap .jq-icon-info::before { content: "\f05a"; }

.jq-toast-wrap .jq-toast-heading {
    margin: 0 0 2px !important;
    color: var(--btcac-tone) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* close: jquery.toast draws an 8px "x"; give it a 32px target */
.jq-toast-wrap .close-jq-toast-single {
    top: 8px !important;
    right: 8px !important;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    color: #3a434b !important;
    font-size: 20px !important;
    line-height: 32px;
    text-align: center;
}

.jq-toast-wrap .close-jq-toast-single:hover {
    background: rgba(16, 24, 40, 0.07);
    color: #1d2327 !important;
}

/* time-left bar along the bottom edge, in the message's colour */
.jq-toast-wrap .jq-toast-loader {
    top: auto !important;
    bottom: 0;
    height: 3px !important;
    border-radius: 0 !important;
    background: var(--btcac-tone) !important;
    opacity: 0.6;
}

@keyframes btcac-message-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .alert[role="alert"]:has(> button.close[data-dismiss="alert"]) {
        animation: none;
    }
}