/*
 * AquaSafe forms, states and feedback.
 *
 * The shared vocabulary for the things every page does when something
 * happens: a field is wrong, a request succeeded, a list is empty, there is
 * another page of results. Loaded on every frontend page, so the tokens are
 * declared at :root rather than scoped the way aquasafe-inner-pages-v3.css
 * scopes its copy - /login and the dashboards need them too.
 */

/* The palette and the semantic tokens this file styles against now live
 * in frontend/css/aquasafe-tokens.css, which loads first. They were
 * declared here too, at :root, which meant this file - not the page
 * sheet - was choosing the red and blue for every scoped page below it. */

/* ---------------------------------------------------------------------------
 * 1. Field errors
 *
 * The shared partial styled these with `text-sm`, a class that exists in no
 * stylesheet on the site, and Bootstrap's `text-danger` red rather than the
 * AquaSafe red.
 * ------------------------------------------------------------------------ */

.as-field-error {
    display: block;
    margin-top: 6px;
    color: var(--as-err-ink);
    font-family: var(--tg-body-font-family, "Inter", sans-serif);
    font-size: var(--as-text-sm);
    font-weight: 500;
    line-height: 1.5;
}

.as-field-error + .as-field-error {
    margin-top: 2px;
}

/* A field carrying an error says so before its message is read. */
:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--as-err-ink) !important;
}

/* ---------------------------------------------------------------------------
 * 2. Notices
 *
 * Login, verify-email, forgot-password and checkout each had their own
 * success treatment - two Bootstrap alert variants and a bare paragraph.
 * ------------------------------------------------------------------------ */

.as-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid var(--as-line);
    border-left: 3px solid var(--as-muted);
    border-radius: 12px;
    background: var(--as-soft);
    color: var(--as-ink);
    font-family: var(--tg-body-font-family, "Inter", sans-serif);
    font-size: var(--as-text-base);
    line-height: 1.6;
}

.as-notice > .as-notice__icon {
    flex: none;
    margin-top: 2px;
    font-size: var(--as-text-base);
    line-height: 1.2;
}

.as-notice p:last-child {
    margin-bottom: 0;
}

.as-notice a {
    color: var(--as-link);
    font-weight: 600;
    text-decoration: underline;
}

.as-notice--success {
    border-left-color: var(--as-ok-ink);
    background: var(--as-ok-bg);
}

.as-notice--success > .as-notice__icon {
    color: var(--as-ok-ink);
}

.as-notice--warning {
    border-left-color: var(--as-warn-ink);
    background: var(--as-warn-bg);
}

.as-notice--warning > .as-notice__icon {
    color: var(--as-warn-ink);
}

.as-notice--error {
    border-left-color: var(--as-err-ink);
    background: var(--as-err-bg);
}

.as-notice--error > .as-notice__icon {
    color: var(--as-err-ink);
}

/* ---------------------------------------------------------------------------
 * 3. Pagination
 *
 * Two designs coexisted: 50px grey circles from the Bootstrap-four paginator
 * on /blog and /all-instructors, and the same shape from a different rule set
 * for the markup course-page.js builds on /courses - with the active page
 * unstyled on the first two, so there was no way to tell where you were.
 *
 * The theme's selectors are `.pagination__wrap ul li a` (0,1,3) and
 * `.pagination-wrap .page-link` (0,2,0), and it marks border-radius and
 * border !important. Every rule below is written to match or beat that -
 * :where() would drop the specificity to zero and lose.
 * ------------------------------------------------------------------------ */

.pagination__wrap ul,
.pagination-wrap .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    justify-content: center;
    list-style: none;
}

