/*
 * BoxHost theme — public site chrome (header + footer).
 *
 * Light, modern look: white header with a hairline border, navy text,
 * blue/cyan accents and a lime CTA. Loaded after the design tokens and the
 * inline section styles, so it can safely reference --bh-* variables.
 *
 * The --bh-* design tokens are defined here (not in the inline section
 * styles) because this stylesheet is the one file loaded by every layout:
 * the public layout and the PNLCS client-area layout. Components must use
 * the semantic --bh-color-* tokens; the legacy aliases below keep existing
 * rules working while they are migrated in later stages.
 */

/* ===== DESIGN TOKENS ===== */
:root {
    color-scheme: light;

    /* Brand palette */
    --bh-navy: #0B1F3B;
    --bh-blue: #006BFF;
    --bh-blue-dark: #0056CC;
    --bh-blue-light: #3AA0FF;
    --bh-blue-soft: #EAF2FF;
    --bh-blue-border: #BFD3FF;
    --bh-purple: #8B5CF6;
    --bh-cyan: #00D5E8;
    --bh-lime: #A8FF24;
    --bh-lime-dark: #8BD614;
    --bh-on-lime: #10240A;
    --bh-highlight: #559E00;

    /* Semantic colours — override this block for a future dark theme */
    --bh-color-bg: #F3F6FF;
    --bh-color-surface: #FFFFFF;
    --bh-color-text: #0B1F3B;
    --bh-color-heading: #0B1F3B;
    --bh-color-text-secondary: #475569;
    --bh-color-muted: #64748B;
    --bh-color-faint: #94A3B8;
    --bh-color-accent: #006BFF;
    --bh-color-accent-hover: #0056CC;
    --bh-color-link: #006BFF;
    --bh-color-border: #E2E8F0;
    --bh-color-border-strong: #CBD5E1;
    --bh-color-divider: #F1F5F9;
    --bh-color-row: #F8FAFC;
    --bh-color-success: #16A34A;
    --bh-color-success-text: #166534;
    --bh-color-success-soft: #DCFCE7;
    --bh-color-danger: #DC2626;
    --bh-color-danger-text: #B91C1C;
    --bh-color-danger-soft: #FEF2F2;
    --bh-color-danger-border: #FECACA;
    --bh-color-warning: #D97706;
    --bh-color-warning-text: #92400E;
    --bh-color-warning-soft: #FEF3C7;
    --bh-color-warning-border: #FADFA0;
    --bh-color-success-border: #BBF7D0;
    --bh-color-teal-soft: #E6FBF3;
    --bh-color-teal-text: #0D9488;
    --bh-color-info-text: #1E3A8A;
    --bh-color-panel: #F8FAFF;
    --bh-color-row-hover: #FAFCFF;
    --bh-color-page-tint: #F4F7FF;
    --bh-color-band-start: #0F3E86;
    --bh-color-band-end: #0D5CC0;
    --bh-lime-light: #B6FF35;

    /* Legacy aliases used by the current rules */
    --bh-bg: var(--bh-color-bg);
    --bh-surface: var(--bh-color-surface);
    --bh-text: var(--bh-color-text);
    --bh-border: var(--bh-color-border);
    --bh-muted: var(--bh-color-muted);
    --bh-tint: var(--bh-blue-soft);

    /* Typography */
    --bh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bh-font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --bh-heading: var(--bh-font-heading);
    --bh-fs-h1: clamp(30px, 3.6vw, 44px);
    --bh-fs-h1-hero: clamp(34px, 4.6vw, 54px);
    --bh-fs-h2: clamp(26px, 3.2vw, 36px);
    --bh-fs-h3: 19px;
    --bh-fs-h4: 16px;
    --bh-fs-lead: 17px;
    --bh-fs-body: 16px;
    --bh-fs-small: 14px;
    --bh-fs-caption: 12.5px;
    --bh-fs-label: 13px;
    --bh-fs-btn: 14.5px;
    --bh-fs-eyebrow: 12.5px;
    --bh-fs-price: 26px;
    --bh-fs-stat: 30px;
    --bh-lh-h1: 1.08;
    --bh-lh-h2: 1.15;
    --bh-lh-h3: 1.25;
    --bh-lh-body: 1.65;
    --bh-lh-small: 1.55;
    --bh-fw-regular: 400;
    --bh-fw-medium: 500;
    --bh-fw-semibold: 600;
    --bh-fw-bold: 700;
    --bh-fw-heading: 800;

    /* Spacing & layout */
    --bh-container: 1240px;
    --bh-gutter: 24px;
    --bh-page-top: 32px;
    --bh-page-bottom: 72px;
    --bh-section-y: 80px;
    --bh-card-pad: 24px;
    --bh-gap: 20px;
    --bh-space-1: 4px;
    --bh-space-2: 8px;
    --bh-space-3: 12px;
    --bh-space-4: 16px;
    --bh-space-5: 20px;
    --bh-space-6: 24px;
    --bh-space-7: 32px;
    --bh-space-8: 40px;
    --bh-space-9: 48px;
    --bh-space-10: 64px;
    --bh-space-11: 80px;
    --bh-radius-sm: 8px;
    --bh-radius: 10px;
    --bh-radius-card: 16px;
    --bh-radius-pill: 999px;
    --bh-shadow-card: 0 10px 30px rgba(7, 22, 56, .05);
    --bh-shadow-hover: 0 18px 42px rgba(7, 22, 56, .10);
    --bh-shadow-pop: 0 18px 45px rgba(11, 31, 59, .12);

    /* Hero media slots — the artwork keeps its native ratio; only the
       slot around it is normalised. */
    --bh-hero-art: 460px;
    --bh-hero-art-sm: 320px;
    --bh-hero-art-home: 560px;
    --bh-hero-art-home-sm: 360px;
    --bh-hero-art-band: 420px;
    --bh-hero-art-band-sm: 300px;
    --bh-hero-art-max-h: 340px;
    --bh-hero-art-max-h-sm: 260px;
    --bh-hero-slot-min-h: 280px;
    --bh-hero-gap: 40px;
}

