@charset "UTF-8";
/* ============================================================================
   SMU GJAKOVA — PUBLIC (ANONYMOUS) THEME · "Atelier"
   ----------------------------------------------------------------------------
   Loaded ONLY from the `else` (not-authenticated) branch of _Layout.cshtml,
   AFTER Content/main-page.css, so it overrides the legacy public theme.

   Design language — a contemporary remix of three references:
     · smu.umib.net        — cream ground, arch photo frame, floating status
                             card, tracked uppercase links;
     · smu.uni-gjilan.net  — navy academic surfaces, disciplined grid;
     · roanoke.edu         — gold-on-colour statement band, huge thin
                             "fast facts" numerals with hairline dividers,
                             tracked uppercase section titles with a trailing
                             rule, tone-on-tone pattern texture.
   Plus the modern layer: a floating pill navbar, a giant mixed-type headline
   (Space Grotesk + Playfair italic), a rotating circular badge on the photo,
   a tilted infinite ticker band, numbered service cards, and scroll-driven
   reveals where the browser supports animation-timeline.

   Palette: navy · crimson · gold · cream — the classic university-crest trio
   on a warm paper ground. Gjakova's red carries the accent.

   Scope: everything under `.smu-public`; landing-only pieces are used only by
   Home/Index markup. Behaviour contracts preserved (do not rename):
     .navbar-toggle .navbar-collapse .dropdown-menu .login-button .help-icon
     .counter .counter-item .hide-counter .big-icon i
     .result-Section .content-result
     #AfatiPershkrimiID #AfatiDataID #modalAnkesat

   `!important` appears ONLY where a legacy !important or inline style must be
   beaten; each use is commented at the site.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
    /* surfaces */
    --g-navy: #0D2A4E;
    --g-navy-deep: #08203E;
    --g-cream: #F7F3EA;
    --g-cream-2: #EFE8D9;
    --g-paper: #FFFFFF;

    /* text */
    --g-ink: #16202F;
    --g-heading: #0F2440;
    --g-muted: #5C6577;
    --g-on-navy: #F5F1E6;
    --g-on-navy-dim: rgba(245, 241, 230, .78);
    --g-on-navy-faint: rgba(245, 241, 230, .55);

    /* accents */
    --g-red: #DE3F2E;
    --g-red-deep: #B93325;
    --g-red-bright: #FF6A57;
    --g-gold: #E9B44C;

    /* lines */
    --g-line: #E4DCCA;
    --g-line-strong: #D6CDB8;
    --g-line-navy: rgba(245, 241, 230, .14);

    /* radii */
    --g-r: 16px;
    --g-r-lg: 26px;
    --g-r-pill: 999px;
    --g-r-arch: 999px 999px 18px 18px;

    /* elevation */
    --g-sh-sm: 0 1px 2px rgba(24, 20, 10, .06);
    --g-sh: 0 20px 48px -22px rgba(24, 20, 10, .3);
    --g-sh-lg: 0 40px 90px -36px rgba(8, 18, 36, .5);

    /* layout */
    --g-container: 1240px;
    --g-gutter: clamp(20px, 4vw, 56px);
    --g-nav-h: 70px;

    /* accent as TEXT on light surfaces (remapped brighter on dark so small
       type keeps contrast; --g-red itself stays a fill colour) */
    --g-accent-text: #C93424;

    /* the floating pill navbar glass */
    --g-navglass: rgba(255, 255, 255, .88);
    --g-navglass-strong: rgba(255, 255, 255, .96);

    /* hero dot-grid texture */
    --g-texture: rgba(15, 36, 64, .13);

    /* SVG logo tile */
    --g-logo-tile: #0D2A4E;

    /* tinted feedback surfaces + tones */
    --g-danger-tint: #FBEDEB;
    --g-success-tint: #EDF6EE;
    --g-warning-tint: #FBF3E1;
    --g-tone-success: #2E7D4F;
    --g-tone-warning: #C08417;

    /* form focus + custom select chevron */
    --g-focus-border: #2C5FA8;
    --g-focus-ring: rgba(44, 95, 168, .16);
    --g-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235D6678' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --g-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Ccircle cx='7' cy='7' r='5.2' fill='none' stroke='%235D6678' stroke-width='2'/%3E%3Cpath d='M11.2 11.2l4 4' stroke='%235D6678' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

    /* type */
    --g-display: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --g-serif-it: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --g-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* motion */
    --g-ease: cubic-bezier(.22, .61, .36, 1);
    --g-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------- 1b. DARK THEME */
/* The toggle writes data-theme="dark" on <html> before first paint (inline
   snippet in _Layout) and Scripts/smu-theme.js persists the choice in the
   SMUTheme localStorage key. Light is the default. ONLY TOKENS ARE REMAPPED
   here — the navy band, the crimson ticker and the gold accent are brand
   surfaces and stay put; the cream paper world flips to a deep ink one. */
:root[data-theme="dark"] {
    --g-cream: #0A1424;               /* the page                            */
    --g-cream-2: #182740;             /* tinted surface                      */
    --g-paper: #12213A;               /* cards sit above the page            */

    --g-ink: #E7EDF8;
    --g-heading: #F4F7FC;
    --g-muted: #9AA7BD;

    --g-navy: #0F2C50;                /* keeps the band a step off the page  */
    --g-navy-deep: #071527;

    --g-line: rgba(255, 255, 255, .12);
    --g-line-strong: rgba(255, 255, 255, .22);

    --g-accent-text: #FF8272;         /* small crimson type needs the lift   */

    --g-navglass: rgba(13, 24, 42, .88);
    --g-navglass-strong: rgba(11, 21, 38, .96);

    --g-texture: rgba(245, 241, 230, .07);

    --g-danger-tint: rgba(222, 63, 46, .14);
    --g-success-tint: rgba(46, 160, 90, .14);
    --g-warning-tint: rgba(192, 132, 23, .16);
    --g-tone-success: #3F9D68;
    --g-tone-warning: #D89A2B;

    --g-focus-border: #6FA8FF;
    --g-focus-ring: rgba(111, 168, 255, .22);
    --g-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239AA7BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --g-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Ccircle cx='7' cy='7' r='5.2' fill='none' stroke='%239AA7BD' stroke-width='2'/%3E%3Cpath d='M11.2 11.2l4 4' stroke='%239AA7BD' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

    --g-sh-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --g-sh: 0 20px 48px -22px rgba(0, 0, 0, .7);
    --g-sh-lg: 0 40px 90px -36px rgba(0, 0, 0, .85);
}

    :root[data-theme="dark"] {
        /* the SVG logo tile needs a lift off the dark pill glass */
        --g-logo-tile: #2C4E82;
    }

/* ------------------------------------------------------------------ 2. BASE */
/* Bootstrap 3 sets html{font-size:10px}; without this every rem collapses. */
html.smu-public {
    font-size: 16px;
    height: auto;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* The legacy sheet sets overflow-x:hidden on BOTH html and body; on body it
   turns body into its own scroll container and breaks position:sticky. */
body.smu-public {
    max-width: 100%;
    overflow-x: visible;
    margin: 0;
    background: var(--g-cream);
    color: var(--g-ink);
    font-family: var(--g-sans);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    body.smu-public > * { flex-shrink: 0; }
    body.smu-public > .smu-footer { margin-top: auto; }

.smu-public ::selection {
    background: rgba(222, 63, 46, .22);
}

.smu-public :focus-visible {
    outline: 2px solid var(--g-red);
    outline-offset: 3px;
    border-radius: 4px;
}

.smu-shell {
    width: 100%;
    max-width: var(--g-container);
    margin-inline: auto;
    padding-inline: var(--g-gutter);
}

/* --------------------------------------------------------------- 3. BUTTONS */
.smu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 54px;
    padding: 12px 14px 12px 30px;
    border: 2px solid transparent;
    border-radius: var(--g-r-pill);
    font-family: var(--g-display);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s var(--g-ease), border-color .25s var(--g-ease),
                color .25s var(--g-ease), transform .25s var(--g-ease), box-shadow .25s var(--g-ease);
}

    /* the arrow rides in a little puck that reacts on hover */
    .smu-btn i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: .9em;
        transition: transform .25s var(--g-ease), background-color .25s var(--g-ease), color .25s var(--g-ease);
    }

    .smu-btn:hover, .smu-btn:focus {
        text-decoration: none;
    }

        .smu-btn:hover i {
            transform: translateX(4px);
        }

.smu-btn--primary {
    background: var(--g-red);
    border-color: var(--g-red);
    color: #fff;
    box-shadow: 0 16px 34px -16px rgba(222, 63, 46, .75);
}

    .smu-btn--primary i {
        background: #fff;
        color: var(--g-red);
    }

    .smu-btn--primary:hover, .smu-btn--primary:focus {
        background: var(--g-red-deep);
        border-color: var(--g-red-deep);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 22px 44px -16px rgba(222, 63, 46, .85);
    }

.smu-btn--outline {
    background: transparent;
    border-color: var(--g-heading);
    color: var(--g-heading);
    padding: 12px 26px;
}

    .smu-btn--outline i {
        width: auto;
        height: auto;
        border-radius: 0;
        background: transparent;
        margin-right: 2px;
    }

    .smu-btn--outline:hover, .smu-btn--outline:focus {
        background: var(--g-heading);
        color: var(--g-cream);
        transform: translateY(-2px);
    }

/* small outlined pill on light — the results chip */
.smu-btn--soft {
    min-height: 42px;
    padding: 9px 22px;
    font-size: .82rem;
    background: transparent;
    border-color: var(--g-red);
    color: var(--g-accent-text);
}

    .smu-btn--soft i {
        width: auto;
        height: auto;
        background: transparent;
    }

    .smu-btn--soft:hover, .smu-btn--soft:focus {
        background: var(--g-red);
        border-color: var(--g-red);
        color: #fff;
    }

/* ----------------------------------------------- 4. TIER 1 — UTILITY TOPBAR */
.smu-public .top {
    height: auto;
    padding: 8px 0;
    background: var(--g-navy-deep);
    border-bottom: 0;
    color: var(--g-on-navy-faint);
    font-size: .78rem;
    position: relative;
    z-index: 1040;
}

    .smu-public .top .row-fluid {
        max-width: var(--g-container);
        margin-inline: auto;
        padding-inline: var(--g-gutter);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

.smu-public .phone-mail {
    margin: 0;
    padding: 0;
    float: none;
    display: flex;
    align-items: center;
    gap: 22px;
}

    .smu-public .phone-mail li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    .smu-public .phone-mail i {
        font-size: .82rem;
        margin: 0;
        color: var(--g-gold);
    }

    .smu-public .phone-mail li span {
        font-family: var(--g-sans);
        font-size: .78rem;
        letter-spacing: .04em;
        color: var(--g-on-navy-dim);
    }

.smu-public .loginbar {
    margin: 0;
    padding: 0;
    float: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

    .smu-public .loginbar li {
        display: inline-flex;
    }

        .smu-public .loginbar li a,
        .smu-public .loginbar li a a { /* Razor nests ActionLink inside an <a> */
            color: var(--g-on-navy-dim);
            font-family: var(--g-display);
            font-size: .74rem;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: var(--g-r-pill);
            text-decoration: none;
            transition: color .2s var(--g-ease), background-color .2s var(--g-ease);
        }

            .smu-public .loginbar li a:hover,
            .smu-public .loginbar li a a:hover {
                color: #fff;
                background: rgba(245, 241, 230, .12);
            }

        .smu-public .loginbar li.devider {
            border-right: 1px solid var(--g-line-navy);
            margin: 0 8px;
            height: 14px;
            align-self: center;
        }

/* light/dark toggle (lives in the topbar; synced by Scripts/smu-theme.js) */
.smu-themetoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    padding: 0;
    border: 1px solid var(--g-line-navy);
    border-radius: 50%;
    background: rgba(245, 241, 230, .08);
    color: var(--g-gold);
    cursor: pointer;
    transition: background-color .2s var(--g-ease), border-color .2s var(--g-ease), transform .2s var(--g-ease);
}

    .smu-themetoggle:hover, .smu-themetoggle:focus {
        background: rgba(245, 241, 230, .16);
        border-color: rgba(245, 241, 230, .35);
        transform: rotate(15deg);
    }

    .smu-themetoggle i {
        font-size: .85rem;
        margin: 0;
        color: inherit;
    }

    /* moon in light mode, sun in dark mode */
    .smu-themetoggle .fa-sun-o {
        display: none;
    }

:root[data-theme="dark"] .smu-themetoggle .fa-moon-o {
    display: none;
}

:root[data-theme="dark"] .smu-themetoggle .fa-sun-o {
    display: inline-block;
}

/* --------------------------------------- 5. TIER 2 — FLOATING PILL NAVBAR */
.smu-public .topHeaderSection {
    position: sticky;
    top: 10px;
    z-index: 1030;
    background: transparent;
    width: 100%;
    /* the pill's edges align exactly with the 1240px content shell; below
       that width it keeps a 10px breathing gutter */
    padding-inline: max(10px, calc((100% - var(--g-container)) / 2));
    pointer-events: none; /* only the pill itself is interactive */
}

/* !important: the legacy sheet pins `.header{position:absolute !important}`
   at ≤480px, which would tear the nav out of the sticky wrapper. */
.smu-public .header {
    position: relative !important;
    pointer-events: auto;
    max-width: var(--g-container);
    margin: 10px auto 0;
    padding: 0 10px 0 22px;
    background: var(--g-navglass);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--g-line);
    border-radius: 22px;
    box-shadow: 0 14px 40px -24px rgba(24, 20, 10, .35);
    transition: box-shadow .3s var(--g-ease), background-color .3s var(--g-ease);
}

