/* ==================================================================
   SEÑA — "Sigurado ka!" theme for OLIHome.Sena.
   Loaded AFTER /css/home-theme.css: it re-points OLIHome's oli-* design
   tokens to the SEÑA palette (so every shared form component recolours
   at once), then adds the Sena page shell (.sena-*) and the CRF's
   section / tile / modal styles.

   Palette
     --sena-navy    #003049  headings, hero, dark text
     --sena-orange  #F77F00  primary actions, active states
     --sena-red     #D62828  primary hover, required marks, errors
     --sena-yellow  #FCBF49  focus ring, highlights
     --sena-cream   #EAE2B7  page tint, soft panels
================================================================== */

:root {
    --sena-navy: #003049;
    --sena-navy-2: #0b4566;
    --sena-orange: #F77F00;
    --sena-red: #D62828;
    --sena-yellow: #FCBF49;
    --sena-cream: #EAE2B7;
    --sena-cream-soft: #F7F3E3;
    --sena-paper: #FFFDF6;
    --sena-ink: #1d3a4d;
    --sena-muted: #5c7180;
    --sena-line: #E6DFC4;

    /* OLIHome tokens → SEÑA */
    --oli-surface: #ffffff;
    --oli-soft: var(--sena-cream-soft);
    --oli-surface-border: var(--sena-line);
    --oli-theme: var(--sena-orange);
    --oli-theme-hover: var(--sena-red);
    --oli-theme-shadow: rgba(247, 127, 0, .28);
    --oli-heading: var(--sena-navy);
    --oli-text: var(--sena-muted);

    --sena-radius: 1.25rem;
    --sena-font-display: 'Montserrat', 'Poppins', sans-serif;
}

/* ------------------------------------------------------------------
   1. Page shell
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.sena {
    font-family: 'Poppins', sans-serif;
    color: var(--sena-ink);
    background: var(--sena-paper);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.sena-header {
    background: #fff;
    border-bottom: 1px solid var(--sena-line);
}

.sena-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sena-logo {
    display: block;
    height: 56px;
    width: auto;
}

/* Text fallback shown until sena-logo.png is saved (see _SenaLayout). */
.sena-logo-text {
    font-family: var(--sena-font-display);
    font-weight: 900;
    font-size: 1.75rem;
    letter-spacing: -.02em;
    color: #D54715;
    line-height: 1;
}

.sena-header-help {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--sena-navy);
    text-decoration: none;
}

.sena-header-help i { color: var(--sena-orange); }

/* Hero band */
.sena-hero {
    position: relative;
    overflow: hidden;
    background: var(--sena-navy);
    color: #fff;
    padding: 1.5rem 1rem 6rem;
}

/* Diagonal brand stripes in the corner */
.sena-hero::before,
.sena-hero::after {
    content: "";
    position: absolute;
    right: -6rem;
    width: 26rem;
    height: 3.25rem;
    transform: rotate(-32deg);
    border-radius: 2rem;
    pointer-events: none;
}

.sena-hero::before { top: 2.5rem; background: var(--sena-orange); opacity: .9; }
.sena-hero::after  { top: 6.25rem; background: var(--sena-yellow); opacity: .85; right: -9rem; }

.sena-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
}

.sena-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sena-navy);
    background: var(--sena-yellow);
    border-radius: 2rem;
}

.sena-hero-title {
    font-family: var(--sena-font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 1rem 0 .75rem;
}

.sena-hero-title em {
    font-style: normal;
    color: var(--sena-yellow);
}

.sena-hero-sub {
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
    max-width: 34rem;
    margin: 0;
}

.sena-steps {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
}

.sena-steps li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 500;
    color: #fff;
}

.sena-steps-num {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sena-navy);
    background: #fff;
    border-radius: 50%;
}

.sena-steps li:not(:last-child)::after {
    content: "\f054"; /* chevron-right */
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', sans-serif;
    font-weight: 300;
    font-size: .7rem;
    color: var(--sena-yellow);
    margin-left: .9rem;
}

/* Main card overlapping the hero */
.sena-main {
    flex: 1 0 auto;
    padding: 0 1rem 3rem;
    margin-top: -4.25rem;
    position: relative;
    z-index: 2;
}

.sena-card {
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--sena-radius);
    box-shadow: 0 24px 60px -24px rgba(0, 48, 73, .35), 0 2px 6px rgba(0, 48, 73, .06);
    padding: 2rem 1.25rem;
}

