@charset "utf-8";
/* ==================================================================
   AvMoz Core Stylesheet — v1
   ==================================================================
   CONTENTS
   1.  ROOT ............ css variables
   2.  BASE ............ body, typography, links, images
   3.  LAYOUT .......... page grid: #outer, #main, headers, hangars
   4.  FORMS ........... basic and dynamic forms
   5.  MODALS .......... pop up modal
   6.  TABLES .......... custom tables
   7.  SIDE PANELS ..... side panels shared
   8.  LEFT MENU ....... based on a side panel
   9.  UTILITIES ....... flex helpers, spacing, visibility
   10. COMPONENTS ...... buttons, badges, tooltips, spinner, ad cards
   11. FEATURES ........ bims (hangar), payments, notices
   12. ANIMATIONS ...... shared @keyframes
   ================================================================== */


/* ==================================================================
   1. ROOT
   ================================================================== */

:root {
    /*  BRAND COLOURS — AFORS family sites */

    --brand-blue: #029ee3;
    --brand-red: #ef242e;

    /*   COLOUR PALETTE */

    --zinc-50:  #FAFAFA;
    --zinc-100: #F4F4F5;
    --zinc-200: #E4E4E7;
    --zinc-250: #D9D9DC;
    --zinc-300: #D4D4D8;
    --zinc-350: #C1C1C8;
    --zinc-400: #A1A1AA;
    --zinc-500: #71717A;
    --zinc-600: #52525B;
    --zinc-700: #3F3F46;
    --zinc-800: #2C2C31;
    --zinc-850: #1F1F23;
    --zinc-900: #18181B;
    --zinc-950: #09090B;

    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-500: #3b82f6;
    --blue-700: #1d4ed8;
    --blue-900: #1e3a8a;

    --navy-100: #E8ECF2;
    --navy-200: #C8D0DC;
    --navy-300: #A3B0C4;
    --navy-400: #7A8FA8;
    --navy-500: #546E8A;
    --navy-600: #3B5070;
    --navy-700: #2B3A55;
    --navy-800: #222D42;
    --navy-900: #1C222E;

    --red-100:  #ffe4e6;
    --red-500:  #ef4444;
    --red-700:  #b91c1c;
    --red-900:  #7f1d1d;

    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;

    --teal-500:  #14b8a6;
    --teal-600:  #0d9488;

    --purple-500: #a855f7;
    --purple-600: #9333ea;

    --white: #ffffff;
    --black: #000000;


    /*  TYPOGRAPHY */

    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.25rem;    /* 20px */
    --font-size-xl:   1.5rem;     /* 24px */
    --font-size-h3:   1.25rem;
    --font-size-h2:   2.25rem;
    --font-size-h1:   2.5rem;


    /* SPACING / GAP */

    --gap-xs:  2px;
    --gap-sm:  3px;
    --gap-md:  5px;
    --gap-lg:  7px;
    --gap-xl:  10px;
    --gap-2xl: 16px;
    --gap-3xl: 24px;


    /* SHADOWS */

    --shadow-sm:    0.25em 0.25em 0.75em rgba(0, 0, 0, 0.15),
    0.125em 0.125em 0.25em rgba(0, 0, 0, 0.10);

    --shadow-md:    0.25em 0.25em 0.75em rgba(0, 0, 0, 0.25),
    -0.125em 0.125em 0.25em rgba(0, 0, 0, 0.25);

    --shadow-lg:    0.5em 0.5em 1em rgba(0, 0, 0, 0.75),
    -0.25em 0.25em 0.5em rgba(0, 0, 0, 0.50);

    --shadow-left:  -2px 0px 4px 0px rgba(0, 0, 0, 0.25);
    --shadow-right:  2px 0px 4px 0px rgba(0, 0, 0, 0.25);

    --shadow-inset:  0px  4px 4px 0px rgba(0, 0, 0, 0.25) inset,
    0px -4px 4px 0px rgba(0, 0, 0, 0.25) inset;


    /* BORDERS */

    --border-shadow-colour:           rgba(24, 24, 24, 0.18);
    --border-highlight-colour:        rgba(255, 255, 255, 0.80);
    --border-highlight-accent-colour: rgba(255, 255, 255, 0.30);

    --border-shadow:           solid 1px var(--border-shadow-colour);
    --border-highlight:        solid 1px var(--border-highlight-colour);
    --border-highlight-accent: solid 1px var(--border-highlight-accent-colour);
    --border-groove:           groove 2px var(--border-highlight-colour);

}