.smu-public .topHeaderSection.is-stuck .header {
    background: var(--g-navglass-strong);
    box-shadow: 0 22px 50px -24px rgba(24, 20, 10, .5);
}

.smu-public .navbar-header {
    display: flex;
    align-items: center;
    min-height: var(--g-nav-h);
    padding-left: 0;
    float: left;
}

.smu-public .navbar-brand {
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: 0;
    margin: 0;
}

/* the inline SVG logo (same mark as SMU Gjilan), recoloured by tokens */
.smu-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.smu-logo__mark {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}

.smu-logo__tile {
    fill: var(--g-logo-tile);
    transition: fill .25s var(--g-ease);
}

.smu-logo__glyph {
    fill: var(--g-on-navy);
}

.smu-public .navbar-brand:hover .smu-logo__tile {
    fill: var(--g-red);
}

.smu-logo__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
    min-width: 0;
}

.smu-logo__name {
    font-family: var(--g-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--g-heading);
}

.smu-logo__sub {
    font-family: var(--g-sans);
    font-size: .5rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--g-muted);
    white-space: nowrap;
}

.smu-public .navbar-collapse {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-right: 0;
}

.smu-public .navbar-nav.navbar-right:last-child,
.smu-public .navbar-nav.navbar-right {
    display: flex;
    align-items: center;
    gap: 0;
    /* !important only to cancel the legacy `margin-right:-25px !important` */
    margin: 0 !important;
    float: right;
}

.smu-public .navbar-nav > li {
    padding: 0;
    float: none;
}

    .smu-public .navbar-nav > li > a {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: var(--g-nav-h);
        padding: 0 15px;
        background: transparent;
        color: var(--g-heading);
        font-family: var(--g-display);
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        line-height: 1;
        transition: color .22s var(--g-ease);
    }

        /* crimson underline that grows in (the CTA kills its ::after in the
           legacy sheet, so it is exempt automatically) */
        .smu-public .navbar-nav > li > a::after {
            content: "";
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: 17px;
            height: 2px;
            border-radius: 2px;
            background: var(--g-red);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform .28s var(--g-ease-out);
        }

        .smu-public .navbar-nav > li > a:hover,
        .smu-public .navbar-nav > li > a:focus,
        .smu-public .navbar-nav > li.active > a,
        .smu-public .navbar-nav > li.open > a,
        .smu-public .navbar-nav > li.dropdown:hover > a {
            color: var(--g-accent-text);
            background: transparent;
        }

            .smu-public .navbar-nav > li > a:hover::after,
            .smu-public .navbar-nav > li.open > a::after {
                transform: scaleX(1);
            }

.smu-public .nav .caret {
    border-top-color: currentColor;
    border-bottom-color: currentColor;
    opacity: .55;
    margin-left: 6px;
    transition: transform .25s var(--g-ease);
}

.smu-public .navbar-nav > li.open .caret,
.smu-public .navbar-nav > li:hover .caret {
    transform: rotate(180deg);
}

.smu-public .nav a:hover .caret {
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}

/* ----- mega-menu panels (after SMU Gjilan): the dropdown is a full-width
   panel that drops flush from the pill, so there is no hover dead-zone.
   Items are icon chip + two-line text (.smu-mm-title / .smu-mm-desc).
   Opening is CSS :hover / :focus-within plus Bootstrap's .open — no jQuery. */
.smu-public .navbar-nav > li > .dropdown-menu {
    background: var(--g-paper);
    border: 1px solid var(--g-line);
    box-shadow: 0 40px 80px -32px rgba(24, 20, 10, .5);
}

.smu-public .smu-mega li {
    list-style: none;
}

.smu-public .smu-mega > li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: transparent;
    color: var(--g-ink);
    text-decoration: none;
    white-space: normal;
    transition: background-color .18s var(--g-ease);
}

    /* the icon chip */
    .smu-public .smu-mega > li > a > i {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--g-line);
        border-radius: 50%;
        background: var(--g-cream);
        color: var(--g-accent-text);
        font-size: 1.05rem;
        transition: background-color .2s var(--g-ease), border-color .2s var(--g-ease), color .2s var(--g-ease);
    }

.smu-mm-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.smu-mm-title {
    font-family: var(--g-display);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.3;
    color: var(--g-heading);
    transition: color .18s var(--g-ease);
}

.smu-mm-desc {
    font-size: .76rem;
    line-height: 1.45;
    color: var(--g-muted);
}

.smu-public .smu-mega > li > a:hover,
.smu-public .smu-mega > li > a:focus {
    background: var(--g-cream);
}

    .smu-public .smu-mega > li > a:hover > i,
    .smu-public .smu-mega > li > a:focus > i {
        background: var(--g-red);
        border-color: var(--g-red);
        color: #fff;
    }

    .smu-public .smu-mega > li > a:hover .smu-mm-title,
    .smu-public .smu-mega > li > a:focus .smu-mm-title {
        color: var(--g-accent-text);
    }

@media (min-width: 768px) {
    /* the panel anchors to the pill, not the <li> */
    .smu-public .navbar-nav > li.dropdown {
        position: static;
    }

    .smu-public .navbar-nav > li > .dropdown-menu {
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        /* tucked 2px under the pill so the hover region is continuous */
        top: calc(100% - 2px);
        margin: 0;
        padding: 16px;
        border-top: 3px solid var(--g-red);
        border-radius: 0 0 20px 20px;
    }

    .smu-public .navbar-nav > li.dropdown:hover > .dropdown-menu,
    .smu-public .navbar-nav > li.dropdown:focus-within > .dropdown-menu,
    .smu-public .navbar-nav > li.open > .dropdown-menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 12px;
        animation: gjk-drop .22s var(--g-ease-out) backwards;
    }
}

/* login CTA — crimson pill.
   !important is required only to defeat the legacy rules
   `.login-button{color:#072E5C !important; padding:5px 15px !important;
    transition:… !important}` without touching main-page.css. */
.smu-public .navbar-nav > li > a.login-button {
    margin: 0 0 0 14px;
    min-height: 46px;
    align-self: center;
    padding: 0 26px !important;
    border: 2px solid var(--g-red);
    border-radius: var(--g-r-pill);
    background: var(--g-red);
    color: #fff !important;
    letter-spacing: .08em;
    box-shadow: 0 12px 26px -12px rgba(222, 63, 46, .65);
    transition: background-color .25s var(--g-ease), transform .25s var(--g-ease), box-shadow .25s var(--g-ease) !important;
}

    .smu-public .navbar-nav > li > a.login-button:hover,
    .smu-public .navbar-nav > li > a.login-button:focus {
        background: var(--g-red-deep);
        border-color: var(--g-red-deep);
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 18px 34px -12px rgba(222, 63, 46, .75);
    }

    .smu-public .navbar-nav > li > a.login-button i {
        margin-right: 8px;
    }

/* help bulb — only the landing carries intro.js steps */
.smu-public .navbar-nav > li.help-icon {
    display: none;
    align-items: center;
}

body.smu-landing .navbar-nav > li.help-icon {
    display: flex;
}

    .smu-public .navbar-nav > li.help-icon > i {
        display: inline-flex !important; /* legacy toggles display via `.navbar-nav > li > i{display:none/block !important}` */
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-left: 10px;
        padding: 0;
        border: 1px solid var(--g-line-strong);
        border-radius: 50%;
        background: var(--g-paper);
        color: var(--g-red);
        font-size: 1rem;
        cursor: pointer;
        transition: background-color .2s var(--g-ease), border-color .2s var(--g-ease), color .2s var(--g-ease);
    }

        .smu-public .navbar-nav > li.help-icon > i:hover {
            transform: none;
            color: #fff;
            border-color: var(--g-red);
            background: var(--g-red);
        }

/* burger */
.smu-public .navbar-toggle {
    padding: 11px;
    border: 1px solid var(--g-line-strong);
    border-radius: 12px;
    background: var(--g-paper);
}

    .smu-public .navbar-toggle span.icon-bar {
        background: var(--g-heading);
        border-color: var(--g-heading);
        width: 20px;
    }

    .smu-public .navbar-toggle:hover {
        background: var(--g-cream-2);
    }

/* ------------------------------------------------------- 6. LANDING — HERO */
.smu-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(760px 480px at 108% 8%, rgba(222, 63, 46, .09), transparent 62%),
        radial-gradient(700px 520px at -10% 100%, rgba(13, 42, 78, .1), transparent 65%),
        var(--g-cream);
    color: var(--g-ink);
    padding: clamp(48px, 7vh, 90px) 0 clamp(90px, 11vh, 140px);
    isolation: isolate;
}

    /* dot-grid paper texture, faded radially */
    .smu-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: radial-gradient(var(--g-texture) 1px, transparent 1.5px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(ellipse 85% 75% at 60% 40%, #000 20%, transparent 74%);
        mask-image: radial-gradient(ellipse 85% 75% at 60% 40%, #000 20%, transparent 74%);
    }

/* the gold dotted waypoint path (after middlebury.edu) */
.smu-hero__path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .55;
}

    .smu-hero__path path {
        stroke: var(--g-gold);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-dasharray: .1 14;
        animation: gjk-dash 40s linear infinite;
    }

.smu-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.smu-hero__copy {
    max-width: 640px;
}

/* eyebrow chip */
.smu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r-pill);
    background: var(--g-paper);
    box-shadow: var(--g-sh-sm);
    color: var(--g-heading);
    font-family: var(--g-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    animation: gjk-rise .7s var(--g-ease-out) .05s backwards;
}

    .smu-eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--g-red);
        box-shadow: 0 0 0 4px rgba(222, 63, 46, .16);
        flex: 0 0 auto;
        animation: gjk-pulse 2.6s ease-in-out infinite;
    }

/* the mega headline: grotesk "SMU." + italic serif line */
.smu-hero__title {
    margin: 26px 0 0;
    font-family: var(--g-display);
    font-size: clamp(4.4rem, 11vw, 8rem);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.04em;
    color: var(--g-heading);
    animation: gjk-rise .8s var(--g-ease-out) .14s backwards;
}

.smu-hero__dot {
    color: var(--g-red);
}

.smu-hero__title em {
    display: block;
    margin-top: 18px;
    font-family: var(--g-serif-it);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--g-red);
    max-width: 18ch;
}

.smu-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 38px;
    animation: gjk-rise .8s var(--g-ease-out) .3s backwards;
}

/* media composition: offset tile + arch photo + rotating badge */
.smu-hero__media {
    position: relative;
    justify-self: center;
    width: min(100%, 430px);
    animation: gjk-rise .9s var(--g-ease-out) .22s backwards;
}

.smu-hero__tile {
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 58%;
    height: 46%;
    border-radius: 26px;
    background:
        radial-gradient(rgba(245, 241, 230, .35) 1.5px, transparent 2px) 0 0 / 14px 14px,
        linear-gradient(140deg, var(--g-red), var(--g-red-deep));
    z-index: 0;
}

.smu-hero__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(360px, 44vw, 500px);
    object-fit: cover;
    object-position: 62% 30%;
    border-radius: var(--g-r-arch);
    border: 6px solid var(--g-paper);
    box-shadow: var(--g-sh-lg);
}

/* rotating circular badge */
.smu-hero__badge {
    position: absolute;
    z-index: 2;
    left: -34px;
    top: -30px;
    width: 118px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--g-navy);
    border: 1px solid rgba(245, 241, 230, .2);
    box-shadow: 0 24px 50px -22px rgba(8, 18, 36, .65);
    text-decoration: none;
    transition: transform .3s var(--g-ease), background-color .3s var(--g-ease);
}

    .smu-hero__badge:hover {
        background: var(--g-red);
        transform: scale(1.05);
    }

    .smu-hero__badge svg {
        position: absolute;
        inset: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        animation: gjk-spin-slow 16s linear infinite;
    }

        .smu-hero__badge svg text {
            fill: var(--g-on-navy);
            font-family: var(--g-display);
            font-size: 11.5px;
            font-weight: 600;
            letter-spacing: .18em;
        }

    .smu-hero__badge > i {
        position: relative;
        color: var(--g-gold);
        font-size: 1.15rem;
        transition: transform .3s var(--g-ease);
    }

    .smu-hero__badge:hover > i {
        transform: translateX(3px);
        color: #fff;
    }