@media (min-width: 640px) {
    .sena-card { padding: 2.5rem 2.75rem; }
}

.sena-footer {
    text-align: center;
    font-size: .75rem;
    color: var(--sena-muted);
    padding: 0 1rem 2rem;
}

.sena-footer a {
    color: var(--sena-navy);
    text-decoration: none;
    font-weight: 500;
}

.sena-footer a:hover { color: var(--sena-orange); }

.sena-footer-dot { margin: 0 .5rem; color: var(--sena-line); }

/* ------------------------------------------------------------------
   2. Form sections (numbered)
------------------------------------------------------------------ */
.sena-section + .sena-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed var(--sena-line);
}

.sena-section-head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.25rem;
}

.sena-section-num {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--sena-font-display);
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    background: var(--sena-orange);
    border-radius: .75rem;
    box-shadow: 0 6px 14px -6px rgba(247, 127, 0, .7);
}

.sena-section-title {
    font-family: var(--sena-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--sena-navy);
    margin: 0;
    line-height: 1.25;
}

.sena-section-desc {
    font-size: .8rem;
    color: var(--sena-muted);
    margin: .2rem 0 0;
    line-height: 1.5;
}

.sena-optional {
    font-family: 'Poppins', sans-serif;
    font-size: .7rem;
    font-weight: 500;
    color: var(--sena-muted);
    background: var(--sena-cream-soft);
    border-radius: 1rem;
    padding: .1rem .55rem;
    margin-left: .35rem;
    vertical-align: middle;
}

.sena-subhead {
    font-size: .8rem;
    font-weight: 600;
    color: var(--sena-navy);
    margin: 1.25rem 0 .75rem;
}

/* ------------------------------------------------------------------
   3. Inputs (over home-theme's oli-form-control / oli-float)
------------------------------------------------------------------ */
.sena .oli-form-control {
    padding: .85rem 1rem;
    font-size: .9rem;
    background: #fff;
    border: 1.5px solid var(--sena-line);
    border-radius: .75rem;
}

.sena .oli-form-control:hover { border-color: #d6cca2; }

.sena .oli-form-control:focus {
    border-color: var(--sena-orange);
    box-shadow: 0 0 0 4px rgba(252, 191, 73, .45);
}

.sena .oli-form-control[readonly] {
    background: var(--sena-cream-soft);
    color: var(--sena-navy);
    font-weight: 600;
}

.sena .oli-float-label { left: 1rem; color: #8d9ba5; font-size: .9rem; }

.sena .oli-form-row { gap: 1rem; margin-bottom: 1rem; }

.sena .oli-field-error,
.sena .oli-float .oli-form-control.input-validation-error ~ label.oli-float-label { color: var(--sena-red); }

.sena .oli-form-control.input-validation-error {
    border-color: var(--sena-red);
    background: #fff8f7;
}

.sena .oli-field-error { margin-top: .25rem; font-weight: 500; }

.sena .oli-form-hint { font-size: .75rem; color: var(--sena-muted); margin: .4rem 0 0; }

.sena .oli-form-hint i { color: var(--sena-orange); margin-right: .25rem; }

.sena-note {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--sena-muted);
    background: var(--sena-cream-soft);
    border-radius: .75rem;
    padding: .75rem 1rem;
    margin-top: .25rem;
}

.sena-note i { color: var(--sena-navy); margin-top: .15rem; }
.sena-note a { color: var(--sena-navy); font-weight: 600; }

.sena .oli-form-alert {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .85rem;
    color: #8f1b1b;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    border-radius: .75rem;
}

.sena .oli-form-alert i { color: var(--sena-red); margin-top: .15rem; }

/* ------------------------------------------------------------------
   4. Tripping type tiles (checkbox inputs, single-select via page JS)
------------------------------------------------------------------ */
.sena-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

@media (min-width: 640px) {
    .sena-tiles { grid-template-columns: repeat(3, 1fr); }
}

.sena-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1.5px solid var(--sena-line);
    border-radius: 1rem;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s, box-shadow .2s, background .2s, transform .2s;
}

.sena-tile:hover { border-color: var(--sena-orange); transform: translateY(-1px); }

