/* =========================================================================
   Pleazz — 2026 public shell

   Linked directly by application/views/2026/includes/headPublic.php with a
   ?s= . filesize() buster, on every screen rendered through loadView2026().

   Owns everything that belongs to the SHELL rather than a screen:
     - the page canvas (dark/light base + the three measured blobs)
     - the page rail variables (--l26-rail / --l26-page)
     - the shared header: wordmark tile, language pill, theme switch
     - the select2 dropdown, including its dark-mode open state
   Screen-level styling (cards, fields, chips...) lives in 2026/css/<view>.css.

   Nothing here is scoped to a screen class: this file is only ever loaded by
   2026 screens, so it never has to defend against a 2024 page. Do NOT link it
   from a 2024 shell.

   THEME NOTE
   updatePublicTheme() only adds/removes .public-light-mode client-side, so
   after a toggle without a reload <body> can carry both theme classes or
   neither. Dark is keyed off the ABSENCE of .public-light-mode, never off
   .public-dark-mode; <html data-public-theme> is server-rendered only.
   ========================================================================= */

/* -------------------------------------------------------------------------
   2. Page canvas
   publicMain.css carries body:not(.public-light-mode){background:#1e1e1e!important}
   so the dark canvas needs BOTH higher specificity and !important to win.
   ---------------------------------------------------------------------- */

/* Page rail, defined on <body> so BOTH the header partial and <main> inherit it
   -- header.custom-header-menu is a sibling of <main>, not a descendant, so it
   cannot read a variable set on .login-2026.
   --l26-rail is the left/right gutter, identical on both sides;
   --l26-page is content (1152px, from the Figma frame) + 2x gutter.
   The header container and .l26-grid both use these, which is what keeps the
   wordmark aligned with the headline and the theme pill aligned with the card. */
