/*
 * Thin custom layer on top of vendored Bootstrap — theme colors and
 * the mobile-app chrome (top bar, bottom tab bar, network indicator)
 * that Bootstrap doesn't provide out of the box. Keep app-specific
 * component styling here; prefer Bootstrap utility classes in
 * templates over new custom classes where possible.
 */

:root {
    --pasada-primary: #c2410c;
    --pasada-primary-dark: #9a3412;
    --pasada-online: #1e8e3e;
    --pasada-offline: #b3261e;

    --bs-primary: var(--pasada-primary);
    --bs-primary-rgb: 194, 65, 12;
}

/*
 * Bootstrap 5 buttons/color helpers read their own --bs-btn-* custom
 * properties, not --bs-primary — so themes must set those explicitly
 * or every button stays default blue (register/login looked off).
 */
.btn-primary {
    --bs-btn-bg: var(--pasada-primary);
    --bs-btn-border-color: var(--pasada-primary);
    --bs-btn-hover-bg: var(--pasada-primary-dark);
    --bs-btn-hover-border-color: var(--pasada-primary-dark);
    --bs-btn-active-bg: var(--pasada-primary-dark);
    --bs-btn-active-border-color: var(--pasada-primary-dark);
    --bs-btn-disabled-bg: var(--pasada-primary);
    --bs-btn-disabled-border-color: var(--pasada-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--pasada-primary);
    --bs-btn-border-color: var(--pasada-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pasada-primary);
    --bs-btn-hover-border-color: var(--pasada-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pasada-primary);
    --bs-btn-active-border-color: var(--pasada-primary);
    --bs-btn-disabled-color: var(--pasada-primary);
    --bs-btn-disabled-border-color: var(--pasada-primary);
}

.text-primary {
    color: var(--pasada-primary) !important;
}

/*
 * Forms stack labels above full-width controls — the default inline
 * label+input flow looked cramped/misaligned ("Full name [   ]").
 */
.form-label {
    display: block;
    margin-bottom: 0.3rem;
}

/* Party-size picker: number chips + custom type-in (the hidden
 * integer field carries the value; server range stays 1–12).
 * Taps must be unmissable: press-scale on :active, filled + ring +
 * tick on .active, and a live readout line above stating the choice
 * in words (aria-live). */
.party-readout {
    font-weight: 700;
    color: var(--pasada-primary);
    margin-bottom: 0.45rem;
}

.party-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.party-chips .chip {
    min-width: 2.6rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    background: #fff;
    font-weight: 600;
    color: #495057;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s,
        box-shadow 0.15s;
}

.party-chips .chip:active {
    transform: scale(0.9);
}

.party-chips .chip:hover {
    border-color: var(--pasada-primary);
    color: var(--pasada-primary);
}

.party-chips .chip.active {
    background: var(--pasada-primary);
    border-color: var(--pasada-primary-dark);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.28);
}

/* Replay-friendly pulse: JS re-triggers on EVERY tap (even re-tap of
 * the already-selected chip) so a tap is always felt. */
@keyframes chip-pulse {
    0% { transform: scale(0.88); }
    100% { transform: scale(1); }
}

.party-chips .chip.pulse {
    animation: chip-pulse 0.18s ease-out;
}

.party-chips .chip-custom {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    background: #fff;
    border-style: dashed;
}

.party-chips .chip-custom input[type="number"] {
    width: 3.4rem;
    border: none;
    outline: none;
    font-weight: 600;
    color: var(--pasada-primary);
    text-align: center;
    background: transparent;
}

.party-chips .chip-custom input[type="number"]::-webkit-outer-spin-button,
.party-chips .chip-custom input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.party-chips .chip-custom.active {
    background: #fff4ec;
    border-style: solid;
}

.app-main .form-control,
.app-main .form-select {
    width: 100%;
    display: block;
}

.app-main .form-check-input {
    margin-top: 0.35rem;
}

/* Password eye toggle (injected by app.js around every password
 * input; no per-template wiring). Wrapping keeps the icon glued to
 * ITS field; padding-right keeps text from sliding under the icon. */
.pw-field {
    position: relative;
    display: block;
}

.pw-field input[type="password"],
.pw-field input[type="text"] {
    padding-right: 2.8rem !important;
}

.pw-toggle {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 0.35rem;
    line-height: 0;
    cursor: pointer;
    border-radius: 0.4rem;
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
    color: var(--pasada-primary);
    background: #fff4ec;
}

.pw-toggle .eye-off {
    display: none;
}

.pw-field.pw-visible .eye-off {
    display: inline;
}

.pw-field.pw-visible .eye {
    display: none;
}

/* Consent row: the RA 10173 agreement is long — checkbox beside a
 * text block, whole row clickable/tappable. */
.consent-box {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.consent-box input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
}

.consent-box .consent-text {
    display: block;
    font-size: 0.9rem;
    line-height: 1.35;
}

body {
    background: #fdf8f1;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

body.pb-nav {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0));
}

.network-status {
    background: #5b6672;
    color: #fff;
}

.network-status.is-online {
    background: var(--pasada-online);
}

.network-status.is-offline {
    background: var(--pasada-offline);
}

/* Navbar: FIXED content height (safe-area padding only adds above
 * it on notched phones) so the brand mark can grow INTO the bar's
 * dead space without growing the bar itself. */
:root {
    --app-navbar-height: 3.75rem;   /* 60px content row */
}

.app-navbar {
    background: var(--pasada-primary);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: 0;
}

.app-navbar > .container-fluid {
    height: var(--app-navbar-height);
    padding-top: 0;
    padding-bottom: 0;
}

.app-navbar .navbar-brand {
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
}

.app-main {
    max-width: 34rem;
    margin: 0 auto;
}

/* Mobile-app-style bottom tab bar */
.app-tab-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 1030;
}

.app-tab-bar .d-flex {
    max-width: 34rem;
    margin: 0 auto;
}

.app-tab-bar__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.72rem;
    color: #495057;
    text-decoration: none;
}

.app-tab-bar__item.active {
    color: var(--pasada-primary);
    font-weight: 600;
}

.app-tab-bar__item--disabled {
    color: #adb5bd;
}

.app-tab-bar__icon {
    font-size: 1.25rem;
    line-height: 1;
}

.install-help-dialog[open] {
    border: none;
    border-radius: 0.75rem;
    padding: 1.25rem;
    max-width: 24rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

.install-help-dialog p {
    display: none;
}

.offline-banner {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
}