/* ==========================================================================
   57th IFFI 2026 - Event Registration Portal Sign In theme
   Loaded ONLY by EventRegistration/login.aspx. Nothing else on the site links
   it, so every override below is scoped to that one page even where the
   selector itself is generic (body, footer, .site-header ...).

   It has to override two things that arrive first:
     1. the inline <style> block in Event.Master (peacock-image background,
        grey blur overlay, fixed pill header, purple MENU button, dark footer)
     2. css/iffigoa.css (footer gradient, .quick-link, .f-foot)
   Both are in <head>; this file is linked at the top of the page's content,
   so it is later in document order and wins on equal specificity.

   Icons are Font Awesome 6 (already loaded by the master, and mirrored
   locally in webfonts/). Bootstrap Icons are NOT used: css/bootstrap-icons.css
   is present but its font files are not, and cdn.jsdelivr.net is missing from
   the site's CSP default-src, so bi-* glyphs would render as empty boxes.
   ========================================================================== */

:root {
    /* Brand colours from the 2026 theme */
    --iffi-navy-deep: #0c2340;
    --iffi-blue-primary: #0b439c;
    --iffi-blue-vibrant: #103b8e;
    --iffi-blue-light: #2563eb;
    --iffi-blue-subtle: #eff6ff;
    --iffi-gold: #f59e0b;
    --iffi-green: #10b981;
    /* Neutrals */
    --text-dark: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --border-light: #e2e8f0;
    /* Radii & shadows */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 9999px;
    --shadow-card: 0 20px 50px rgba(12, 35, 64, 0.09), 0 2px 8px rgba(0, 0, 0, 0.02);
    --shadow-btn: 0 4px 14px rgba(11, 67, 156, 0.28);
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 'Outfit'/'Plus Jakarta Sans' come from Google Fonts, which the site CSP
       allows. If the host cannot reach fonts.googleapis.com the stack falls
       back to Segoe UI and the layout is unchanged. */
    --font-primary: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Page shell - replaces the master's peacock-image + grey blur treatment
   ========================================================================== */
html, body {
    height: 100%;
}

body {
    font-family: var(--font-primary);
    color: var(--text-body);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* The scenery is painted by .main-content only (see below), so the header and
       footer never cover any part of it. The body just carries a quiet sky tone. */
    background: #eef4fb;
    position: relative;
    overflow-x: hidden;
}

/* The master wraps the ContentPlaceHolder in <form> then <main class="main-content">.
   Both have to become flex children or the footer will not sit at the bottom. */
body > form {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    /* master sets 120px top padding for its fixed header - not needed now */
    padding: 12px 0 16px 0;
    position: relative;
    z-index: 2;
    /* The 57th IFFI scenery, on <main> alone (not the body): the sticky header and the
       footer sit outside it, so nothing of the picture hides behind them. The area keeps
       the picture's own proportion (1920 x 1012), so with "cover" the whole picture shows;
       on phones the content is taller than that and the sides are trimmed, never the top
       or bottom. Replaces the master's peacock-image background. */
    background-color: #dcebff;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.55) 90%, #ffffff 100%), url('../assets/peacock_scenery.jpeg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: calc(100vw * 1012 / 1920);
}

/* the master's grey overlay + backdrop blur sits over everything */
.main-content::before {
    display: none !important;
    content: none !important;
}

.main-content > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Site header - same markup as every other page, retreated to the 2026 theme:
   a full-width white bar instead of the floating translucent pill
   ========================================================================== */
.site-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 8px 0;
    display: block;
    pointer-events: auto;
}

.site-header > .container {
    max-width: 1680px;
    width: 100%;
    padding: 0 40px;
}

.site-header .nav-container {
    width: 100%;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    transform: none;
    pointer-events: auto;
}

.site-header .nav-container:hover {
    box-shadow: none;
    transform: none;
}

.site-header .nav-container > ul.nav {
    gap: 22px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.site-header .nav-container > ul.nav::-webkit-scrollbar {
    display: none;
}

.site-header .nav-item {
    /* thin separators between the partner logos, as in the 2026 header */
    border-left: 1px solid #cbd5e1;
    padding-left: 22px;
    line-height: 0;
}

.site-header .nav-item:first-child {
    border-left: 0;
    padding-left: 0;
}

.site-header .logo-img {
    height: 38px;
    margin: 0;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.02));
    transition: transform var(--transition-fast);
}

.site-header .logo-img:hover {
    transform: translateY(-1.5px) scale(1);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.02));
}