/* --------------------------------------------- 7. LANDING — TICKER BAND */
/* Tilted infinite marquee at the cream/navy seam (statement band). */
.smu-ticker {
    position: relative;
    z-index: 3;
    background: var(--g-red);
    color: var(--g-on-navy);
    transform: rotate(-1.4deg);
    width: 104%;
    /* Rides up into the hero's lower padding rather than sitting on the seam:
       the tilt makes the band paint well below its box at the low corner, and
       at -26px bottom that overhang covered the first line of the status card's
       heading. The two margins move together so only the band shifts — the
       content below keeps its original position. */
    margin: -54px 0 34px -2%;
    padding: 14px 0;
    overflow: hidden;
    box-shadow: 0 22px 44px -26px rgba(185, 51, 37, .8);
}

.smu-ticker__track {
    display: flex;
    align-items: center;
    gap: 34px;
    width: max-content;
    animation: gjk-marquee 30s linear infinite;
    will-change: transform;
}

.smu-ticker span {
    white-space: nowrap;
    font-family: var(--g-display);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
}

.smu-ticker .smu-ticker__it {
    font-family: var(--g-serif-it);
    font-style: italic;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .02em;
    font-size: 1.05rem;
}

.smu-ticker .smu-ticker__star {
    color: var(--g-gold);
    font-size: .9rem;
    letter-spacing: 0;
}

/* ---------------------------------------- 8. LANDING — NAVY SERVICES BAND */
.smu-services {
    position: relative;
    background:
        radial-gradient(900px 520px at 110% 0%, rgba(233, 180, 76, .07), transparent 60%),
        radial-gradient(760px 560px at -8% 100%, rgba(222, 63, 46, .1), transparent 62%),
        var(--g-navy);
    color: var(--g-on-navy-dim);
    padding: clamp(84px, 11vh, 130px) 0 clamp(76px, 10vh, 120px);
    isolation: isolate;
}

    /* tone-on-tone diagonal texture (after the reference's patterned band) */
    .smu-services::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: repeating-linear-gradient(-55deg, rgba(245, 241, 230, .035) 0 1px, transparent 1px 12px);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 85%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 85%, transparent 100%);
    }

/* ----- floating status card (white on navy, pulled up over the ticker) */
.smu-status-wrap {
    position: relative;
    z-index: 5;
}

.smu-status {
    margin-top: clamp(-140px, -11vw, -84px);
    margin-bottom: clamp(44px, 7vh, 72px);
    background: var(--g-paper);
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    box-shadow: var(--g-sh-lg);
    padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 42px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--g-ink);
    animation: gjk-rise .8s var(--g-ease-out) .4s backwards;
}

.smu-public .result-Section {
    display: none; /* jQuery .show() flips this when results are open */
}

.smu-status .result-Section {
    margin: 0;
    padding: 16px 22px;
    background: var(--g-cream);
    border: 0;
    border-left: 3px solid var(--g-red);
    border-radius: 0 var(--g-r) var(--g-r) 0;
    box-shadow: none;
    text-align: left;
}

    .smu-status .result-Section .smu-status__resultrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
    }

    .smu-status .result-Section h6 {
        margin: 0;
        font-family: var(--g-display);
        font-size: .98rem;
        font-weight: 600;
        color: var(--g-heading);
        letter-spacing: .01em;
    }

.smu-status__afati {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 32px);
    flex-wrap: wrap;
}

.smu-public .big-icon {
    float: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 68px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-arch);
    background: var(--g-cream);
}

    .smu-public .big-icon i {
        font-size: 1.35rem;
        color: var(--g-red);
    }

.smu-status__text {
    flex: 1 1 260px;
    min-width: 0;
}

    .smu-status__text h4 {
        margin: 0 0 5px;
        font-family: var(--g-display);
        font-size: 1.14rem;
        font-weight: 700;
        letter-spacing: .01em;
        color: var(--g-heading);
    }

        /* skeleton shimmer until CheckAfatet answers */
        .smu-status__text h4:empty {
            display: block;
            width: min(260px, 60%);
            height: 16px;
            border-radius: 8px;
            background: linear-gradient(90deg, var(--g-cream) 25%, var(--g-cream-2) 42%, var(--g-cream) 60%);
            background-size: 260px 100%;
            animation: gjk-shimmer 1.5s linear infinite;
        }

    .smu-status__text p {
        margin: 0;
        font-size: .95rem;
        color: var(--g-muted);
        text-transform: none;
        display: flex;
        align-items: center;
        gap: 9px;
    }

        .smu-status__text p i {
            color: var(--g-red);
        }

/* countdown — huge thin "fast facts" numerals with hairline dividers */
.smu-public .hide-counter {
    flex: 0 0 auto;
}

.smu-public .counter {
    display: flex;
    padding: 0;
}

.smu-public .counter-item {
    min-width: 84px;
    padding: 2px 20px;
    border: 0;
    border-right: 1px solid var(--g-line);
    border-radius: 0;
    background: transparent;
    text-align: center;
    color: var(--g-muted);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    display: inline-block;
}

    .smu-public .counter-item:first-child {
        padding-left: 0;
    }

    .smu-public .counter-item:last-child {
        border-right: 0;
        padding-right: 0;
    }

    .smu-public .counter-item h5 {
        margin: 0;
        font-family: var(--g-display);
        font-size: 2.4rem;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.02em;
        color: var(--g-heading);
    }

/* ----- section head: tracked caps + trailing rule (Roanoke) */
.smu-sechead {
    max-width: none;
    margin: 0 0 clamp(30px, 4vh, 48px);
    text-align: left;
}

.smu-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--g-serif-it);
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--g-gold);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.smu-sechead h2 {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 12px 0 0;
    font-family: var(--g-display);
    font-size: clamp(1.4rem, 3.2vw, 2.2rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--g-on-navy);
}

    /* the trailing hairline rule */
    .smu-sechead h2::after {
        content: "";
        flex: 1 1 60px;
        height: 1px;
        background: linear-gradient(90deg, var(--g-red-bright), var(--g-line-navy));
        min-width: 40px;
    }

.smu-sechead::after {
    content: none;
}

/* ----- numbered white cards */
.smu-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    background: transparent;
    border: 0;
    counter-reset: smucard;
}

.smu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(26px, 3vw, 34px);
    border: 1px solid transparent;
    border-radius: var(--g-r-lg);
    background: var(--g-paper);
    color: var(--g-ink);
    overflow: hidden;
    counter-increment: smucard;
    box-shadow: 0 24px 54px -30px rgba(4, 10, 22, .65);
    transition: transform .3s var(--g-ease), box-shadow .3s var(--g-ease);
    /* fill-mode stays `backwards` on the fallback load animation: a
       forwards-filled transform would leave a permanent stacking context. */
    animation: gjk-rise .7s var(--g-ease-out) backwards;
}

    .smu-card:nth-child(1) { animation-delay: .05s; }
    .smu-card:nth-child(2) { animation-delay: .11s; }
    .smu-card:nth-child(3) { animation-delay: .17s; }
    .smu-card:nth-child(4) { animation-delay: .23s; }
    .smu-card:nth-child(5) { animation-delay: .29s; }
    .smu-card:nth-child(6) { animation-delay: .35s; }

    /* ghost numeral 01–06 */
    .smu-card::after {
        content: counter(smucard, decimal-leading-zero);
        position: absolute;
        top: 18px;
        right: 22px;
        font-family: var(--g-display);
        font-size: 2.4rem;
        font-weight: 700;
        letter-spacing: -.03em;
        line-height: 1;
        color: var(--g-cream-2);
        transition: color .3s var(--g-ease);
        pointer-events: none;
    }

    /* crimson rule that grows along the top edge on hover */
    .smu-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--g-red), var(--g-gold));
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .35s var(--g-ease-out);
    }

    .smu-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 40px 70px -32px rgba(4, 10, 22, .8);
    }

        .smu-card:hover::before {
            transform: scaleX(1);
        }

        .smu-card:hover::after {
            color: var(--g-gold);
        }

.smu-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 60px;
    border-radius: var(--g-r-arch);
    border: 1px solid var(--g-line);
    background: var(--g-cream);
    transition: background-color .3s var(--g-ease), border-color .3s var(--g-ease), transform .3s var(--g-ease);
}

    .smu-card__icon i {
        padding: 0;
        font-size: 1.25rem;
        color: var(--g-red);
        transition: color .3s var(--g-ease);
    }

.smu-card:hover .smu-card__icon {
    background: var(--g-red);
    border-color: var(--g-red);
    transform: translateY(-2px);
}

    .smu-card:hover .smu-card__icon i {
        color: #fff;
    }

.smu-card h3 {
    margin: 6px 0 0;
    font-family: var(--g-display);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--g-heading);
    padding-right: 56px; /* keep clear of the ghost numeral */
}

.smu-card p {
    margin: 0;
    flex: 1 1 auto;
    font-size: .94rem;
    line-height: 1.65;
    color: var(--g-muted);
}

/* tracked uppercase link with an arrow puck */
.smu-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-family: var(--g-display);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--g-accent-text);
    text-decoration: none;
    transition: color .22s var(--g-ease);
}

    .smu-card__cta i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--g-line-strong);
        border-radius: 50%;
        font-size: .85rem;
        color: inherit;
        transition: transform .3s var(--g-ease), background-color .3s var(--g-ease), border-color .3s var(--g-ease), color .3s var(--g-ease);
    }

    .smu-card__cta:hover, .smu-card__cta:focus {
        color: var(--g-red-deep);
        text-decoration: none;
    }

        .smu-card__cta:hover i {
            transform: rotate(-45deg);
            background: var(--g-red);
            border-color: var(--g-red);
            color: #fff;
        }

/* scroll-driven reveals where supported (progressive enhancement) */
@supports (animation-timeline: view()) {
    .smu-card {
        animation: gjk-rise linear both;
        animation-delay: 0s;
        animation-timeline: view();
        animation-range: entry 5% entry 45%;
    }
}

/* --------------------------------------------------------------- 9. FOOTER */
/* Multi-column navy strip (smu.uni-gjilan.net's footer, in Atelier tokens):
   brand + about, "Tjera..." links, "Public" links, contact block, then a
   hairline-divided bottom bar with the copyright and the UniSoft credit. */
.smu-public .smu-footer {
    background: var(--g-navy-deep);
    border-top: 1px solid var(--g-line-navy);
    color: var(--g-on-navy-dim);
    font-size: .9rem;
}

body.smu-landing .smu-footer {
    border-top: 0;
}

.smu-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: clamp(28px, 4vw, 56px);
    max-width: var(--g-container);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 72px) var(--g-gutter) clamp(32px, 4vw, 48px);
}

body.smu-public .smu-footer .smu-footer__logo {
    margin-bottom: 14px;
    color: var(--g-on-navy);
    text-decoration: none;
}

    .smu-footer__logo .smu-logo__tile {
        fill: var(--g-gold);
    }

    .smu-footer__logo .smu-logo__glyph {
        fill: var(--g-navy-deep);
    }

    .smu-footer__logo .smu-logo__name {
        color: var(--g-on-navy);
    }

    .smu-footer__logo .smu-logo__sub {
        color: var(--g-on-navy-faint);
    }

.smu-footer__about {
    max-width: 34ch;
    margin: 0;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--g-on-navy-faint);
}

.smu-footer__heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
    font-family: var(--g-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--g-on-navy);
}

    .smu-footer__heading::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        min-width: 24px;
        background: linear-gradient(90deg, var(--g-red-bright), var(--g-line-navy));
    }

.smu-footer__links,
.smu-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The footer's link colours carry `body.smu-public .smu-footer` on purpose:
   section 11's `body.smu-public:not(.smu-landing) a` paints content links
   crimson and outranks a plain .smu-footer__* selector, so without the extra
   weight every link down here turned red on inner pages (the landing page was
   spared only by that rule's :not()). The hover rules need one step more
   again, to clear the matching :hover selector — including its underline,
   which would double up on the bottom bar's gold rule. */
body.smu-public .smu-footer .smu-footer__links a {
    color: var(--g-on-navy-dim);
    font-size: .88rem;
    text-decoration: none;
    transition: color .2s var(--g-ease);
}

    body.smu-public .smu-footer .smu-footer__links a:hover,
    body.smu-public .smu-footer .smu-footer__links a:focus {
        color: var(--g-gold);
        text-decoration: none;
    }

.smu-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    line-height: 1.6;
}