/* Reserved hook for a future dark theme. Do not enable yet: the public
   pages are light-only and the legacy client-area toggle predates this
   design system. */
:root[data-theme="dark"] {
    /* --bh-color-bg: ...; --bh-color-surface: ...; --bh-color-text: ...; */
}

/* ===== HEADER ===== */
.bh-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bh-border);
}

.bh-header__inner {
    max-width: var(--bh-container, 1240px);
    margin: 0 auto;
    padding: 0 var(--bh-gutter, 24px);
    height: 68px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.bh-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.bh-brand img {
    height: 48px;
    width: auto;
    display: block;
}

/* ===== NAVIGATION ===== */
.bh-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.bh-nav__item {
    position: relative;
}

.bh-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--bh-text);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
    transition: color .15s ease, background-color .15s ease;
}

.bh-nav__link:hover,
.bh-nav__link:focus-visible {
    color: var(--bh-blue);
    background: var(--bh-tint);
    outline: none;
}

.bh-nav__link .ri-arrow-down-s-line {
    font-size: 14px;
    opacity: .55;
    transition: transform .15s ease;
}

.bh-nav__item:hover .bh-nav__link .ri-arrow-down-s-line,
.bh-nav__item:focus-within .bh-nav__link .ri-arrow-down-s-line {
    transform: rotate(180deg);
}

.bh-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin-top: 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(11, 31, 59, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 210;
}

.bh-nav__item:hover .bh-nav__dropdown,
.bh-nav__item:focus-within .bh-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bh-nav__dropdown::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.bh-nav__dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bh-text);
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

.bh-nav__dropdown-link i {
    font-size: 17px;
    color: var(--bh-blue);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.bh-nav__dropdown-link:hover,
.bh-nav__dropdown-link:focus-visible {
    background: var(--bh-tint);
    color: var(--bh-blue);
    outline: none;
}

/* ===== HEADER RIGHT ===== */
.bh-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bh-btn-panel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--bh-border);
    background: #fff;
    color: var(--bh-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.bh-btn-panel:hover,
.bh-btn-panel:focus-visible {
    border-color: var(--bh-blue);
    color: var(--bh-blue);
    outline: none;
}

.bh-btn-panel i {
    font-size: 17px;
}

.bh-btn-cart {
    position: relative;
}
.bh-user {
    position: relative;
}
.bh-user__btn {
    list-style: none;
    cursor: pointer;
}
.bh-user__btn::-webkit-details-marker {
    display: none;
}
.bh-user__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bh-blue-light), var(--bh-blue));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bh-user__chev {
    font-size: 15px;
    transition: transform .15s ease;
}
.bh-user[open] .bh-user__chev {
    transform: rotate(180deg);
}
.bh-user__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 236px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(7, 22, 56, .16);
    padding: 6px;
    z-index: 60;
}
.bh-user__menu a,
.bh-user__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bh-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.bh-user__menu a:hover,
.bh-user__logout:hover {
    background: var(--bh-tint);
    color: var(--bh-blue);
}
.bh-user__menu i {
    font-size: 16px;
    color: var(--bh-blue);
    flex-shrink: 0;
}
.bh-user__sep {
    height: 1px;
    background: var(--bh-border);
    margin: 5px 6px;
}
.bh-user__logout {
    color: var(--bh-color-danger);
}
.bh-user__logout i {
    color: var(--bh-color-danger);
}
.bh-user__logout:hover {
    background: var(--bh-color-danger-soft);
    color: var(--bh-color-danger);
}
.bh-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--bh-lime);
    color: var(--bh-on-lime);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(7, 22, 56, .18);
}