/* The real checkbox stays focusable for keyboard users, visually hidden. */
.sena-tile input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.sena-tile-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
    color: var(--sena-navy);
    background: var(--sena-cream-soft);
    border-radius: .85rem;
    transition: background .2s, color .2s;
}

.sena-tile-text { display: flex; flex-direction: column; line-height: 1.3; }
.sena-tile-name { font-weight: 600; font-size: .9rem; color: var(--sena-navy); }
.sena-tile-desc { font-size: .72rem; color: var(--sena-muted); }

.sena-tile-check {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: .65rem;
    color: transparent;
    border: 1.5px solid var(--sena-line);
    border-radius: 50%;
    transition: all .2s;
}

.sena-tile:has(input:checked) {
    border-color: var(--sena-orange);
    background: #fff8ef;
    box-shadow: 0 10px 24px -14px rgba(247, 127, 0, .8);
}

.sena-tile:has(input:checked) .sena-tile-icon { background: var(--sena-orange); color: #fff; }
.sena-tile:has(input:checked) .sena-tile-check { background: var(--sena-orange); border-color: var(--sena-orange); color: #fff; }
.sena-tile:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(252, 191, 73, .55); }

/* Chosen schedule chip */
.sena-date-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .8rem 1rem;
    background: var(--sena-cream-soft);
    border: 1.5px dashed var(--sena-yellow);
    border-radius: 1rem;
    font-size: .85rem;
    color: var(--sena-navy);
}

.sena-date-chip i { color: var(--sena-orange); font-size: 1.1rem; }
.sena-date-chip strong { font-weight: 600; }

.sena-date-chip button {
    margin-left: auto;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--sena-orange);
    background: none;
    border: 0;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: .5rem;
}

.sena-date-chip button:hover { background: #fff; color: var(--sena-red); }

.sena-date-chip.is-empty { border-color: var(--sena-line); color: var(--sena-muted); }

.sena-center-error { text-align: center; margin-top: .5rem; }

/* ------------------------------------------------------------------
   5. Attestation + submit
------------------------------------------------------------------ */
.sena-submit-block {
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--sena-cream-soft);
    border-radius: 1rem;
}

.sena .oli-form-attest {
    font-size: .8rem;
    color: var(--sena-ink);
    margin-bottom: 0;
    cursor: pointer;
}

.sena .oli-form-attest input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--sena-orange);
}

.sena-submit-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .9rem;
    margin-top: 1.25rem;
}

.sena-submit-note {
    font-size: .75rem;
    color: var(--sena-muted);
    text-align: center;
}

@media (min-width: 640px) {
    .sena-submit-row { flex-direction: row; align-items: center; justify-content: space-between; }
    .sena-submit-note { text-align: left; }
}

.sena-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 2.25rem;
    font-family: var(--sena-font-display);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--sena-orange), #f05a00);
    border: 0;
    border-radius: 3rem;
    cursor: pointer;
    box-shadow: 0 12px 24px -12px rgba(247, 127, 0, .9);
    transition: transform .2s, box-shadow .2s, background .2s;
}

.sena-btn:hover {
    background: linear-gradient(135deg, #f05a00, var(--sena-red));
    transform: translateY(-1px);
    box-shadow: 0 16px 28px -12px rgba(214, 40, 40, .8);
}

.sena-btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(252, 191, 73, .6); }

/* ------------------------------------------------------------------
   6. Confirmation page
------------------------------------------------------------------ */
.sena-confirm { text-align: center; padding: .5rem 0 1rem; }

.sena-confirm-badge {
    display: inline-grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2rem;
    color: #fff;
    background: var(--sena-orange);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(247, 127, 0, .12), 0 0 0 20px rgba(252, 191, 73, .12);
    margin: .5rem 0 1.5rem;
}

.sena-confirm-title {
    font-family: var(--sena-font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--sena-navy);
    margin: 0 0 .5rem;
}

.sena-confirm-text {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--sena-muted);
    max-width: 32rem;
    margin: 0 auto;
}

.sena-ref {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .55rem 1.1rem;
    font-size: .85rem;
    color: var(--sena-navy);
    background: var(--sena-cream);
    border-radius: 2rem;
}

.sena-ref strong { font-family: var(--sena-font-display); font-weight: 800; letter-spacing: .04em; }