body {
    --l26-rail: clamp(16px, 3.6vw, 48px);
    --l26-page: 1248px;   /* Figma content rail 1152 + 2x48 gutter */

    min-height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Blob layer, measured off the Figma exports (BackgroundBlobs*.png, 1247x722).
   Both themes place the SAME three blobs at the same centres and radii; only
   the colour and peak opacity differ, so the geometry lives in --l26-blob-*.
   Centres/radii as fractions of the 1247px frame:
       1  centre  119,126  outer r 245  ->   9.5% 17.5%  19.6vw
       2  centre  200,523  outer r 265  ->  16.0% 72.4%  21.3vw
       3  centre 1105,580  outer r 232  ->  88.6% 80.3%  18.6vw
   The extra colour stops approximate Figma's gaussian blur; a plain two-stop
   gradient falls off linearly and reads as a hard-edged disc. */
body {
    --l26-blob-1: circle clamp(190px, 19.6vw, 340px) at 9.5% 17.5%;
    --l26-blob-2: circle clamp(210px, 21.3vw, 380px) at 16% 72.4%;
    --l26-blob-3: circle clamp(185px, 18.6vw, 330px) at 88.6% 80.3%;
}

/* Stop positions are the measured radial profile: each blob is a FLAT disc with
   a blurred shoulder (Figma circle + layer blur), not a linear falloff -- blob 2
   holds full opacity out to 57% of its radius. Both themes share these stops;
   only the colour and peak alpha differ (peak: light 33/36/32%, dark 13/18/14%). */
body:not(.public-light-mode) {
    background-color: #0B0906 !important;
    background-image:
        radial-gradient(var(--l26-blob-1),
            rgba(225, 101, 12, .133) 0%, rgba(225, 101, 12, .133) 24%, rgba(225, 101, 12, .118) 37%,
            rgba(225, 101, 12, .081) 49%, rgba(225, 101, 12, .033) 61%, rgba(225, 101, 12, .013) 86%, transparent 100%),
        radial-gradient(var(--l26-blob-2),
            rgba(198, 94, 16, .177) 0%, rgba(198, 94, 16, .177) 78%, rgba(198, 94, 16, .100) 88%,
            rgba(198, 94, 16, .030) 95%, transparent 100%),
        radial-gradient(var(--l26-blob-3),
            rgba(203, 87, 17, .155) 0%, rgba(203, 87, 17, .155) 58%, rgba(203, 87, 17, .110) 70%,
            rgba(203, 87, 17, .050) 82%, rgba(203, 87, 17, .012) 92%, transparent 100%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body.public-light-mode {
    background-color: #FFFFFF;
    background-image:
        radial-gradient(var(--l26-blob-1),
            rgba(250, 176, 81, .333) 0%, rgba(250, 176, 81, .333) 24%, rgba(250, 176, 81, .290) 37%,
            rgba(250, 176, 81, .200) 49%, rgba(250, 176, 81, .079) 61%, rgba(250, 176, 81, .025) 86%, transparent 100%),
        radial-gradient(var(--l26-blob-2),
            rgba(252, 208, 121, .355) 0%, rgba(252, 208, 121, .355) 78%, rgba(252, 208, 121, .200) 88%,
            rgba(252, 208, 121, .060) 95%, transparent 100%),
        radial-gradient(var(--l26-blob-3),
            rgba(253, 214, 142, .340) 0%, rgba(253, 214, 142, .340) 58%, rgba(253, 214, 142, .240) 70%,
            rgba(253, 214, 142, .110) 82%, rgba(253, 214, 142, .025) 92%, transparent 100%);
}


/* =========================================================================
   11. Shared public header
   navigationPublic.php is used by every public screen and is NOT edited;
   it is reached here only through body:has(main.login-2026).
   On login/login the partial's "Login" button is not rendered, so the bar
   holds just the wordmark and the language + theme controls.
   ========================================================================= */

header.custom-header-menu,
header.custom-header-menu .navbar {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* the partial hardcodes Bootstrap's .pt-3/.pb-3, which are !important */
header.custom-header-menu .navbar {
    padding-top: 34px !important;
    padding-bottom: 12px !important;
}

/* same rail as .l26-grid -- Bootstrap's .container only ships a 12px gutter and
   we were setting padding-left alone, which is what made the page look
   left-heavy. Both sides are set explicitly here. */
header.custom-header-menu .container {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--l26-page);
    padding-right: var(--l26-rail);
    padding-left: var(--l26-rail);
}

header.custom-header-menu .container > .col-md-6 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

header.custom-header-menu .right-nav-side {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* pleazz_logo.png is already the full "Pleazz / ORDER WITH EAZZ" wordmark,
   so only the orange cloud tile is added -- no new image asset. */
header.custom-header-menu .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

header.custom-header-menu .navbar-brand::before {
    content: "\f0c2";
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(145deg, #F5811F, #E8590C);
    color: #FFFFFF;
    font-family: "Font Awesome 6 Free";
    font-size: 21px;
    font-weight: 900;
}

header.custom-header-menu .public-logo {
    width: auto;
    height: 42px;
}

/* language select + theme switch, sitting straight on the page.
   The pill they used to sit inside -- 330x54, radius 27, solid #181818 with a
   1px hairline in dark and solid #FFFFFF in light -- is gone at Waqar's
   request; the row keeps its size and spacing so nothing else moves. */
#languagesDropdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    float: none !important;
    min-width: 330px;
    height: 54px;
    padding: 0 27px 0 12px;
    border: 0;
    border-radius: 27px;
    background: transparent;
    box-shadow: none;
}

body.public-light-mode #languagesDropdown {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* THE FLASH OF RAW MARKUP.
   Each <option> label is htmlentities('<img ...><span ...>English</span>'), because
   select2's templateSelection re-parses it with $(country.text) to draw the flag.
   Until select2 upgrades the control, the browser renders that label literally --
   the whole <img src="..." alt="English" width="20" class="align-middle me-1"> tag
   as visible text in the header.

   select2 marks the original control .select2-hidden-accessible once it has run,
   so this rule applies ONLY to the un-upgraded state: the native select is made
   invisible but stays in the layout at the width select2 will take, so nothing
   jumps when the real control appears. It is deliberately NOT display:none or
   visibility:hidden -- if select2 ever fails to load, the select is still there
   and still usable, just without a drawn label. The inline style on the element
   sets width, hence the !important. */
#selectLanguage:not(.select2-hidden-accessible) {
    width: 130px !important;
    height: 35px !important;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* 130px, not 180: navigation.css declared min-width:130px !important and beat the
   180 this rule used to carry, so 130 is the width the approved screens have. */
#languagesDropdown .select2-container {
    width: auto !important;
    min-width: 130px;
}

/* 35px, not auto: navigation.css forced height:35px !important on this box and
   the pill's align-items:center positions the text off the box height, so an
   auto (27px) box drops "English" 4px. 35 is what the approved screens have. */
#languagesDropdown .select2-container--default .select2-selection--single {
    height: 35px;
    border: 0;
    background: transparent;
}

/* display:flex, not the inherited inline flow. templateSelection injects a
   flag <img class="align-middle"> next to the language name, and
   vertical-align:middle aligns to the baseline plus half an x-height -- not to
   the middle of the box. Measured in the pill: the flag's centre at 61.4
   against the control's 65.0, i.e. riding 3.6px high. A flex row with
   align-items:center centres it for real and needs no per-element rule. */
#languagesDropdown .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 26px 0 4px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

#languagesDropdown .select2-selection__rendered img { margin-top: 0; margin-bottom: 0; }

/* templateSelection injects <span class="text-white">, and Bootstrap's
   .text-white is !important -- light mode has to out-shout it. */
body.public-light-mode #languagesDropdown .select2-selection__rendered,
body.public-light-mode #languagesDropdown .select2-selection__rendered span {
    color: #1C1917 !important;
}

/* select2 positions this box at top:1px with a fixed 26px height, so inside a
   35px control the chevron sat 3.5px above centre (measured). Filling the
   control's height puts the ::after's top:50% on the control's real centre. */
#languagesDropdown .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
}