/* MENU button - purple gradient out, royal blue in */
.site-header .menu-btn {
    background: var(--iffi-blue-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 8px 22px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.6px;
    box-shadow: var(--shadow-btn);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.site-header .menu-btn:hover {
    background: #083478;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(11, 67, 156, 0.38);
}

.site-header .menu-btn i {
    margin-right: 6px;
    font-size: 1.05rem;
}

/* ==========================================================================
   Two-column layout: brand showcase + sign-in card
   ========================================================================== */
.content-wrapper {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: minmax(340px, 1fr) 450px;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Grid children default to min-width:auto, which lets a long word or a wide
   button push the column past the viewport. Both columns opt out. */
.brand-section,
.login-card-section {
    min-width: 0;
}

/* ---------- Left: brand showcase ---------- */
.brand-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.brand-showcase-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-xl);
    padding: 24px 28px 20px 28px;
    box-shadow: 0 10px 32px rgba(12, 35, 64, 0.07);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
    max-width: 480px;
    width: 100%;
}

.brand-showcase-card::before {
    content: '';
    position: absolute;
    bottom: 0;   /* design commit "login border update": the tricolour bar sits at the foot of the card */
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #0b439c 0%, #2563eb 50%, #f59e0b 100%);
}

.brand-showcase-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 44px rgba(12, 35, 64, 0.11);
}

.brand-header-block {
    margin-bottom: 12px;
}

.showcase-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 2.1vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--iffi-navy-deep);
    margin: 0 0 6px 0;
    letter-spacing: -0.4px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.showcase-title sup {
    font-size: 0.55em;
    top: -0.55em;
    font-weight: 700;
}

.showcase-theme {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.showcase-theme .theme-accent {
    color: var(--iffi-blue-vibrant);
    background: linear-gradient(135deg, #0b439c 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.event-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.75);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.meta-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--iffi-blue-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(11, 67, 156, 0.25);
}

.meta-text {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--iffi-navy-deep);
    letter-spacing: -0.2px;
}

.meta-text sup {
    font-size: 0.6em;
    top: -0.5em;
}

.about-iffi-card {
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    width: 100%;
}

.about-iffi-title {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--iffi-navy-deep);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.about-iffi-title i {
    color: var(--iffi-blue-light);
    font-size: 0.9rem;
}

.about-iffi-text {
    font-size: 0.8rem;
    line-height: 1.48;
    color: #334155;
    margin: 0;
}

/* ---------- Right: sign-in card ---------- */
.login-card-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 10;
}

.login-card {
    width: 100%;
    max-width: 450px;
    background: #ffffff;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: var(--shadow-card);
    padding: 24px 28px 20px 28px;
    position: relative;
    transition: box-shadow var(--transition-normal);
    color: var(--text-body);
}

.login-card:hover {
    box-shadow: 0 20px 50px rgba(12, 35, 64, 0.12);
}

.form-header {
    margin-bottom: 12px;
}

.form-title {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.form-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.35;
    /* "may use the same login credentials" notice blinks gently so returning journalists see it */
    animation: iffiSubtitleBlink 1.6s ease-in-out infinite;
}

@keyframes iffiSubtitleBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .form-subtitle { animation: none; }
}

/* Segmented OTP / Password tabs.
   These are asp:Buttons, so the rules have to hold for input[type=submit]
   as well as <button>. */
.auth-tabs-nav {
    display: flex;
    flex-wrap: wrap;          /* labels too long to share one line drop the tabs under each other */
    gap: 10px;
    margin: 0 0 14px 0;
    padding: 0;               /* the <ul> default 40px indent pushed the tabs off centre */
}