.sena-next {
    list-style: none;
    padding: 0;
    margin: 2rem auto 0;
    max-width: 34rem;
    display: grid;
    gap: .75rem;
    text-align: left;
}

.sena-next li {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    background: var(--sena-cream-soft);
    border-radius: 1rem;
    font-size: .85rem;
    color: var(--sena-ink);
    line-height: 1.5;
}

.sena-next li strong { display: block; color: var(--sena-navy); }

.sena-next .sena-steps-num { background: var(--sena-orange); color: #fff; }

/* ------------------------------------------------------------------
   7. Schedule calendar modal
      (moved from Register.cshtml's inline <style>; colours come from
      the oli-* tokens above, overrides at the end of this section)
------------------------------------------------------------------ */
.oli-cal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 48, 73, .6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.oli-cal-overlay.is-open { display: flex; }

.oli-cal-modal {
    background: var(--oli-surface);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem 2rem;
    width: 100%;
    max-width: 26rem;
    box-shadow: 0 10px 40px rgba(0, 48, 73, .25);
}

.oli-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.oli-cal-title-group {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.oli-cal-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--oli-theme-shadow);
    color: var(--oli-theme);
    font-size: 1rem;
}

.oli-cal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--oli-heading);
}

.oli-cal-close {
    background: transparent;
    border: 0;
    font-size: 1.1rem;
    color: var(--oli-text);
    cursor: pointer;
    line-height: 1;
    padding: .25rem;
}

.oli-cal-close:hover { color: var(--oli-heading); }

.oli-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}

.oli-cal-nav-left {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.oli-cal-month-select {
    border: 0;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: var(--oli-heading);
    cursor: pointer;
    padding: .2rem .3rem;
}

.oli-cal-year {
    font-size: 1rem;
    color: var(--oli-heading);
}

.oli-cal-nav-arrows {
    display: flex;
    gap: .4rem;
}

.oli-cal-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--oli-surface-border);
    background: transparent;
    color: var(--oli-text);
    cursor: pointer;
    transition: all .2s;
}

.oli-cal-arrow:hover:not(:disabled) {
    border-color: var(--oli-theme);
    color: var(--oli-theme);
}

.oli-cal-arrow:disabled { visibility: hidden; }

.oli-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--oli-text);
    margin-bottom: .5rem;
}

.oli-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .15rem;
}

.oli-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 0;
    background: transparent;
    border-radius: 50%;
    font-size: .85rem;
    color: var(--oli-heading);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.oli-cal-day:hover:not(:disabled) { background: var(--oli-soft); }

.oli-cal-day.is-outside,
.oli-cal-day:disabled {
    color: #cccccc;
    cursor: default;
    pointer-events: none;
}

.oli-cal-day.is-today { border: 1px solid var(--oli-theme); }

.oli-cal-day.is-selected {
    background: var(--oli-theme);
    color: #fff;
}

.oli-cal-footer {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
}

.oli-cal-btn-cancel,
.oli-cal-btn-confirm {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.25rem;
    font-size: .875rem;
    font-weight: 500;
    border-radius: 2.5rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s;
}

.oli-cal-btn-cancel {
    background: #3a3a3a;
    color: #fff;
}