.pagination__wrap ul li a,
.pagination__wrap ul li span,
.pagination-wrap .page-link,
.pagination-wrap .page-item span {
    display: flex;
    /* 44px at every width: the theme dropped to 35px below 576px, under the
       minimum target size. */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--as-soft);
    box-shadow: none;
    color: var(--as-navy);
    font-family: var(--tg-heading-font-family, "Poppins", sans-serif);
    font-size: var(--as-text-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.pagination__wrap ul li a:hover,
.pagination-wrap .page-link:hover {
    background: var(--as-soft-blue);
    color: var(--as-navy);
}

/* The current page was indistinguishable from the rest on two of the three. */
.pagination__wrap ul li.active a,
.pagination__wrap ul li.active span,
.pagination-wrap li.active .page-link,
.pagination-wrap li.active span {
    background: var(--as-blue-strong);
    color: #fff;
}

.pagination__wrap ul li.disabled span,
.pagination-wrap .disabled span,
.pagination-wrap .disabled .page-link {
    background: var(--as-soft);
    color: var(--as-muted);
    cursor: default;
}

/* The dots are a separator, not a destination. */
.pagination__wrap ul li.page-dots span,
.pagination-wrap .page-dots span {
    width: 24px;
    background: transparent !important;
}

/* A single page of results left a 25px gap where the empty <nav> stood. */
.pagination__wrap:empty,
.pagination-wrap:empty {
    display: none;
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * 4. Toasts
 *
 * Kept for flash messages now that field errors are shown inline only, but
 * in the AquaSafe palette rather than toastr's stock green and red.
 * ------------------------------------------------------------------------ */

#toast-container > div {
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(7, 26, 73, .18);
    font-family: var(--tg-body-font-family, "Inter", sans-serif);
    font-size: var(--as-text-md);
    line-height: 1.55;
    opacity: 1;
}

#toast-container > .toast-success {
    background-color: var(--as-ok-ink);
}

#toast-container > .toast-error {
    background-color: var(--as-err-ink);
}

#toast-container > .toast-warning {
    background-color: var(--as-warn-ink);
}

#toast-container > .toast-info {
    background-color: var(--as-navy);
}

/* ---------------------------------------------------------------------------
 * 5. Cookie consent banner
 *
 * Its colours come from the settings table, so the palette is a data edit -
 * but the geometry and type are ours, and the overrides below hold whatever
 * those values are.
 * ------------------------------------------------------------------------ */

.wpcc-container {
    border: 0 !important;
    border-radius: 12px !important;
    background-color: var(--as-navy) !important;
    box-shadow: 0 14px 38px rgba(7, 26, 73, .22);
    color: #fff !important;
    font-family: var(--tg-body-font-family, "Inter", sans-serif) !important;
    font-size: var(--as-text-md);
    line-height: 1.55;
}

.wpcc-container .wpcc-message {
    color: #fff !important;
}

.wpcc-container .wpcc-privacy .wpcc-privacy-link {
    color: var(--as-on-dark-ring) !important;
    text-decoration: underline;
}

.wpcc-container .wpcc-btn {
    border: 0 !important;
    border-radius: 8px !important;
    background-color: var(--as-red) !important;
    color: #fff !important;
    font-family: var(--tg-heading-font-family, "Poppins", sans-serif) !important;
    font-size: var(--as-text-md);
    font-weight: 700;
}

.wpcc-container .wpcc-btn:hover {
    background-color: var(--as-red-dark) !important;
}

/* ---------------------------------------------------------------------------
 * 6. Empty states
 *
 * /courses and /blog each had a designed empty block; /all-instructors had
 * none, so it rendered a blank page. One block now serves all three.
 * ------------------------------------------------------------------------ */

/* .row-cols-xl-3 on the course grid overrides col-12, so the wrapper has to
   claim the full row back. */
.as-empty-state-col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.as-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
    padding: 44px 28px;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(7, 26, 73, .05);
    text-align: center;
}

.as-empty-state > i {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--as-soft-blue);
    color: var(--as-blue);
    font-size: 28px;
    line-height: 1;
}

.as-empty-state h2 {
    margin: 0;
    color: var(--as-navy);
    font-family: var(--tg-heading-font-family, "Poppins", sans-serif);
    font-size: var(--as-heading-sm);
    font-weight: 600;
    line-height: 1.3;
}

.as-empty-state p {
    max-width: 52ch;
    margin: 0;
    color: var(--as-muted);
    font-size: var(--as-text-base);
    line-height: 1.65;
}

.as-empty-state .btn {
    margin-top: 6px;
}

@media (max-width: 575px) {
    .as-empty-state {
        padding: 30px 18px;
    }

    .as-notice {
        padding: 12px 14px;
        font-size: var(--as-text-md);
    }
}


/* ---------------------------------------------------------------------------
 * 7. Shared chrome and cross-page components
 *
 * The theme's greys are a purple family (#7f7e97, #6d6c80, #d3d2df, #e6eaef)
 * that sits beside AquaSafe's blue-slate one without matching it. The header
 * is the one region every page shares, so these four ran on every page of the
 * site while the page below them used the palette.
 * ------------------------------------------------------------------------ */

