/* ===================================================================
   Site.modern.css — visual-only design uplift, layered on top of
   Site.css and Bootstrap 3.3.5.

   Mirrors the same approach used for the IAFP admin console
   (ngAppRegAdmin/content/Site.modern.css there): a set of design
   tokens plus overrides of the existing class names and a handful of
   attribute selectors that key off inline styles already present in
   the views. Nothing here adds a new class to markup except the
   Login page (see that section below), and nothing changes any
   controller, service, ng-click/ng-submit binding, or HTTP call.
   Everything else is additive CSS loaded after Site.css, so removing
   the <link> tag for this file restores the exact previous look.

   Section list mirrors what actually exists in this app's views —
   sections that only apply to the admin back office (attendee lists,
   discounts, orders/report grids, collapsible filter panels) are not
   included, since this app has no equivalent screens.
   =================================================================== */

:root {
    --iafp-brand: #337ab7;
    --iafp-brand-hover: #5397d2;
    --iafp-accent: #1d1d7c;
    --surface: #ffffff;
    --surface-soft: #f6f8fb;
    --ink-strong: #1d2740;
    --ink-mid: #5f6d84;
    --line-soft: #e2e6ee;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 8px rgba(15, 46, 74, .08);
    --shadow-md: 0 10px 26px rgba(15, 46, 74, .12);
    --focus: 0 0 0 3px rgba(51, 122, 183, .24);
}

/* ===================================================
   Global type & canvas
   =================================================== */

html,
body {
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--ink-strong);
}

.container,
.container-fluid {
    max-width: 1360px;
}

/* Site.css's own 60px top margin on .mainContent existed only to leave
   clearance under the fixed-position header nav Dashboard.html used to
   render — now removed (see Dashboard.html and the "Header & footer"
   section below), so that margin is just a blank gap above the banner. */
.mainContent {
    margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-strong);
    font-weight: 700;
}

/* ===================================================
   Header & footer
   =================================================== */

img.bannerlogo {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

footer.bottomadvtstyle {
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.06);
    background-color: var(--surface);
}

/* ===================================================
   "My Registration" tab menu (Registered/AttendeesMenu.html) —
   same pill-nav treatment as the admin dashboard's persistent
   feature nav, replacing plain Bootstrap nav-tabs squares.
   =================================================== */

div.tab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background-color: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 8px 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.tab ul.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0;
    padding: 0;
    float: none;
}

div.tab li {
    float: none;
    border: 0 !important;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-mid);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

div.tab li:hover {
    background-color: var(--surface-soft) !important;
    color: var(--ink-strong);
}

div.tab li.selected {
    background-color: var(--iafp-brand) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(51, 122, 183, .35);
}

@media (max-width: 991px) {
    div.tab {
        justify-content: flex-start;
    }
}

/* ===================================================
   Buttons

   .button-color's own hover/focus/active rules in Site.css set the
   exact same flat background on every state, so a click or hover
   currently gives no visual feedback at all. Added here rather than
   changed in Site.css, so nothing there needs editing: this file
   loads after it and every selector below matches with equal or
   higher specificity, no !important needed.
   =================================================== */

.button-color {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .08));
    font-weight: 600;
    letter-spacing: .1px;
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

.button-color:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(51, 122, 183, .35);
}

.button-color:active {
    transform: translateY(1px);
    box-shadow: none;
    filter: brightness(.96);
}

.button-color:focus,
.btn:focus,
.form-control:focus,
.pagination > li > a:focus,
.pagination > li > span:focus {
    outline: 0;
    box-shadow: var(--focus);
}

fieldset[disabled] {
    opacity: .6 !important;
}

/* ===================================================
   Forms
   =================================================== */

.form-control,
select.form-control,
textarea.form-control {
    border-radius: var(--radius-sm);
    border: 1px solid #d5dbe6;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--iafp-brand);
    box-shadow: 0 0 0 3px rgba(51, 122, 183, .16);
}

.form-control:disabled,
select.form-control:disabled {
    background-color: #f4f5f7;
    color: #97a0ac;
    cursor: not-allowed;
}

input.ng-invalid.ng-dirty,
select.ng-invalid.ng-dirty,
textarea.ng-invalid.ng-dirty {
    border-left: 3px solid #E03930;
}

input.ng-valid.ng-dirty,
select.ng-valid.ng-dirty,
textarea.ng-valid.ng-dirty {
    border-left: 3px solid #57A83F;
}

.form-group label,
.control-label {
    color: var(--ink-strong);
    font-weight: 500;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--iafp-brand);
}

/* ===================================================
   Tables (order summaries, product lists, completed orders)
   =================================================== */