.oli-cal-btn-cancel:hover { background: #222; }

.oli-cal-btn-confirm {
    background: var(--oli-theme);
    color: #fff;
}

.oli-cal-btn-confirm:hover { background: var(--oli-theme-hover); }

/* Calendar overrides for SEÑA */
.oli-cal-modal { border-radius: var(--sena-radius); font-family: 'Poppins', sans-serif; }
.oli-cal-title { font-family: var(--sena-font-display); font-weight: 800; color: var(--sena-navy); }
.oli-cal-day.is-selected { background: var(--sena-orange); color: #fff; }
.oli-cal-day.is-today { border-color: var(--sena-yellow); }

.oli-cal-btn-cancel {
    background: transparent;
    color: var(--sena-navy);
    border: 1.5px solid var(--sena-navy);
}

.oli-cal-btn-cancel:hover { background: var(--sena-navy); color: #fff; }

/* Pages without a hero band */
.sena-main.sena-main-plain { margin-top: 2.5rem; }

/* Header logo link: no underline on the wordmark/logo */
.sena-brand,
.sena-brand:hover,
.sena-brand:focus { text-decoration: none; }

/* Headline stays on one line on desktop (900px+); phones may wrap. */
@media (min-width: 900px) {
    .sena-hero-title { white-space: nowrap; }
}
.sena-hero-title { margin: .75rem 0 .5rem; }
.sena-steps { margin-top: 1.1rem; }

/* Header actions + EN | FIL language toggle */
.sena-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sena-lang {
    display: inline-flex;
    padding: .2rem;
    background: var(--sena-cream-soft);
    border: 1px solid var(--sena-line);
    border-radius: 2rem;
}

.sena-lang a {
    padding: .3rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--sena-navy);
    text-decoration: none;
    border-radius: 2rem;
    transition: background .2s, color .2s;
}

.sena-lang a:hover { color: var(--sena-orange); }
.sena-lang a.is-active { background: var(--sena-orange); color: #fff; }

@media (max-width: 479px) {
    .sena-header-help span { display: none; }
}

/* ------------------------------------------------------------------
   8. In-place thank-you swap (Register.cshtml + _ThankYou.cshtml)
------------------------------------------------------------------ */
.sena-panel[hidden] { display: none !important; }

.sena-panel.is-entering { animation: sena-panel-in .45s ease both; }

@keyframes sena-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sena-panel.is-entering { animation: none; }
}

.sena-confirm-title:focus { outline: none; }

.sena-thanks-schedule {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: .6rem 1.1rem;
    font-size: .85rem;
    color: var(--sena-navy);
    border: 1.5px dashed var(--sena-yellow);
    border-radius: 2rem;
}

.sena-thanks-schedule[hidden] { display: none; }
.sena-thanks-schedule i { color: var(--sena-orange); }

.sena-thanks-actions { margin-top: 2rem; }

/* Secondary (outline) variant of the main button */
.sena-btn.sena-btn-outline {
    color: var(--sena-navy);
    background: transparent;
    border: 1.5px solid var(--sena-navy);
    box-shadow: none;
    font-size: .85rem;
}

.sena-btn.sena-btn-outline:hover {
    color: #fff;
    background: var(--sena-navy);
    box-shadow: none;
}

/* Register button busy state */
.sena-btn .sena-btn-busy { display: none; }
.sena-btn.is-busy { pointer-events: none; opacity: .85; }
.sena-btn.is-busy .sena-btn-label { display: none; }
.sena-btn.is-busy .sena-btn-busy { display: inline-flex; align-items: center; gap: .5rem; }
.sena-btn-label { display: inline-flex; align-items: center; gap: .6rem; }

/* Hero steps progress after Register */
.sena-steps li.is-done { color: rgba(255, 255, 255, .7); }
.sena-steps li.is-done .sena-steps-num { background: var(--sena-orange); color: transparent; position: relative; }
.sena-steps li.is-done .sena-steps-num::after {
    content: "\f00c"; /* check */
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: .7rem;
    color: #fff;
}
.sena-steps li.is-current { font-weight: 600; }
.sena-steps li.is-current .sena-steps-num { background: var(--sena-yellow); box-shadow: 0 0 0 4px rgba(252, 191, 73, .3); }

/* ------------------------------------------------------------------
   9. Live submission (Register.cshtml): error banner, seller lookup,
      Data Privacy consent modal
------------------------------------------------------------------ */
.sena-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 1.25rem;
    padding: .85rem 1.1rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--sena-red);
    background: #fdecec;
    border: 1px solid rgba(214, 40, 40, .25);
    border-left: 4px solid var(--sena-red);
    border-radius: .75rem;
}

.sena-alert[hidden] { display: none; }
.sena-alert i { margin-top: .2rem; }
.sena-submit-block .sena-alert { margin: 1rem 0 0; }

.sena-seller-suggestion {
    margin: .4rem 0 0;
    font-size: .8rem;
    color: var(--sena-navy);
}

.sena-seller-suggestion[hidden] { display: none; }
.sena-seller-suggestion i { color: var(--sena-orange); }
.sena-seller-suggestion.is-not-found { color: var(--sena-red); }

