/*
 * Bootstrap components on the dark public site (home, legal and signed-out account pages). The dashboard uses dashboard.css.
 * Layouts set data-bs-theme="dark"; this file maps Bootstrap's variables and components to the
 * owner's palette (tokens live in landing.css). Views keep plain Bootstrap markup.
 */

/* ---------- Bootstrap variables -> palette ---------- */
.lp {
    --bs-body-bg: var(--lp-bg);
    --bs-body-color: var(--lp-body);
    --bs-emphasis-color: var(--lp-text);
    --bs-secondary-color: var(--lp-muted);
    --bs-tertiary-color: rgba(197, 214, 208, .75);
    --bs-secondary-bg: #333d39;
    --bs-tertiary-bg: var(--lp-bg-2);
    --bs-border-color: rgba(209, 232, 226, .16);
    --bs-border-color-translucent: rgba(209, 232, 226, .14);
    --bs-border-radius: .65rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: var(--lp-radius);
    --bs-primary: var(--lp-peach);
    --bs-primary-rgb: 255, 203, 154;
    --bs-primary-text-emphasis: var(--lp-peach);
    --bs-primary-bg-subtle: rgba(255, 203, 154, .12);
    --bs-primary-border-subtle: rgba(255, 203, 154, .4);
    --bs-link-color: var(--lp-peach);
    --bs-link-color-rgb: 255, 203, 154;
    --bs-link-hover-color: #fff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-focus-ring-color: rgba(255, 203, 154, .35);
    /* Status colors use the palette only: errors = peach, success = mint. */
    --bs-form-valid-color: var(--lp-mint);
    --bs-form-valid-border-color: var(--lp-mint);
    --bs-form-invalid-color: var(--lp-peach);
    --bs-form-invalid-border-color: var(--lp-peach);
    --bs-success-text-emphasis: var(--lp-mint);
    --bs-danger-text-emphasis: var(--lp-peach);
    --bs-warning-text-emphasis: var(--lp-peach);
}

/* ---------- Type ---------- */
.lp-auth :is(h1, h2, h3, h4, h5, h6) { color: var(--lp-text); letter-spacing: -.01em; }
.lp-auth h1 { font-weight: 700; letter-spacing: -.02em; }
.lp-auth :is(strong, b) { color: var(--lp-text); }
.lp .text-body-secondary { color: var(--lp-muted) !important; }
.lp .text-primary { color: var(--lp-peach) !important; }
.lp .text-dark { color: var(--lp-text) !important; }
.lp .link-secondary { color: var(--lp-muted) !important; }
.lp .link-secondary:hover { color: var(--lp-peach) !important; }
.lp code { color: var(--lp-peach); }
.lp hr { border-color: var(--bs-border-color); opacity: 1; }

/* ---------- Surfaces ---------- */
.lp .bg-white, .lp .bg-light { background-color: var(--lp-card) !important; }
.lp .bg-body-tertiary { background-color: var(--lp-bg-2) !important; }
.lp .card {
    --bs-card-bg: var(--lp-card);
    --bs-card-border-color: var(--lp-card-border);
    --bs-card-border-radius: var(--lp-radius);
    --bs-card-inner-border-radius: calc(var(--lp-radius) - 1px);
    --bs-card-cap-bg: rgba(209, 232, 226, .05);
    --bs-card-color: var(--lp-body);
    box-shadow: var(--lp-card-shadow) !important;
}
.lp .shadow-sm { box-shadow: var(--lp-card-shadow) !important; }

/* Notice under the header (e.g. "please confirm your email"). */
.lp-banner { background: rgba(255, 203, 154, .1); border-bottom: 1px solid rgba(255, 203, 154, .3); color: var(--lp-text); }
.lp-banner .fa-envelope { color: var(--lp-peach); margin-right: .25rem; }

