/*
 * Retheme layer for the application portal (MetronicFrontend layouts).
 * Brings the Metronic/Bootstrap-4 admin theme in line with the homepage
 * design system defined in plugins/Bond007/webroot/css/home.css. Loaded
 * last (after style.bundle.css, select2 themes, and custom.css) so its
 * rules win the cascade without needing !important everywhere. Registered
 * in plugins/MetronicFrontend/config/assets.php's `main-css` bundle.
 */

/* Self-hosted brand type — same files as plugins/Bond007/webroot/css/theme-tokens.css,
   referenced by absolute /bond007/ path so the application portal doesn't need its
   own copy. head.php only loads Poppins/Roboto, so without these the .wizard-title /
   .card-title / heading rules below would silently fall back to Helvetica/Arial. */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('/bond007/fonts/Sora-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/bond007/fonts/Inter-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/bond007/fonts/IBMPlexMono-600.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/bond007/fonts/IBMPlexMono-700.woff2') format('woff2');
}

:root {
    --hero-ink-900: #14213d;
    --hero-ink-700: #2b3a57;
    --hero-slate-500: #5b6b85;
    --hero-slate-300: #93a1b8;
    --hero-green-600: #2f7a4e;
    --hero-green-500: #4b9e67;
    --hero-green-100: #e3f2e8;
    --hero-blue-500: #3b63db;
    --hero-blue-800: #18265c;
    --hero-surface-0: #ffffff;
    --hero-surface-50: #f6f8fc;
    --hero-surface-100: #eef2f8;
    --hero-border: #e3e8f1;
    /* Metronic's own default fill for .main.application (the wrapper behind
       both the subheader panel and the step card) — reused verbatim below so
       the page background is one flat color instead of three near-identical
       grays stacked in bands (#kt_body above/below vs. .main.application
       behind the card). */
    --hero-page-bg: #eceef7;
    --hero-shadow-rgb: 24, 35, 66;
    --hero-radius-lg: 22px;
    --hero-radius-md: 14px;
    --hero-radius-sm: 10px;
    --hero-ease: cubic-bezier(.22, .9, .32, 1);
}

/* Page background — one flat light gray everywhere (the shade already
   sitting behind the step card via .main.application), instead of the
   stock Metronic navy/teal gradient. */
#kt_body {
    background-color: var(--hero-page-bg) !important;
    background-image: none !important;
}

/* Typography */
body,
.form-control,
.btn,
p,
span,
div,
input,
select,
textarea {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.wizard-title,
.card-title,
.card-label {
    font-family: 'Sora', Helvetica, Arial, sans-serif;
    color: var(--hero-ink-900);
}

/* Cards / panels */
.main.application,
.subheader {
    border-radius: var(--hero-radius-lg) !important;
}

.card,
.card.card-custom {
    border: 1.5px solid var(--hero-border);
    border-radius: var(--hero-radius-md);
    box-shadow: 0 20px 40px -28px rgba(var(--hero-shadow-rgb), .35);
}

.card.card-custom {
    border-radius: var(--hero-radius-lg);
}

.card.card-custom > .card-header {
    border-bottom: 1px solid var(--hero-border);
}

/* The "Your Bond" / bond-description sidebar boxes fill their card edge to
   edge (.card-body.p-0, zero gap) with Metronic's .card-rounded utility,
   which carries its own unrelated 0.42rem radius — far tighter than the
   card's 22px, so the fill's sharper corners poked out past the card's own
   curve. Match it to the card (minus the border width, so the two curves
   sit concentrically) instead of leaving it a separate, smaller radius. */
.card.card-custom > .card-body > .card-rounded {
    border-radius: calc(var(--hero-radius-lg) - 1.5px);
}

/* Header close button */
.btn.btn-close-application {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 16px;
    background-color: transparent;
    border-color: transparent;
    color: var(--hero-slate-500);
}

.btn.btn-close-application:hover {
    background-color: rgba(59, 99, 219, .08);
    border-color: transparent;
    color: var(--hero-blue-500);
}

/* Buttons */
.btn {
    border-radius: 999px;
    font-weight: 700;
    transition: transform 200ms var(--hero-ease), box-shadow 200ms var(--hero-ease), background 200ms var(--hero-ease), border-color 200ms var(--hero-ease);
}

.btn.btn-primary {
    background: linear-gradient(135deg, var(--hero-blue-500), var(--hero-blue-800));
    border-color: var(--hero-blue-500);
    box-shadow: 0 14px 28px -14px rgba(59, 99, 219, .55);
}

.btn.btn-primary:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, var(--hero-blue-500), var(--hero-blue-800));
    border-color: var(--hero-blue-800);
    transform: translateY(-1px);
    box-shadow: 0 18px 32px -14px rgba(59, 99, 219, .65);
}