.auth-tab-btn {
    flex: 1;
    width: 100%;
    min-height: 42px;         /* grows when a translated label needs two lines */
    padding: 8px 10px;
    line-height: 1.2;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    text-align: center;
    /* icon + label centred. The label may wrap (translations via the Bhashini widget are
       much longer than the English text); the button grows instead of overflowing the card. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: #ffffff;
    border: 1.5px solid var(--border-light);
    color: var(--text-muted);
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}

.auth-tab-btn i {
    flex-shrink: 0;
}

.auth-tab-btn.active {
    background: var(--iffi-blue-subtle);
    border-color: var(--iffi-blue-light);
    color: var(--iffi-blue-vibrant);
}

.auth-tab-btn:hover:not(.active) {
    border-color: #cbd5e1;
    color: var(--text-dark);
}

/* the <li> wrappers the markup keeps for structure: sized by their label, so the two
   tabs share a line while both fit (English) and each takes the full width otherwise
   (Hindi and other translations); min-width 0 lets a label wrap instead of overflowing */
.auth-tabs-nav .auth-tab-item {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Fields */
.form-group-custom {
    margin-bottom: 12px;
}

.form-label-custom {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-prefix {
    position: absolute;
    left: 14px;
    color: var(--iffi-blue-light);
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 2;
}

.input-control-custom {
    width: 100%;
    height: 44px;
    padding: 10px 14px 10px 42px;
    font-family: var(--font-primary);
    font-size: 0.92rem;
    color: var(--text-dark);
    background-color: #ffffff;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    outline: none;
    transition: all var(--transition-fast);
}

.input-control-custom:focus {
    border-color: var(--iffi-blue-light);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.input-control-custom::placeholder {
    color: var(--text-light);
}

.input-control-custom[disabled] {
    background: #f8fafc;
    color: var(--text-light);
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    font-size: 0.95rem;
    z-index: 2;
    transition: color var(--transition-fast);
}

.password-toggle-btn:hover {
    color: var(--text-dark);
}

.form-options-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 14px;
    font-size: 0.82rem;
}

.forgot-link {
    color: var(--iffi-blue-light);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.forgot-link:hover {
    color: var(--iffi-blue-primary);
    text-decoration: underline;
}

/* Primary action button (asp:Button renders <input type=submit>) */
.btn-primary-action {
    width: 100%;
    height: 46px;
    background: #004bb7;
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 75, 183, 0.25);
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    transition: all var(--transition-fast);
}

.btn-primary-action:hover {
    background: #083785;
    color: #ffffff;
    box-shadow: 0 5px 16px rgba(0, 75, 183, 0.35);
    transform: translateY(-1px);
}

.btn-primary-action:active {
    transform: translateY(0);
}

.btn-primary-action[disabled] {
    background: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Secondary action - "Get Login OTP" sits above the verify button */
.btn-secondary-action {
    width: 100%;
    height: 44px;
    background: #ffffff;
    color: var(--iffi-blue-primary);
    border: 1.5px solid var(--iffi-blue-light);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.94rem;
    cursor: pointer;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    transition: all var(--transition-fast);
}

.btn-secondary-action:hover {
    background: var(--iffi-blue-subtle);
    color: var(--iffi-blue-vibrant);
}

/* OTP entry panel */
.otp-verification-box {
    background: var(--iffi-blue-subtle);
    border: 1px dashed rgba(29, 78, 216, 0.3);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-top: 12px;
    text-align: center;
    animation: iffiFadeIn 0.3s ease;
}

.otp-box-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 2px 0;
}

.otp-box-title i {
    color: var(--iffi-green);
    margin-right: 4px;
}

.otp-box-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 10px 0;
}

/* single 6-character code field, styled to read like the design's digit boxes */
.otp-code-input {
    width: 100%;
    max-width: 260px;
    height: 46px;
    margin: 0 auto 12px auto;
    display: block;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.55em;
    text-indent: 0.55em; /* keeps the glyphs optically centred despite tracking */
    color: var(--text-dark);
    background: #ffffff;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    outline: none;
    transition: all var(--transition-fast);
}

.otp-code-input:focus {
    border-color: var(--iffi-blue-light);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.otp-code-input::placeholder {
    letter-spacing: 0.35em;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-light);
}

/* Captcha block (server shows it after 3 failed attempts) */
.captcha-box {
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
}

.captcha-box img {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: #ffffff;
    margin-bottom: 8px;
}

/* Status / error message from the server */
.form-alert {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.form-alert:not(:empty) {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

/* Footer links inside the card */
.form-footer-nav {
    margin-top: 14px;
    text-align: center;
}

.support-prompt {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
}

.support-prompt a.email-link {
    color: var(--iffi-blue-vibrant);
    font-weight: 700;
    text-decoration: underline;
}

.support-prompt a.email-link:hover {
    color: var(--iffi-navy-deep);
}

.register-prompt {
    font-size: 0.82rem;
    color: var(--text-body);
    margin-bottom: 8px;
}

.register-prompt a.register-link,
.register-prompt .register-link {
    color: var(--iffi-navy-deep);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.register-prompt a.register-link:hover,
.register-prompt .register-link:hover {
    text-decoration: underline;
    color: var(--iffi-blue-vibrant);
}

.back-home-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.back-home-link:hover {
    color: var(--iffi-navy-deep);
}

/* The lock-out panel Showerror() fills in (hdiv) */
#hdiv:not(:empty) {
    max-width: 640px;
    margin: 16px auto 0 auto;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Footer - SAME MARKUP as every other page (it lives in Event.Master and is
   untouched); only the paint changes so it sits with the 2026 theme:
   the dark green/blue gradient becomes the design's white-to-horizon blend.
   ========================================================================== */
body > form > footer,
footer.container-fluid {
    /* Blends into the horizon of the scenery like the design's footer, but kept
       opaque enough at the top that the quick links stay legible where the
       artwork behind them is dark (the film-strip / hills band). */
    background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.94) 40%, #ffffff 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(226, 232, 240, 0.65);
    color: #475569;
    padding: 0;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

/* The footer's two rows are Bootstrap .row elements, whose negative gutter
   margins were cancelled by .container-fluid's own padding. This file drops
   that padding, so the margins have to go with it or the page gains 24px of
   horizontal scroll. */
footer.container-fluid > .row,
footer.container-fluid .f-foot.row {
    margin-left: 0;
    margin-right: 0;
}

/* row 1 - the quick links strip (was a flat #444 bar) */
footer.container-fluid .quick-link {
    background: transparent;
    color: #475569;
    padding: 14px 0 10px 0;
}

footer.container-fluid .quick-link ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    font-family: var(--font-primary);
    font-size: 0.84rem;
    margin: 0;
    padding: 0 20px;
}

footer.container-fluid .quick-link ul li {
    border-left: 1px solid #cbd5e1;
    padding: 2px 14px;
    line-height: 1.4;
}

footer.container-fluid .quick-link ul li:first-child {
    border-left: 0;
}

footer.container-fluid .quick-link ul li a,
footer.container-fluid .quick-link ul li a.cus-menuP-link {
    color: #475569;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

footer.container-fluid .quick-link ul li a:hover,
footer.container-fluid .quick-link ul li a.cus-menuP-link:hover {
    color: var(--iffi-navy-deep);
    font-size: inherit; /* iffigoa.css bumps footer links to 14px on hover */
}

/* row 2 - social icons + copyright (was #061614) */
footer.container-fluid .f-foot {
    background: transparent;
    color: #475569;
    border-top: 1px solid rgba(226, 232, 240, 0.85);
    font-family: var(--font-primary);
    font-size: 0.82rem;
    padding: 14px 20px 16px 20px;
    margin: 0;
}

footer.container-fluid .social-bar {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-bottom: 10px;
}

/* Font Awesome brand marks in a white pill, to match the light footer */
footer.container-fluid .social-bar a {
    width: 32px;
    height: 32px;
    margin: 0;
    font-size: 15px;
    color: var(--iffi-blue-vibrant);
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(12, 35, 64, 0.06);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

footer.container-fluid .social-bar a:hover {
    color: #ffffff;
    background: var(--iffi-blue-primary);
    border-color: var(--iffi-blue-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(12, 35, 64, 0.12);
}

footer.container-fluid .f-foot-copyright p {
    margin: 0 auto;
    max-width: 1100px;
    line-height: 1.5;
}

footer.container-fluid .f-foot-copyright p:first-child {
    font-weight: 600;
    color: var(--iffi-navy-deep);
}

footer.container-fluid .f-foot-copyright p:last-child {
    font-size: 0.76rem;
    color: var(--text-muted);
}

footer.container-fluid .f-foot a {
    color: var(--iffi-blue-vibrant);
    text-decoration: none;
}

footer.container-fluid .f-foot a:hover {
    color: var(--iffi-navy-deep);
}

footer.container-fluid .f-foot br {
    display: none; /* the </br> between the two copyright lines */
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1400px) {
    .content-wrapper {
        max-width: 960px;
        gap: 20px;
        padding: 0 20px;
    }
}

@media (max-width: 1150px) {
    .site-header > .container {
        padding: 0 20px;
    }

    .content-wrapper {
        max-width: 920px;
        grid-template-columns: minmax(320px, 1fr) 440px;
        gap: 18px;
        padding: 0 16px;
    }

    .login-card {
        max-width: 440px;
    }
}

@media (max-width: 991px) {
    .site-header {
        padding: 6px 0;
    }

    /* the master stacks the header column-wise below 991px */
    .site-header > .container {
        flex-direction: column;
        gap: 10px;
        padding: 0 16px;
    }

    .site-header .nav-container {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .site-header .nav-container > ul.nav {
        gap: 12px;
        justify-content: flex-start;
    }

    .site-header .nav-item {
        padding-left: 12px;
    }

    .site-header .logo-img {
        height: 28px;
    }

    .site-header .menu-btn {
        width: auto;
        padding: 6px 14px;
        font-size: 0.82rem;
    }

    .main-content {
        padding: 12px 0 20px 0;
        min-height: auto;
    }

    .content-wrapper {
        grid-template-columns: minmax(0, 1fr);
        max-width: 480px;
        gap: 12px;
        padding: 0 16px;
    }

    .brand-section {
        width: 100%;
    }

    /* lighter brand banner on mobile, so the form stays the primary element */
    .brand-showcase-card {
        max-width: 100%;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        padding: 4px 6px 0 6px;
        text-align: center;
    }

    .brand-showcase-card::before,
    .brand-showcase-card:hover {
        display: none;
        transform: none;
        box-shadow: none;
    }

    .brand-header-block {
        margin-bottom: 6px;
    }

    .showcase-title {
        font-size: 1.45rem;
        line-height: 1.16;
        margin-bottom: 4px;
    }

    .showcase-theme {
        font-size: 0.78rem;
        letter-spacing: 1.2px;
        justify-content: center;
        margin-bottom: 6px;
    }

    .event-meta-list {
        justify-content: center;
        gap: 6px;
        margin-bottom: 4px;
    }

    .meta-item {
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(203, 213, 225, 0.6);
    }

    .meta-icon {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    .meta-text {
        font-size: 0.78rem;
    }

    .about-iffi-card {
        display: none;
    }

    .login-card {
        max-width: 100%;
        padding: 20px 18px 16px 18px;
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(12, 35, 64, 0.08);
    }

    footer.container-fluid .quick-link ul {
        font-size: 0.8rem;
    }

    footer.container-fluid .quick-link ul li {
        padding: 2px 10px;
    }
}

@media (max-width: 576px) {
    .site-header > .container {
        padding: 0 10px;
    }

    .site-header .logo-img {
        height: 22px;
    }

    .site-header .nav-container > ul.nav {
        gap: 8px;
    }

    .site-header .nav-item {
        border-left: 0;
        padding-left: 8px;
    }

    .site-header .menu-btn {
        padding: 5px 10px;
        font-size: 0.78rem;
    }

    .showcase-title {
        font-size: 1.32rem;
    }

    .showcase-theme {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    .meta-item {
        padding: 3px 8px;
    }

    .meta-text {
        font-size: 0.75rem;
    }

    .login-card {
        padding: 18px 16px 14px 16px;
        border-radius: 16px;
    }

    .form-header {
        margin-bottom: 10px;
    }

    .form-title {
        font-size: 1.38rem;
    }

    .form-subtitle {
        font-size: 0.76rem;
    }

    .auth-tabs-nav {
        margin-bottom: 12px;
        gap: 8px;
    }

    .auth-tab-btn {
        min-height: 38px;
        padding: 6px 6px;
        font-size: 0.78rem;
    }

    .form-group-custom {
        margin-bottom: 10px;
    }

    .form-label-custom {
        font-size: 0.78rem;
        margin-bottom: 3px;
    }

    .input-control-custom {
        height: 42px;
        font-size: 0.88rem;
        padding: 8px 12px 8px 38px;
    }

    .input-icon-prefix {
        left: 12px;
        font-size: 0.9rem;
    }

    .btn-primary-action {
        height: 42px;
        font-size: 0.92rem;
    }

    footer.container-fluid .quick-link ul li {
        border-left: 0;
        padding: 2px 8px;
    }

    footer.container-fluid .f-foot-copyright p:last-child {
        font-size: 0.72rem;
    }
}

/* Short screens (laptops at 768px-800px height) */
@media (max-height: 800px) {
    .site-header {
        padding: 6px 0;
    }

    .main-content {
        padding: 8px 0 12px 0;
    }

    .login-card,
    .brand-showcase-card {
        padding: 20px 24px 16px 24px;
    }

    .form-title {
        font-size: 1.45rem;
        margin-bottom: 2px;
    }

    .auth-tab-btn {
        min-height: 38px;
        font-size: 0.84rem;
    }

    .form-group-custom {
        margin-bottom: 10px;
    }

    .input-control-custom {
        height: 40px;
        font-size: 0.88rem;
    }

    .btn-primary-action {
        height: 42px;
        font-size: 0.94rem;
    }

    .form-footer-nav {
        margin-top: 10px;
    }

    .showcase-title {
        font-size: 1.7rem;
    }
}

@media (max-height: 680px) {
    .site-header {
        position: relative;
    }

    .about-iffi-card,
    .support-prompt {
        display: none;
    }
}

@keyframes iffiFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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