/* Language / currency selectors */
.bh-select {
    position: relative;
}

.bh-select > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bh-text);
    cursor: pointer;
    transition: background-color .15s ease;
}

.bh-select > summary::-webkit-details-marker {
    display: none;
}

.bh-select > summary:hover {
    background: var(--bh-tint);
}

.bh-select__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 150px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(11, 31, 59, .12);
    z-index: 210;
}

.bh-select__option {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--bh-text);
    text-decoration: none;
    white-space: nowrap;
}

.bh-select__option:hover,
.bh-select__option--active {
    background: var(--bh-tint);
    color: var(--bh-blue);
}

.bh-select__option--active {
    font-weight: 600;
}

.bh-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--bh-border);
    border-radius: 10px;
    background: #fff;
    color: var(--bh-text);
    font-size: 20px;
    cursor: pointer;
}

/* Mobile menu */
.bh-mobile-menu {
    display: none;
    border-top: 1px solid var(--bh-border);
    background: #fff;
    padding: 12px 0 16px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
}

.bh-mobile-menu__section {
    padding: 10px 24px 4px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bh-muted);
}

.bh-mobile-menu__link {
    display: block;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bh-text);
    text-decoration: none;
}

.bh-mobile-menu__link:hover {
    background: var(--bh-tint);
    color: var(--bh-blue);
}

.bh-mobile-menu__actions {
    display: flex;
    gap: 10px;
    padding: 14px 24px 4px;
}

.bh-mobile-menu__actions .bh-btn-panel {
    flex: 1;
    justify-content: center;
}

@media (max-width: 1200px) {
    .bh-nav {
        display: none;
    }
    .bh-hamburger {
        display: flex;
    }
}
@media (max-width: 980px) {
    .bh-header__right .bh-select {
        display: none;
    }
}

/* ===== FOOTER ===== */
.bh-footer {
    background: var(--bh-bg) url('/themes/boxhost/assets/decor/bg-footer.svg') center bottom / cover no-repeat;
    border-top: 1px solid var(--bh-border);
    padding: 72px 0 32px;
    position: relative;
    overflow: hidden;
}

.bh-footer__inner {
    max-width: var(--bh-container, 1240px);
    margin: 0 auto;
    padding: 0 var(--bh-gutter, 24px);
}

.bh-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 56px;
}

.bh-footer__headline {
    font-family: var(--bh-heading, "Manrope", "Inter", sans-serif);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.5px;
    color: var(--bh-text);
    margin: 0 0 16px;
    max-width: 340px;
}

.bh-footer__headline .bh-accent {
    color: var(--bh-blue);
}

.bh-footer__brand {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
}

.bh-footer__brand img {
    height: 44px;
    width: auto;
}

.bh-footer__col-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bh-text);
    margin: 0 0 16px;
}

.bh-footer__link {
    display: block;
    font-size: 14.5px;
    color: var(--bh-muted);
    text-decoration: none;
    margin-bottom: 11px;
    transition: color .14s ease;
}

.bh-footer__link:hover {
    color: var(--bh-blue);
}

.bh-footer__bottom {
    border-top: 1px solid rgba(11, 31, 59, .08);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13.5px;
    color: var(--bh-muted);
}

@media (max-width: 900px) {
    .bh-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
    .bh-footer__grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .bh-footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .bh-footer__bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .bh-brand img {
        height: 40px;
    }
}

@media (max-width: 680px) {
    .bh-header__inner {
        gap: 12px;
        padding: 0 16px;
    }
    .bh-btn-panel__label {
        display: none;
    }
    .bh-btn-panel {
        padding: 10px 12px;
    }
}

