@charset "utf-8";
/* ==================================================================
   AvMoz Core Stylesheet — v1
   ==================================================================
   CONTENTS
   0.  RESETS .......... reset default styles
   1.  ROOT ............ css variables, colours
   2.  BASE ............ body, typography, links, images
   3.  LAYOUT .......... page grid: #outer, #main, headers, hangars, footer
   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

   ================================================================== */

/* ==================================================================
   0. resets
   ================================================================== */

/* https://piccalil.li/blog/a-modern-css-reset/ */
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Remove default margin */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 {line-height: 1;}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'], ol[role='list'] { list-style: none; }

/* Set core root defaults */
html:focus-within { scroll-behavior: smooth; }

/* Set core body defaults */
body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.6; }

/* A elements that don't have a class get default styles */
a:not([class]) { text-decoration-skip-ink: auto; }

/* Make images easier to work with */
img, picture, video {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select { font: inherit; }

a, button {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
}
a:visited {
    color: inherit;
}


/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

:root {

    /* =============================================
       BRAND COLOURS — AvMoz family sites
       ============================================= */

    --afors-blue: #2b78ca;
    --afors-red:  #D8334A;
    --brand-blue: var(--afors-blue);
    --brand-red:  var(--afors-red);


    /* =============================================
       COLOUR PALETTE — general-purpose scales
       ============================================= */

    --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:  #880808;
    --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;

    /* legacy aliases (same values) */
    --fs-h1:    var(--font-size-h1);
    --fs-h2:    var(--font-size-h2);
    --fs-h3:    var(--font-size-h3);
    --fs-body:  var(--font-size-base);
    --fs-small: var(--font-size-xs);
    --font-size-small: var(--font-size-xs);


    /* =============================================
       SPACING / GAP
       ============================================= */

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

    /* legacy aliases (same values) */
    --gap-xsmall: var(--gap-xs);
    --gap-small:  var(--gap-sm);
    --gap-regular: var(--gap-md);
    --gap-large:  var(--gap-lg);
    --gap-xlarge: var(--gap-xl);


    /* =============================================
       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;

    /* legacy aliases (same values; --bs flips to heavy in dark mode below) */
    --bs:       var(--shadow-md);
    --bs-light: var(--shadow-sm);
    --bs-heavy: var(--shadow-lg);
    --bs-left:  var(--shadow-left);
    --bs-right: var(--shadow-right);
    --bs-inset: var(--shadow-inset);

    /* flyins-specific */
    --bs-inset-ticket: 0px -4px 4px 3px rgba(0, 0, 0, 0.1) inset,
    0px -2px 8px 4px rgba(0, 0, 0, 0) inset;

    /* Text shadows */
    --calendar-emboss-ts: 0 1px 0 rgb(250, 250, 250), 0 -1px 0 rgba(51, 51, 51, 0.7);


    /* =============================================
       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);

    /* legacy aliases — follow the canonical names automatically,
       including through the dark-mode overrides */
    --border-shadow-clr:           var(--border-shadow-colour);
    --border-highlight-clr:        var(--border-highlight-colour);
    --border-highlight-accent-clr: var(--border-highlight-accent-colour);

    --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);

    --border-form-input:     solid 1px var(--zinc-500);
    --border-menu-shadow:    solid 1px rgba(24, 24, 24, .9);
    --border-menu-highlight: solid 1px rgba(255, 255, 255, 0.10);


    /* =============================================
       SEMANTIC TOKENS (light mode)
       ============================================= */

    /* Text */
    --text-primary: var(--zinc-950);
    --text-contrast: var(--zinc-100);
    --text-secondary: var(--zinc-700);
    --text-danger: #CE3636;
    
    --primary-contrast-text: var(--zinc-50);
    --flyins-logo-text: var(--zinc-400);
    --primary-links: var(--zinc-700);
    --danger-text: #CE3636;
    --event-text: #262626;
    --calender-emboss-clr: var(--zinc-350);

    /* Backgrounds */
    --body-bg: var(--zinc-350);
    --component-bg: var(--zinc-200);
    --bg-component-light: var(--zinc-50);
    --component-shadow-bg: var(--zinc-200);
    --panel-bg: var(--zinc-350);
    --component-notch: var(--zinc-400);
    --header-bg: var(--zinc-400);
    --accent-bg: #8fcaf4;
    --menu-bg: #1C222E;
    --dotted-bg: rgba(23, 23, 23, 0.3);
    --ticket-bg: var(--zinc-250);
    --component-lighter-bg: var(--zinc-100);
    --calendar-day-prev-bg: #E8E9E9;
    --calendar-event-bg: #5ED6D6;
    --calendar-event-focus-bg: #5dbfbf;
    --grid-odd-bg: var(--zinc-200);
    --grid-even-bg: var(--zinc-300);

    /* Hovers */
    --component-hover: var(--zinc-300);
    --panel-hover: var(--zinc-400);
    --accent-hover: #7cb3da;

    /* Buttons */
    --primary-btn-bg: #50b2dd;
    --primary-btn-focus-bg: #4dacd6;
    --primary-btn-active: #4dacd6;
    --secondary-btn-bg: #1e6faa;
    --secondary-btn-focus-bg: #165583;
    --inactive-btn-bg: var(--zinc-400);
    --inactive-btn-focus: var(--zinc-500);
    --success-btn-bg: #65c814;
    --success-btn-focus-bg: #50A40C;
    --danger-btn-bg: #f44848;
    --danger-btn-focus-bg: #FE3535;
    --cta-btn-bg-before: rgba(56, 117, 140, 0.32);
    --cta-btn-grad-after: linear-gradient(92.83deg, #3f8eac 0, #1e78ba 100%);
    --cta-btn-grad-active: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #3f8eac 0, #1e78ba 100%);
    --btn-white-bg: var(--zinc-50);
    --btn-white-foucs: #ffffff;   /* [sic] typo preserved — rename with its consumers */
    --btn-success-bg: #65c814;
    --btn-danger-bg: BloodRed;

    /* Links */
    --primary-link-clr: var(--zinc-850);
    --primary-link-bg: var(--zinc-350);
    --primary-link-text-shadow: 1px 1px var(--zinc-50);

    /* Forms */
    --form-input-bg: var(--zinc-100);
    --form-input-focus-bg: var(--zinc-50);
    --form-input-border: #b6b6b9;
    --form-submit-btn-bg: #8AE734;
    --form-submit-btn-clr: var(--zinc-850);

    /* Labels */
    --label-text: var(--zinc-50);
    --label-text-contrast: var(--zinc-950);
    --label-scheduled: #81f381;
    --label-cancelled: #F35044;
    --label-postponed: #5E82F7;
    --label-draft: var(--zinc-500);
    --label-default: #85CFEA;
    --label-flyin: #DF586A;
    --label-airrace: #F5E960;
    --label-drone: #55D6C2;
    --label-competition: #AFA6C9;
    --label-airshow: #82AEDE;
    --label-flypast: #F56476;
    --label-openday: #90c64b;
    --label-tradeshow: #E84FBF;
    --label-record: #6fdde4;
    --label-charity: #DBB21F;
    --label-youth: #36D3C1;
    --label-conference: #F7996E;
    --label-education: #05EB93;
    --label-music: #FC6F3B;

    /* Statuses */
    --pending-bg: #f6ec94;
    --pending-clr: var(--zinc-900);
    --confirmed-bg: #b1ebb1;
    --confirmed-clr: var(--zinc-900);
    --cancelled-bg: #fbabab;
    --cancelled-clr: var(--zinc-900);
    --refunded-bg: #fbabab;
    --refunded-clr: var(--zinc-900);


    /* =============================================
       MENU DUOTONE ICONS
       ============================================= */

    --fa-secondary-opacity: .4;
    --icon-user: #5ca357;
    --icon-home: #3e5e8a;
    --icon-user-gear: #7a314d;
    --icon-heart: #b11e1e;
    --icon-ticket-airline: #765bb8;
    --icon-plane-arrival: #e65a00;
    --icon-sitemap: #dba21b;
    --icon-question: #2e7232;
    --icon-envelope: #1564a8;
    --icon-user-pen: #3d78bb;
    --icon-right-from-bracket: #cc1955;
    --icon-right-to-bracket: #89229c;
    --icon-megaphone: #7dd008;
    --icon-cards: #00d08b;
    --icon-lock-forgot-password: #d8362a;
    --icon-lock-forgot-username: #36439d;
}

.fa-avmoz-colours {
    --fa-primary-color: var(--brand-red);
    --fa-secondary-color: var(--brand-blue);
    --fa-secondary-opacity: 1;
}

/* Primary Icon Colours */
.fa-green  { color: #5ca357; }
.fa-blue   { color: #55a5ff; }
.fa-red    { color: #e35d5d; }
.fa-orange { color: #e09c10; }
.fa-purple { color: #9b59b6; }
.fa-cyan   { color: #00ced1; }
.fa-pink   { color: #ff69b4; }
.fa-amber  { color: #ffbf00; }
.fa-indigo { color: #6666ff; }
.fa-slate  { color: #c5cbd3; }

/* Submenu Variants (Lighter) */
.fa-green-submenu  { color: #b7dfb4; }
.fa-blue-submenu   { color: #55a5ff; }
.fa-red-submenu    { color: #f1aeae; }
.fa-orange-submenu { color: #e09c10; }
.fa-purple-submenu { color: #d7bde2; }
.fa-cyan-submenu   { color: #afeeee; }
.fa-pink-submenu   { color: #ffc0cb; }
.fa-amber-submenu  { color: #ffe4b5; }
.fa-indigo-submenu { color: #b3b3ff; }
.fa-slate-submenu  { color: #cbd5e1; }

/* =============================================
   GRADIENT BACKGROUNDS
   ============================================= */

.theme-blue-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, var(--brand-blue) 100%) !important;
    color: white !important;
}

.theme-blue-gradient-subtle {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: var(--text-primary) !important;
}

.theme-red-gradient {
    background: linear-gradient(135deg, #7f1d1d 0%, var(--brand-red) 100%) !important;
    color: var(--text-contrast) !important;
}

.theme-red-gradient-subtle {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    color: var(--text-primary) !important;
}

.theme-green-gradient {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    color: var(--text-contrast) !important;
}

.theme-amber-gradient {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
    color: var(--text-contrast) !important;
}

.theme-dark-gradient {
    background: linear-gradient(135deg, var(--zinc-900) 0%, var(--zinc-700) 100%) !important;
    color: var(--text-contrast) !important;
}

.theme-light-gradient {
    background: linear-gradient(135deg, var(--zinc-50) 0%, var(--zinc-200) 100%) !important;
    color: var(--text-primary) !important;
}


/* =============================================
   SOLID BACKGROUNDS
   ============================================= */

.theme-blue-solid {
    background-color: var(--brand-blue) !important;
    color: var(--text-contrast) !important;
}

.theme-blue-solid-subtle {
    background-color: #eff6ff !important;
    color: var(--text-primary) !important;
}

.theme-red-solid {
    background-color: var(--brand-red) !important;
    color: var(--text-contrast) !important;
}

.theme-red-solid-subtle {
    background-color: #fff1f2 !important;
    color: var(--text-primary) !important;
}

.theme-green-solid {
    background-color: var(--btn-success-bg) !important;
    color: var(--text-contrast) !important;
}

.theme-amber-solid {
    background-color: #f59e0b !important;
    color: var(--text-contrast) !important;
}

.theme-dark-solid {
    background-color: var(--zinc-900) !important;
    color: var(--text-contrast) !important;
}

.theme-light-solid {
    background-color: var(--bg-component-light) !important;
    color: var(--text-primary);
}

.theme-white-solid {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
}


/* =============================================
   TEXT COLOURS
   ============================================= */

.theme-text-brand-blue  { color: var(--brand-blue); }
.theme-text-brand-red   { color: var(--brand-red); }
.theme-text-primary     { color: var(--text-primary); }
.theme-text-secondary   { color: var(--text-secondary); }
.theme-text-muted       { color: var(--text-muted); }
.theme-text-contrast    { color: var(--text-contrast); }
.theme-text-danger      { color: var(--text-danger); }
.theme-text-green       { color: var(--btn-success-bg); }
.theme-text-amber       { color: #f59e0b; }


/* =============================================
   BORDER ACCENT COLOURS
   Used with highlight-panel (which uses currentColor for its left border)
   and feature-card/media-card hover states.
   ============================================= */

/* Left border accent — works with highlight-panel's border-left: currentColor */
.theme-blue-left-border {
    color: var(--text-primary);
    background-color: #eff6ff !important;
}

.theme-red-left-border {
    color: var(--brand-red) !important;
    background-color: #fff1f2 !important;
}

.theme-green-left-border {
    color: #16a34a !important;
    background-color: #f0fdf4 !important;
}

.theme-amber-left-border {
    color: #f59e0b !important;
    background-color: #fffbeb !important;
}

.theme-dark-left-border {
    color: var(--zinc-700) !important;;
    background-color: var(--bg-component-light) !important;
}

/* Full border accent — for feature-card and media-card hover */
.theme-blue-border-accent {
    border-color: var(--brand-blue) !important;
}

.theme-red-border-accent {
    border-color: var(--brand-red) !important;
}

.theme-green-border-accent {
    border-color: #16a34a !important;
}

.theme-amber-border-accent {
    border-color: #f59e0b !important;
}

.theme-dark-border-accent {
    border-color: var(--zinc-700) !important;
}

/* Card icon colour — pairs with feature-card's .card-icon */
.theme-blue-border-accent  .card-icon { color: var(--brand-blue) !important;; }
.theme-red-border-accent   .card-icon { color: var(--brand-red) !important;; }
.theme-green-border-accent .card-icon { color: #16a34a !important;; }
.theme-amber-border-accent .card-icon { color: #f59e0b !important;; }

/* Card hover border — override the hover state per theme */
.theme-blue-border-accent:hover  { border-color: var(--brand-blue) !important; }
.theme-red-border-accent:hover   { border-color: var(--brand-red) !important; }
.theme-green-border-accent:hover { border-color: #16a34a !important; }
.theme-amber-border-accent:hover { border-color: #f59e0b !important; }

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

body {
    background-color: WhiteSmoke;
    background-image: linear-gradient(WhiteSmoke, White);
    font-size: 18px;
    font-family:  'DM Sans', 'Segoe UI', sans-serif;
    color: #201f1f;
    /*width: 100vw;*/
    /*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;}

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; }


body {
    background-color: var(--zinc-350);
    color:            var(--zinc-950);
}

.text-primary  { color: var(--zinc-850);  }
.text-contrast { color: var(--zinc-100);  }
.text-muted    { color: var(--zinc-500);  }
.text-danger   { color: var(--red-500);   }
.text-success  { color: var(--green-600); }
.text-brand    { color: var(--brand-blue);}





/* =============================================
   FORMS
   ============================================= */

input,
select,
textarea {
    background-color: var(--zinc-100);
    border: solid 1px var(--zinc-400);
    color: var(--zinc-950);
    border-radius: 4px;
    padding: var(--gap-md) var(--gap-lg);
    font-size: var(--font-size-base);
}

input:focus,
select:focus,
textarea:focus {
    background-color: var(--zinc-50);
    outline: 2px solid var(--brand-blue);
}


/* =============================================
   NAVIGATION / MENU
   ============================================= */

nav, .menu {
    background-color: #1C222E;
    border-bottom: solid 1px rgba(24, 24, 24, 0.90);
    border-top:    solid 1px rgba(255, 255, 255, 0.10);
    color: var(--zinc-50);
}


/* =============================================
   GRID / TABLE ROWS
   ============================================= */

.grid-row:nth-child(odd)  { background-color: var(--zinc-200); }
.grid-row:nth-child(even) { background-color: var(--zinc-300); }


/* =============================================
   STATUS BADGES
   ============================================= */

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.status-pending   { background-color: #f6ec94; color: var(--zinc-900); }
.status-active    { background-color: #b1ebb1; color: var(--zinc-900); }
.status-cancelled { background-color: #fbabab; color: var(--zinc-900); }
.status-refunded  { background-color: #fbabab; color: var(--zinc-900); }


/* =============================================
   CATEGORY LABELS
   Replace colour values with your MFORS categories.
   ============================================= */

.label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--zinc-50);
}

.label-default     { background-color: #85CFEA; }
.label-category-1  { background-color: #DF586A; }   /* e.g. Sport     */
.label-category-2  { background-color: #b5a80a; }   /* e.g. Cruiser   */
.label-category-3  { background-color: #55D6C2; }   /* e.g. Touring   */
.label-category-4  { background-color: #AFA6C9; }   /* e.g. Off-road  */
.label-category-5  { background-color: #82AEDE; }   /* e.g. Scooter   */
.label-category-6  { background-color: #F56476; }   /* e.g. Electric  */
.label-category-7  { background-color: #90c64b; }   /* e.g. Classic   */
.label-category-8  { background-color: #E84FBF; }   /* e.g. Naked     */


/* =============================================
   MENU ICONS (Font Awesome duotone)
   ============================================= */

.fa-duotone { --fa-secondary-opacity: 0.4; }

.icon-user        { --fa-primary-color: #5ca357; }
.icon-home        { --fa-primary-color: #3e5e8a; }
.icon-settings    { --fa-primary-color: #7a314d; }
.icon-favourite   { --fa-primary-color: #b11e1e; }
.icon-listing     { --fa-primary-color: #765bb8; }
.icon-search      { --fa-primary-color: #e65a00; }
.icon-admin       { --fa-primary-color: #dba21b; }
.icon-help        { --fa-primary-color: #2e7232; }
.icon-message     { --fa-primary-color: #1564a8; }
.icon-edit        { --fa-primary-color: #3d78bb; }
.icon-logout      { --fa-primary-color: #cc1955; }
.icon-login       { --fa-primary-color: #89229c; }
.icon-promote     { --fa-primary-color: #7dd008; }
.icon-dashboard   { --fa-primary-color: #00d08b; }
.icon-password    { --fa-primary-color: #d8362a; }
.icon-username    { --fa-primary-color: #36439d; }

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

#outer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background-color: WhiteSmoke;
    position: relative;
    z-index: 1;
}

#topHeader {
    display: flex;
    align-items: center;
    height: 90px;
}
#main {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: .5rem;
    width:100%;
    min-height: calc(100vh - 100px);
    gap: .5rem;
}
#main>article { position: relative; }
#main>article,
#main>nav,
#main>aside {
    display:flex;
    order:1;
}

#main { order:5;}

#main>nav {
    order:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
}

#main>article {
    order:2;
    flex-direction: column;
    width: 100%;
    flex: 1;
    max-width: 1500px;
    margin: 0 auto;
    overflow: scroll;
    z-index: 1;
}
#main>article>h1:first-of-type {
    margin: 20px 0;
}


/* Laptops, desktops and larger tablets */
@media screen and (min-width: 769px) {
    #main {
        flex-direction: row;
        margin-top: 0;
        padding-left: 0;
    }
}

/* FOOTER */
.site-footer {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 7px;
    margin: 20px 0 0 0;
    background: whitesmoke;
    color: #121111;
}

.site-footer .footer-info {
    display: flex;
    gap: 30px;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 330px;
}

.site-footer .footer-main {
    flex: 2;
    max-width: 650px;
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

/* THE FIX: Shields against global <nav> styles bleeding in */
.site-footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    min-width: 185px;
    flex: 1;
    background: transparent !important; /* Overrides global nav backgrounds */
    height: auto !important;            /* Stops them stretching down */
    padding: 0 !important;              /* Resets global nav padding */
    margin: 0 !important;               /* Resets global nav margin */
}

.footer-links__header {
    margin: 0 0 10px 0;
    font-weight: bold;
    font-size: 1.1rem;
    color: #121111;
}

/* Link Styling - Bulletproofed */
.site-footer .footer-links a,
.site-footer .footer-links button {
    color: #121111 !important;
    text-decoration: underline !important;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
    display: block;
    width: 100%;
    text-align: left;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links button:hover {
    font-weight: 700;
    text-decoration: none !important;
}

.site-footer .footer-main p {
    display: block;
    text-align: left;
    line-height: 1.5;
    margin: 0;
}

.footer-main__header {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

/* -----------------------------------------
   Footer Copyright Layout Architecture
   ----------------------------------------- */
.footer-copyright {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #0b121e;
    padding: 25px 0;
    margin-top: auto;
    border-radius: 0 0 7px 7px;
}

.footer-copyright__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright__legal {
    font-size: 0.85rem;
    line-height: 1.5;
    color: white;
}

.footer-copyright__bespoke {
    display: none;
    text-align: right;
    font-size: 0.85rem;
    line-height: 1.5;
    color: white;
}

/* Mobile & Tablet adjustments */
@media (max-width: 900px) {
    .site-footer .footer-info {
        flex-wrap: wrap;
        height: auto;
        padding-bottom: 30px;
    }

    .site-footer .footer-links {
        flex-basis: calc(50% - 15px);
        min-width: auto;
    }

    .site-footer .footer-main {
        flex-grow: 1;
        flex-basis: 100%;
        order: 3;
        padding: 0;
        margin-top: 30px;
    }
}

/* Desktop adjustments */
@media (min-width: 992px) {
    .footer-copyright__bespoke {
        display: block;
        padding-right: 80px;
    }
}


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

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Style for the non-bulleted headings in the list */
.list-heading {
    list-style-type: none; /* Removes the bullet point */
    font-weight: bold;     /* Makes the heading text bold */
    margin-top: 10px;      /* Adds some space above the heading */
}

/* Styles the nested list to create the indentation */
.indented-list {
    /* Adjust this value to control the amount of indentation */
    padding-left: 20px;
    margin-top: 5px; /* Adds a little space below the heading */
}

/* This ensures all your list items (including the indented ones) have no default bullets */
.membership-type ul li {
    list-style-type: none;
}



.text-field {
    gap: 15px;
}

.form-cta {
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.form-cta .form-btn,
.form-cta .btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-cta .form-btn.cancel {
    background: #2b2b2b;
}
.w100 {width: 100%;}
.h250{height: 250px;}
.rc7 {  border-radius: 7px;}
wa-icon {
    padding-right: 10px;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group-icon {
    display: flex;
    gap: 10px;
    align-items: center;
}
.form-group-icon i,
.form-group-icon svg,
.form-group-icon button {
    width: 25px;
    display: flex;
    justify-content: center;
}
.form-link-icon {
    display: flex;
    gap: 10px;
    padding: 0;
}
.form-link-icon i,
.form-link-icon svg {
    width: 25px;
}
.p1 p{
    margin: 1px;
    padding: 0px;
}
.updown{
    margin-bottom:  20px;
}
.updown a{
    padding: 10px;
    --fa-primary-color: #164cd4;
    --fa-secondary-color: #dd3687;
}

.btns{
    justify-content: flex-start;
    position: relative;
}
.btns a{
    margin:1px;
    padding: 10px;
}
#actualSubmit{
    padding: 10px;
    font-size: 1em  ;
}
.input-transparent-90per{
    width:90%;
    font-size: 1.25em;
    color: #000;
    background-color:transparent;
    border: medium #ED686A solid;
}
.input-transparent-100pix{
    width: 100px;
    color: #727070;
    background-color: transparent;
    border: medium #ED686A solid;
}

#card-errors{
    color: #F43A3D;
}


.input-group button {
    margin-left: 10px; /* Adjust spacing as needed */
}

.radio-fields .fr {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Adjust spacing as needed */
}

.radio-fields label {
    width: 90%; /* Adjust width as needed */
}
.radio-fields .fr {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.radio-fields label {
    /*  width: 150px; /* Adjust width as needed */
    margin-right: 50px; /* Add margin between label and input */
}

.radio-fields input[type="radio"] {
    margin-right: 5px; /* Add margin between input and button */
}


.initPrompt  { border: #ccc 3px solid; }
.errorPrompt { border: red 3px solid; background: sandyBrown;	}
.goodPrompt  { border: green 3px solid; background: #C4F7CE;}
.ep2, .ep1 {color:#FC5185;}
.ep1 {margin:-8px 0 20px 0;   }
.w100 {width: 100%;}

.floating-label .ep1 {
    margin: 0;
}

/* Changes made by Nick 10/09/25 */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.form-fields-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input, select, textarea {
    background-color: #F4F4F5FF;
    border: solid 1px #A1A1AAFF;
    border-radius: 4px;
    padding: 5px 10px;
}


details {
    padding: 0;

    background-color: #ffffff;
    border: 1px #e2e8f0 solid;
    border-radius: 0.5rem;

    overflow-anchor: none;

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

        padding: 0.75rem;

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

        > * {
            margin: 0;
        }

        &:focus {
            outline: none;
        }

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

    &[open] {
        padding: 0 0.75rem 0.75rem 0.75rem;

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

    @media print {
        background: none;
        border: solid 1px #e2e8f0;

        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;
}

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;

        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; }

#modalBox {
    position: fixed;
    transition: transform 0.3s ease-in-out;

}

#modalBox.openModal {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    background-size: 10px 10px; /* Adjust the spacing between dots */
    top: 0;
    bottom: 0;
}

#modalBox .closeButton {
    font-size: .75rem;
}

.modal-content {
    background: lightgrey;
    width: 80%;
    max-width: 800px;
    border-radius: 5px;
    overflow-y: auto;
    max-height: 80vh;
    z-index: 1002;
    box-shadow: var(--bs-heavy);
}
.modal-body {
    padding: 1rem 2rem;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px rgba(24,24,24,0.18);
    padding: 1rem 2rem;

}
.modal-content form,
.modal-content .modal-message {
    border-top: solid 1px rgba(255,255,255,0.8);
    padding: 1rem 2rem;
    overflow-y: auto;
    max-height: 70vh;
}

/*.modal-content form #actualSubmit {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    width: calc(100% - 4rem);*/
/*    margin-bottom: 1rem;*/
/*}*/
#modalBox .countdown {
    padding: 0 2rem 1rem 2rem;
    color: var(--danger-text);
}

@media screen and (max-width: 450px) {
    .modal-content {
        width: 100%;
        max-height: 90vh;
    }
    .modal-header,
    .modal-content form {
        padding: 1rem;
    }
}

.form-with-icon-container {
    display: flex;
    flex-direction: column;
    margin-bottom: .75rem;
}
.form-input-with-icon {
    display: flex;
    align-items: center;
}
.form-input-with-icon i,
.form-input-with-icon svg {
    color: var(--primary-links);
    width: 30px;
    min-width: 30px;
}
.form-input-with-icon input {
    flex: 1;
    margin: 0;
}

.modal-user-message-container {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media screen and (max-width: 450px) {
    #modalBox.openModal {
        position: fixed;
        bottom: 0;
        width: 100vw;
        min-height: 0;
        box-shadow: var(--bs-heavy);
        background: whitesmoke;
        z-index: 1001;
        border-radius: 5px 5px 0 0;
    }
}



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

/* =============================================
   TABLE.CSS — Restyled to match the new design system.
   Uses the same class names as the existing table
   markup so no HTML changes are needed.
   All values reference variables from root.css.
   ============================================= */


/* ---- Wrapper -------------------------------- */

.table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.modal-table-container {
    padding: 0 1rem;
}


/* ---- Table base ----------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    font-size: var(--font-size-base);
    background: white;
}


/* ---- Header --------------------------------- */

.table__thead {
    background-color: var(--brand-blue);
    color: white;
}

.table__th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.table__th:hover {
    background-color: var(--blue-700);
}

.table__th.center {
    text-align: center;
}


/* ---- Body rows ------------------------------ */

.table__tbody {
    /* block layout handled in responsive section */
}

.table-row {
    border-bottom: 1px solid var(--zinc-200);
    transition: background-color 0.15s ease;
}

.table-row:nth-child(odd)  { background-color: var(--zinc-50); }
.table-row:nth-child(even) { background-color: var(--zinc-100); }

.table-row:hover {
    background-color: var(--blue-100);
}

.table-row:last-child {
    border-bottom: none;
}


/* ---- Cells ---------------------------------- */

.table-row__td {
    padding: 12px 16px;
    vertical-align: middle;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5;
    border: none;
    position: relative;
}

.table-row__td.center {
    text-align: center;
}

.table-row__td.center button {
    margin: 0 auto;
}


/* ---- Cell utilities ------------------------- */

.table-row__small {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

.table-row__img {
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.table-row__cta {
    display: flex;
    gap: var(--gap-sm);
}

.table-row__cta button {
    flex: 1;
}

.truncate {
    max-width: 135px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ---- Status indicators ---------------------- */

.status--green  { color: var(--btn-success-bg); }
.status--red    { color: var(--btn-danger-bg); }
.status--blue   { color: var(--brand-blue); }
.status--yellow { color: var(--amber-500); }
.status--grey   { color: var(--text-muted); }

.status--green::before,
.status--red::before,
.status--blue::before,
.status--yellow::before,
.status--grey::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.status--green::before  { background-color: var(--btn-success-bg); }
.status--red::before    { background-color: var(--btn-danger-bg); }
.status--blue::before   { background-color: var(--brand-blue); }
.status--yellow::before { background-color: var(--amber-500); }
.status--grey::before   { background-color: var(--text-muted); }


/* ---- Row select checkbox -------------------- */

.table--select-all,
.table__select-row {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    margin: 0 0 0 5px;
    vertical-align: middle;
    border: 2px solid var(--zinc-400);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.table__select-row:hover {
    border-color: var(--brand-blue);
}

.table__select-row:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3 4L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 10px;
    background-repeat: no-repeat;
}


/* =============================================
   RESPONSIVE — collapses to cards below 768px
   ============================================= */

@media screen and (max-width: 768px) {

    .table-container {
        box-shadow: none;
    }

    .table__thead {
        display: none;
    }

    .table__tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--gap-2xl);
        padding: var(--gap-2xl) 0;
    }

    .table-row {
        display: block;
        border: 2px solid var(--zinc-200);
        border-radius: 10px;
        background-color: white !important;
        box-shadow: var(--shadow-sm);
        padding: var(--gap-lg) var(--gap-2xl);
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .table-row:hover {
        border-color: var(--brand-blue);
        box-shadow: var(--shadow-md);
        background-color: white !important;
    }

    .table-row__img {
        width: 42px;
        height: 42px;
        margin-bottom: var(--gap-lg);
    }

    .table-row__td {
        display: flex;
        align-items: flex-start;
        padding: 6px 0;
        border: none;
        gap: var(--gap-xl);
    }

    .table-row__td::before {
        content: attr(data-column);
        color: var(--text-muted);
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        min-width: 100px;
        flex-shrink: 0;
        padding-top: 2px;
    }

    .table__select-row {
        display: none;
    }

    .table-row__cta {
        padding-top: var(--gap-md);
    }

}

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

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

.sidePanel {
    z-index: 98;

    position: fixed;
    overflow-x: hidden; /* Prevent horizontal overflow */
    padding: 0;
    font-size: 1.2em;
    background-color: #1C222E; /* Set the default background color */
    transition: left 0.6s ease-in-out, right  0.6s ease-in-out,
    top  0.6s ease-in-out, bottom 0.6s ease-in-out; /* Add transitions for all sides */
}
.sidePanel.top {
    left: 0;
    right: 0;
    top: -270px; /* Initially hidden at the top */
    height: 270px;
}
.sidePanel.bottom {
    left: 0;
    right: 0;
    bottom: -570px; /* Initially hidden at the bottom */
    height: 570px;
    font-size: 1.25em;
    overflow-y: scroll;
}
.sidePanel.left {
    top: 0;
    left: -330px; /* Initially hidden to the left */
    bottom: 0;
    width: 330px;
    overflow-y: hidden; /* or overflow-y: scroll gives one the y-scroll bar on the element; */
    overflow-x: hidden;
    padding: 0;
}
.sidePanel.right {
    top: 0;
    right: -330px; /* Initially hidden to the right (adjust width if needed) */
    bottom: 0;
    width: 330px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.sidePanel.top.open    {visibility: visible; top:    0; box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); }
.sidePanel.bottom.open {visibility: visible; bottom: 0; box-shadow: 0 -8px 10px rgba(0, 0, 0, 0.3); }
.sidePanel.left.open   {visibility: visible; left:   0; box-shadow: 8px 0 10px rgba(0, 0, 0, 0.3); }
.sidePanel.right.open  {visibility: visible; right:  0; box-shadow: -8px 0 10px rgba(0, 0, 0, 0.3); }

/*#shoppingPanel.right.open  {visibility: visible; right:  0; }*/

/*#shoppingPanel{*/
/*  padding: 20px;*/
/*  top: 0;*/
/*  right: -390px; !* Initially hidden to the right (adjust width if needed) *!*/
/*  bottom: 0;*/
/*  width: 350px;*/
/*  overflow-y: scroll;*/
/*  overflow-x: hidden;*/
/*  transition: left 0.6s ease-in-out, right  0.6s ease-in-out;*/
/*}*/

.top-icons {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Distribute icons evenly */
    align-items: center;
    border-bottom: solid 1px rgba(255,255,255,0.1);
}

.top-icons i,
.top-icons svg {
    --primary-color: white;
    --fa-secondary-color: #fdfdfd;
    --fa-secondary-opacity: 0.3;
}

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

.users-online {
    text-align: center;
    margin-bottom: 15px; /* Gives some breathing room before the menu list starts */
    font-size: .75rem;
    opacity: .7;
    display: flex;
    justify-content: center;
}

.live-stats-btn {
    background: transparent;
    border: none;
    color: #cbd5e1; /* Soft slate text to match your dark background */
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.live-stats-btn:hover {
    background: rgba(255, 255, 255, 0.08); /* Subtle highlight on hover */
    color: #ffffff;
}

/* --- THE PULSE ANIMATION --- */
.live-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e; /* Vibrant 'Live' Green */
    margin-right: 8px;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: afors-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes afors-pulse {
    to {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
}




/* Hide l1 and l2 submenus */
.l1, .l2 {
    display: none;
    max-height: 0; /* Initial max-height for smooth transition */
    overflow: hidden; /* Hide content that overflows */
    transition: max-height 0.6s ease-in-out; /* Add a transition for smooth opening/closing */
}

.l1.open, .l2.open{
    display: block;

}
/* L1 submenu indentation */
.l1.submenu > * { /* Targets direct children of L1 submenus */
    padding-left: 20px; /* indentation of l1 menu */
    background-color: rgba(0, 0, 0, 0.3);
    filter: none;
}

/* L2 submenu indentation */
.l2.submenu > * { /* Targets direct children of L2 submenus */
    /* margin left -20 and padding left 40px indents from the submenu but background colour full width */
    background-color: rgba(0, 0, 0, 0.6);
    padding-left: 40px;
    margin-left: -20px;
    width: calc(100% + 20px);
}


.rotate, .non-rotate {transition: transform 0.6s ease; } /* common transition for both classes */
.rotate {
    transform: rotate(45deg);
    color: #FE3535;
} /* rotate to 45 deg  it will take the transition time above */
.non-rotate {transform: rotate(0deg);  } /* and rotate to 0 degrees, ie normal */


nav { all: unset;
    height: 100vh;
    display: flex;
    flex-direction: column;
} /* the defaults do wierd things to the dom */

.nav-links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    border-top: solid 1px rgba(255, 255, 255, 0.1);
}

.nav-links::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.nav-links li {
    list-style: none;
    padding-left: 0; /* Remove default left padding */
    margin-left: 0; /* Remove default left margin */
}


.nav-links .bb {
    border-bottom: 1px solid rgba(0, 0, 0, 0.9);
}


#sectionSubmenu{
    height: 100%;
}


.logo {
    display: flex;
    justify-content: center;
    margin: 15px auto 0;
    border-radius:50%;
    height: 100px;
    align-items: baseline;
}

.user-info {
    text-align: left; /* Left-align the user info */
}

.user-info a, .user-info button {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: inherit;
}

.icon-link { /* Style for the icon links */
    display: flex;
    align-items: center; /* Vertically align icon and text (if any) */
    justify-content: center;
    background: none; /* Remove default button background */
    cursor: pointer;
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit color from parent */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 72px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.9);
    border-top: solid 1px rgba(255,255,255,0.1);
    border-right: solid 1px rgba(255,255,255,0.1);
    border-left: solid 1px rgba(0, 0, 0, 0.9);
    font-size: 20px;
    border-radius: 2px;
}

.icon-link:hover { /* Add hover effect */
    opacity: 0.7;
}



.message-count {
    /* Style for the message count */
    position: absolute;
    font-size: 9px;
    color: white;
    background-color: red;
    padding: 2px 5px;
    border-radius: 50%;
    transform: translate(9px, -9px);
}

.menu-button{
    width: 100%;
    display: flex;
    align-items: center; /* Vertically align the content */
    color: #868ea0;
    font-size: 1rem;
    padding: 0;
    height: 50px;
}
a.menu-button:visited {
    color: #868ea0;
}

.menu-button span {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-transform: capitalize;
}


.menu-button .icon-left {
    /* ... styles for the first icon ... */
    width: 44px;
    text-align: center;

}

.menu-button .icon-right {
    /* ... styles for the last icon ... */
    width: 44px;
    text-align: center;
}
.menu-button .icon-right.fa-circle {
    /* ... styles for the last icon only the fa-circle icons ... */
    font-size: 0.4rem;
    color: inherit;
}

.menu-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
    filter: none;
}

.l1.submenu > .menu-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.l2.submenu > .menu-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.fa-avmoz-eurofox,
.fa-avmoz-mfors {
    margin-left: 20px;
    --fa-primary-color: var(--brand-red);
    --fa-secondary-color: var(--brand-blue);
    --fa-secondary-opacity: .6;
}

.menu-meta-data {
    display: flex;
    justify-content: space-between;
    border-top: 2px groove #000000;
    position: absolute;
    bottom: 0;
    left: -1px;
    background: #141820;
    width: 100%;
    padding: 0.5rem;
    text-align: right;
}


/* ==================================================================
   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%; }

/* Organiser Profile Image */
.profile-image-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 0 1rem;
    margin-bottom: 1rem;
    align-items: center;
}
.organiser-details {
    margin-top: .5rem;
    font-size: 1.5rem;
}

.profile-details {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    font-weight: bold;
    text-transform: uppercase;
}

/* ==================================================================
   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: 1.2rem;
    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: var(--white);
    background-color: var(--brand-blue);
    height: 3rem;
    min-width: fit-content;
}

.btn-primary,
.btn-primary:visited
{
    background-color: var(--brand-blue);
    color: var(--white);
}
.btn-primary:hover { background-color: #052d57; }

.btn-secondary,
.btn-secondary:visited
{
    background-color: var(--blue-700);
    color: var(--white);
}
.btn-secondary:hover { background-color: var(--blue-900); }

.btn-outline {
    background: none!important;
    color: inherit;
    border: 2px solid #0863c4!important;
}
.btn-outline:hover {
    background: #0863c4!important;
    color: white!important;
}

.btn-white,
.btn-white:visited {
    background-color: var(--zinc-100);
    color: var(--zinc-900);
}
.btn-white:hover {
    background-color: var(--zinc-900);
    color: var(--zinc-100);
}
.btn-success,
.btn-success:visited {
    background-color: var(--green-600);
    color: var(--white);
}
.btn-success:hover { background-color: var(--green-700); }

.btn-danger,
.btn-danger:visited {
    background-color: var(--red-500);
    color: var(--white);
}
.btn-danger:hover { background-color: var(--red-700); }

.btn-warning, .btn-warning:visited { background-color: #ffc107; color: #212529; }
.btn-warning:hover { background-color: #e0a800; }

.btn-info { background: #3498db; color: white; }

.btn-inactive, .btn-inactive:visited {
    background-color: var(--zinc-400);
    color: var(--white);
}
.btn-inactive:hover { background-color: var(--zinc-500); }

.btn-sm,.btn-small { padding: 0.4rem 0.8rem; font-size: 0.875rem; }

.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;
}


/*.btn-cta {*/
/*    background: linear-gradient(92.83deg, var(--teal-500) 0%, var(--blue-700) 100%);*/
/*    color: var(--white);*/
/*    box-shadow: 0 0 12px var(--teal-600);*/
/*}*/
.btn-cta:hover  { filter: brightness(1.1); }
.btn-cta:active { filter: brightness(0.9); }

.btn-submit {
    background-color: var(--green-500);
    color: var(--zinc-850);
}
.btn-submit:hover { background-color: var(--green-600); }
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 */

/* =============================================
   GENERIC REUSABLE COMPONENTS
   Structure and layout only — no theme colours.
   Add colour via modifier classes or page-level CSS.

   e.g.  .page-hero { }          <- structure here
         .page-hero--blue { }    <- colour in your page stylesheet
   ============================================= */

/* Page wrapper */
.content-page {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- page-hero ----------------------------------------
   Large full-width header block.
   Apply your own background colour/gradient via modifier.
   -------------------------------------------------------- */
.header-panel {
    padding: 60px 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: var(--shadow-md);
}

.header-panel h1 {
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.header-panel .subtitle {
    font-size: 1.25rem;
    margin: 0;
    opacity: 0.95;
}

@media screen and (max-width: 500px) {
    padding: 25px;
}

/* ---- highlight-panel ----------------------------------
   Left-bordered info panel.
   -------------------------------------------------------- */
.highlight-panel {
    background: #f8fafc;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 40px;
    border-left: 4px solid var(--brand-blue);
    box-shadow: var(--shadow-md);
}

.highlight-panel h2 {
    color: #1e293b;
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.highlight-panel p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

/* ---- section-block ------------------------------------
   Generic titled section wrapper.
   -------------------------------------------------------- */
.section-block {
    margin-bottom: 50px;
}

.section-block h2 {
    color: #1e293b;
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
}

.section-block > p {
    text-align: center;
    /* color: #64748b;   lighthouse giving an accessibility issue with this grey on grey */
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* ---- card-grid ----------------------------------------
   Responsive auto-fit grid for feature cards.
   -------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* ---- feature-card -------------------------------------
   Bordered hover card. No colour — add via modifier.
   -------------------------------------------------------- */
.feature-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.feature-card h3 {
    color: #1e293b;
    font-size: 1.3rem;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.feature-card p {
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
}

/* ---- stat-highlight -----------------------------------
   Small accented stat box, sits inside a feature-card.
   Apply your own border-color and background via modifier.
   -------------------------------------------------------- */
.stat-highlight {
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 15px;
    border-left: 3px solid currentColor;
}

.stat-highlight strong {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 5px;
}

/* ---- media-card-grid ----------------------------------
   Wider min-width grid for image-heavy cards.
   -------------------------------------------------------- */
.media-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

/* ---- media-card ---------------------------------------
   Card containing an image and spec text.
   -------------------------------------------------------- */
.media-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
}

.media-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.media-card h3 {
    color: #1e293b;
    font-size: 1.4rem;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.media-card .card-specs {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 10px 0 20px 0;
}

.media-card img {
    max-width: 100%;
    height: auto;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    margin: 20px 0;
    box-shadow: var(--shadow-sm);
}

.media-card p {
    color: #64748b;
    line-height: 1.6;
    margin: 15px 0 0 0;
}

/* ---- callout-panel ------------------------------------
   Attention-grabbing full-width notice block.
   Apply your own background colour via modifier.
   -------------------------------------------------------- */
.callout-panel {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    margin-top: 30px;
    box-shadow: var(--shadow-md);
}

.callout-panel h3 {
    font-size: 1.5rem;
    margin: 0 0 15px 0;
}

.callout-panel p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.95;
}

/* ---- cta-section --------------------------------------
   Full-width call to action footer block.
   Base colour white - can overwrite by adding a colour class.
   -------------------------------------------------------- */
.cta-section {
    background: white;
    padding: 60px 40px;
    border-radius: 12px;
    text-align: center;
    margin-top: 50px;
    box-shadow: var(--shadow-md);
}

.cta-section h2 {
    font-size: 2rem;
    margin: 0 0 20px 0;
}

.cta-section p {
    font-size: 1.2rem;
    margin: 0 0 30px 0;
    opacity: 0.95;
}

.cta-buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.cta-button {
    background: black;
    border: none;
    padding: 18px 50px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.cta-button:active {
    transform: translateY(0);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
    .page-hero h1         { font-size: 2rem; }
    .page-hero .subtitle  { font-size: 1.1rem; }
    .media-card-grid      { grid-template-columns: 1fr; }
    .card-grid            { grid-template-columns: 1fr; }
    .highlight-panel,
    .page-hero,
    .cta-section          { padding: 30px 20px; }
}


/* =============================================
   COMPONENT: Settings / Info Display
   Generic label-value card pattern.
   Used on: User Control Panel, Profile, any
   settings-style page.

   Classes:
     .info-card            — white card container
     .info-row             — single label/value row
     .info-label           — left-side label
     .info-value           — right-side value
     .action-grid          — grid of quick-action links
     .action-link          — individual action link item
     .table-scroll         — horizontal scroll wrapper for tables
   ============================================= */

fieldset.form-section {
    background: #fff;
    margin-bottom: 35px;
}

/* ---- Info card -------------------------------------------- */
.info-card {
    background: whitesmoke;
    border: 1px solid var(--zinc-300);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    gap: 1rem;
}

.info-row + .info-row {
    border-top: 1px solid #e2e5ea;
}

.info-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.875rem;
    min-width: 120px;
    flex-shrink: 0;
}

.info-value {
    color: var(--text-primary);
    font-size: 0.95rem;
    text-align: right;
    flex: 1;
}

/* ---- Action grid ------------------------------------------ */
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.action-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--zinc-50);
    border: 1px solid var(--zinc-200);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
    font-family: inherit;
}

.action-link:hover {
    background: var(--blue-100);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.action-link i {
    font-size: 1rem;
    color: var(--brand-blue);
    flex-shrink: 0;
    transition: color 0.2s;
}

.action-link:hover i {
    color: var(--brand-blue);
}

/* ---- Table scroll wrapper --------------------------------- */
.table-scroll {
    overflow-x: auto;
}

/* ---- Responsive ------------------------------------------- */
@media screen and (max-width: 600px) {
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .info-value {
        text-align: left;
    }

    .action-grid {
        grid-template-columns: 1fr;
    }
}

.form-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    gap: 10px;
}

.breadcrumb-step {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #52565a;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
    background: #e7e7ee;
    min-width: fit-content;
    height: 80px;
    min-height: 80px;
}

.breadcrumb-step:not(:last-child)::after {
    content: '→';
    margin: 0 1rem;
    color: #52565a;
    font-size: 1.5rem;
}

.breadcrumb-step.current {
    background: #007bff;
    color: white;
    font-weight: 600;
}

.breadcrumb-step.accessible:not(.current):hover {
    background: #e9ecef;
    color: #495057;
    cursor: pointer;
}

.breadcrumb-step.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.breadcrumb-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-height: 28px;
    border-radius: 50%;
    background: #dee2e6;
    color: #495057;
    font-size: 0.875rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.breadcrumb-step.current .breadcrumb-step-number {
    background: white;
    color: #007bff;
}

.breadcrumb-step.accessible:not(.current) .breadcrumb-step-number {
    background: #28a745;
    color: white;
}

.breadcrumb-step.locked .breadcrumb-step-number {
    background: #e9ecef;
    color: #adb5bd;
}

.breadcrumb-step i {
    margin-right: 0.25rem;
}

/* Credits Information Section */
.credits-info-section {
    background: linear-gradient(135deg, #667eea 0%, #556fdf 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.credits-info-heading {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.credit-card {
    background: rgba(255, 255, 255, 0.2);
    padding: 16px;
    border-radius: 6px;
    backdrop-filter: blur(10px);
}

.credit-card-total {
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.credit-card-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.credit-card-value {
    font-size: 28px;
    font-weight: bold;
}

.credits-info-box {
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
}

.credits-info-text {
    margin: 0 0 8px 0;
}

.credits-info-text-secondary {
    margin: 0;
    opacity: 0.95;
}

@media screen and (max-width: 768px) {
    .credits-grid {
        grid-template-columns: 1fr;
    }
}


/* ---- membership-list-styling --------------------------
   Specifically for lists inside feature-cards to
   create a "pricing table" feel.
   -------------------------------------------------------- */

.feature-card ul {
    list-style: none;
    margin: 20px 0 0 0;
    text-align: left;
    border-top: 1px solid #e2e8f0;
    padding: 20px 0 0 0;
}

.feature-card li {
    display: flex;             /* Align icon and text horizontally */
    align-items: flex-start;   /* Keep icon at the top if text wraps */
    gap: 12px;                 /* Space between icon and text */
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #475569;
}

/* Icon Styling */
.feature-card li i {
    color: #3b82f6;            /* Default blue for icons */
    font-size: 0.9rem;
    margin-top: 4px;           /* Vertical centering adjustment */
    width: 20px;               /* Fixed width keeps text aligned vertically */
    text-align: center;
}

.feature-card li strong {
    color: #1e293b;
    font-weight: 600;
}

/* Specific styling for the "Cost" line to make it pop */
.feature-card li:first-child {
    font-size: 1.05rem;
    color: #1e293b;
    margin-bottom: 18px;
}


/* Styling for the "Plus:" or "Everything in..." text */
.feature-card li strong {
    color: #1e293b;
    font-weight: 600;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .feature-card li {
        font-size: 0.9rem;
    }
}

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

/* bims (hangar) */
.bims a {
    display: block;
    width: 100%;
    background-color: #f8f9fa; /* Optional: slight grey placeholder before ad loads */
    position: relative;
    overflow: hidden;
}

.bims img, .bims video {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.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;
    border-radius: 7px;
    gap: 20px;
    /* Strict layout containment isolates child size changes */
}

#left-hangar  { order: 1; }
#right-hangar { order: 6; }

/* Lock flex-child height allocation during asynchronous batch fetch */
#left-hangar .bims,
#right-hangar .bims {
    border-radius: 5px;


}

#left-hangar .bims img,
#right-hangar .bims img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 768px) {
    #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;
    }
}



.leaderboard-hangar .bims a {
    /*aspect-ratio: 728 / 90; */
    max-height: 150px;
}
/* Reserves a baseline floor so content below doesn't start at y=0 */
/* In public/assets/css/app.css */
#leaderboardTopContainer,
#leaderboardTopBims {
    min-height: 150px; /* Baseline floor for top ad banner slots */
    max-height: 150px; /* Lock height strictly if banners are capped at 150px */
    display: block;
    overflow: hidden;
    contain: layout;
}

#leaderboardTopBims img {
    width: 100%;
    height: auto;
    display: block;
}

/* 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 {
    min-height:60px;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    padding: 0 20px;
    height: 85px;
    width: 100%;
    z-index: 97;
    background-color: rgb(245, 245, 245);
    box-shadow: var(--bs-light);
}

/* Fix header button icon layout shift */
.menu-buttons-container i.fa-kit-duotone,
.menu-buttons-container i[class*="fa-"] {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    contain: size layout;
}

.menu-buttons-container i[class*="fa-"]::before,
.menu-buttons-container i[class*="fa-"]::after {
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* --- SURGICALLY STABILISE ICONS INSIDE THE MAIN ARTICLE AREA ONLY --- */
article#mainArticle .fa,
article#mainArticle .fa-solid,
article#mainArticle .fa-regular,
article#mainArticle .fa-light,
article#mainArticle .fa-duotone {
    display: inline-block !important;
    width: 1.25em !important;      /* Lock width to standard icon width */
    text-align: center !important;  /* Center the glyph inside the reserved box */
}

/* Reserves a standard, non-shifting block for Font Awesome icons */
.top-menu-cta i,
.top-menu-toggle i,
.top-menu-button i {
    width: 32px;      /* Matches the fa-2x rendering size */
    height: 32px;     /* Matches the fa-2x rendering size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-buttons-container .top-menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100vw / 5);
    height: 100%;
    gap: 7px;
    padding: 0;
    min-width: fit-content;
    font-size: 1.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 1);
    background-color: whitesmoke;
    font-weight: 500;
}
.menu-buttons-container .top-menu-button.first {
    border-left: none;
}
.menu-buttons-container .top-menu-button.last {
    border-right: none;
}

.menu-buttons-container .top-menu-button > i,
.menu-buttons-container .top-menu-button > svg {
    --fa-primary-color: var(--brand-red);
    --fa-secondary-color: var(--brand-blue);
    --fa-secondary-opacity: 1.0;   /* Ensure stripes are solid for readability */
    font-size: xx-large;
}
.menu-buttons-container .top-menu-button .menu-button-text {
    font-size: 0.8rem;
    color: #1e1e1e;
}

/* Tablets and larger phones */
@media screen and (min-width: 481px) {
    .menu-buttons-container {
        top: 0;
        justify-content: space-between;
    }
    .menu-buttons-container .top-menu-button {
        width: 80px;
    }
}

@media screen and (max-width: 524px) {
    .menu-buttons-container .top-menu-button {
        width: calc(100vw / 6);
        height: 100%;
        gap: 7px;
    }
    .menu-buttons-container .top-menu-button > i,
    .menu-buttons-container .top-menu-button > svg {
        font-size: x-large;
        height: 32px;
    }
    .menu-buttons-container .top-menu-button .menu-button-text {
        font-size: 0.6rem;
        text-align: center;
    }
}

.top-menu-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}
.top-menu-text .short-name {
    display: none;
}
@media screen and (max-width: 1100px) {
    .top-menu-text .short-name {
        text-transform: uppercase;
        display: inline-flex;
    }
    .top-menu-text .long-name {
        display: none;
    }
    .menu-buttons-container {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .menu-buttons-container .top-menu-button.latest-listings,
    .menu-buttons-container .fa-avmoz-mfors,
    .menu-buttons-container .top-menu-text {
        display: none;
    }
}

/* Hard-code the space for the Font Awesome 2x icons */
.top-menu-button i.fa-2x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;  /* Reserves width for the icon */
    min-height: 32px; /* Reserves height for the icon */
}

/* Handle the smaller icons (like the 'Create Advert' button) */
.top-menu-button i:not(.fa-2x) {
    display: inline-flex;
    min-width: 20px;
    min-height: 20px;
}

.top-menu-toggle,
.top-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;

}

@media screen and (min-width: 600px) {
    .top-menu-cta { gap: 20px; }
}
@media screen and (max-width: 524px) {
    .menu-buttons-container { height: 70px; }
    .menu-buttons-container .top-menu-button { font-size: 1.2rem; }
}
@media screen and (min-width: 525px){
    .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 */