.smu-footer__contact i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--g-gold);
}

body.smu-public .smu-footer .smu-footer__contact a {
    color: var(--g-on-navy-dim);
    text-decoration: none;
}

    body.smu-public .smu-footer .smu-footer__contact a:hover,
    body.smu-public .smu-footer .smu-footer__contact a:focus {
        color: var(--g-gold);
        text-decoration: none;
    }

.smu-footer__bottom {
    border-top: 1px solid var(--g-line-navy);
}

.smu-footer__bottombar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: var(--g-container);
    margin: 0 auto;
    padding: 20px var(--g-gutter);
    font-size: .82rem;
    color: var(--g-on-navy-faint);
}

    body.smu-public .smu-footer .smu-footer__bottombar a {
        color: var(--g-on-navy);
        font-weight: 700;
        text-decoration: none;
        border-bottom: 1px solid var(--g-gold);
        padding-bottom: 1px;
    }

        body.smu-public .smu-footer .smu-footer__bottombar a:hover,
        body.smu-public .smu-footer .smu-footer__bottombar a:focus {
            color: var(--g-gold);
            text-decoration: none;
        }

@media (max-width: 900px) {
    .smu-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .smu-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .smu-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------- 10. MODALS */
.smu-public .modal-content {
    border: 1px solid var(--g-line);
    border-top: 3px solid var(--g-red);
    border-radius: var(--g-r);
    box-shadow: 0 40px 90px -30px rgba(24, 20, 10, .5);
    background: var(--g-paper);
}

.smu-public .modal-header {
    border-bottom: 1px solid var(--g-line);
}

    .smu-public .modal-header h4 {
        font-family: var(--g-display);
        color: var(--g-heading);
    }

.smu-public .modal-footer {
    border-top: 1px solid var(--g-line);
}

/* ---------------------------------- 11. SHARED POLISH FOR ALL PUBLIC PAGES */
/* Every anonymous page (Contact, Aplikimi, statistics, verification, …) is
   Bootstrap-3 markup this section restyles into the Atelier language. All of
   it is token-driven, so the dark theme flows through for free. */
body.smu-public:not(.smu-landing) > .container,
body.smu-public:not(.smu-landing) > .container-fluid {
    padding-top: 18px;
    padding-bottom: 24px;
    flex: 0 0 auto;
}

    /* only the final content block absorbs leftover viewport height —
       otherwise empty upper containers stretch and leave holes */
    body.smu-public:not(.smu-landing) > .container:last-of-type,
    body.smu-public:not(.smu-landing) > .container-fluid:last-of-type {
        flex: 1 0 auto;
        padding-bottom: 44px;
    }

body.smu-public:not(.smu-landing) {
    font-size: .98rem;
}

    body.smu-public:not(.smu-landing) h1,
    body.smu-public:not(.smu-landing) h2,
    body.smu-public:not(.smu-landing) h3,
    body.smu-public:not(.smu-landing) h4,
    body.smu-public:not(.smu-landing) h5 {
        color: var(--g-heading);
        font-family: var(--g-display);
        letter-spacing: -.005em;
    }

    body.smu-public:not(.smu-landing) a {
        color: var(--g-accent-text);
    }

        body.smu-public:not(.smu-landing) a:hover,
        body.smu-public:not(.smu-landing) a:focus {
            color: var(--g-accent-text);
            text-decoration: underline;
        }

    body.smu-public:not(.smu-landing) .title {
        border-bottom: 3px solid var(--g-red);
        display: inline-block;
        padding-bottom: 6px;
    }

/* ----- forms */
.smu-public .form-control {
    height: 46px;
    padding: 10px 16px;
    background: var(--g-paper);
    border: 1.5px solid var(--g-line-strong);
    border-radius: 12px;
    color: var(--g-ink);
    font-family: var(--g-sans);
    font-size: .95rem;
    box-shadow: 0 1px 2px rgba(28, 24, 12, .04);
    transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease), background-color .2s var(--g-ease);
}

    .smu-public .form-control:hover:not(:focus):not([disabled]) {
        border-color: var(--g-muted);
    }

    .smu-public .form-control:focus {
        border-color: var(--g-focus-border);
        box-shadow: 0 0 0 4px var(--g-focus-ring);
        outline: none;
    }

    .smu-public .form-control::placeholder {
        color: var(--g-muted);
        opacity: .7;
    }

    .smu-public .form-control[disabled],
    .smu-public .form-control[readonly] {
        background: var(--g-cream-2);
        color: var(--g-muted);
        cursor: not-allowed;
    }

.smu-public textarea.form-control {
    height: auto;
    min-height: 110px;
}

/* custom chevron instead of the native select arrow */
.smu-public select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-block: 0;
    padding-right: 42px;
    background-image: var(--g-select-arrow);
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

    /* dark theme: native option list follows the field colours */
    .smu-public select.form-control option {
        background: var(--g-paper);
        color: var(--g-ink);
    }

.smu-public label {
    color: var(--g-heading);
    font-weight: 600;
}

/* field labels become small tracked kickers (the Atelier label voice) */
.smu-public .form-label,
.smu-public .control-label {
    display: inline-block;
    margin-bottom: 7px;
    font-family: var(--g-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-muted);
}

.smu-public input[type="radio"],
.smu-public input[type="checkbox"] {
    accent-color: var(--g-red);
    width: 16px;
    height: 16px;
}

.smu-public .help-block {
    color: var(--g-muted);
}

.smu-public .has-error .form-control {
    border-color: var(--g-red);
    background: var(--g-danger-tint);
}

/* the views print validation through <code> — make it read as field help,
   not as a Bootstrap code chip */
.smu-public .form-group code {
    display: inline-block;
    padding: 3px 0 0;
    background: transparent;
    border-radius: 0;
    font-family: var(--g-sans);
    font-size: .78rem;
    font-weight: 600;
    color: var(--g-accent-text);
}

    .smu-public .form-group code:empty {
        display: none;
    }

/* ----- buttons */
.smu-public .btn {
    border-radius: 12px;
    font-family: var(--g-display);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .2s var(--g-ease), border-color .2s var(--g-ease), color .2s var(--g-ease), transform .2s var(--g-ease);
}

    .smu-public .btn:not(.btn-xs):not(.btn-sm) {
        padding: 9px 22px;
    }

    .smu-public .btn:hover {
        transform: translateY(-1px);
    }

.smu-public .btn-primary {
    background: var(--g-navy);
    border-color: var(--g-navy);
    color: #fff;
}

    .smu-public .btn-primary:hover,
    .smu-public .btn-primary:focus,
    .smu-public .btn-primary:active {
        background: var(--g-navy-deep);
        border-color: var(--g-navy-deep);
        color: #fff;
    }

.smu-public .btn-default {
    background: var(--g-paper);
    border-color: var(--g-line-strong);
    color: var(--g-heading);
}

    .smu-public .btn-default:hover,
    .smu-public .btn-default:focus {
        background: var(--g-cream-2);
        border-color: var(--g-line-strong);
        color: var(--g-heading);
    }

.smu-public .btn-success {
    background: #2E7D4F;
    border-color: #2E7D4F;
}

.smu-public .btn-danger {
    background: var(--g-red);
    border-color: var(--g-red);
}

    .smu-public .btn-danger:hover,
    .smu-public .btn-danger:focus {
        background: var(--g-red-deep);
        border-color: var(--g-red-deep);
    }

.smu-public .btn-info {
    background: var(--g-navy);
    border-color: var(--g-navy);
}

/* ----- panels */
.smu-public .panel {
    background: var(--g-paper);
    border: 1px solid var(--g-line);
    border-radius: 18px;
    box-shadow: var(--g-sh-sm);
    /* NOT overflow:hidden — it would clip datepicker popups inside panels;
       the heading/footer round their own corners instead */
    overflow: visible;
}

/* bold navy section band — the slim sibling of the module masthead */
.smu-public .panel-heading {
    padding: 15px 22px;
    font-family: var(--g-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .025em;
    border-bottom: 0;
    background: linear-gradient(120deg, var(--g-navy-deep) 0%, var(--g-navy) 85%);
    /* !important: many views carry ad-hoc inline colours on the heading */
    color: var(--g-on-navy) !important;
    border-radius: 0;
}

    /* gradient accent bar in front of every section heading */
    .smu-public .panel-heading::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 17px;
        margin-right: 13px;
        border-radius: 3px;
        background: linear-gradient(180deg, var(--g-red-bright), var(--g-gold));
        vertical-align: -2px;
        box-shadow: 0 2px 8px rgba(255, 106, 87, .45);
    }

.smu-public .panel-primary {
    border-color: var(--g-line);
}

    .smu-public .panel-primary > .panel-heading {
        background: var(--g-navy);
        border-color: var(--g-navy);
        color: var(--g-on-navy) !important;
    }

        .smu-public .panel-primary > .panel-heading::before {
            background: var(--g-gold);
        }

/* ----- module page masthead
   40+ public form pages open with
     <div class="panel panel-primary"><h4 class="box-heading" style="…">…</h4></div>
   — restyled as a navy masthead that echoes the landing hero. The :has()
   guard only fires when the heading is the panel's sole content; without
   :has() support the panel simply stays a white card (the heading styles
   below still apply and stay readable). */
.smu-public .box-heading {
    font-family: var(--g-display);
    font-weight: 700;
    /* !important: the views hard-code color:#428bca on the element */
    color: var(--g-heading) !important;
}

/* the masthead decorations apply ONLY when the heading titles a panel —
   some views reuse .box-heading inside notes and cards */
.smu-public .panel > .box-heading,
.smu-public .panel > .panel-body > .box-heading {
    position: relative;
    margin: 0;
    padding: 24px 30px 26px;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    letter-spacing: .01em;
    line-height: 1.35;
}

    /* generated kicker line above the module title */
    .smu-public .panel > .box-heading::before,
    .smu-public .panel > .panel-body > .box-heading::before {
        content: 'Universiteti "Fehmi Agani" — Gjakovë';
        display: block;
        margin-bottom: 7px;
        font-family: var(--g-sans);
        font-size: .64rem;
        font-weight: 700;
        letter-spacing: .24em;
        text-transform: uppercase;
        line-height: 1.4;
        color: var(--g-gold);
    }

    .smu-public .panel > .box-heading::after,
    .smu-public .panel > .panel-body > .box-heading::after {
        content: "";
        display: block;
        width: 46px;
        height: 3px;
        margin: 12px auto 0;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--g-red-bright), var(--g-gold));
    }

.smu-public .panel:has(> .box-heading:only-child),
.smu-public .panel:has(> .panel-body > .box-heading:only-child) {
    position: relative;
    background:
        radial-gradient(560px 220px at 108% -40%, rgba(222, 63, 46, .3), transparent 65%),
        radial-gradient(420px 200px at -6% 130%, rgba(233, 180, 76, .14), transparent 60%),
        linear-gradient(115deg, var(--g-navy-deep) 0%, var(--g-navy) 72%) !important;
    /* !important: keeps the masthead ahead of the legacy-override layer below */
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: var(--g-sh);
    overflow: hidden;
}

    /* the hero dot-grid, quoted */
    .smu-public .panel:has(> .box-heading:only-child)::before,
    .smu-public .panel:has(> .panel-body > .box-heading:only-child)::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(245, 241, 230, .1) 1px, transparent 1.5px);
        background-size: 20px 20px;
        pointer-events: none;
    }

    .smu-public .panel:has(> .box-heading:only-child) .box-heading,
    .smu-public .panel:has(> .panel-body > .box-heading:only-child) .box-heading {
        color: var(--g-on-navy) !important;
    }

/* ----- informational notes
   <div class="note note-success" style="padding…background…border-left…">
   appears on 40+ views with hard-coded inline styles — beaten here once so
   every page shares one voice: tinted card, tone medallion, ink text. */
.smu-public .note {
    position: relative;
    padding: 18px 22px 18px 66px !important;      /* inline padding:15px    */
    background: var(--g-cream-2) !important;      /* inline background-color */
    border: 1px solid var(--g-line);
    border-left: 3px solid var(--g-line-strong) !important; /* inline border-left */
    border-radius: 14px;
    box-shadow: var(--g-sh-sm);
    color: var(--g-ink);
}

    /* tone medallion (Font Awesome is loaded on every public page) */
    .smu-public .note::before {
        content: "\f129";
        font-family: 'FontAwesome';
        position: absolute;
        left: 18px;
        top: 17px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--g-navy);
        color: #fff;
        font-size: .85rem;
        line-height: 32px;
        text-align: center;
    }

    .smu-public .note h4,
    .smu-public .note h5 {
        margin: 0 0 5px;
        font-family: var(--g-display);
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        /* !important: the views hard-code color:green / red / orange */
        color: var(--g-heading) !important;
    }

    .smu-public .note p {
        margin: 0;
        font-size: .93rem;
        line-height: 1.65;
    }