/* Shop currency label (read-only) */
.bh-currency {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bh-text);
    white-space: nowrap;
}
.bh-currency i {
    font-size: 16px;
    color: var(--bh-blue);
}
@media (max-width: 430px) {
    .bh-header__inner { gap: 6px; padding: 0 10px; }
    .bh-header__right { gap: 6px; }
    .bh-brand img { height: 36px; }
    .bh-currency { display: none; }
    .bh-user__chev { display: none; }
    .bh-user__btn { padding: 8px; }
}

/* ===== CLIENT AREA CONTENT COMPATIBILITY =====
 * The PNLCS client-area layout ships its own inline component styles (.pn-*,
 * .btn, .badge, .form-*). Those rules are printed after this stylesheet, so
 * every rule below uses a `body` prefix for higher specificity instead of
 * !important. The layout chrome (header/footer) is not touched here.
 * Scope: content only — forms, tables, cards, alerts, badges and buttons.
 */
/* Base text on the client-area layout (its inline body rule is 14px). */
html body {
    font-family: var(--bh-font-body);
    font-size: var(--bh-fs-body);
    line-height: var(--bh-lh-body);
    color: var(--bh-color-text);
    background: var(--bh-color-bg);
}
body .pn-main h1 {
    font-family: var(--bh-font-heading) !important;
    font-size: var(--bh-fs-h1) !important;
    font-weight: var(--bh-fw-heading) !important;
    line-height: var(--bh-lh-h1) !important;
    letter-spacing: -1.2px !important;
    color: var(--bh-color-heading) !important;
    margin: 0 0 6px !important;
}
body .pn-main h2 {
    font-family: var(--bh-font-heading);
    font-size: var(--bh-fs-h3);
    font-weight: var(--bh-fw-heading);
    line-height: var(--bh-lh-h3);
    color: var(--bh-color-heading);
}
body .pn-main h3 {
    font-family: var(--bh-font-heading);
    font-size: var(--bh-fs-h4);
    font-weight: var(--bh-fw-heading);
    color: var(--bh-color-heading);
}

body .pn-main {
    max-width: var(--bh-container);
    padding: var(--bh-page-top) var(--bh-gutter) var(--bh-page-bottom);
}
body .pn-page-header { margin-bottom: var(--bh-gap); }
body .pn-page-title {
    font-family: var(--bh-font-heading) !important;
    font-size: var(--bh-fs-h1) !important;
    font-weight: var(--bh-fw-heading) !important;
    line-height: var(--bh-lh-h1) !important;
    letter-spacing: -1.2px !important;
    color: var(--bh-color-heading) !important;
}
body .pn-page-subtitle {
    font-size: var(--bh-fs-lead);
    color: var(--bh-muted);
    line-height: var(--bh-lh-body);
    margin-top: 6px;
}

body .pn-card {
    background: var(--bh-surface);
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius-card);
    box-shadow: var(--bh-shadow-card);
    margin-bottom: var(--bh-gap);
}
body .pn-card-header { padding: 16px 24px; }
body .pn-card-title {
    font-family: var(--bh-font-heading);
    font-size: var(--bh-fs-h4);
    font-weight: var(--bh-fw-heading);
    color: var(--bh-color-heading);
}
body .pn-card-body { padding: var(--bh-card-pad); }
body .pn-card-body-flush { padding: 0; }
body .pn-section-title {
    font-size: var(--bh-fs-caption);
    font-weight: var(--bh-fw-heading);
    letter-spacing: .04em;
    color: var(--bh-muted);
    margin-bottom: 12px;
}

body .pn-table th {
    padding: 11px 16px;
    font-size: 11.5px;
    font-weight: var(--bh-fw-bold);
    letter-spacing: .04em;
    color: var(--bh-muted);
    background: var(--bh-color-row);
    border-bottom: 1px solid var(--bh-border);
}
body .pn-table td {
    padding: 13px 16px;
    font-size: var(--bh-fs-small);
    color: var(--bh-color-text);
    border-bottom: 1px solid var(--bh-color-divider);
}
body .pn-table tbody tr:hover td { background: var(--bh-color-row); }
body .pn-table a { color: var(--bh-blue); }

body .badge {
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: var(--bh-fw-bold) !important;
    line-height: 1.4 !important;
    border-radius: var(--bh-radius-pill) !important;
}