/* ==================================================================
   2. BASE
   ================================================================== */

body {
    background-color: WhiteSmoke;
    background-image: linear-gradient(WhiteSmoke, White);
    width:97vw;

    font-size: 18px;
    font-family:  'DM Sans', 'Segoe UI', sans-serif;
    color: #201f1f;
    /*overflow-x: hidden */;
}

h1, h2, h3, h4 {font-family: "Open Sans", sans-serif; margin:.25em 0 0 .25em; }
h1 {font-size: 1.5em;}
h2, h3, p {font-size: 1em;}

img {border: none;}

a {position: relative;}
a, button { cursor: pointer !important;}
a, a:visited, a:hover {
    color: inherit;
}

tr:nth-child(even) { background-color: lightblue; }
tr p {margin: 2px 1px;}

em { font-style: normal; }

p.smallText   { font-size: var(--fs-small); }
p.smallerText { font-size: smaller; }
p.danger-text { color: #bf0e0e; }

/* ==================================================================
   3. LAYOUT
   ================================================================== */

#outer {
    background-color: WhiteSmoke;
    position: relative;
    z-index: 1;
}

#main>article { position: relative; }
#main>article,
#main>nav,
#main>aside,
#head1 {
    display:flex;
    order:1;
}
#head2 {
    display:flex;
    order:3;
    background-image: linear-gradient(to bottom, #F0FAFF 0%, #CEEAFB 100%);
    height: 30px;
    margin: 0 0 5px 0;
    border-top-left-radius:0;
    border-top-right-radius:0;
    padding: 0 5px 2px 5px;
    vertical-align: top;
}
#head3 {
    display:flex;
    order:2;
    border: 1px solid #F00;
    border-bottom: hidden;
    border-top-left-radius:  7px;
    border-top-right-radius: 7px;
}
#main { order:5;}

/* Responsive page grid */

@media only screen and (max-width: 600px) {
    body { width: 100vw; margin: 4px; }
    #main > nav, #head2, #head3 { display: none; }
    #mainArticle { width: 100vw; margin-left: 0; }
    #main { width: 100%; }
    #foot { width: 95vw; }
}

@media only screen and (max-width: 1100px){
    #mainArticle{width: 96vw;}
    .leaderboard {display:none;}
}


/* ==================================================================
   4. FORMS
   ================================================================== */