/* swap select2's border-triangle for the thin chevron in the reference */
#languagesDropdown .select2-selection__arrow b {
    display: none;
}

#languagesDropdown .select2-selection__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, .75);
    border-bottom: 2px solid rgba(255, 255, 255, .75);
    border-radius: 1px;
    transform: translate(-50%, -70%) rotate(45deg);
}

body.public-light-mode #languagesDropdown .select2-selection__arrow::after {
    border-right-color: rgba(28, 25, 23, .55);
    border-bottom-color: rgba(28, 25, 23, .55);
}

/* theme switch -- the partial sets width/height/margin inline, so these
   need !important to land */
#flexSwitchCheckLightModeContainer {
    gap: 10px;
    float: none !important;
    margin-left: 4px !important;
    /* bootstrap's .form-check carries margin-bottom:.125rem, and the pill
       centres its children -- 2px of bottom margin puts the whole block 1px
       above centre (measured: 64.0 against the pill's 65.0) */
    margin-bottom: 0 !important;
    padding-left: 0;
    border-left: 0;
}

/* Track 54x32, orange #F97316 in BOTH themes. The knob is 26px with a ~3px
   inset and its side is INVERTED relative to Bootstrap's default:
   the reference puts the knob RIGHT in dark (unchecked) and LEFT in light
   (checked), so background-position is set explicitly for each state.
   Bootstrap also swaps background-image on :focus, which is overridden below
   or the knob turns back into its default blue-grey circle while focused. */
#flexSwitchCheckLightMode {
    width: 54px !important;
    height: 32px !important;
    margin-top: 0 !important;
    border: 0;
    background-color: #F97316;
    background-size: 26px 26px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: background-color .2s ease, background-position .15s ease-in-out;
}

#flexSwitchCheckLightMode,
#flexSwitchCheckLightMode:focus {
    /* dark = moon: #121212 disc, WHITE crescent sitting at the RIGHT.
       The crescent is STROKED, not filled -- the reference draws it as a thin
       outline; a filled path reads as a chunky blob at 26px. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3ccircle cx='16' cy='16' r='16' fill='%23121212'/%3e%3cpath transform='translate(7.5 7.5) scale(0.708)' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
    background-position: right 3px center !important;
}

/* checked == light mode; updatePublicTheme() keeps checkbox and body in sync */
#flexSwitchCheckLightMode:checked,
#flexSwitchCheckLightMode:checked:focus {
    /* light = sun: WHITE disc, near-black glyph, sitting at the LEFT */
    background-color: #F97316;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3ccircle cx='16' cy='16' r='16' fill='%23ffffff'/%3e%3ccircle cx='16' cy='16' r='5' fill='%23202020'/%3e%3cg stroke='%23202020' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M16 4.8v2.6M16 24.6v2.6M4.8 16h2.6M24.6 16h2.6'/%3e%3cpath d='M8.3 8.3l1.9 1.9M21.8 21.8l1.9 1.9M23.7 8.3l-1.9 1.9M10.2 21.8l-1.9 1.9'/%3e%3c/g%3e%3c/svg%3e") !important;
    background-position: left 3px center !important;
}