.smu-public .note.note-success {
    background: var(--g-success-tint) !important;
    border-left-color: var(--g-tone-success) !important;
}

    .smu-public .note.note-success::before {
        content: "\f00c";
        background: var(--g-tone-success);
    }

.smu-public .note.note-danger {
    background: var(--g-danger-tint) !important;
    border-left-color: var(--g-red) !important;
}

    .smu-public .note.note-danger::before {
        content: "\f071";
        background: var(--g-red);
    }

.smu-public .note.note-warning {
    background: var(--g-warning-tint) !important;
    border-left-color: var(--g-tone-warning) !important;
}

    .smu-public .note.note-warning::before {
        content: "\f12a";
        background: var(--g-tone-warning);
    }

.smu-public .panel-body {
    background: var(--g-paper);
    color: var(--g-ink);
}

.smu-public .panel-footer {
    background: var(--g-cream);
    border-top: 1px solid var(--g-line);
}

.smu-public .well {
    background: var(--g-cream-2);
    border: 1px solid var(--g-line);
    border-radius: 14px;
    box-shadow: none;
}

/* ----- search panels (PublicCV, AlumniSearch, …): pill bar + filter grid.
   Pairs with a plain <div class="panel panel-primary smu-searchbox"> so the
   generic panel/panel-heading styling above supplies the navy accent bar. */
.smu-public .smu-searchbar {
    display: flex;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
    border: 1.5px solid var(--g-line-strong);
    border-radius: var(--g-r-pill);
    background: var(--g-paper);
    box-shadow: var(--g-sh-sm);
    transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
}

    .smu-public .smu-searchbar:focus-within {
        border-color: var(--g-focus-border);
        box-shadow: 0 0 0 4px var(--g-focus-ring);
    }

.smu-public .smu-searchbar__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

    .smu-public .smu-searchbar__field i {
        position: absolute;
        top: 50%;
        left: 22px;
        transform: translateY(-50%);
        color: var(--g-muted);
        font-size: .95rem;
        pointer-events: none;
    }

.smu-public .smu-searchbar__input {
    box-sizing: border-box;
    width: 100%;
    height: 58px;
    padding: 0 16px 0 50px;
    border: 0;
    border-radius: var(--g-r-pill) 0 0 var(--g-r-pill);
    background: transparent;
    color: var(--g-ink);
    font-family: var(--g-sans);
    font-size: .95rem;
}

    .smu-public .smu-searchbar__input:focus {
        outline: none;
    }

    .smu-public .smu-searchbar__input::placeholder {
        color: var(--g-muted);
    }

.smu-public .smu-searchbar__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--g-red);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s var(--g-ease), transform .2s var(--g-ease);
}

    .smu-public .smu-searchbar__submit:hover,
    .smu-public .smu-searchbar__submit:focus {
        background: var(--g-red-deep);
        color: #fff;
        transform: translateY(-1px);
    }

.smu-public .smu-searchnote {
    max-width: 640px;
    margin: 16px auto 0;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    color: var(--g-muted);
}

.smu-public .smu-searchfilters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
    margin-top: 24px;
}

    .smu-public .smu-searchfilters .form-group {
        margin: 0;
        min-width: 0;
    }

.smu-public .smu-actionrow {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* ----- result cards (person-style grids: PublicCV, AlumniSearch, …) */
.smu-public .smu-peoplegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    margin: 26px 0 0;
}

.smu-public .smu-personcard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px 18px;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-lg);
    background: var(--g-paper);
    box-shadow: var(--g-sh-sm);
    transition: transform .25s var(--g-ease), box-shadow .25s var(--g-ease), border-color .25s var(--g-ease);
}

    .smu-public .smu-personcard:hover {
        transform: translateY(-4px);
        border-color: rgba(222, 63, 46, .3);
        box-shadow: var(--g-sh);
    }

.smu-public .smu-personcard__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--g-navy);
    color: #fff;
}

    .smu-public .smu-personcard__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.smu-public .smu-personcard__name {
    margin: 4px 0 0;
    font-family: var(--g-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--g-heading);
}

.smu-public .smu-personcard__meta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--g-muted);
}

    .smu-public .smu-personcard__meta i {
        margin-top: 3px;
        flex: 0 0 auto;
        color: var(--g-accent-text);
    }

.smu-public .smu-personcard__bio {
    margin: 0;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--g-ink);
}

.smu-public .smu-personcard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--g-line);
}

.smu-public .smu-personcard__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--g-r-pill);
    background: var(--g-cream-2);
    color: var(--g-accent-text);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s var(--g-ease), color .2s var(--g-ease);
}

    .smu-public .smu-personcard__tag:hover {
        background: var(--g-red);
        color: #fff;
    }

.smu-public .smu-personcard__cta {
    margin-top: auto;
    padding-top: 12px;
    text-align: right;
}

.smu-public .smu-emptystate {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--g-muted);
    font-size: .95rem;
}

/* ----- empty state (tables/lists with no rows: SEVCPublicLinks, …) */
.smu-public .smu-empty {
    padding: clamp(38px, 6vw, 68px) 26px;
    border: 1px dashed var(--g-line-strong);
    border-radius: var(--g-r-lg);
    background: var(--g-cream);
    text-align: center;
}

.smu-public .smu-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 58px;
    margin-bottom: 16px;
    border: 1px solid var(--g-line-strong);
    border-radius: var(--g-r-arch);
    background: var(--g-paper);
    color: var(--g-muted);
    font-size: 21px;
}

.smu-public .smu-empty h3 {
    margin: 0 0 8px;
    font-family: var(--g-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--g-heading) !important;
}

.smu-public .smu-empty p {
    margin: 0 auto;
    max-width: 46ch;
    font-size: .9rem;
    color: var(--g-muted);
}

/* ----- tables */
.smu-public .table {
    color: var(--g-ink);
    background: transparent;
}

    .smu-public .table > thead > tr > th {
        border-bottom: 2px solid var(--g-line-strong);
        color: var(--g-muted);
        font-family: var(--g-display);
        font-size: .74rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .smu-public .table > tbody > tr > td,
    .smu-public .table > tbody > tr > th {
        border-top: 1px solid var(--g-line);
        vertical-align: middle;
    }

.smu-public .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--g-cream);
}

.smu-public .table-hover > tbody > tr:hover {
    background: var(--g-cream-2);
}

.smu-public .table-bordered,
.smu-public .table-bordered > thead > tr > th,
.smu-public .table-bordered > tbody > tr > td,
.smu-public .table-bordered > tbody > tr > th {
    border-color: var(--g-line);
}

/* DataTables chrome inherits the same language */
.smu-public .dataTables_wrapper .dataTables_filter input,
.smu-public .dataTables_wrapper .dataTables_length select {
    background: var(--g-paper);
    border: 1px solid var(--g-line-strong);
    border-radius: 10px;
    padding: 6px 12px;
    margin: 0 6px;
    color: var(--g-ink);
    font-family: var(--g-sans);
    transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
}

    .smu-public .dataTables_wrapper .dataTables_filter input:focus {
        border-color: var(--g-focus-border);
        box-shadow: 0 0 0 3px var(--g-focus-ring);
        outline: none;
    }

.smu-public .dataTables_wrapper .dataTables_length,
.smu-public .dataTables_wrapper .dataTables_filter {
    margin-bottom: 14px;
    font-family: var(--g-display);
    font-size: .8rem;
    font-weight: 600;
    color: var(--g-muted);
}

.smu-public .dataTables_wrapper .dataTables_info,
.smu-public .dataTables_wrapper .dataTables_paginate {
    padding-top: 12px;
    color: var(--g-muted);
    font-size: .82rem;
}

.smu-public .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    margin-left: 6px;
    padding: 6px 16px;
    border: 1px solid var(--g-line-strong) !important;
    border-radius: var(--g-r-pill);
    background: var(--g-paper) !important;
    font-family: var(--g-display);
    font-size: .76rem;
    font-weight: 600;
    color: var(--g-heading) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s var(--g-ease), color .2s var(--g-ease), border-color .2s var(--g-ease);
}

    .smu-public .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
        background: var(--g-navy) !important;
        border-color: var(--g-navy) !important;
        color: var(--g-on-navy) !important;
    }

    .smu-public .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .smu-public .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--g-navy) !important;
        border-color: var(--g-navy) !important;
        color: var(--g-on-navy) !important;
    }

    .smu-public .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
        opacity: .45;
        cursor: default;
    }

.smu-public .dataTables_wrapper .dataTables_empty {
    padding: 26px 10px;
    color: var(--g-muted);
    font-weight: 600;
}

/* ----- pagination */
.smu-public .pagination > li > a,
.smu-public .pagination > li > span {
    margin: 0 3px;
    border: 1px solid var(--g-line-strong);
    border-radius: 10px;
    background: var(--g-paper);
    color: var(--g-heading);
    font-family: var(--g-display);
    font-weight: 600;
}

    .smu-public .pagination > li > a:hover {
        background: var(--g-cream-2);
        color: var(--g-heading);
    }

.smu-public .pagination > .active > a,
.smu-public .pagination > .active > a:hover,
.smu-public .pagination > .active > span {
    background: var(--g-navy);
    border-color: var(--g-navy);
    color: #fff;
}

/* ----- tabs */
.smu-public .nav-tabs {
    border-bottom: 1px solid var(--g-line-strong);
}

    .smu-public .nav-tabs > li > a {
        border: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        margin-right: 6px;
        background: transparent;
        color: var(--g-muted);
        font-family: var(--g-display);
        font-weight: 600;
    }

        .smu-public .nav-tabs > li > a:hover {
            background: transparent;
            border-color: transparent;
            border-bottom-color: var(--g-line-strong);
            color: var(--g-heading);
        }

    .smu-public .nav-tabs > li.active > a,
    .smu-public .nav-tabs > li.active > a:hover,
    .smu-public .nav-tabs > li.active > a:focus {
        background: transparent;
        border: 0;
        border-bottom: 3px solid var(--g-red);
        color: var(--g-heading);
    }

/* ----- breadcrumbs, alerts, misc */
.smu-public .breadcrumb {
    background: transparent;
    padding-left: 0;
    font-size: .82rem;
}

.smu-public .alert {
    border-radius: 14px;
    border-width: 1px;
}

.smu-public .alert-danger {
    background: var(--g-danger-tint);
    border-color: rgba(222, 63, 46, .4);
    color: var(--g-ink);
}

.smu-public .alert-success {
    background: var(--g-success-tint);
    border-color: rgba(46, 125, 79, .4);
    color: var(--g-ink);
}

.smu-public .alert-info,
.smu-public .alert-warning {
    background: var(--g-cream-2);
    border-color: var(--g-line-strong);
    color: var(--g-ink);
}

.smu-public .list-group-item {
    background: var(--g-paper);
    border-color: var(--g-line);
    color: var(--g-ink);
}

body.smu-public .list-group-item.active,
body.smu-public .list-group-item.active:hover,
body.smu-public .list-group-item.active:focus {
    background: var(--g-navy);
    border-color: var(--g-navy);
    color: #fff;
}

/* ----- LEGACY FORM-PAGE OVERRIDE LAYER
   The application form views (Aplikimi, LoadData, transfer, …) each embed a
   <style> block that fights the design system — some rules carry !important
   (`.panel{border:1px solid #488fcc !important; border-radius:0 !important}`,
   `.panel-default>.panel-heading{color:white !important; background-color:
   #488fcc !important}`) and all of them load AFTER this stylesheet. Every
   selector here is prefixed with `body` so it outranks them at equal
   importance, and !important is used exactly where the views use it. */
body.smu-public:not(.smu-landing) > .container {
    border: 0 !important; /* views draw style="border:2px solid #F5F5F5" boxes */
}

/* This project's customised bootstrap.min.css ships NO .container widths, so
   page width was always content-driven — a narrow page shrank to a sliver.
   Every public page now gets the same shell width as the landing. */
.smu-public .container {
    width: 100%;
    max-width: var(--g-container);
    margin-left: auto;
    margin-right: auto;
}

body.smu-public .panel {
    background: var(--g-paper) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 18px !important;
    margin-bottom: 20px !important;
}

body.smu-public .panel-heading {
    background:
        radial-gradient(420px 120px at 106% -30%, rgba(222, 63, 46, .28), transparent 65%),
        linear-gradient(120deg, var(--g-navy-deep) 0%, var(--g-navy) 85%) !important;
    color: var(--g-on-navy) !important;
    font-size: 1.02rem;
    border-radius: 17px 17px 0 0 !important;
}