details {
    padding: 0;

    background-color: #ffffff;                          /* --wa-color-surface-default */
    border: 1px #e2e8f0 solid;                          /* --wa-panel-border-width / color / style */
    border-radius: 0.5rem;                              /* --wa-panel-border-radius */

    overflow-anchor: none;

    summary {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0.75rem;                               /* --wa-space-m */

        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;

        > * {
            margin: 0;
        }

        &:focus {
            outline: none;
        }

        &:focus-visible {
            outline: 3px solid #93c5fd;                 /* --wa-focus-ring */
            outline-offset: 2px;                        /* --wa-focus-ring-offset */
        }
    }

    &[open] {
        padding: 0 0.75rem 0.75rem 0.75rem;            /* --wa-space-m */

        summary {
            margin-inline: calc(-1 * 0.75rem);
        }
    }

    @media print {
        background: none;
        border: solid 1px #e2e8f0;                      /* --wa-border-width-s / --wa-color-surface-border */

        summary {
            list-style: none;
        }
    }
}
details summary {
    &::marker,
    &::-webkit-details-marker {
        display: none;
    }

    &::after {
        content: '';
        background-color: #94a3b8;                      /* --wa-color-text-quiet */
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
        center no-repeat;
        width: 1rem;
        height: 1rem;
        rotate: 0deg;
    }

    &:dir(rtl)::after {
        rotate: 180deg;
    }
}
details[open] summary::after {
    rotate: 90deg;
}
label {
    display: inline-block;
    position: relative;

    color: #1e293b;                                     /* --wa-form-control-label-color */
    font-weight: 500;                                   /* --wa-form-control-label-font-weight */
    line-height: 1.5;                                   /* --wa-form-control-label-line-height */

    &:has(
        input:not(
            [type='button'],
            [type='checkbox'],
            [type='color'],
            [type='file'],
            [type='hidden'],
            [type='image'],
            [type='radio'],
            [type='reset'],
            [type='submit']
          ),
        textarea,
        select
      ) {
        width: 100%;
    }

    & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
    & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
        /*margin-block-start: 0.5em;*/
    }
}
fieldset {
    padding: 1rem;
    padding-block-start: calc(1rem - 0.5em);

    border: solid 1px #e2e8f0;
    border-radius: 0.375rem;
}
legend {
    padding: 0;
    padding-inline: 0.25rem;

    font-weight: 500;
}
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    height: 2.5rem;
    padding: 0 0.75rem;

    color: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: calc(2.5rem - 1px * 2);
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;

    background-color: #1e293b;
    border-color: transparent;
    border-style: solid;
    border-width: max(1px, 1px);
    border-radius: 0.375rem;

    transition-property: background, border, box-shadow, color;
    transition-duration: 100ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;


    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: 3px solid #93c5fd;                     /* --wa-focus-ring */
        outline-offset: 2px;                            /* --wa-focus-ring-offset */
    }

    &:is(::-moz-focus-inner) {
        border: 0;
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;

        * {
            pointer-events: none;
        }
    }

}
input[type='checkbox'],
label:has(input[type='checkbox']),
input[type='radio'],
label:has(input[type='radio']) {
    display: inline-flex;

    width: fit-content;

    color: #0f172a;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;

    user-select: none;
    -webkit-user-select: none;

    &,
    + label {
        cursor: pointer;
    }

    &:disabled,
    &:has(:disabled) {
        opacity: 0.5;
        cursor: not-allowed;
    }
}
input[type='checkbox'],
input[type='radio'] {
    appearance: none;

    position: relative;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    margin-inline-end: 0.5em;

    background-color: #ffffff;
    border-color: #94a3b8;
    border-style: solid;
    border-width: 1px;

    transition:
            background 200ms,
            border-color 100ms,
            box-shadow 100ms,
            color 100ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    &:focus-visible {
        outline: 3px solid #93c5fd;
        outline-offset: 2px;
    }
}
input[type='checkbox'] {
    --checked-icon-color: #ffffff;
    --checked-icon-scale: 0.8;

    border-radius: min(
            calc(1.125rem * 0.375),
            0.25rem
    );

    &:checked,
    &:indeterminate {
        color: var(--checked-icon-color);

        background-color: #2563eb;
        border-color: #2563eb;
    }

    &:checked::after,
    &:indeterminate::after {
        position: absolute;

        width: 100%;
        height: 100%;

        content: '';

        background-color: currentColor;

        scale: var(--checked-icon-scale);
    }

    &:checked::after {
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
        center no-repeat;
    }

    &:indeterminate::after {
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>')
        center no-repeat;
    }
}
input[type='radio'] {
    --checked-icon-color: #2563eb;
    --checked-icon-scale: 0.75;

    color: transparent;

    border-radius: 50%;

    &:checked {
        color: var(--checked-icon-color);

        border-color: #2563eb;
    }

    &:checked::after {
        content: '';

        aspect-ratio: 1;
        width: round(calc(100% * var(--checked-icon-scale)), 1px);

        background-color: currentColor;
        border-radius: 50%;
    }
}
input:not(
    [type='button'],
    [type='checkbox'],
    [type='color'],
    [type='file'],
    [type='hidden'],
    [type='image'],
    [type='radio'],
    [type='range'],
    [type='reset'],
    [type='submit']
  ), textarea, select {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;

    color: #0f172a;
    font-size: 0.9375rem;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.5;
    vertical-align: middle;

    background-color: #ffffff;
    border-color: #94a3b8;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.375rem;

    transition:
            background-color 200ms,
            border 200ms,
            outline 100ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    cursor: text;

    &::placeholder {
        color: #94a3b8;                                 /* --wa-form-control-placeholder-color */

        user-select: none;
        -webkit-user-select: none;
    }

    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: 3px solid #93c5fd;
        outline-offset: 2px;
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}
textarea {
    height: auto;
    min-height: 2.5rem;
    padding: calc(0.5rem - ((1lh - 1em) / 2)) 0.75rem;

    line-height: 1.5;

    resize: vertical;
}
select {
    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="rgb(180 180 200)" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');

    appearance: none;

    position: relative;

    min-width: 0;
    overflow: hidden;

    background-image: var(--icon-caret), var(--icon-caret);
    background-repeat: no-repeat;
    background-position: center right 0.75rem;
    background-blend-mode: hue, difference;

    cursor: pointer;
}
input[type='color'] {
    display: block;

    block-size: 2.5rem;
    inline-size: 2.5rem;
    padding: calc(1px * 2);

    font-size: 1em;

    background: transparent;
    border: 1px solid #94a3b8;
    border-radius: 0.375rem;

    cursor: pointer;
    forced-color-adjust: none;

    &::-webkit-color-swatch-wrapper {
        padding: 0;
        border-radius: inherit;
    }

    &::-webkit-color-swatch {
        border: none;
        border-radius: calc(0.375rem - 1px * 3);
    }

    &::-moz-color-swatch {
        border: none;
        border-radius: calc(0.375rem - 1px * 3);
    }

    &:focus-visible {
        outline: 3px solid #93c5fd;
        outline-offset: 2px;
    }
}
input[type='range'] {
    --thumb-width: 1.4em;
    --thumb-height: 1.4em;
    --track-size: 0.5em;

    -webkit-appearance: none;

    display: flex;
    flex-direction: column;
    position: relative;

    width: 100%;
    height: var(--track-size);
    margin: 0;

    font-size: inherit;
    line-height: 2.5rem;
    vertical-align: middle;

    background-color: #e2e8f0;
    border-radius: calc(var(--track-size) / 2);

    &::-webkit-slider-runnable-track {
        width: 100%;
        height: var(--track-size);

        border: none;
        border-radius: 999px;
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;

        width: var(--thumb-width);
        height: var(--thumb-height);
        margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);

        background-color: #2563eb;
        border: solid 0.125em #ffffff;
        border-radius: 50%;

        transition-property: background-color, border-color, box-shadow, color;
        transition-duration: 200ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:enabled {
        &:focus-visible::-webkit-slider-thumb {
            outline: 3px solid #93c5fd;
            outline-offset: 2px;
        }

        &::-webkit-slider-thumb {
            cursor: pointer;
        }

        &::-webkit-slider-thumb:active {
            cursor: grabbing;
        }
    }

    &::-moz-focus-outer {
        border: 0;
    }

    &::-moz-range-progress {
        height: var(--track-size);

        background-color: #e2e8f0;
        border-radius: 3px;
    }

    &::-moz-range-track {
        width: 100%;
        height: var(--track-size);

        background-color: #e2e8f0;
        border: none;
        border-radius: 999px;
    }

    &::-moz-range-thumb {
        width: var(--thumb-width);
        height: var(--thumb-height);

        background-color: #2563eb;
        border: solid 0.125em #ffffff;
        border-radius: 50%;

        transition-property: background-color, border-color, box-shadow, color;
        transition-duration: 200ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:enabled {
        &:focus-visible::-moz-range-thumb {
            outline: 3px solid #93c5fd;
            outline-offset: 2px;
        }

        &::-moz-range-thumb {
            cursor: pointer;
        }

        &::-moz-range-thumb:active {
            cursor: grabbing;
        }
    }
}
label > input[type='range'] {
    margin-block-start: 1em;
}
input[type='range']:focus {
    outline: none;
}
input[type='range']:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    &::-webkit-slider-thumb {
        cursor: not-allowed;
    }

    &::-moz-range-thumb {
        cursor: not-allowed;
    }
}
.submit { color: #fff; background-color: darkgreen; }

/* ==================================================================
   5. MODALS
   ================================================================== */
.closeButton { color: inherit; }

@media only screen and (max-width: 600px) {
    #modalContent { width: 95%; }
}

/* ==================================================================
   6. TABLES
   ================================================================== */

/* ==================================================================
   7. SIDE PANELS
   ================================================================== */



aside {display:flex; flex-direction:column; justify-content: flex-start;}

/* ==================================================================
   8. LEFT MENU
   ================================================================== */

/* ==================================================================
   9. UTILITIES
   ================================================================== */

#scriptTime {
    display:flex;
    position:absolute;
    bottom: 10px;
    margin: 0 5px 0 5px;
    text-align: center;
    font-size: .75em;
}