.sena-dpa-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2100; /* above the calendar overlay (2000) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 48, 73, .55);
}

.sena-dpa-backdrop.is-open { display: flex; }

.sena-dpa {
    width: 100%;
    max-width: 36rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem;
    background: var(--sena-paper);
    border-top: 6px solid var(--sena-orange);
    border-radius: var(--sena-radius);
    box-shadow: 0 24px 60px rgba(0, 48, 73, .3);
    animation: sena-panel-in .3s ease both;
}

.sena-dpa-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
}

.sena-dpa-icon {
    display: grid;
    place-items: center;
    flex: 0 0 2.75rem;
    height: 2.75rem;
    font-size: 1.2rem;
    color: #fff;
    background: var(--sena-navy);
    border-radius: 50%;
}

.sena-dpa-head h2 {
    margin: 0;
    font-family: var(--sena-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sena-navy);
}

.sena-dpa-body p {
    margin: 0 0 .75rem;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--sena-ink);
}

.sena-dpa a { color: var(--sena-orange); font-weight: 600; }

.sena-dpa-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: .6rem 0 0;
    padding: .75rem .9rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--sena-ink);
    background: var(--sena-cream-soft);
    border: 1px solid var(--sena-line);
    border-radius: .75rem;
    cursor: pointer;
}

.sena-dpa-check input {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .15rem;
    accent-color: var(--sena-orange);
}

.sena-dpa-error {
    margin: .75rem 0 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--sena-red);
}

.sena-dpa-error[hidden] { display: none; }

.sena-dpa-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.25rem;
}

@media (max-width: 479px) {
    .sena-dpa { padding: 1.25rem; }
    .sena-dpa-actions .sena-btn { flex: 1; justify-content: center; }
}

/* ------------------------------------------------------------------
   10. Searchable dropdowns - OliSelect (wwwroot/js/shared/helpers/select.js,
       a copy of OLIOne's OLI.Assets component). It builds its list card from
       Bootstrap utility classes; this site doesn't load Bootstrap (it would
       restyle the whole page), so only the classes OliSelect uses are defined
       here, scoped to its popup ([data-oli-popover]) and in SEÑA's palette.
------------------------------------------------------------------ */

/* The real <select> stays in the form (posted + validated) but out of sight. */
.sena-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
}

.sena-select-field { cursor: pointer; caret-color: transparent; }
.sena-select-field:disabled { cursor: not-allowed; opacity: .6; }

[data-oli-popover] {
    --bs-primary-rgb: 247, 127, 0; /* --sena-orange: tints the picked row */
    position: fixed;
    padding: .5rem;
    color: var(--sena-ink);
    background: #fff;
    border: 1px solid var(--sena-line);
    border-radius: 1rem;
    box-shadow: 0 16px 40px rgba(0, 48, 73, .16);
    font-size: .9rem;
    animation: sena-panel-in .15s ease both;
}

[data-oli-popover] .position-relative { position: relative; }
[data-oli-popover] .position-absolute { position: absolute; }
[data-oli-popover] .top-50 { top: 50%; }
[data-oli-popover] .translate-middle-y { transform: translateY(-50%); }
[data-oli-popover] .mb-2 { margin-bottom: .5rem; }
[data-oli-popover] .mb-1 { margin-bottom: .25rem; }
[data-oli-popover] .small { font-size: .8rem; }
[data-oli-popover] .text-body-secondary { color: var(--sena-muted); }
[data-oli-popover] .overflow-y-auto { overflow-y: auto; }
[data-oli-popover] .overflow-x-hidden { overflow-x: hidden; }

/* Search box */
[data-oli-popover] .form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-top: .55rem;
    padding-bottom: .55rem;
    padding-right: .75rem;
    font: inherit;
    font-size: .875rem;
    color: var(--sena-ink);
    background: #fff;
    border: 1.5px solid var(--sena-line);
    border-radius: .75rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

[data-oli-popover] .form-control:focus {
    border-color: var(--sena-orange);
    box-shadow: 0 0 0 3px rgba(247, 127, 0, .18);
}

/* Option rows */
[data-oli-popover] .btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 2px;
    padding: .6rem .7rem;
    font: inherit;
    font-size: .875rem;
    text-align: left;
    color: var(--sena-ink);
    background: transparent;
    border: 0;
    border-radius: .65rem;
    cursor: pointer;
}