.table {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}

.table > thead > tr > th {
    background: linear-gradient(180deg, #f8f9fb, #f2f4f8);
    border-bottom: 2px solid var(--line-soft);
    color: var(--ink-strong);
    font-weight: 700;
    padding: 8px 12px;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: 10px 12px;
    color: var(--ink-strong);
    border-color: #eef0f4;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfd;
}

.table-hover > tbody > tr:hover,
.table.table-hover > tbody > tr:hover {
    background-color: #f1f4fa !important;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--iafp-accent);
    border-color: #d8dde8;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--iafp-brand);
    border-color: var(--iafp-brand);
}

/* ===================================================
   Panels & cards
   =================================================== */

.panel,
.panel.panel-default {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
}

.panel-default > .panel-heading {
    background: linear-gradient(180deg, #ffffff, #f5f7fb);
    border-color: var(--line-soft);
    color: var(--ink-strong);
    font-weight: 700;
}

.panel-body {
    background: var(--surface);
}

/* Registration-type picker cards on LandingPage.html. Site.css draws
   these with a heavy 8px solid border-bottom that turns red on hover
   — replaced with the app's usual soft border + lift, same as every
   other card in the app. */
div.regcard {
    border: 1px solid var(--line-soft) !important;
    border-top: 3px solid var(--iafp-accent) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

div.regcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--line-soft) !important;
    border-top: 3px solid var(--iafp-accent) !important;
}

.regcardtitle {
    font-family: inherit;
    letter-spacing: -.2px;
}

.regcarddesc {
    font-family: inherit;
    line-height: 1.5;
}

/* ===================================================
   Overlay / spinner — replaces the spinner.gif image (swapped for
   this markup in Views/RegAdmin/Index.cshtml) with a CSS spinner,
   sharper at any resolution and no extra image request. The
   wcOverlay directive transcludes whatever markup is inside its
   element, so this is a drop-in replacement for the <img>.
   =================================================== */

.overlayBackground {
    background-color: rgba(15, 46, 74, .35) !important;
}

.overlayContent {
    width: 150px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 18px 22px;
}

.app-loader-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 4px solid rgba(51, 122, 183, .18);
    border-top-color: var(--iafp-brand);
    animation: app-spin .7s linear infinite;
}

@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-loader-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ink-mid);
}

/* ===================================================
   Legacy inline-style overrides (applies across many views
   without editing each one)
   =================================================== */

div[style*="font-family: Arial"],
span[style*="font-family: Arial"],
p[style*="font-family: Arial"] {
    font-family: inherit !important;
}

/* Page-title bar repeated at the top of every registration screen:
   <div class=" row" style="...color: #1d1d7c">{{regName}} Registration</div>
   It carries Bootstrap's ".row" class, whose -15px side margins would
   make a background/border bleed past the container if applied
   as-is — the margin reset below cancels that out (higher specificity
   than the bare ".row" rule) before the card treatment is added. */
div.row[style*="color: #1d1d7c"] {
    margin-left: 0;
    margin-right: 0;
    background: var(--surface-soft);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    margin-bottom: 12px;
    font-weight: 700 !important;
}

/* Same brand-ink color used as plain intro/instructional text (e.g. the
   "Already Registered?" blurb on the Login page) rather than as a row
   heading — a left-accented callout instead of a heading bar. */
div:not(.row)[style*="color: #1d1d7c"] {
    background: var(--surface-soft);
    border-left: 4px solid var(--iafp-accent);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
}

/* ===================================================
   Login page (ngAppRegAdmin/views/Registered/Login.html) — the
   .login-card/.login-form-modern/.login-input-group classes below
   are applied on that view alongside its existing panel/form-control
   markup; no ng-submit/ng-model bindings changed.
   =================================================== */

.login-card {
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(15, 46, 74, .18) !important;
}

.login-card > .panel-heading {
    background: linear-gradient(135deg, var(--iafp-accent) 0%, var(--iafp-brand) 130%);
    color: #fff;
    border: 0;
    padding: 22px 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}

.login-card > .panel-body {
    padding: 26px 24px 24px;
}

.login-form-modern .form-group {
    margin-bottom: 16px;
}

.login-form-modern label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-mid);
}

.login-input-group {
    position: relative;
}

.login-input-group .glyphicon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--ink-mid);
    font-size: 15px;
    pointer-events: none;
}

.login-input-group .form-control {
    padding-left: 38px;
    height: 42px;
}

.login-submit-btn {
    height: 44px;
    font-size: 15px;
    font-weight: 700;
    margin-top: 4px;
}