body .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 10px 18px !important;
    font-size: var(--bh-fs-btn) !important;
    font-weight: var(--bh-fw-bold) !important;
    border-radius: var(--bh-radius) !important;
    line-height: 1.2 !important;
}
body .btn-sm { padding: 7px 14px !important; font-size: var(--bh-fs-label) !important; }
body .btn-xs { padding: 5px 10px !important; font-size: var(--bh-fs-caption) !important; }
body .btn-primary { background: var(--bh-lime) !important; color: var(--bh-on-lime) !important; border-color: var(--bh-lime) !important; }
body .btn-primary:hover { background: var(--bh-lime-dark) !important; color: var(--bh-on-lime) !important; }
body .btn-accent { background: var(--bh-blue) !important; color: var(--bh-surface) !important; border-color: var(--bh-blue) !important; }
body .btn-accent:hover { background: var(--bh-blue-dark) !important; color: var(--bh-surface) !important; }
body .btn-outline, body .btn-default {
    background: var(--bh-surface) !important;
    color: var(--bh-navy) !important;
    border: 1.5px solid var(--bh-border) !important;
}
body .btn-outline:hover, body .btn-default:hover { border-color: var(--bh-blue) !important; color: var(--bh-blue) !important; }
body .btn-danger { background: var(--bh-color-danger) !important; color: var(--bh-surface) !important; border-color: var(--bh-color-danger) !important; }
body .btn-success { background: var(--bh-color-success) !important; color: var(--bh-surface) !important; border-color: var(--bh-color-success) !important; }

body .form-group { margin-bottom: var(--bh-space-5); }
body .form-label, body .pn-label {
    font-size: var(--bh-fs-label);
    font-weight: var(--bh-fw-semibold);
    color: var(--bh-navy);
    margin-bottom: 6px;
}
body .form-control, body .pn-input {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: var(--bh-fs-small) !important;
    line-height: 1.5 !important;
    color: var(--bh-navy) !important;
    background: var(--bh-surface) !important;
    border: 1.5px solid var(--bh-border) !important;
    border-radius: var(--bh-radius) !important;
}
body .form-control:focus, body .pn-input:focus {
    border-color: var(--bh-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 107, 255, .15) !important;
}
body .form-hint { font-size: var(--bh-fs-caption); color: var(--bh-muted); }

body .pn-alert {
    padding: 12px 16px;
    border-radius: var(--bh-radius);
    font-size: var(--bh-fs-caption);
}
body .pn-stat-grid { gap: var(--bh-gap); margin-bottom: var(--bh-gap); }
body .pn-stat { border-radius: var(--bh-radius-card); padding: var(--bh-card-pad); }
body .pn-stat-val {
    font-family: var(--bh-font-heading);
    font-size: var(--bh-fs-stat);
    font-weight: var(--bh-fw-heading);
    color: var(--bh-color-heading);
}
body .pn-empty { padding: 40px 24px; color: var(--bh-muted); }
body .link { color: var(--bh-blue); }
body .text-muted { color: var(--bh-muted); }

@media (max-width: 640px) {
    body .pn-main { padding: 24px 16px 56px; }
    body .pn-page-title { font-size: clamp(28px, 7vw, 36px); letter-spacing: -0.8px; }
}

/* Compact spacing scale on phones. Kept with the tokens so both layouts
   inherit the same rhythm without duplicating magic numbers in page rules. */
@media (max-width: 640px) {
    :root {
        --bh-page-top: 24px;
        --bh-page-bottom: 56px;
        --bh-section-y: 56px;
        --bh-card-pad: 20px;
        --bh-gap: 16px;
        --bh-hero-gap: 24px;
    }
    .container { padding: 0 16px; }
}

/* ===== INVOICE PREVIEW (client/invoices/show) =====
 * The page extends the PNLCS client layout (payment gateways, dialog boot and
 * Stripe/PayPal hooks live there). These rules only restyle the shell; every
 * form, action and script is the core one.
 */