#flexSwitchCheckLightMode:focus {
    border: 0;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .25);
}

/* The label carries BOTH translated words (tLine('Dark') / tLine('Light')) and
   only the one for the current mode is shown. Keyed off the ABSENCE of
   .public-light-mode for dark, because after a client-side toggle the body can
   hold both theme classes or neither -- see the THEME NOTE in login.css. */
/* font-size:0 on the label with the word spans at 15px is deliberate: the
   approved screens were rendered with a font-size:0 label and a 15px ::after,
   and a real 15px strut on the label moves the word down 2px. Keeping the strut
   at 0 reproduces the same geometry with real, translatable text. */
#flexSwitchCheckLightModeContainer .form-check-label {
    /* the label is a block and the word an inline span, so the word sat where
       the line box put it -- 4px above the label's own centre (61.0 against
       64.0). As a centred flex row the word is where the label is. */
    display: flex;
    align-items: center;
    margin-top: 0 !important;
    margin-left: 13px !important;
    color: #FFFFFF !important;
    font-size: 0;
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
}

body.public-light-mode #flexSwitchCheckLightModeContainer .form-check-label {
    color: #1C1917 !important;
}

.pz26-theme-word {
    display: none;
    font-size: 15px;
}

body:not(.public-light-mode) .pz26-theme-word-dark,
body.public-light-mode .pz26-theme-word-light {
    display: inline;
}



/* -------------------------------------------------------------------------
   Ported from publicMain.css / navigation.css, which the 2026 shell does NOT
   load. Only the rules the 2026 screens actually depend on are carried over.
   ---------------------------------------------------------------------- */

/* Base type the header inherits. font-size/line-height come from publicMain.css;
   font-family and overflow-x come from the 2024 login.css, which every 2024
   auth screen loaded -- without it the pill text falls back to Bootstrap's
   system stack and every glyph edge in the header shifts. */
body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    overflow-x: hidden;
}

:root {
    scrollbar-color: #F37220 #17181D;
    scrollbar-width: thin;
}

html[data-public-theme="light"] {
    scrollbar-color: unset;
}

/* navigation.css: the OPEN language dropdown in dark mode. select2 appends the
   dropdown to <body>, outside <header>, so it needs its own rules. */
body:not(.public-light-mode) .select2-container--open .select2-dropdown--below {
    background-color: #332D2D;
    color: #FFFFFF;
}

/* 2026-09-17: the white rule under the open language list is gone (asked for
   explicitly); the panel's own border and radius already close it off */
body:not(.public-light-mode) .select2-results__options {
    border-bottom: 0;
}

body:not(.public-light-mode) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body:not(.public-light-mode) .select2-container--default .select2-results__option--selected {
    background-color: #000000;
}

body:not(.public-light-mode) .select2-results__option--selectable {
    color: #FFFFFF;
}


/* -------------------------------------------------------------------------
   The OPEN language dropdown -- both themes.

   Only the dark half had ever been ported (from navigation.css, above), so in
   light mode the panel fell back to select2's stock look: a white box, a bare
   search field with a black border, and select2's blue highlight.

   AND THE LANGUAGE NAMES WERE INVISIBLE. Each <option> carries markup that the
   2024 header wrote and this shell inherits:

       <span class="align-middle text-white ms-2">Croatian</span>

   -- htmlentities-encoded in the option and re-rendered as real DOM by select2
   (it runs with escapeMarkup: m => m). `text-white` is bootstrap's
   `color:#fff!important`, which was right on the old dark header and is
   white-on-white here. Only the highlighted row, which has a coloured
   background, was legible. The class cannot be removed -- it is Ante's markup,
   and the same option string is what the CLOSED control renders too -- so it is
   overridden instead, once per theme, and the label simply follows the panel.

   select2 appends the dropdown to <body>, outside <header>, so every rule here
   is at body scope.
   ---------------------------------------------------------------------- */