body.smu-public .panel-footer {
    border-radius: 0 0 17px 17px;
}

body.smu-public .panel-body {
    border-radius: 0 0 17px 17px;
}

body.smu-public .panel-primary > .panel-heading {
    background: var(--g-navy) !important;
    color: var(--g-on-navy) !important;
}

/* headings that wrap their text in <h3><b>…</b></h3> etc. — the children must
   inherit the band's ivory instead of the page heading colour (direct
   children only: a heading may wrap larger loaded content) */
body.smu-public .panel > .panel-heading > h1,
body.smu-public .panel > .panel-heading > h2,
body.smu-public .panel > .panel-heading > h3,
body.smu-public .panel > .panel-heading > h4,
body.smu-public .panel > .panel-heading > h5,
body.smu-public .panel > .panel-heading > h6 {
    margin: 0;
    font-family: inherit;
    font-size: 1em;
    font-weight: inherit;
    line-height: inherit;
    color: inherit !important;
}

    body.smu-public .panel > .panel-heading > h1 > b,
    body.smu-public .panel > .panel-heading > h2 > b,
    body.smu-public .panel > .panel-heading > h3 > b,
    body.smu-public .panel > .panel-heading > h4 > b,
    body.smu-public .panel > .panel-heading > b,
    body.smu-public .panel > .panel-heading > strong,
    body.smu-public .panel > .panel-heading > small,
    body.smu-public .panel > .panel-heading > a:not(.btn) {
        color: inherit !important;
    }

/* a .panel-heading OUTSIDE any panel is a legacy layout wrapper, not a title
   band (some views wrap whole AJAX-loaded forms in one) — neutralise it */
body.smu-public :not(.panel):not(.panel-default):not(.panel-primary) > .panel-heading {
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

    body.smu-public :not(.panel):not(.panel-default):not(.panel-primary) > .panel-heading::before,
    body.smu-public :not(.panel):not(.panel-default):not(.panel-primary) > .panel-heading::after {
        content: none !important;
    }

/* ----- SHARED PAGE MASTHEAD
   Rendered by _Layout on every inner public page from ViewBag.Title (a page
   that draws its own title band wins — the layout script removes this one).
   The same rich treatment is applied below to the two legacy title-band
   patterns so every page opens identically. */
.smu-masthead {
    position: relative;
    margin: 26px 0 22px;
    padding: 24px 30px 26px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(rgba(245, 241, 230, .09) 1px, transparent 1.5px) 0 0 / 22px 22px repeat,
        radial-gradient(480px 210px at 106% -30%, rgba(222, 63, 46, .32), transparent 62%),
        radial-gradient(400px 200px at -4% 130%, rgba(233, 180, 76, .16), transparent 60%),
        linear-gradient(115deg, var(--g-navy-deep) 0%, var(--g-navy) 75%);
    box-shadow: var(--g-sh);
    color: var(--g-on-navy);
    animation: gjk-rise .5s var(--g-ease-out) backwards;
}

.smu-masthead__kicker {
    display: block;
    margin-bottom: 7px;
    font-family: var(--g-sans);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--g-gold);
}

.smu-masthead__title {
    margin: 0;
    font-family: var(--g-display);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.3;
    /* !important: the shared inner-page h1 colour rule must not repaint the
       title dark on the navy band */
    color: var(--g-on-navy) !important;
}

    .smu-masthead__title::after {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin-top: 10px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--g-red-bright), var(--g-gold));
    }

/* the masthead wrapper manages its own rhythm — the generic inner-page
   container padding must not stack on top of it, and its side padding is
   dropped so the band's edges line up exactly with the nav pill and the
   content panels (whose rows cancel the container gutter with -15px margins) */
body.smu-public:not(.smu-landing) > .container.smu-masthead-wrap {
    padding: 26px 0 0;
    flex: 0 0 auto;
}

/* a faint oversize wordmark anchors the band's right side */
.smu-masthead::after {
    content: "SMU";
    position: absolute;
    right: 18px;
    bottom: -18px;
    font-family: var(--g-display);
    font-size: 6.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: rgba(245, 241, 230, .055);
    pointer-events: none;
}

/* ----- crumb pills, real children at the top of the masthead: ghost pills
   on the navy ground, Fillimi left and Kthehu right */
.smu-crumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 22px;
    padding: 0;
    position: relative;
    z-index: 1;
}

.smu-crumbs__home,
.smu-crumbs__back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 17px;
    border: 1px solid rgba(245, 241, 230, .32);
    border-radius: var(--g-r-pill);
    background: rgba(245, 241, 230, .07);
    font-family: var(--g-display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--g-on-navy);
    text-decoration: none;
    transition: background-color .2s var(--g-ease), border-color .2s var(--g-ease), color .2s var(--g-ease), transform .2s var(--g-ease);
}

    .smu-crumbs__home i {
        color: var(--g-gold);
        transition: color .2s var(--g-ease);
    }

    .smu-crumbs__back i {
        transition: transform .2s var(--g-ease);
    }

    .smu-crumbs__home:hover, .smu-crumbs__home:focus,
    .smu-crumbs__back:hover, .smu-crumbs__back:focus {
        background: var(--g-on-navy);
        border-color: var(--g-on-navy);
        color: var(--g-navy);
        text-decoration: none;
        transform: translateY(-1px);
    }

        .smu-crumbs__home:hover i {
            color: var(--g-red);
        }

        .smu-crumbs__back:hover i {
            transform: translateX(-4px);
        }

/* the per-view legacy breadcrumbs (span > a > fa-home …) are superseded,
   together with the spacing <br>s that trail them */
body.smu-public .container span:has(> a > .fa-home),
body.smu-public .container span:has(> a > .fa-home) ~ br {
    display: none;
}

/* stray layout <br>s at body, form and container level are spacing junk —
   they also break the crumb-pill overlay's fixed geometry */
body.smu-public:not(.smu-landing) > br,
body.smu-public:not(.smu-landing) > form > br,
body.smu-public:not(.smu-landing) > .container > br {
    display: none;
}

/* a panel that is ONLY a heading (the search pages' page title) gets the
   full masthead treatment: rich ground, generated kicker, gradient rule */
body.smu-public .panel > .panel-heading:only-child {
    border-radius: 17px !important;
    padding: 24px 30px 26px;
    background:
        radial-gradient(rgba(245, 241, 230, .09) 1px, transparent 1.5px) 0 0 / 22px 22px repeat,
        radial-gradient(480px 210px at 106% -30%, rgba(222, 63, 46, .32), transparent 62%),
        radial-gradient(400px 200px at -4% 130%, rgba(233, 180, 76, .16), transparent 60%),
        linear-gradient(115deg, var(--g-navy-deep) 0%, var(--g-navy) 75%) !important;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
}

    /* the accent bar becomes a generated kicker line above the title */
    body.smu-public .panel > .panel-heading:only-child::before {
        content: 'Universiteti "Fehmi Agani" — Gjakovë';
        display: block;
        width: auto;
        height: auto;
        margin: 0 0 7px;
        border-radius: 0;
        background: none;
        box-shadow: none;
        vertical-align: baseline;
        font-family: var(--g-sans);
        font-size: .64rem;
        font-weight: 700;
        letter-spacing: .24em;
        text-transform: uppercase;
        line-height: 1.4;
        color: var(--g-gold);
    }

    body.smu-public .panel > .panel-heading:only-child::after {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin: 10px auto 0;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--g-red-bright), var(--g-gold));
    }

/* ----- FILTER / SEARCH BARS
   Search pages lay fields straight into row columns:
     <div class="row"><div class="col-…"><b>Label</b><br><select class="form-control">…
   Any such row (fields as DIRECT column children — regular forms keep their
   .form-group wrapper, so they never match) becomes a paper filter card with
   kicker labels and a baseline-aligned action button. */
body.smu-public .row:has(> [class*="col-"] > .form-control):not(.panel .row) {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 14px;
    /* keep Bootstrap's -15px row margins so the card's edges line up exactly
       with the full-width title band above it */
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 20px;
    padding: 74px 10px 26px;
    background-color: var(--g-paper);
    /* hairline divider under the generated header, drawn as a background layer */
    background-image: linear-gradient(var(--g-line), var(--g-line));
    background-repeat: no-repeat;
    background-size: calc(100% - 50px) 1px;
    background-position: 25px 58px;
    border: 1px solid var(--g-line);
    border-radius: 18px;
    box-shadow: var(--g-sh-sm);
}

    /* generated header: search-glyph chip … */
    body.smu-public .row:has(> [class*="col-"] > .form-control):not(.panel .row)::before {
        content: "\f002";
        font-family: 'FontAwesome';
        position: absolute;
        top: 13px;
        left: 25px;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: var(--g-red);
        color: #fff;
        font-size: .85rem;
        line-height: 32px;
        text-align: center;
        box-shadow: 0 6px 14px -6px rgba(222, 63, 46, .6);
    }

    /* … and its title */
    body.smu-public .row:has(> [class*="col-"] > .form-control):not(.panel .row)::after {
        content: "Kërko sipas kritereve të dëshiruara";
        position: absolute;
        top: 19px;
        left: 68px;
        font-family: var(--g-display);
        font-size: .95rem;
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--g-heading);
    }

    body.smu-public .row:has(> [class*="col-"] > .form-control):not(.panel .row) > [class*="col-"] {
        float: none;
    }

        /* the bare <b> labels become the kicker label voice */
        body.smu-public .row:has(> [class*="col-"] > .form-control):not(.panel .row) > [class*="col-"] > b {
            display: block;
            margin-bottom: 7px;
            font-family: var(--g-display);
            font-size: .74rem;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--g-muted);
        }

        /* the layout <br>s between label and field are retired */
        body.smu-public .row:has(> [class*="col-"] > .form-control):not(.panel .row) > [class*="col-"] > br {
            display: none;
        }

        body.smu-public .row:has(> [class*="col-"] > .form-control):not(.panel .row) > [class*="col-"] > .btn {
            min-height: 46px;
            margin: 0;
        }

/* ----- legacy flexsearch widget → one polished search bar */
body.smu-public .flexsearch {
    position: relative;
    max-width: 640px;
    margin: 6px 0 12px;
}

    body.smu-public .flexsearch .tooltiptext {
        display: none !important; /* the placeholder already says it */
    }

body.smu-public .flexsearch--wrapper,
body.smu-public .flexsearch--form,
body.smu-public .flexsearch--input-wrapper {
    position: static;
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
}

body.smu-public .flexsearch--input {
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 68px 0 52px;
    background-color: var(--g-paper);
    background-image: var(--g-search-icon);
    background-repeat: no-repeat;
    background-position: left 20px center;
    border: 1.5px solid var(--g-line-strong);
    border-radius: var(--g-r-pill);
    box-shadow: var(--g-sh-sm);
    color: var(--g-ink);
    font-family: var(--g-sans);
    font-size: .98rem;
    transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
}

    body.smu-public .flexsearch--input:hover:not(:focus) {
        border-color: var(--g-muted);
    }

    body.smu-public .flexsearch--input:focus {
        border-color: var(--g-focus-border);
        box-shadow: 0 0 0 4px var(--g-focus-ring);
        outline: none;
    }

    body.smu-public .flexsearch--input::placeholder {
        color: var(--g-muted);
        opacity: .7;
    }

body.smu-public .flexsearch--submit {
    position: absolute;
    right: 7px;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: var(--g-red);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(222, 63, 46, .7);
    transition: background-color .2s var(--g-ease), transform .2s var(--g-ease);
}

    body.smu-public .flexsearch--submit:hover,
    body.smu-public .flexsearch--submit:focus {
        background: var(--g-red-deep);
        color: #fff;
        transform: translateY(-50%) scale(1.06);
    }

/* content + sidebar rows (e.g. the application level page): flex the row so
   the panel and the link list finish at the same height */