/* ---------- Buttons ---------- */
.lp .btn { font-weight: 600; border-radius: .65rem; transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s, color .2s; }
.lp .btn-primary {
    --bs-btn-color: var(--lp-on-peach); --bs-btn-bg: var(--lp-peach); --bs-btn-border-color: var(--lp-peach);
    --bs-btn-hover-color: var(--lp-on-peach); --bs-btn-hover-bg: #ffd8b3; --bs-btn-hover-border-color: #ffd8b3;
    --bs-btn-active-color: var(--lp-on-peach); --bs-btn-active-bg: var(--lp-tan); --bs-btn-active-border-color: var(--lp-tan);
    --bs-btn-disabled-color: var(--lp-on-peach); --bs-btn-disabled-bg: var(--lp-peach); --bs-btn-disabled-border-color: var(--lp-peach);
    --bs-btn-focus-shadow-rgb: 255, 203, 154;
    background-image: linear-gradient(135deg, var(--lp-peach), var(--lp-tan));
    box-shadow: 0 10px 26px -14px rgba(255, 203, 154, .6);
}
.lp .btn-primary:hover, .lp .btn-primary:focus-visible { background-image: linear-gradient(135deg, #ffd8b3, #e4bd9b); transform: translateY(-1px); }
.lp .btn-outline-primary {
    --bs-btn-color: var(--lp-peach); --bs-btn-border-color: rgba(255, 203, 154, .55);
    --bs-btn-hover-color: var(--lp-on-peach); --bs-btn-hover-bg: var(--lp-peach); --bs-btn-hover-border-color: var(--lp-peach);
    --bs-btn-active-color: var(--lp-on-peach); --bs-btn-active-bg: var(--lp-tan); --bs-btn-active-border-color: var(--lp-tan);
    --bs-btn-disabled-color: var(--lp-peach); --bs-btn-disabled-border-color: rgba(255, 203, 154, .4);
    --bs-btn-focus-shadow-rgb: 255, 203, 154;
}
.lp .btn-outline-secondary, .lp .btn-outline-dark, .lp .btn-light {
    --bs-btn-color: var(--lp-text); --bs-btn-bg: transparent; --bs-btn-border-color: rgba(209, 232, 226, .3);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(209, 232, 226, .08); --bs-btn-hover-border-color: rgba(209, 232, 226, .6);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(209, 232, 226, .14); --bs-btn-active-border-color: rgba(209, 232, 226, .6);
    --bs-btn-disabled-color: var(--lp-muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: rgba(209, 232, 226, .2);
    --bs-btn-focus-shadow-rgb: 209, 232, 226;
}
.lp .btn-outline-danger {
    --bs-btn-color: var(--lp-peach); --bs-btn-border-color: rgba(255, 203, 154, .55);
    --bs-btn-hover-color: var(--lp-on-peach); --bs-btn-hover-bg: var(--lp-peach); --bs-btn-hover-border-color: var(--lp-peach);
    --bs-btn-active-color: var(--lp-on-peach); --bs-btn-active-bg: var(--lp-tan); --bs-btn-active-border-color: var(--lp-tan);
}
.lp .btn-danger { --bs-btn-color: var(--lp-on-peach); --bs-btn-bg: var(--lp-peach); --bs-btn-border-color: var(--lp-peach); --bs-btn-hover-color: var(--lp-on-peach); --bs-btn-hover-bg: var(--lp-peach); --bs-btn-hover-border-color: var(--lp-peach); }
.lp .btn-outline-success { --bs-btn-color: var(--lp-mint); --bs-btn-border-color: rgba(209, 232, 226, .55); --bs-btn-hover-color: var(--lp-ink); --bs-btn-hover-bg: var(--lp-mint); --bs-btn-hover-border-color: var(--lp-mint); }
.lp .btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--lp-teal); --bs-btn-border-color: var(--lp-teal); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #157a7c; --bs-btn-hover-border-color: #157a7c; }
.lp .btn-link { --bs-btn-color: var(--lp-peach); --bs-btn-hover-color: #fff; }

/* ---------- Forms ---------- */
.lp .form-label { color: var(--lp-text); font-weight: 600; }
.lp .form-control, .lp .form-select {
    background-color: var(--lp-bg-2); color: var(--lp-text);
    border: 1px solid rgba(209, 232, 226, .28); border-radius: .65rem;
}
.lp-auth .form-control { padding: .7rem .9rem; font-size: 1rem; }
.lp .form-control::placeholder { color: rgba(197, 214, 208, .6); }
.lp .form-control:focus, .lp .form-select:focus { background-color: var(--lp-bg-2); color: var(--lp-text); border-color: var(--lp-peach); box-shadow: 0 0 0 .2rem rgba(255, 203, 154, .25); }
.lp .form-control:disabled, .lp .form-control[readonly] { background-color: rgba(30, 37, 34, .6); color: var(--lp-muted); }
.lp .form-control:-webkit-autofill { -webkit-text-fill-color: var(--lp-text); -webkit-box-shadow: 0 0 0 100px var(--lp-bg-2) inset; caret-color: var(--lp-text); }
.lp .form-control.is-invalid, .lp .form-select.is-invalid { border-color: var(--lp-peach); }
.lp .form-control.is-invalid { background-image: none; }
.lp .invalid-feedback { color: var(--lp-peach); }
.lp .form-text { color: var(--lp-muted); }
.lp .form-control-color { padding: .3rem; }
.lp .input-group-text { background: rgba(209, 232, 226, .08); color: var(--lp-body); border-color: rgba(209, 232, 226, .28); }
.lp .form-check-input { background-color: var(--lp-bg-2); border-color: rgba(209, 232, 226, .4); }
.lp .form-check-input:checked { background-color: var(--lp-teal); border-color: var(--lp-teal); }
.lp .form-check-input:focus { border-color: var(--lp-peach); box-shadow: 0 0 0 .2rem rgba(255, 203, 154, .25); }
.lp .btn-check:checked + .btn { color: var(--lp-on-peach); background: var(--lp-peach); border-color: var(--lp-peach); }

/* ---------- Alerts and badges ---------- */
.lp .alert { border-radius: .75rem; color: var(--lp-text); background: rgba(209, 232, 226, .08); border: 1px solid rgba(209, 232, 226, .25); }
.lp .alert-success { background: rgba(17, 100, 102, .35); border-color: rgba(209, 232, 226, .35); }
.lp .alert-danger { background: rgba(255, 203, 154, .18); border-color: var(--lp-peach); }
.lp .alert-warning { background: rgba(217, 176, 140, .12); border-color: rgba(217, 176, 140, .5); }
.lp .alert-info { background: rgba(17, 100, 102, .25); border-color: rgba(209, 232, 226, .3); }
.lp .alert .alert-link { color: var(--lp-peach); }
.lp .badge { font-weight: 600; border-radius: 2rem; padding: .4em .7em; }
.lp .text-bg-primary { color: var(--lp-on-peach) !important; background-color: var(--lp-peach) !important; }
.lp .text-bg-success { color: #fff !important; background-color: var(--lp-teal) !important; }
.lp .text-bg-secondary { color: var(--lp-text) !important; background-color: rgba(209, 232, 226, .16) !important; }
.lp .text-bg-light { color: var(--lp-body) !important; background-color: rgba(209, 232, 226, .08) !important; border-color: rgba(209, 232, 226, .25) !important; }
.lp .text-bg-warning { color: var(--lp-on-peach) !important; background-color: var(--lp-peach) !important; }
.lp .text-bg-info { color: var(--lp-ink) !important; background-color: var(--lp-mint) !important; }
.lp .text-bg-danger { color: var(--lp-on-peach) !important; background-color: var(--lp-peach) !important; }
.lp .text-success { color: var(--lp-mint) !important; }
.lp .text-danger { color: var(--lp-peach) !important; }
.lp .text-warning-emphasis { color: var(--lp-peach) !important; }

/* ---------- Lists, tables, navigation ---------- */
.lp .list-group {
    --bs-list-group-bg: transparent; --bs-list-group-color: var(--lp-body);
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-action-hover-bg: rgba(209, 232, 226, .06); --bs-list-group-action-hover-color: var(--lp-text);
    --bs-list-group-action-active-bg: rgba(209, 232, 226, .1);
    --bs-list-group-active-bg: var(--lp-teal); --bs-list-group-active-border-color: var(--lp-teal);
}
.lp .table {
    --bs-table-bg: transparent; --bs-table-color: var(--lp-body);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: rgba(209, 232, 226, .04); --bs-table-hover-bg: rgba(209, 232, 226, .06); --bs-table-hover-color: var(--lp-text);
}
.lp .table > thead th { color: var(--lp-muted); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.lp .nav {
    --bs-nav-link-color: var(--lp-body); --bs-nav-link-hover-color: var(--lp-peach); --bs-nav-link-disabled-color: var(--lp-muted);
}
.lp .nav-underline { --bs-nav-underline-link-active-color: var(--lp-peach); --bs-nav-underline-border-width: 3px; }
.lp .nav-underline .nav-link.active { color: var(--lp-peach); font-weight: 700; }
.lp .nav-pills { --bs-nav-pills-link-active-color: var(--lp-on-peach); --bs-nav-pills-link-active-bg: var(--lp-peach); --bs-nav-pills-border-radius: 2rem; }
.lp .pagination {
    --bs-pagination-bg: transparent; --bs-pagination-color: var(--lp-peach); --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-hover-bg: rgba(209, 232, 226, .08); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-active-bg: var(--lp-teal); --bs-pagination-active-border-color: var(--lp-teal); --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--lp-muted); --bs-pagination-disabled-border-color: var(--bs-border-color);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(255, 203, 154, .25);
}
.lp .progress { --bs-progress-bg: rgba(209, 232, 226, .12); --bs-progress-bar-bg: var(--lp-peach); border-radius: 2rem; }
.lp details summary { color: var(--lp-peach); }

/* ---------- Menus ---------- */
.lp .dropdown-menu {
    --bs-dropdown-bg: var(--lp-bg-2); --bs-dropdown-color: var(--lp-body);
    --bs-dropdown-border-color: var(--lp-card-border); --bs-dropdown-border-radius: var(--lp-radius-sm);
    --bs-dropdown-link-color: var(--lp-body); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: rgba(209, 232, 226, .08);
    --bs-dropdown-link-active-color: var(--lp-on-peach); --bs-dropdown-link-active-bg: var(--lp-peach);
    --bs-dropdown-header-color: var(--lp-tan); --bs-dropdown-divider-bg: var(--bs-border-color);
    --bs-dropdown-padding-y: .4rem; --bs-dropdown-item-padding-y: .45rem;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7);
}
.lp .dropdown-header { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; }

/* Account button and menu in the shared header. */
.lp-account-btn { display: inline-flex; align-items: center; gap: .5rem; max-width: 14rem; padding: .3rem .7rem .3rem .3rem; color: var(--lp-text); background: rgba(209, 232, 226, .06); border: 1px solid rgba(209, 232, 226, .22); border-radius: 2rem; font-weight: 600; font-size: .95rem; transition: background-color .2s, border-color .2s; }
.lp-account-btn:hover, .lp-account-btn[aria-expanded="true"] { background: rgba(209, 232, 226, .12); border-color: rgba(255, 203, 154, .5); }
.lp-avatar { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: var(--lp-on-peach); background: linear-gradient(135deg, var(--lp-peach), var(--lp-tan)); }
.lp-account-name { max-width: 9rem; }
.lp-menu { min-width: 15rem; }
.lp-menu .dropdown-item { display: flex; align-items: center; gap: .65rem; border-radius: .45rem; margin: 0 .35rem; width: calc(100% - .7rem); }
.lp-menu .dropdown-item > i { width: 1.1rem; text-align: center; color: var(--lp-tan); }
.lp-menu-who { display: flex; flex-direction: column; line-height: 1.3; }
.lp-menu-who small { color: var(--lp-muted); overflow: hidden; text-overflow: ellipsis; }
.lp-header .nav-link.is-active { color: var(--lp-peach); }
.lp-header .nav-link.is-active::after { transform: scaleX(1); }

/* ---------- Modals, close buttons ---------- */
.lp .modal { --bs-modal-bg: var(--lp-bg-2); --bs-modal-border-color: var(--lp-card-border); --bs-modal-color: var(--lp-body); }

/* ---------- Account pages (sign in, register, password reset) ---------- */
.lp-auth .card-body { padding: clamp(1.5rem, 4vw, 2.25rem) !important; }
.lp-auth .btn { padding: .7rem 1.2rem; }

/* "Continue with Google" (sign in / register, owner 2026-10-31): Google's light button style, its brand colors, not the palette. */
.lp-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.75rem; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: .65rem; font-weight: 600; }
.lp-google-btn:hover, .lp-google-btn:focus-visible { background: #f2f2f2; color: #1f1f1f; border-color: #747775; }
.lp-google-btn img { flex-shrink: 0; }
.lp-auth-or { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--lp-muted); font-size: .9rem; }
.lp-auth-or::before, .lp-auth-or::after { content: ''; flex: 1; height: 1px; background: var(--lp-line); }

/* Friendly error pages on the dark public design (errors/message.php, owner 2026-10-31). */
.err-wrap { display: flex; justify-content: center; padding-block: clamp(3rem, 8vw, 6rem); }
.err-card { width: 100%; max-width: 34rem; text-align: center; }
.err-art { position: relative; display: inline-block; margin-bottom: 1.25rem; }
.err-art img { display: block; width: 6rem; height: auto; }
.err-badge { position: absolute; right: -.9rem; bottom: -.6rem; width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lp-bg-3); border: 2px solid var(--lp-peach); color: var(--lp-peach); font-size: .9rem; }
.err-eyebrow { margin: 0 0 .4rem; color: var(--lp-tan); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.err-title { margin: 0 0 .75rem; color: var(--lp-text); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }
.err-text { margin: 0 0 .5rem; color: var(--lp-body); font-size: 1.05rem; }
.err-soft { color: var(--lp-muted); }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.5rem 0 1.25rem; }
.err-btn { display: inline-flex; align-items: center; gap: .5rem; }
.err-help { margin: 0; color: var(--lp-muted); font-size: .95rem; }
.err-help a { color: var(--lp-peach); }
.err-ref { color: var(--lp-peach); background: rgba(255, 203, 154, .1); padding: .1rem .35rem; border-radius: .3rem; }
@media (max-width: 575.98px) { .err-actions .err-btn { flex: 1 1 100%; justify-content: center; } }