/* The panel, not the pill. select2 sizes the dropdown to its container, and that
   container is deliberately 130px -- the width the approved screens have for the
   CLOSED control (see the rule above). At 130 the panel could not hold a flag
   plus "Belarusian", so it grew a horizontal scrollbar. min-width widens only
   the open panel and beats select2's inline width without touching the pill. */
.select2-container--open .select2-dropdown {
    min-width: 236px;
    border: 1px solid var(--pzp-line, rgba(0, 0, 0, .12));
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(28, 25, 23, .18);
}

.select2-container--open .select2-results__options { overflow-x: hidden; }

.select2-container--open .select2-search--dropdown { padding: 10px; }

.select2-container--open .select2-search--dropdown .select2-search__field {
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 10px;
    outline: 0;
    font-size: 14px;
}

.select2-container--open .select2-results__options { max-height: 260px; }

.select2-container--open .select2-results__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 14px;
}

/* the flag sits inside the option markup with its own width attribute */
.select2-container--open .select2-results__option img { flex: 0 0 auto; }

/* LIGHT -- the default state of the public shell */
.select2-container--open .select2-dropdown { background: #FFFFFF; }

.select2-container--open .select2-results__option,
.select2-container--open .select2-results__option .text-white { color: #1C1917 !important; }

.select2-container--open .select2-search--dropdown .select2-search__field { background: #FFFFFF; color: #1C1917; }

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected {
    background-color: rgba(249, 115, 22, .12);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .text-white {
    color: #C2410C !important;
}

/* DARK -- restated after the light block so it wins on source order */
body:not(.public-light-mode) .select2-container--open .select2-dropdown {
    border-color: rgba(255, 255, 255, .12);
    background: #332D2D;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

body:not(.public-light-mode) .select2-container--open .select2-results__option,
body:not(.public-light-mode) .select2-container--open .select2-results__option .text-white { color: #FFFFFF !important; }

body:not(.public-light-mode) .select2-container--open .select2-search--dropdown .select2-search__field {
    border-color: rgba(255, 255, 255, .18);
    background: #1F1B1B;
    color: #FFFFFF;
}

body:not(.public-light-mode) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body:not(.public-light-mode) .select2-container--default .select2-results__option--selected {
    background-color: rgba(249, 115, 22, .18);
}

body:not(.public-light-mode) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body:not(.public-light-mode) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .text-white {
    color: #FDBA74 !important;
}

/* the panel's own scroller, on the same footing as the rest of the shell */
.select2-container--open .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: rgba(249, 115, 22, .55) transparent;
}

.select2-container--open .select2-results__options::-webkit-scrollbar { width: 10px; }
.select2-container--open .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-container--open .select2-results__options::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(249, 115, 22, .55);
    background-clip: content-box;
}


/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 767.98px) {
    header.custom-header-menu .container {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* THE PILL MUST HUG ITS CONTENTS, NOT STRETCH.

       #languagesDropdown is a flex pill with `justify-content: space-between`
       and a 330px min-width -- on desktop that is the design: language on the
       left, theme switch on the right, 330px apart. Setting `width: 100%` here
       made it 358px on a 390px phone and space-between then pushed the two
       controls to opposite ends, so the header read as one long white bar with a
       hole in the middle.

       Sized to its content it comes out ~250px (130 select + 78 switch + gaps),
       which fits on its own row under the logo. */
    #languagesDropdown {
        width: auto;
        min-width: 0;
        justify-content: flex-start;
        gap: 14px;
        padding: 0 18px 0 10px;
    }

    /* bootstrap's .form-switch floats the input 2.5em LEFT of its own box; on
       the desktop pill there is room for that, on a phone it lands the knob on
       top of the language chevron (measured: input x242..296 against the
       select's arrow at ~245). Kept inside its box here. */
    #flexSwitchCheckLightModeContainer { padding-left: 0; }
    #flexSwitchCheckLightModeContainer .form-check-input { float: none; margin-left: 0; }

    /* and the row it sits in ends at the right edge, under the logo, rather than
       starting at the left where it lines up with nothing */
    header.custom-header-menu .right-nav-side {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    /* the header login button is a float on desktop; inside the flex row above a
       float does nothing, so its margins are the only thing left to neutralise */
    header.custom-header-menu .right-nav-side #loginButton {
        float: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 575.98px) {
    header.custom-header-menu .navbar {
        padding-top: 22px !important;
    }

    header.custom-header-menu .navbar-brand::before {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 18px;
    }

    header.custom-header-menu .public-logo {
        height: 33px;
    }
}


/* =========================================================================
   alertify notifier

   utility_v2.js::alertifyErrMessage() raises alertify.error() for every field
   that fails, on top of the inline message it writes next to the input. The
   plugin's own stylesheet is linked shell-wide by headPublic.php (without it the
   toasts have no positioning at all and print as bare text at the end of the
   page); what follows is only the 2026 skin over it.

   The notifier is appended to <body>, so it cannot be scoped to a page class --
   these are deliberately shell-level rules, and the theme is read from <body>.
   ========================================================================= */

.alertify-notifier {
    z-index: 2000;
}

.alertify-notifier .ajs-message {
    max-width: 340px;
    margin-bottom: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    background: #FFFFFF;
    color: #1C1917;
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
}

.alertify-notifier .ajs-message.ajs-error {
    border-color: rgba(239, 68, 68, .38);
    background: #FEF2F2;
    color: #B91C1C;
}

.alertify-notifier .ajs-message.ajs-success {
    border-color: rgba(34, 197, 94, .38);
    background: #F0FDF4;
    color: #15803D;
}

.alertify-notifier .ajs-message.ajs-warning {
    border-color: rgba(245, 158, 11, .38);
    background: #FFFBEB;
    color: #B45309;
}

body:not(.public-light-mode) .alertify-notifier .ajs-message {
    border-color: rgba(255, 255, 255, .10);
    background: #241E1A;
    color: #E7E5E4;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
}

body:not(.public-light-mode) .alertify-notifier .ajs-message.ajs-error {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .16);
    color: #FCA5A5;
}

body:not(.public-light-mode) .alertify-notifier .ajs-message.ajs-success {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .16);
    color: #86EFAC;
}

body:not(.public-light-mode) .alertify-notifier .ajs-message.ajs-warning {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .16);
    color: #FCD34D;
}

/* -------------------------------------------------------------------------
   The open language list

   select2 marks the row under the pointer (and the keyboard cursor)
   .select2-results__option--highlighted and paints it its own default blue.
   ---------------------------------------------------------------------- */

#select2-selectLanguage-results .select2-results__option--highlighted,
#select2-selectLanguage-results .select2-results__option--highlighted[aria-selected] {
    background-color: #F97316 !important;
    color: #FFFFFF !important;
}