@media (min-width: 992px) {
    body.smu-public .row-offcanvas:has(> .sidebar-offcanvas) {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

        body.smu-public .row-offcanvas:has(> .sidebar-offcanvas) > [class*="col-md"] {
            float: none;
        }

            body.smu-public .row-offcanvas:has(> .sidebar-offcanvas) > [class*="col-md"] > .panel {
                height: 100%;
                margin-bottom: 0 !important;
            }

    /* align the outer edges with the full-width panels above: the first and
       last column drop their outer gutter (the one between columns stays) */
    body.smu-public .row-offcanvas > [class*="col-"]:first-child {
        padding-left: 0;
    }

    body.smu-public .row-offcanvas > [class*="col-"]:last-child {
        padding-right: 0;
    }
}

/* ----- custom radios / checkboxes (.option-input / .option-input-check)
   Each form view ships its own copy of the legacy grey controls; this layer
   restyles them once, in the Atelier voice. */
body.smu-public .option-input,
body.smu-public .option-input-check {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    float: none;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    width: 21px;
    height: 21px;
    margin: 0 9px 0 0;
    padding: 0;
    background: var(--g-paper);
    border: 2px solid var(--g-line-strong);
    color: #fff;
    cursor: pointer;
    vertical-align: -5px;
    transition: border-color .2s var(--g-ease), background-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
}

body.smu-public .option-input {
    border-radius: 50%;
}

body.smu-public .option-input-check {
    border-radius: 6px;
}

    body.smu-public .option-input:hover,
    body.smu-public .option-input-check:hover {
        background: var(--g-paper);
        border-color: var(--g-red);
    }

    body.smu-public .option-input:focus-visible,
    body.smu-public .option-input-check:focus-visible {
        box-shadow: 0 0 0 4px var(--g-focus-ring);
    }

    body.smu-public .option-input:checked {
        background: var(--g-paper);
        border: 2px solid var(--g-red);
    }

        body.smu-public .option-input:checked::before {
            content: "";
            position: absolute;
            inset: 3px;
            width: auto;
            height: auto;
            margin: 0;
            line-height: normal;
            border-radius: 50%;
            background: var(--g-red);
        }

        /* the legacy click-wave ::after animation is retired */
        body.smu-public .option-input:checked::after,
        body.smu-public .option-input-check:checked::after {
            content: none;
            animation: none;
        }

    body.smu-public .option-input-check:checked {
        background: var(--g-red);
        border-color: var(--g-red);
    }

        body.smu-public .option-input-check:checked::before {
            content: "\f00c";
            font-family: 'FontAwesome';
            position: absolute;
            inset: 0;
            width: auto;
            height: auto;
            margin: 0;
            border-radius: 0;
            background: transparent;
            color: #fff;
            font-size: 11px;
            line-height: 17px;
            text-align: center;
        }

/* the choice labels around those controls — symmetric padding keeps the
   group inset from panel edges even where views strip the column padding */
body.smu-public .radio-custom,
body.smu-public .radio-inline,
body.smu-public .checkbox-inline {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px 8px 18px;
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--g-ink);
    cursor: pointer;
    vertical-align: middle;
}

/* the views mark the picked label with .lable-color (sic) */
body.smu-public .lable-color,
body.smu-public .lable-color b,
body.smu-public .lable-color-check {
    color: var(--g-accent-text) !important; /* views hard-code #415e9b */
    font-size: .95rem;
    font-weight: 700;
}

/* ----- .isa_* info boxes (application pages) — same voice as .note */
body.smu-public .isa_info,
body.smu-public .isa_success,
body.smu-public .isa_warning,
body.smu-public .isa_error {
    margin: 0 0 18px !important;
    padding: 15px 20px !important;
    background: var(--g-cream-2) !important;
    border: 1px solid var(--g-line) !important;
    border-left: 3px solid var(--g-line-strong) !important;
    border-radius: 14px;
    box-shadow: var(--g-sh-sm);
    color: var(--g-ink) !important;
    font-size: .93rem;
}

    body.smu-public .isa_info i,
    body.smu-public .isa_success i,
    body.smu-public .isa_warning i,
    body.smu-public .isa_error i {
        margin-right: 9px;
    }

body.smu-public .isa_success {
    background: var(--g-success-tint) !important;
    border-left-color: var(--g-tone-success) !important;
}

    body.smu-public .isa_success i {
        color: var(--g-tone-success);
    }

body.smu-public .isa_warning {
    background: var(--g-warning-tint) !important;
    border-left-color: var(--g-tone-warning) !important;
}

    body.smu-public .isa_warning i {
        color: var(--g-tone-warning);
    }

body.smu-public .isa_error {
    background: var(--g-danger-tint) !important;
    border-left-color: var(--g-red) !important;
}

    body.smu-public .isa_error i {
        color: var(--g-red);
    }

body.smu-public .isa_info {
    border-left-color: var(--g-navy) !important;
}

    body.smu-public .isa_info i {
        color: var(--g-navy);
    }

/* ----- .message boxes (main-page.css legacy) — same voice as .note */
body.smu-public .message {
    position: relative;
    margin: 0 0 18px;
    padding: 16px 22px 16px 64px !important;
    background: var(--g-cream-2) !important;
    border: 1px solid var(--g-line);
    border-left: 3px solid var(--g-line-strong) !important;
    border-radius: 14px;
    box-shadow: var(--g-sh-sm) !important;
    color: var(--g-ink) !important;
    font-size: .93rem !important;
}

    body.smu-public .message::before {
        content: "\f129";
        font-family: 'FontAwesome';
        position: absolute;
        left: 18px;
        top: 15px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--g-navy);
        color: #fff;
        font-size: .85rem;
        line-height: 32px;
        text-align: center;
    }

    body.smu-public .message h5,
    body.smu-public .message h4 {
        margin: 0 0 5px;
        font-family: var(--g-display);
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--g-heading) !important;
    }

    body.smu-public .message p {
        margin: 0;
        font-size: .93rem;
        line-height: 1.65;
    }

body.smu-public .message-success {
    background: var(--g-success-tint) !important;
    border-left-color: var(--g-tone-success) !important;
    border-bottom: 1px solid var(--g-line) !important;
}

    body.smu-public .message-success::before {
        content: "\f00c";
        background: var(--g-tone-success);
    }

body.smu-public .message-danger {
    background: var(--g-danger-tint) !important;
    border-left-color: var(--g-red) !important;
    border-bottom: 1px solid var(--g-line) !important;
}

    body.smu-public .message-danger::before {
        content: "\f071";
        background: var(--g-red);
    }

body.smu-public .message-warning {
    background: var(--g-warning-tint) !important;
    border-left-color: var(--g-tone-warning) !important;
    border-bottom: 1px solid var(--g-line) !important;
}

    body.smu-public .message-warning::before {
        content: "\f12a";
        background: var(--g-tone-warning);
    }

/* ----- DOCUMENT VERIFICATION PAGE
   Its legacy sheet (Content/mainpage/VerificationDocuments.css) loads after
   this one and carries !importants — every selector here out-ranks it. */
body.smu-public:not(.smu-landing) {
    background: var(--g-cream) !important;
    background-image: none !important; /* the polygon-network wallpaper */
}

body.smu-public main {
    display: block;
    width: 100% !important;
    max-width: var(--g-container) !important; /* the view has no .container */
    margin: 0 auto !important;
    padding: 0 15px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    float: none !important;
}

/* the css-tab radios stay functional but invisible */
body.smu-public input[name="css-tabs"] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* segmented pill switcher (after the Mitrovica reference) */
body.smu-public #tabs {
    position: relative;
    display: flex;
    gap: 4px;
    width: 100%;
    max-width: 560px;
    height: auto !important;
    margin: 0 0 22px;
    padding: 5px !important;
    background: var(--g-cream-2) !important;
    border: 1px solid var(--g-line);
    border-radius: var(--g-r-pill);
    box-shadow: var(--g-sh-sm);
    overflow: visible !important;
}

    body.smu-public #tabs::before,
    body.smu-public #tabs::after {
        content: none !important; /* the legacy sliding block + bar chunk */
    }

    body.smu-public #tabs label {
        flex: 1 1 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: var(--g-r-pill);
        background: transparent !important;
        border: 0 !important;
        font-family: var(--g-display);
        font-size: .82rem;
        font-weight: 600;
        letter-spacing: .04em;
        color: var(--g-muted) !important;
        text-transform: none;
        cursor: pointer;
        transition: background-color .25s var(--g-ease), color .25s var(--g-ease), box-shadow .25s var(--g-ease);
    }

        body.smu-public #tabs label::before {
            font-family: 'FontAwesome';
            position: static !important;
            width: auto !important;
            height: auto !important;
            background: none !important;
            font-size: .9rem;
        }

        body.smu-public #tabs #tab1::before {
            content: "\f132"; /* shield */
        }

        body.smu-public #tabs #tab2::before {
            content: "\f002"; /* magnifier */
        }

body.smu-public #radio1:checked ~ #tabs #tab1,
body.smu-public #radio2:checked ~ #tabs #tab2 {
    background: var(--g-navy) !important;
    color: var(--g-on-navy) !important;
    box-shadow: 0 10px 22px -12px rgba(13, 42, 78, .8);
}

/* content areas lose the legacy paper decorations */
body.smu-public main .content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

    body.smu-public main .content::before,
    body.smu-public main .content::after {
        content: none !important;
    }

/* the upload dropzone becomes an inviting card */
body.smu-public form.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 230px !important;
    height: auto !important;
    padding: 30px 24px !important;
    background: var(--g-paper) !important;
    border: 2px dashed var(--g-line-strong) !important; /* inline dashed #943136 */
    border-radius: 18px !important;
    box-shadow: var(--g-sh-sm);
    transition: border-color .25s var(--g-ease), background-color .25s var(--g-ease);
}

    body.smu-public form.dropzone:hover,
    body.smu-public form.dropzone.dz-drag-hover {
        border-color: var(--g-red) !important;
        background: var(--g-cream);
    }

    body.smu-public form.dropzone .dz-message {
        /* dropzone's sprite theme absolutely-positions the message and
           replaces the text with a cursive image — both retired */
        position: static !important;
        margin: 0 auto !important;
        text-align: center;
        background: none !important;
        background-image: none !important;
        width: auto !important;
        height: auto !important;
        text-indent: 0 !important;
        float: none !important;
    }

        body.smu-public form.dropzone .dz-message span {
            display: inline-block !important;
            background: none !important;
            text-indent: 0 !important;
            width: auto !important;
            height: auto !important;
        }

        body.smu-public form.dropzone .dz-message::before {
            content: "\f0ee";
            font-family: 'FontAwesome';
            display: block;
            width: 58px;
            height: 58px;
            margin: 0 auto 16px;
            border-radius: 50%;
            background: var(--g-danger-tint);
            color: var(--g-red);
            font-size: 1.4rem;
            line-height: 58px;
        }

        body.smu-public form.dropzone .dz-message span {
            font-family: var(--g-display);
            font-size: 1.02rem;
            font-weight: 600;
            color: var(--g-heading);
        }

/* the red helper caption under the dropzone reads as a quiet hint */
body.smu-public .classfont {
    margin-top: 12px;
    color: var(--g-muted) !important;
    font-size: .8rem !important;
    font-weight: 600;
}

/* manual verification: search + hint + request button in one centred card
   (after the Mitrovica reference) */
body.smu-public .smu-verifycard {
    margin: 4px 0 22px;
    padding: 36px clamp(20px, 5vw, 48px) 34px;
    background: var(--g-paper);
    border: 1px solid var(--g-line);
    border-radius: 18px;
    box-shadow: var(--g-sh-sm);
    text-align: center;
}

    body.smu-public .smu-verifycard .flexsearch {
        max-width: 760px;
        margin: 0 auto 20px;
    }

        body.smu-public .smu-verifycard .flexsearch--input {
            text-align: left;
        }

.smu-verifycard__hint {
    margin: 0 0 18px;
    font-family: var(--g-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--g-heading);
}

body.smu-public .smu-verifycard .btn {
    float: none;
    min-height: 48px;
    padding: 12px 30px;
    border-radius: var(--g-r-pill);
    box-shadow: 0 12px 26px -12px rgba(13, 42, 78, .65);
}

/* ----- PUBLISHED THESES (DiplomaPublikimiPublic) — after the Mitrovica
   reference: a grid of thesis cards with a level chip and a download action */
.smu-theseshead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.smu-theseshead__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border: 1px solid rgba(245, 241, 232, .35);
    border-radius: var(--g-r-pill);
    background: rgba(245, 241, 232, .08);
    font-family: var(--g-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g-on-navy) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s var(--g-ease), color .2s var(--g-ease), border-color .2s var(--g-ease);
}

    .smu-theseshead__btn:hover, .smu-theseshead__btn:focus {
        background: var(--g-on-navy);
        border-color: var(--g-on-navy);
        color: var(--g-navy) !important;
    }

/* the bottom pager row hosts the same button on the light ground */
.smu-thesespager {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 6px 2px 2px;
}

    .smu-thesespager .pagination {
        margin: 0;
    }

    .smu-thesespager .smu-theseshead__btn {
        margin-left: auto;
        border-color: var(--g-navy);
        background: transparent;
        color: var(--g-heading) !important;
    }

        .smu-thesespager .smu-theseshead__btn:hover {
            background: var(--g-navy);
            border-color: var(--g-navy);
            color: var(--g-on-navy) !important;
        }