[data-oli-popover] .btn.bg-body-secondary { background: var(--sena-cream-soft); }
[data-oli-popover] .btn.text-primary { color: var(--sena-orange); }
[data-oli-popover] .btn.fw-semibold { font-weight: 600; }
[data-oli-popover] .btn.shadow-sm { box-shadow: inset 3px 0 0 var(--sena-orange); }
[data-oli-popover] .flex-grow-1 { flex: 1 1 auto; }
[data-oli-popover] .flex-shrink-0 { flex-shrink: 0; }
[data-oli-popover] .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empty state ("No matches") */
[data-oli-popover] .text-center { text-align: center; }
[data-oli-popover] .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
[data-oli-popover] .d-block { display: block; }
[data-oli-popover] .fs-5 { font-size: 1.25rem; }
[data-oli-popover] .opacity-50 { opacity: .5; }


/* ------------------------------------------------------------------
   11. "Need help?" support modal (Views/Shared/_SenaSupport.cshtml +
       js/shared/sena-support.js). Builds on the Data Privacy modal
       (.sena-dpa*), tiles (.sena-tile-*) and confirmation (.sena-confirm-*)
       styles above; both layouts load it.
------------------------------------------------------------------ */
button.sena-header-help {
    padding: .45rem .9rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    background: var(--sena-cream-soft);
    border: 1px solid var(--sena-line);
    border-radius: 2rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

button.sena-header-help:hover { border-color: var(--sena-orange); background: #fff; }
button.sena-header-help:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(252, 191, 73, .6); }

body.sena-help-open { overflow: hidden; }
/* OliSelect's list sets its own z-index (1080) inline - lift it above this modal. */
body.sena-help-open [data-oli-popover] { z-index: 2300 !important; }

.sena-help-backdrop { z-index: 2200; }

.sena-help {
    position: relative;
    max-width: 44rem;
}

/* A tall modal scrolls, and the browser's default scrollbar track is drawn square on the right
   edge, over the rounded corners. A transparent track leaves only a thin thumb, kept clear of the
   corners, so the rounded edge shows (box-shadow kept - clip-path would cut it off). */
.sena-dpa {
    scrollbar-width: thin;
    scrollbar-color: #d6cca2 transparent;
}

.sena-dpa::-webkit-scrollbar { width: 8px; }
.sena-dpa::-webkit-scrollbar-track { background: transparent; margin: var(--sena-radius) 0; }
.sena-dpa::-webkit-scrollbar-thumb { background: #d6cca2; border-radius: 8px; }

.sena-help-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    color: var(--sena-navy);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.sena-help-close:hover { background: var(--sena-cream-soft); }
.sena-help .sena-dpa-head { padding-right: 2.5rem; }
.sena-help-sub { margin: .2rem 0 0; font-size: .8rem; color: var(--sena-muted); }

.sena-help-step[hidden] { display: none; }

.sena-help form .sena-alert { margin: 0 0 1rem; }

.sena-help-link {
    padding: 0;
    font: inherit;
    font-family: 'Poppins', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sena-orange);
    background: none;
    border: 0;
    cursor: pointer;
}

.sena-help-link:hover { color: var(--sena-red); text-decoration: underline; }

.sena-help .oli-form-row { margin-bottom: .85rem; }
.sena-help .oli-form-group[hidden],
.sena-help .oli-form-row[hidden] { display: none; }

.sena-help-textarea {
    width: 100%;
    min-height: 6.5rem;
    resize: vertical;
    font-family: inherit;
}

.sena-help-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .9rem;
    margin-top: .25rem;
}

.sena-help-attach {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--sena-navy);
    background: var(--sena-cream-soft);
    border: 1.5px dashed #d6cca2;
    border-radius: 2rem;
    cursor: pointer;
}

.sena-help-attach:hover { border-color: var(--sena-orange); }
.sena-help-attach i { color: var(--sena-orange); }
.sena-help-files-note { font-size: .72rem; color: var(--sena-muted); }

.sena-help-file-list {
    flex: 1 1 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}

.sena-help-file-list:empty { display: none; }

.sena-help-file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .8rem;
    font-size: .8rem;
    background: #fff;
    border: 1px solid var(--sena-line);
    border-radius: .65rem;
}

.sena-help-file-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sena-help-done { text-align: center; padding: .5rem 0 .25rem; }
.sena-help-done .sena-ref { flex-wrap: wrap; justify-content: center; }

.sena-help-warn {
    margin: 1rem auto 0;
    max-width: 30rem;
    font-size: .8rem;
    color: #8a5a00;
}

.sena-help-warn[hidden] { display: none; }
.sena-help-done-actions { margin-top: 1.5rem; }