.btn-return,
.btn.btn-default,
#btn-application-back.btn-secondary,
#modal-go-submit-application.btn-secondary {
    border-radius: 999px;
    background-color: var(--hero-surface-0);
    color: var(--hero-ink-900);
    border-color: var(--hero-border);
}

.btn-return:hover,
.btn.btn-default:hover,
#btn-application-back.btn-secondary:hover {
    border-color: var(--hero-blue-500);
    color: var(--hero-blue-500);
}

/* Wizard nav */
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-label {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
}

/* wizard-3.css sets the "1." span to 2rem against the title's 1.1rem —
   match them instead of the number dwarfing its own label. */
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title span {
    font-size: inherit;
}

/* .wizard-title also needs to be listed explicitly (not just .wizard-label):
   the heading rule above gives .wizard-title its own hardcoded ink-900
   color, and an explicit color on the element itself always wins over an
   inherited one — even an !important inherited one — so without repeating
   the selector here every completed step's title text would stay ink-900
   while only the checkmark/number (plain inheritance, nothing explicit
   set on them) picked up the state color. */
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="pending"] .wizard-label,
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="pending"] .wizard-title {
    color: var(--hero-slate-300) !important;
}

.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label,
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-title {
    color: var(--hero-ink-900) !important;
}

/* Completed step = theme green, all the way through (number, title text,
   and the checkmark, which inherits via currentColor) — a small positive
   signal that the step is done. */
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-label,
.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-title {
    color: var(--hero-green-600) !important;
}

.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-title::before {
    content: "\2713\0020";
}

.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-label .wizard-bar::after {
    background-color: var(--hero-blue-500) !important;
}

.wizard.wizard-3 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-label .wizard-bar::after {
    background-color: var(--hero-green-500) !important;
}

/* Links */
a {
    color: var(--hero-blue-500);
}

a:hover {
    color: var(--hero-blue-800);
}

/* Wizard progress bar - recolor only, keep stripe/animation as-is */
.progress-bar.bg-success {
    background-color: var(--hero-green-500);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent), linear-gradient(135deg, var(--hero-green-500), var(--hero-green-600));
    background-size: 40px 40px, auto;
}

/* Radio selection list */
.radio-list label {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--hero-border);
    border-radius: var(--hero-radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    background-color: var(--hero-surface-0);
    cursor: pointer;
    transition: border-color 200ms var(--hero-ease), background-color 200ms var(--hero-ease);
}

.radio-list label:last-child {
    margin-bottom: 0;
}

.radio-list label input[type="radio"] {
    accent-color: var(--hero-blue-500);
    margin: 0;
}

.radio-list label:has(input:checked) {
    border-color: var(--hero-blue-500);
    background-color: rgba(59, 99, 219, .06);
}

/* The boxed/card treatment above is meant for a handful of big, meaningful
   choices (e.g. "Select application type"'s two options). Dynamic questions
   in the application form (fill.php's .category-questions loop) reuse the
   same .radio-list template for every small Yes/No and multi-choice
   question — a dozen-plus repeats of the same box reads as clutter rather
   than a set of distinct choices, so flatten it back to a plain list there. */
.category-questions .radio-list label {
    border: none;
    border-radius: 0;
    padding: 4px 0;
    margin-bottom: 6px;
    background: none;
}

.category-questions .radio-list label:has(input:checked) {
    border-color: transparent;
    background: none;
    font-weight: 700;
    color: var(--hero-blue-500);
}

/* Each business owner's whole field block already renders inside its own
   <div class="owner"> (see MultipleEntity::show(), App/View/QuestionTypes/
   MultipleEntity.php:74) — group it visually as a card so it's obvious which
   fields belong to which owner once there's more than one. */