.smu-thesespager__count {
    font-size: .84rem;
    font-weight: 600;
    color: var(--g-muted);
}

.smu-thesisgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.smu-thesis {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 16px;
    background: var(--g-paper);
    border: 1px solid var(--g-line);
    border-radius: 16px;
    box-shadow: var(--g-sh-sm);
    text-decoration: none !important;
    transition: transform .25s var(--g-ease), border-color .25s var(--g-ease), box-shadow .25s var(--g-ease);
}

    a.smu-thesis:hover, a.smu-thesis:focus {
        transform: translateY(-4px);
        border-color: rgba(222, 63, 46, .45);
        box-shadow: var(--g-sh);
    }

    /* theses that cannot be downloaded sit on a tinted ground (Mitrovica) */
    .smu-thesis--locked {
        background: var(--g-cream-2);
    }

.smu-thesis__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.smu-thesis__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 50px;
    border-radius: var(--g-r-arch);
    border: 1px solid var(--g-line);
    background: var(--g-cream);
}

    .smu-thesis__icon i {
        font-size: 1rem;
        color: var(--g-accent-text);
    }

    /* level tints: 1 bachelor (crimson), 2 master (gold), other (navy) */
    .smu-thesis__icon--2 i {
        color: #A97B14;
    }

    .smu-thesis__icon--3 i, .smu-thesis__icon--4 i, .smu-thesis__icon--5 i {
        color: var(--g-navy);
    }

.smu-thesis__level {
    padding: 4px 12px;
    border-radius: var(--g-r-pill);
    background: rgba(222, 63, 46, .09);
    font-family: var(--g-display);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-accent-text);
    white-space: nowrap;
}

.smu-thesis__level--2 {
    background: rgba(233, 180, 76, .16);
    color: #A97B14;
}

.smu-thesis__level--3, .smu-thesis__level--4, .smu-thesis__level--5 {
    background: rgba(13, 42, 78, .08);
    color: var(--g-navy);
}

.smu-thesis__title {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--g-display);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--g-heading);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.smu-thesis__action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-top: 10px;
    border-top: 1px solid var(--g-line);
    font-family: var(--g-sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-accent-text);
    text-decoration: none !important;
    transition: color .2s var(--g-ease);
}

a.smu-thesis:hover .smu-thesis__action {
    color: var(--g-red-deep);
}

.smu-thesis__action--locked {
    color: var(--g-muted);
}

/* inside the results table the action needs no divider */
.smu-public td .smu-thesis__action {
    padding-top: 0;
    border-top: 0;
}

/* ----- CONTACT PAGE */
.smu-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
    margin-bottom: clamp(36px, 6vh, 56px);
}

.smu-contact__headline {
    margin: 10px 0 24px;
    font-family: var(--g-display);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--g-heading);
}

.smu-contact__tiles {
    display: grid;
    gap: 12px;
}

.smu-contact__tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--g-paper);
    border: 1px solid var(--g-line);
    border-radius: 16px;
    box-shadow: var(--g-sh-sm);
    transition: transform .25s var(--g-ease), border-color .25s var(--g-ease);
}

    .smu-contact__tile:hover {
        transform: translateY(-2px);
        border-color: var(--g-line-strong);
    }

.smu-contact__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 52px;
    border-radius: var(--g-r-arch);
    border: 1px solid var(--g-line);
    background: var(--g-cream);
}

    .smu-contact__icon i {
        color: var(--g-accent-text);
        font-size: 1.05rem;
    }

.smu-contact__label {
    display: block;
    font-family: var(--g-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-muted);
}

.smu-contact__value {
    display: block;
    margin-top: 2px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--g-heading) !important;
    text-decoration: none;
    line-height: 1.45;
}

a.smu-contact__value:hover {
    color: var(--g-accent-text) !important;
    text-decoration: none;
}

/* the form card */
.smu-contact__formcard {
    padding: clamp(24px, 3.5vw, 36px);
    background: var(--g-paper);
    border: 1px solid var(--g-line);
    border-radius: 18px;
    box-shadow: var(--g-sh);
}

.smu-contact__formtitle {
    position: relative;
    margin: 0 0 22px;
    padding-top: 16px;
    font-family: var(--g-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--g-heading);
}

    .smu-contact__formtitle::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 36px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--g-red), var(--g-gold));
    }

.smu-contact__counter {
    margin: 6px 0 0;
    font-size: .76rem;
    font-weight: 600;
    color: var(--g-muted);
}

.smu-contact__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}

    .smu-contact__actions .btn {
        min-height: 48px;
        padding: 12px 34px;
        border-radius: var(--g-r-pill);
        box-shadow: 0 12px 26px -12px rgba(13, 42, 78, .65);
    }

        .smu-contact__actions .btn[disabled] {
            opacity: .5;
            box-shadow: none;
        }

.smu-contact__errors .validation-summary-errors {
    margin-top: 16px;
    padding: 12px 18px;
    background: var(--g-danger-tint);
    border: 1px solid rgba(222, 63, 46, .35);
    border-left: 3px solid var(--g-red);
    border-radius: 12px;
    color: var(--g-ink);
    font-size: .88rem;
}

    .smu-contact__errors .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

.smu-contact__section {
    margin-top: clamp(36px, 6vh, 56px);
}

/* FAQ accordion: quiet white rows with a chevron, not navy bands */
body.smu-public #accordion .panel {
    margin-bottom: 10px;
}

body.smu-public #accordion .panel-heading {
    background: var(--g-paper) !important;
    color: var(--g-heading) !important;
    padding: 0 !important;
    border-bottom: 0;
    border-radius: 17px !important;
}

    body.smu-public #accordion .panel-heading::before {
        content: none;
    }

body.smu-public #accordion .accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    color: var(--g-heading);
    text-decoration: none;
}

    body.smu-public #accordion .accordion-toggle::after {
        content: "\f107";
        font-family: 'FontAwesome';
        flex: 0 0 auto;
        color: var(--g-accent-text);
        font-size: 1.05rem;
        transition: transform .25s var(--g-ease);
    }

    body.smu-public #accordion .accordion-toggle:not(.collapsed)::after {
        transform: rotate(180deg);
    }

body.smu-public #accordion .panel-title {
    margin: 0;
    font-family: var(--g-display);
    font-size: .95rem;
    font-weight: 600;
    color: inherit;
}

body.smu-public #accordion .panel-body {
    border-top: 1px solid var(--g-line);
    font-weight: 400 !important; /* inline bold on the answer */
    color: var(--g-ink);
}

/* the map in a rounded card */
.smu-contact__map {
    height: 460px;
    width: 100%;
    border: 1px solid var(--g-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--g-sh-sm);
}

@media (max-width: 991px) {
    .smu-contact__grid {
        grid-template-columns: 1fr;
    }
}

.smu-public hr {
    border-top: 1px solid var(--g-line);
}

.smu-public blockquote {
    border-left: 3px solid var(--g-red);
    color: var(--g-muted);
}

.smu-public .label-primary {
    background: var(--g-navy);
}

.smu-public .close {
    color: var(--g-heading);
    text-shadow: none;
    opacity: .55;
}

/* --------------------------------------------------------- 12. RESPONSIVE */
@media (max-width: 1199px) {
    .smu-public .navbar-nav > li > a {
        padding: 0 11px;
        font-size: .74rem;
    }

    .smu-logo__mark {
        width: 38px;
        height: 38px;
    }

    .smu-logo__name {
        font-size: 1.25rem;
    }
}

@media (max-width: 991px) {
    html.smu-public {
        font-size: 15.6px;
    }

    .smu-hero__inner {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .smu-hero__media {
        width: min(100%, 440px);
    }

        .smu-hero__media img {
            height: clamp(300px, 48vw, 400px);
        }

    .smu-hero__badge {
        left: auto;
        right: -14px;
        top: -34px;
        width: 104px;
        height: 104px;
    }

    .smu-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* Bootstrap 3 collapses the navbar below 768px */
@media (max-width: 767px) {
    .smu-public .top .row-fluid {
        justify-content: center;
    }

    .smu-public .phone-mail {
        display: none;
    }

    .smu-public .loginbar {
        float: none;
    }

    .smu-public .topHeaderSection {
        top: 8px;
        padding-inline: 8px;
    }

    .smu-public .header {
        margin-top: 8px;
        padding: 0 12px;
        border-radius: 18px;
        overflow: hidden; /* clips the drawer to the pill; mobile dropdowns are static so nothing else gets cut */
    }

    .smu-public .navbar-header {
        display: flex;
        width: 100%;
        min-height: 64px;
        float: none;
    }

    /* markup order is burger-then-brand; flex order puts the brand left */
    .smu-public .navbar-toggle {
        display: block;
        order: 2;
        margin: 0 0 0 auto;
    }

    .smu-logo__mark {
        width: 36px;
        height: 36px;
    }

    .smu-logo__name {
        font-size: 1.15rem;
    }

    .smu-logo__sub {
        font-size: .46rem;
    }

    /* the collapsed drawer lives inside the pill */
    .smu-public .navbar-collapse {
        background: transparent;
        border-top: 1px solid var(--g-line);
        padding: 10px 4px 16px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .smu-public .navbar-nav.navbar-right,
    .smu-public .navbar-nav.navbar-right:last-child {
        display: block;
        float: none;
        margin: 0 !important;
    }

    .smu-public .navbar-nav > li {
        float: none;
        display: block;
    }

        .smu-public .navbar-nav > li > a {
            display: flex;
            width: 100%;
            min-height: 52px;
            padding: 0 8px;
            font-size: .82rem;
        }

            .smu-public .navbar-nav > li > a::after {
                display: none;
            }

    /* Bootstrap makes open dropdowns static inside a collapsed navbar */
    .smu-public .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        min-width: 0;
        margin: 0 0 8px;
        background: var(--g-cream);
        border: 0;
        border-left: 3px solid var(--g-red);
        border-radius: 0 10px 10px 0;
        box-shadow: none;
        animation: none;
    }

        .smu-public .navbar-nav .open .dropdown-menu > li > a {
            color: var(--g-ink);
            padding: 12px 14px;
        }

    .smu-public .navbar-nav > li > a.login-button {
        margin: 12px 0 4px;
        justify-content: center;
        width: 100%;
    }

    .smu-public .navbar-nav > li.help-icon {
        display: none !important; /* mirrors the legacy `.help-icon{display:none !important}` */
    }

    .smu-hero {
        padding-top: 38px;
    }

    .smu-hero__cta {
        width: 100%;
    }

        .smu-hero__cta .smu-btn {
            flex: 1 1 100%;
        }

    .smu-ticker {
        transform: rotate(-1.8deg);
        padding: 12px 0;
    }

        .smu-ticker span {
            font-size: .82rem;
        }

    .smu-status {
        padding: 20px;
    }

    .smu-status__afati {
        align-items: flex-start;
    }

    .smu-public .hide-counter {
        width: 100%;
    }

    .smu-public .counter {
        width: 100%;
        justify-content: space-between;
    }

    .smu-public .counter-item {
        min-width: 0;
        flex: 1 1 25%;
        padding: 2px 8px;
    }

        .smu-public .counter-item h5 {
            font-size: 1.8rem;
        }

    .smu-services__grid {
        grid-template-columns: 1fr;
    }

    .smu-status .result-Section .smu-status__resultrow {
        flex-direction: column;
        align-items: flex-start;
    }

    .smu-sechead h2 {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    html.smu-public {
        font-size: 15px;
    }

    .smu-hero__media img {
        height: 260px;
    }

    .smu-hero__badge {
        width: 92px;
        height: 92px;
        top: -26px;
        right: -8px;
    }

    .smu-hero__tile {
        right: -12px;
        bottom: -14px;
    }

    .smu-public .top {
        font-size: .72rem;
    }
}

/* ------------------------------------------------------ 13. MOTION / PRINT */
@keyframes gjk-rise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gjk-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gjk-shimmer {
    from {
        background-position: -260px 0;
    }

    to {
        background-position: 260px 0;
    }
}

@keyframes gjk-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(222, 63, 46, .16);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(222, 63, 46, .05);
    }
}

@keyframes gjk-spin-slow {
    to {
        transform: rotate(1turn);
    }
}

@keyframes gjk-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes gjk-dash {
    to {
        stroke-dashoffset: -280;
    }
}

@media (prefers-reduced-motion: reduce) {
    .smu-public *,
    .smu-public *::before,
    .smu-public *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .smu-ticker__track {
        animation: none;
    }

    .smu-hero__badge svg {
        animation: none;
    }
}

@media print {
    .smu-public .top,
    .smu-public .topHeaderSection,
    .smu-ticker,
    .smu-public .smu-footer {
        display: none !important;
    }

    .smu-hero,
    .smu-services {
        background: #fff;
        color: #000;
    }
}