#select2-selectLanguage-results .select2-results__option--highlighted span,
#select2-selectLanguage-results .select2-results__option--highlighted[aria-selected] span {
    color: #FFFFFF !important;
}

#select2-selectLanguage-results .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: rgba(249, 115, 22, .14);
}


/* -------------------------------------------------------------------------
   Narrow header

   The two halves of the header are bootstrap .col-md-6, so below 768px they
   stack and the header doubles in height -- measured 108px at 768 against
   174px at 670, which pushed the whole login card down the page. Below 768
   they stay on one row; below 670 the two words go with them, leaving the flag
   and the toggle beside the logo.
   ---------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .custom-header-menu .navbar > .container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        max-width: none;
    }

    .custom-header-menu .navbar > .container > .col-md-6 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    /* the logo half is the one allowed to give: the language + theme controls
       have a floor, the wordmark can scale. Without this the row's content
       floor was 395px and a 320-360px screen scrolled sideways (measured:
       documentElement.scrollWidth 395 against a 320 viewport). */
    .custom-header-menu .navbar > .container > .col-md-6:first-child {
        flex: 0 1 auto;
        min-width: 0;
    }

    .custom-header-menu .navbar-brand {
        display: block;
        min-width: 0;
        margin-right: 0;
    }

    .custom-header-menu .public-logo {
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .custom-header-menu .navbar > .container > .right-nav-side { margin-left: auto; }

    #languagesDropdown { min-width: 0; }
}