.invoice-preview {
    max-width: 100%; padding: var(--bh-page-top) 0 var(--bh-page-bottom);
    --primary: var(--bh-blue);
    --primary-light: var(--bh-blue-soft);
    --primary-dark: var(--bh-blue-dark);
}
.invp-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 14px; font-size: 13.5px; font-weight: 700;
    color: var(--bh-navy); text-decoration: none;
}
.invp-back:hover { color: var(--bh-blue); }
.invp-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.invp-eyebrow {
    display: inline-flex; align-items: center;
    font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bh-blue); margin-bottom: 8px;
}
.invp-title {
    font-family: var(--bh-font-heading); font-size: var(--bh-fs-h1);
    font-weight: var(--bh-fw-heading); line-height: var(--bh-lh-h1);
    letter-spacing: -1.2px; color: var(--bh-navy); margin: 0 0 8px;
}
.invp-sub { font-size: var(--bh-fs-small); color: var(--bh-muted); margin: 0; line-height: 1.5; }
.invp-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.invp-head__amount { display: inline-flex; align-items: baseline; gap: 7px; margin-right: 4px; }
.invp-head__amount-label { font-size: 12px; font-weight: 600; color: var(--bh-muted); }
.invp-head__amount strong { font-family: var(--bh-heading); font-size: 22px; font-weight: var(--bh-fw-heading); line-height: 1; color: var(--bh-navy); white-space: nowrap; }
.invp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 16px; border-radius: var(--bh-radius);
    font-size: 13.5px; font-weight: 700; text-decoration: none;
    border: 1.5px solid transparent; cursor: pointer;
    font-family: var(--bh-font-body);
}
.invp-btn--blue { background: var(--bh-blue); color: var(--bh-surface); }
.invp-btn--blue:hover { background: var(--bh-blue-dark); }
.invp-btn--outline {
    background: var(--bh-surface); border-color: var(--bh-border); color: var(--bh-navy);
}
.invp-btn--outline:hover { border-color: var(--bh-blue); color: var(--bh-blue); }
.invp-btn--block { width: 100%; }
.invp-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: var(--bh-radius-pill);
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.invp-status i { font-size: 13px; }
.invp-status--paid { background: var(--bh-color-success-soft); color: var(--bh-color-success-text); }
.invp-status--unpaid, .invp-status--payment_pending, .invp-status--partially_paid { background: var(--bh-color-warning-soft); color: var(--bh-color-warning-text); }
.invp-status--overdue, .invp-status--collections { background: var(--bh-color-danger-soft); color: var(--bh-color-danger-text); }
.invp-status--cancelled, .invp-status--refunded, .invp-status--draft { background: var(--bh-color-row); color: var(--bh-muted); }

.invp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "head art" "cards art";
    gap: 20px 32px;
    align-items: start;
}
.invp-hero .invp-head { grid-area: head; margin-bottom: 0; }
.invp-cards {
    grid-area: cards;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bh-gap);
    align-items: start;
}
.invp-main, .invp-aside { min-width: 0; }
.invp-main > .invp-card { margin-bottom: 0; }
.invp-aside > .invp-card { margin-bottom: 12px; }
.invp-art {
    grid-area: art;
    display: flex; justify-content: center; align-items: flex-start;
}
.invp-art picture { display: block; width: 100%; max-width: 320px; margin-inline: auto; }
.invp-art img { display: block; width: auto; max-width: 100%; max-height: 360px; height: auto; object-fit: contain; }
.invp-card {
    background: var(--bh-surface); border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius-card); box-shadow: var(--bh-shadow-card);
    overflow: hidden; margin-bottom: var(--bh-gap);
}
.invp-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 16px 24px;
    border-bottom: 1px solid var(--bh-border);
}
.invp-card__title {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--bh-heading); font-size: var(--bh-fs-h4);
    font-weight: var(--bh-fw-heading); color: var(--bh-navy);
}
.invp-card__title i { color: var(--bh-blue); font-size: 18px; }
.invp-card__meta { font-size: 12.5px; color: var(--bh-muted); }
.invp-meta {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; padding: 20px 24px;
    border-bottom: 1px solid var(--bh-color-divider);
}
.invp-meta__item span { display: block; font-size: 12px; color: var(--bh-muted); margin-bottom: 3px; }
.invp-meta__item strong { font-size: 14px; color: var(--bh-navy); }
.is-overdue { color: var(--bh-color-danger) !important; }
.invp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.invp-totals {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 5px; padding: 16px 24px 24px;
}
.invp-total-row {
    display: flex; justify-content: space-between; gap: 24px;
    width: min(100%, 360px); padding: 4px 0;
    font-size: 13.5px; color: var(--bh-muted);
}
.invp-total-row > span:last-child { color: var(--bh-navy); font-weight: 600; }
.invp-total-row__pair { display: flex; gap: 20px; align-items: baseline; }
.invp-total-k { display: inline-block; margin-right: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bh-muted); }
.invp-total-row--grand {
    margin-top: 6px; padding-top: 12px;
    border-top: 1.5px solid var(--bh-border);
    font-size: 17px; font-weight: 800; color: var(--bh-navy);
}
.invp-total-row--grand > span:last-child { color: var(--bh-blue); font-weight: 800; }
.invp-total-row--converted {
    width: min(100%, 360px); padding-top: 10px;
    border-top: 1px solid var(--bh-border);
    font-weight: 700; color: var(--bh-navy);
}
.invp-total-row--converted > span:last-child { color: var(--bh-navy); }
.invp-total-note {
    width: min(100%, 360px); margin: 4px 0 0;
    text-align: right; font-size: 12px; color: var(--bh-muted); line-height: 1.5;
}
.invp-total-row--due { color: var(--bh-color-danger); font-weight: 700; }
.invp-total-row--due > span:last-child { color: var(--bh-color-danger); }