/* Top bar: address, email and social row, on the navy ground. */
.tg-header__top :where(li, a, span) {
    font-size: var(--as-text-xs);
    line-height: 1.35;
}

.tg-header__top-info li,
.tg-header__top-info li a,
.tg-header__top-info li span {
    color: var(--as-on-dark);
}

.tg-header__top-right li a {
    color: var(--as-on-dark-muted);
}

.tg-header__top-right li a:hover {
    color: #fff;
}

/* Social row. The marks are 16x16 uploads and the fallback is an icon font,
   so left alone they arrive at different sizes and two different whites. The
   homepage sheet used to cap the height without freeing the width, which
   stretched every upload. One square box owns all four here: the images are
   contained inside it rather than resized into it, and the glyph takes the
   same white the images are filtered to. */
.tg-header__top-social .header-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
}

.tg-header__top-social .header-social img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.tg-header__top-social .header-social i {
    color: #fff;
    font-size: var(--as-text-md);
    line-height: 1;
}

/* Course search. */
.tgmenu__search-form {
    border-color: var(--as-line);
}

.tgmenu__search-form input,
.input-grp input {
    color: var(--as-ink);
}

/* Cart and account controls. main.min.css sets these with a literal rather
   than a --tg- name, at `.tgmenu__action > ul li .cart-count` - so matching
   that selector is what it takes to win, not a shorter one. */
.tgmenu__action > ul li .cart-count {
    border-color: var(--as-line);
    color: var(--as-body);
}

.tgmenu__action > ul li .cart-count:hover {
    border-color: var(--as-blue);
    color: var(--as-blue);
}

/* The account control sits next to the cart and should read as its sibling.
   It shipped as a 40px circle holding a 38px <img> whose grey was baked into
   the file: a different shape to the cart, a glyph pressed against its own
   border, and the one control on the bar that could not follow the hover
   colour. Injecting the file (class="injectable") makes it a real <svg>, so
   the fill follows `color` like the cart's does. */
.tgmenu__action > ul li.user_icon .cart-count {
    width: 42px;
    height: 42px;
    border-radius: 7px;
}

.tgmenu__action > ul li.user_icon .cart-count svg,
.tgmenu__action > ul li.user_icon .cart-count img {
    width: 21px;
    height: 21px;
}

/* Course cards. These appear under three different page scopes - /courses,
   the homepage's featured strip and the instructor pages - so the two theme
   literals they carry are corrected once here rather than in each scope. */
.courses__item-tag a {
    background: var(--as-soft);
    color: var(--as-body);
}

.courses__item .avg-rating,
.courses__item-content-follow .avg-rating,
.courses__item-bottom .avg-rating {
    color: var(--as-muted);
}

/* ---------------------------------------------------------------------------
 * 8. The theme's own form panels
 *
 * main.min.css and frontend.min.css set these with literals rather than
 * --tg- names, so the variable remapping in aquasafe-tokens.css cannot reach
 * them: panels #f7f7fa on #e1e1e1, fields on #e1e4e7 or #e6e3f1. That is four
 * more neutrals, on the two pages a visitor is most likely to type into.
 * ------------------------------------------------------------------------ */
.contact-info-wrap .list-wrap li,
.contact-form-wrap,
.singUp-wrap {
    border-color: var(--as-line);
    background: var(--as-soft);
}

.contact-form-wrap .form-grp input,
.contact-form-wrap .form-grp textarea,
.singUp-wrap .form-grp input,
.singUp-wrap .form-grp textarea,
.form-grp select,
.form-grp input,
.form-grp textarea {
    border-color: var(--as-line);
}

.form-check-input {
    border-color: var(--as-line);
}

.form-check-input:checked {
    border-color: var(--as-blue);
    background-color: var(--as-blue);
}

/* Bootstrap renders <code> in a mono face at #d63384, which is the only pink
   on the site and the only third typeface. */
code,
.singUp-wrap code {
    color: var(--as-blue-dark);
    font-family: var(--as-font-body);
}

/* The mobile menu button carried no styling of its own, so it rendered as
   native browser button chrome - a grey #f0f0f0 fill inside a black 2px
   border - in the middle of the header. Its colour comes from the theme. */
.mobile-nav-toggler {
    border: 0;
    background: transparent;
}