.owner-list .owner {
    display: block;
    border: 1.5px solid var(--hero-border);
    border-radius: var(--hero-radius-md);
    background-color: var(--hero-surface-0);
    padding: 22px 24px;
    margin-bottom: 16px;
}

.owner-list .owner:last-child {
    margin-bottom: 0;
}

.owner-list .owner > h5 {
    margin-top: 0 !important;
}

/* "Have Questions?" sidebar card */
.card-rounded.bg-light-warning {
    background-color: var(--hero-surface-50) !important;
}

.card-rounded.bg-light-warning h4.text-warning {
    color: var(--hero-ink-900) !important;
}

.card-rounded.bg-light-warning i.text-warning {
    color: var(--hero-blue-500) !important;
}

/* Application footer — custom.css's `.application-footer { color: white }`
   was written for the old dark navy/teal page background and is unreadable
   against the light one, so every text color in here needs a rewrite, not
   just the fonts. */
.application-footer {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    color: var(--hero-slate-500);
}

.application-footer .link-white-v2,
.application-footer .link-white-v2:hover {
    color: var(--hero-ink-700);
}

.application-footer .recaptcha-attribution a {
    color: var(--hero-blue-500);
}

.application-footer .recaptcha-attribution a:hover {
    color: var(--hero-blue-800);
}

.application-footer p.fw-lighter {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--hero-slate-500);
}

/* Forms */
.form-control {
    border-radius: var(--hero-radius-sm);
    border: 1.5px solid var(--hero-border);
    color: var(--hero-ink-900);
}

.form-control:focus,
input[type=text]:focus,
input[type=email]:focus {
    border-color: var(--hero-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 99, 219, .12);
}

.radio > input:checked ~ span,
.checkbox > input:checked ~ span {
    background-color: var(--hero-blue-500) !important;
}

/* Select2 (portal-wide, unscoped) */
.select2-container--bootstrap .select2-selection,
.select2-container--bootstrap-big .select2-selection {
    border-radius: var(--hero-radius-sm) !important;
    border-color: var(--hero-border) !important;
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection,
.select2-container--bootstrap-big.select2-container--focus .select2-selection,
.select2-container--bootstrap-big.select2-container--open .select2-selection {
    border-color: var(--hero-blue-500) !important;
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    border-color: var(--hero-blue-500) !important;
    border-radius: var(--hero-radius-sm) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--hero-green-100) !important;
    color: var(--hero-ink-900) !important;
}

/* Alerts / badges */
.alert.alert-custom.alert-light-info.alert-notice {
    border-left-color: var(--hero-green-500);
    background-color: var(--hero-green-100);
}

.alert.alert-custom.alert-notice.alert-light-info .alert-text {
    color: var(--hero-green-600);
}

/* Application number is literally an ID — mono type marks it as data,
   matching the brand guide's "mono = this is a real number" rule. */
.alert.alert-custom.alert-notice.alert-light-info .alert-text h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

.text-success {
    color: var(--hero-green-600) !important;
}

.bg-light-success {
    background-color: var(--hero-green-100) !important;
}

.table-primary thead > tr > th {
    background: var(--hero-blue-500);
}

legend {
    border-bottom-color: var(--hero-blue-500) !important;
}

/* Kill the JS "sticky-js" sidebar-follow behavior (application_sidebar.php's
   [data-sticky="true"] wrapper). It recomputes getBoundingClientRect() and
   rewrites position/top/left/width inline styles on every single `scroll`
   event via a non-passive listener (plugins.bundle.js's vendored Sticky
   v1.3.0) — confirmed pre-existing (reproduces identically with this
   stylesheet disabled) and already caught mid-glitch losing track of its own
   width (`position: fixed; width: 0px`). Forcing fixed-position layout
   through JS on every scroll tick like this is a known trigger for Safari/
   macOS to lose its place mid momentum-scroll and snap the page back to the
   top — reported as happening every time on Safari/Mac on the long
   Fill Application Details form. The JS still runs and still writes the
   inline styles, but !important here keeps the box in normal static flow
   so the browser never actually paints it as fixed, which removes the
   scroll-thrash entirely. Trade-off: the "Your Bond" / "Have Questions"
   sidebar cards now scroll away with the page instead of following you,
   which is an acceptable cost for a page that no longer fights your
   scroll gesture. */
[data-sticky="true"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
}