@media (max-width: 669.98px) {
    /* the flag and the chevron stay, the language name goes */
    #languagesDropdown .select2-selection__rendered span { display: none; }

    #languagesDropdown {
        gap: 4px;
        padding: 0;
    }

    #languagesDropdown .select2-container { width: auto !important; min-width: 0 !important; }

    /* THE OPEN LIST OPENS LEFTWARDS HERE.

       select2 anchors the panel's LEFT edge to the trigger. Below 670 the trigger
       is this 48px flag pill (measured 48 at every width 320-669), 74-82px from
       the right edge, while the panel is 236px (min-width above) -- so it ran
       114px past the viewport at 320/360/375/390/414. Opening the list also
       focuses its search field, and the browser scrolled the page sideways to
       reveal it: the whole login screen jumped left. Reported at 320.

       Shifted by 48 - 236 so the panel's RIGHT edge sits on the pill's right
       edge. Scoped to the language list's own results id so no other select2 on
       these pages moves, and capped at the viewport as a backstop. */
    body > .select2-container--open:has(#select2-selectLanguage-results) .select2-dropdown {
        margin-left: -188px;
        max-width: calc(100vw - 32px);
    }

    #languagesDropdown .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 22px 0 2px; }

    #selectLanguage:not(.select2-hidden-accessible) { width: 52px !important; }

    /* the theme switch keeps its toggle, loses its word */
    #flexSwitchCheckLightModeContainer .form-check-label { display: none !important; }

    #flexSwitchCheckLightModeContainer { margin-left: 0 !important; }

    /* the brand is the cloud tile + the wordmark; at 320px the two need 220px
       in a box the flex row had squeezed to 162, so the wordmark ran over the
       language control (measured: logo right edge 236 against the control's
       left edge 198). Letting the image shrink inside the brand keeps them
       apart -- object-fit stops it distorting as it does. */
    .custom-header-menu .navbar-brand { min-width: 0; }

    .custom-header-menu .public-logo {
        height: 36px;
        min-width: 0;
        flex: 0 1 auto;
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }
}


/* -------------------------------------------------------------------------
   Response messages -- the dismiss control sits on the middle of the bar

   displayResponseMessagges() (utility_v2.js) emits the close button BEFORE the
   message text, and bootstrap positions .alert-dismissible .btn-close
   absolutely at top:0/right:0 with 1.25rem of its own padding. Against the
   12px-padded alert the script writes, that left the control high and hard
   against the corner instead of on the message's centre line. Same row layout
   as the back office states in products/products.css.

   The padding is marked because the script writes style="padding:12px" inline,
   and an inline declaration outranks any author rule that is not.
   ---------------------------------------------------------------------- */

.alert.alert-dismissible {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px !important;
}

.alert.alert-dismissible > strong,
.alert.alert-dismissible > span,
.alert.alert-dismissible > p {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.alert.alert-dismissible > .btn-close {
    order: 2;
    flex: 0 0 auto;
    position: static;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    background-size: 12px 12px;
}

/* every validation message on the public screens is pure red (2026-09-18),
   the same as the vendor screens (shell/fields.css) */
.formMessageErrorClass,
.formMessageErrorClass * {
    color: #f00 !important;
}

/* dialog titles on the public screens (the License Agreement popup) are 28px,
   23px below 820px -- the same as every vendor dialog (shell/dialogs.css) */
.modal .modal-title,
.modal .modal-header :is(h1, h2, h3, h4, h5, h6) {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

@media (max-width: 819.98px) {
    .modal .modal-title,
    .modal .modal-header :is(h1, h2, h3, h4, h5, h6) { font-size: 23px !important; }
}


/* ---- pointer on every select (2026-09-18) --------------------------------
   Same rule as shell/selects.css on the vendor side: the closed control, its
   text and chevron, and every row of the open list show the hand. */

body.custom-body-design select,
body.custom-body-design select option,
body.custom-body-design .select2-selection,
body.custom-body-design .select2-selection__rendered,
body.custom-body-design .select2-selection__arrow,
body.custom-body-design .select2-selection__choice__remove,
body.custom-body-design .select2-results__option {
    cursor: pointer;
}

body.custom-body-design select:disabled,
body.custom-body-design .select2-container--disabled .select2-selection,
body.custom-body-design .select2-results__option[aria-disabled="true"] {
    cursor: default;
}