.fr-sa, .fr-sb, .fr-se, .fr-fs { display: flex; flex-direction: row; align-items: center; }
.fr-sa { justify-content:space-around; }
.fr-sb { justify-content:space-between; }
.fr-se { justify-content:space-evenly; }
.fr-fs { justify-content:flex-start; }
.fr-sb .p { padding: .5em; font-size: .85em; }
.fr-sb.odd { background-color: GhostWhite;}
.fr-sb.even { background-color: Gainsboro;}
.p1 { padding: 1rem; }

.lazy {background-image: none;   background-color: #F1F1FA;}

.hidden  { display: none !important; }
.no-fouc { display: none !important; }

.flexColumn { display: flex; flex-direction: column; }
.flexRow    { display: flex; flex-direction: row; align-content: flex-start; align-items: center; }
.flexRow p  { margin: 0 0 0 10px; }
.container  { display: flex; justify-content: space-between; align-content: space-between; }
.row        { display: flex; flex-direction: row; justify-content: space-between; }
.row input  { margin: 0; }
.poc        { display: flex; align-items: center; }

/* overlay position helpers (image overlays/carousel controls) — verify usage */
.left, .right, .top, .bottom { color: white; opacity: 0.95; }
.left, .right { opacity: 1; }
.left  { padding-left: 10px; }
.right { padding-right: 10px; }
.top { top: 25px; }
.mid { top: 50%; }
.bot { top: 94%; }
#left, #right, #bottom { opacity: 0.5; }

/* image frame/stack helpers */
.if { position: relative; width: 100px; height: 100px; }
.is { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ==================================================================
   10. COMPONENTS - reusable elements
   ================================================================== */

/* cta (call to action buttons) */
.cta {
    display: flex;
    gap: 1rem;
}
.cta .btn {
    flex: 1;
}

/* Buttons  and links*/
.btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    margin: 5px 0 5px 0;
    text-align: center;
    color:whitesmoke;
    background-color: #057fbc;
    height: 2.5rem;
}
.btn.btn-primary {
    background: #0863c4;
    color: #f5f5f6;
}
.btn.btn-primary:hover {
    background: #021931;
    color: #f5f5f6;
}
.btn-primary {
    background: #2c5aa0;
    color: white;
}
.btn-primary:hover {
    background: #234a85;
}
.btn-secondary {
    background: #6c757d;
    color: white;
}
.btn-secondary:hover {
    background: #5a6268;
}
.btn-outline {
    background: none!important;
    color: inherit;
    border: 2px solid #2c5aa0!important;
}
.btn-outline:hover {
    background: #057fbc!important;
    color: white!important;
}
.btn-small {
    font-size: 0.8rem;
    padding: 3px 5px;
}
.btn1 {
    display:flex;
    border: none;
    border-radius: 7px;
    padding: 10px 25px 10px 25px;
    text-align: center;
    text-decoration: none;
    margin: 5px 0 5px 0;
}
.btn2 {
    font-size: .8em;
    border: none;
    border-radius: 7px;
    padding: 10px;
    margin: 3px;
    text-align: center;
    text-decoration: none;
    color:whitesmoke;
    background-color: darkgreen;
}

button.text-underline, a.text-underline { text-decoration: underline;}
button.text-underline:hover, a.text-underline:hover { font-weight: bold;}

.notification-bubble {
    position: absolute;
    min-width: 30px;
    width: fit-content;
    aspect-ratio: 1;
    border-radius: 100%;
    border: 4px solid rgb(245, 245, 245);
    background: red;
    transform: translate(18px, -15px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 2px;
    color: white;
}
.pm-msg i {
    position: relative;
}
.pm-msg-count {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    color: #0b0b0b;
    height: 20px;
    width: 20px;
    border-radius: 15px;
    left: 52%;
    top: 20px;
    z-index: 1;
    box-shadow: var(--bs-light);
    font-size: 12px;
    padding-top: 2px;
}

.mlogo {
    margin-left: 75px;
    max-width: 100%;
    pointer-events: none;
    height: 50px;
    width: auto;
}

/* spinner, processing state, errors */
.spinner, .spinner:before, .spinner:after { border-radius: 50%; }
.spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0 auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.spinner:before, .spinner:after {
    position: absolute;
    content: "";
}
.spinner:before {
    width: 10px;
    height: 20px;
    background: #5469d4;
    border-radius: 20px 0 0 20px;
    top: -0.2px;
    left: -0.2px;
    transform-origin: 10px 10px;
    animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
    width: 10px;
    height: 10px;
    background: #5469d4;
    border-radius: 0 10px 10px 0;
    top: -0.1px;
    left: 10px;
    -webkit-transform-origin: 0 10px;
    transform-origin: 0 10px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}

/* Font awesome */
.fad, .fas, .far, .fak {
    color:#FC5185 ;
}
.fa-window-close {
    color:white;
}
.blue-gold { --fa-primary-color: blue; --fa-secondary-color: gold;}
.red-gold  { --fa-primary-color: red;  --fa-secondary-color: gold;}
.red-blue  { --fa-primary-color: red;  --fa-secondary-color: blue;}

/* TODO TOOLTIPS ARE "TURNED OFF" */
/* Tooltips */
[data-accTitle]:hover:after {
    z-index: 999999999;
    visibility: visible;
    transition: all 0.1s ease 0.6s;
    content: attr(data-title);
    position: relative;
    transform: translateY(-50%);
    padding: 10px;
    color: darkslategray;
    background-color: white;
    border: 2px solid blue;
    border-radius: 8px; /* rounded corners */
    width: 600px;
}
/* Default styles (applied to all popups) */
[data-title]:hover:after {
    z-index: 999999999;
    visibility: visible;
    transition: all 0.1s ease 0.6s;
    content: attr(data-title);
    position: absolute;
    transform: translateY(-50%);
    padding: 10px;
    color: darkslategray;
    background-color: white;
    border: 2px solid blue;
    border-radius: 8px; /* rounded corners */
    width: 600px;

    /*    Hidden for now */
    display: none;
}
/* Position the popup to the right */
[data-title][data-position="right"]:hover:after { left: 100%; top: 50% ; z-index: 999999999; }
/* Position the popup to the left */
[data-title][data-position="left"]:hover:after {   right: 100%; left: auto; top:50%; z-index: 999999999;} /* Override the default left value */
/* Position the popup to the top */
[data-title][data-position="top"]:hover:after { bottom: 100%; left: 50%; transform: translateX(-50%); z-index: 999999999;} /* Center horizontally */
/* Position the popup to the bottom */
[data-title][data-position="bottom"]:hover:after { top: 100%; left: 50%; transform: translateX(-50%);  }/* Center horizontally */
[data-title][data-position="right"] svg {
    position: absolute;
    right: 0;
    top: 42%;
    transform: translateY(-50%);
    transform: scaleX(-1);
}
[data-accTitle][data-position="bottom"]:hover:after { top: 100%; left: 50%; transform: translateX(-50%);  }/* Center horizontally */


/* ==================================================================
   11. FEATURES - specific elements
   ================================================================== */

/* bims (hangar) */

.bims:hover {
    z-index: 10; /* Bring to front */
    transform: translateY(-5px) scale(1.02); /* Move Up + Grow */
}
.bims:hover a {
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}
.bims:hover .hover-overlay {
    transform: translateY(0);
}
.bims:hover img {
    transform: scale(1.05);
}
.hover-overlay {
    position: absolute;

    bottom: 0;
    right: 0;

    background-color: #ff6961; /* Pastel Red */
    color: white;

    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top-left-radius: 8px; /* Tab shape */

    /* Start hidden below the bottom edge */
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

    pointer-events: none;
    z-index: 5;
}

.hangar {
    margin: 0;
    padding: 5px;
    vertical-align: top;
}
#left-hangar, #right-hangar {
    position: relative;
    display: flex;
    flex-direction: column;
    width:300px;
    min-width: 300px;
    min-height: 1500px;
    border: thin solid #F00;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    gap: 5px;
    z-index: 1;
}

@media screen and (max-width: 769px) {
    #left-hangar {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        scroll-snap-type: x mandatory;
        border-radius: 7px;
        height: 229px;
        min-height: 229px;
    }
    #left-hangar a {
        flex-shrink: 0;
        max-width: 769px;
        height: 229px;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #left-hangar img {
        height: 231px;
        max-width: calc(100vw - .5rem);
        object-fit: contain;
    }
}
#right-hangar {
    display: none;
}