.invp-summary { padding: 24px; }
.invp-summary__label { font-size: 12.5px; color: var(--bh-muted); }
.invp-summary__amount {
    font-family: var(--bh-heading); font-size: var(--bh-fs-stat);
    font-weight: var(--bh-fw-heading); color: var(--bh-navy);
    margin: 4px 0 10px; line-height: 1.1;
}
.invp-summary__list {
    display: flex; flex-direction: column; gap: 10px;
    margin: 16px 0;
}
.invp-summary__list div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.invp-summary__list dt { color: var(--bh-muted); }
.invp-summary__list dd { margin: 0; color: var(--bh-navy); font-weight: 600; text-align: right; }
.invp-aside { display: flex; flex-direction: column; gap: 12px; }
.invp-aside .pn-alert { margin: 0; }

.invp-pay { margin-top: 24px; }
.invp-pay__head {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 24px; color: var(--bh-surface);
    background: linear-gradient(120deg, var(--bh-color-band-start), var(--bh-color-band-end));
    font-family: var(--bh-heading); font-size: var(--bh-fs-h4); font-weight: var(--bh-fw-heading);
}
.invp-pay__body { padding: var(--bh-card-pad); }

.invoice-preview .gw-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.invoice-preview .gw-tab {
    padding: 9px 14px; border: 1.5px solid var(--bh-border); border-radius: 9px;
    background: var(--bh-surface); color: var(--bh-muted);
    font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.invoice-preview .gw-tab.active {
    border-color: var(--bh-blue); background: var(--bh-blue-soft); color: var(--bh-blue);
}
.invoice-preview .gw-panel { display: none; }
.invoice-preview .gw-panel.active { display: block; }

.invp-gw-intro {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 12px; padding: 16px 18px;
    border: 1px solid var(--bh-border); border-radius: 12px;
    background: var(--bh-surface);
}
.invp-gw-intro__brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.invp-gw-intro__icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bh-blue-soft); color: var(--bh-blue); font-size: 18px;
}
.invp-tpay-logo {
    font-family: var(--bh-heading); font-size: 26px; font-weight: 800;
    letter-spacing: -1.2px; color: #0B5FA5; font-style: italic; line-height: 1;
}
.invp-gw-intro__brand strong { display: block; font-size: 14px; color: var(--bh-navy); }
.invp-gw-intro__brand span { display: block; font-size: 12.5px; color: var(--bh-muted); margin-top: 2px; }
.invp-gw-logos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invp-paylogo {
    display: inline-flex; align-items: center; justify-content: center;
    height: 24px; min-width: 34px; padding: 0 7px;
    border: 1px solid var(--bh-border); border-radius: 5px;
    background: var(--bh-surface); color: var(--bh-navy);
    font-size: 11px; font-weight: 800; line-height: 1;
}
.invp-paylogo--blik { background: #111; color: #fff; border-color: #111; }
.invp-paylogo--visa { color: #1A1F71; font-style: italic; letter-spacing: .02em; }
.invp-paylogo--apple { background: #111; color: #fff; border-color: #111; gap: 2px; }
.invp-paylogo--mc { gap: 0; }
.invp-paylogo--mc i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.invp-paylogo--mc i:first-child { background: #EB001B; margin-right: -5px; }
.invp-paylogo--mc i:last-child { background: #F79E1B; }
.invp-paylogo--gpay { color: #3C4043; }
.invp-trust {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 12px 0 0; font-size: 12px; color: var(--bh-muted);
}
.invp-trust i { color: var(--bh-color-success); font-size: 14px; }
.invoice-preview #gw-tpay .my-3 { margin: 0; }
.invoice-preview #gw-tpay .my-3 > p { display: none; }
.invoice-preview #gw-tpay form button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%;
}
#gw-banktransfer > .card:first-of-type { display: none; }
.invoice-preview .gw-panel .card {
    margin: 0 0 12px !important; border: 1px solid var(--bh-border) !important;
    border-radius: 12px !important; box-shadow: none !important;
    overflow: hidden !important; background: var(--bh-surface) !important;
}
.invoice-preview .gw-panel .card-header {
    padding: 12px 16px !important; background: var(--bh-color-row) !important;
    border-bottom: 1px solid var(--bh-border) !important;
}
.invoice-preview .gw-panel .card-header h6 {
    margin: 0 !important; font-family: var(--bh-heading); font-size: 14px;
    font-weight: 700; color: var(--bh-navy);
}
.invoice-preview .gw-panel .card-body { padding: 0 !important; }
.invoice-preview .gw-panel .table {
    width: 100% !important; margin: 0 !important; border-collapse: collapse !important;
    font-size: 13px;
}
.invoice-preview .gw-panel .table th,
.invoice-preview .gw-panel .table td {
    padding: 9px 14px !important; border: 0 !important;
    border-bottom: 1px solid var(--bh-color-divider) !important; text-align: left;
}
.invoice-preview .gw-panel .table th {
    width: 170px; font-weight: 600; color: var(--bh-muted);
    background: var(--bh-surface) !important;
}
.invoice-preview .gw-panel .table tr:last-child th,
.invoice-preview .gw-panel .table tr:last-child td { border-bottom: 0 !important; }
.invoice-preview .gw-panel code {
    padding: 2px 5px; border-radius: 4px; background: var(--bh-color-row);
    color: var(--bh-navy); font-size: 12px;
}
.invoice-preview .cart-alert i { margin-right: 6px; }
.invoice-preview input[type="file"] {
    padding: 8px 10px !important; font-size: var(--bh-fs-small); color: var(--bh-muted);
}
.invoice-preview input[type="file"]::file-selector-button {
    margin-right: 10px; padding: 7px 12px; border: 1.5px solid var(--bh-border);
    border-radius: 8px; background: var(--bh-surface); color: var(--bh-navy);
    font-family: var(--bh-font-body); font-weight: 600; cursor: pointer;
}
.invoice-preview .mb-16 { margin-bottom: 16px; }
.invoice-preview .mb-8 { margin-bottom: 8px; }
.invoice-preview .text-sm { font-size: 13px; }
.invoice-preview .gw-form-box { padding: 0; }
.invoice-preview .gw-panel .alert-warning {
    margin: 12px 0 !important; padding: 12px 14px !important; border-radius: 10px !important;
    background: var(--bh-color-warning-soft) !important;
    border: 1px solid var(--bh-color-warning-border) !important;
    color: var(--bh-color-warning-text) !important; font-size: 13px;
}
@media (max-width: 1100px) {
    .invp-hero { grid-template-columns: 1fr; grid-template-areas: "head" "art" "cards"; gap: 20px; }
    .invp-art picture { max-width: 300px; }
    .invp-art img { max-height: 300px; }
}
@media (max-width: 760px) {
    .invp-cards { grid-template-columns: 1fr; }
    .invp-head { flex-direction: column; }
    .invp-head__actions { margin-left: 0; }
    .invp-meta { grid-template-columns: 1fr; gap: 10px; }
    .invp-totals { align-items: stretch; }
    .invp-total-row, .invp-total-row--converted, .invp-total-note { width: 100%; }
    .invp-total-note { text-align: left; }
    .invp-gw-intro__brand { gap: 12px; }
    .invp-tpay-logo { font-size: 22px; }
}
@media (max-width: 520px) {
    .invp-items th:nth-child(2), .invp-items td:nth-child(2) { width: 38px !important; }
    .invp-items th:nth-child(3), .invp-items td:nth-child(3) { width: 70px !important; }
    .invp-items th:nth-child(4), .invp-items td:nth-child(4) { width: 88px !important; }
    .invp-items th, .invp-items td { padding: 8px 6px !important; font-size: 12px; }
    .invp-items th:nth-child(3), .invp-items td:nth-child(3),
    .invp-items th:nth-child(4), .invp-items td:nth-child(4) { white-space: nowrap; }
    .invoice-preview .gw-panel .table th { width: 112px; }
    .invoice-preview .gw-panel .table th,
    .invoice-preview .gw-panel .table td { padding: 8px 10px !important; font-size: 12px; }
}