@media screen and (min-width: 1500px) {
    #right-hangar {
        display: flex;
    }
}
#left-hangar  {order:1;}
#right-hangar {order: 6; }

/* Payments (Stripe) */
#payment-message { color: rgb(105, 115, 134); font-size: 16px; line-height: 20px; padding-top: 12px; text-align: center; }
#payment-element { margin-bottom: 24px; }

/* TOP Navigation menu buttons */
.menu-buttons-container .top-menu-button {
    font-size: 1.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 1);
}
.menu-buttons-container .top-menu-button.first {
    border-left: none;
}
.menu-buttons-container .top-menu-button.last {
    border-right: none;
}
.menu-buttons-container i {
    --fa-primary-color: var(--afors-red);
    --fa-secondary-color: var(--afors-blue);
    --fa-secondary-opacity: 1.0;   /* Ensure stripes are solid for readability */
}

@media screen and (max-width: 480px) {
    .menu-buttons-container .top-menu-button {
        font-size: 1.2rem;
    }
}
@media screen and (min-width: 526px){
    .menu-buttons-container {
        background: none;
    }
    .menu-buttons-container .top-menu-button {
        border: none;
    }
}


/* Content notices and user messages */
#glitches {
    text-align: left;             /* 1. Explicit Left Alignment */
    margin-top: 40px;             /* 2. Decent Top Margin */
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;             /* Constrain width for better readability */

    /* 3. Subtle Colour Difference */
    background: rgba(255, 255, 255, 0.08);
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
    border-radius: 8px;

    /* Typography */
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}
#glitches p {
    margin: 0;
}
#glitches br {
    display: block;
    margin-bottom: 8px;
    content: "";
}
.message.security-notice {
    background-color: #f0f7ff; /* Very light blue tint */
    border-left: 5px solid #0056b3; /* Deep Blue high-visibility border */
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;

    /* Typography for AAA Compliance */
    color: #002d5b; /* Deep Navy - High Contrast */
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}
.message.security-notice strong {
    color: #004085;
    font-weight: 700;
}
#contact-warning.alert-warning-box {
    background-color: #fff3cd; /* Soft Warning Yellow */
    border: 2px solid #856404; /* Deep Gold Border for structure */
    color: #212529;             /* Near-Black for maximum readability */

    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    /* Ensure the box stands out against the accordion background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#contact-warning.alert-warning-box i {
    color: #856404; /* Match border for harmony */
    font-size: 1.4rem;
    margin-top: 2px;
}
#contact-warning.alert-warning-box strong {
    color: #533f03; /* Darker shade of gold for emphasis */
    font-weight: 700;
}
#contact-warning.alert-warning-box p {
    margin: 0;
    line-height: 1.6;
}
#online {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* ==================================================================
   12. ANIMATIONS
   ================================================================== */

@-webkit-keyframes loading {
    0% {  transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}
@keyframes loading {
    0%   {transform: rotate(0deg); }
    100% {transform: rotate(360deg);}
}

.slide-down { animation: slideDown 0.5s ease-in-out; }
.slide-up   { animation: slideUp 0.5s ease-in-out;}

@keyframes slideDown {
    from {transform: translateY(0); }
    to   {transform: translateY(100%); }
}
@keyframes slideUp {
    from {transform: translateY(100%); }
    to   {transform: translateY(0); }
}
/* END */