.brand-logo,
.auth-brand-logo,
.admin-brand-logo,
.courier-brand-logo {
    display: block;
    object-fit: contain;
    background: #fff;
    border-radius: 7px;
}

.brand-logo {
    width: 82px;
    height: 56px;
}

.footer-logo {
    width: 96px;
    height: 64px;
}

.auth-brand-logo {
    width: 102px;
    height: 68px;
}

.auth-brand.compact .auth-brand-logo {
    width: 78px;
    height: 52px;
}

.admin-brand-logo {
    width: 104px;
    height: 69px;
}

.courier-brand-logo {
    width: 77px;
    height: 51px;
}

@media (max-width: 640px) {
    .brand-logo { width: 70px; height: 47px; }
    .admin-brand-logo { width: 90px; height: 60px; }
    .auth-brand-logo { width: 88px; height: 59px; }
}

/* Shared visual palette from Bakhtar Store; BSP remains an independent product. */
:root {
    --bsp-navy: #004ba4;
    --bsp-deep: #072c62;
    --bsp-orange: #f56924;
    --bsp-orange-dark: #d95316;
    --bsp-yellow: #f56924;
    --bsp-red: #e83f36;
    --bsp-surface: #f3f7fc;
    --navy: var(--bsp-navy);
    --navy-2: #075fc4;
    --navy-3: #0b56ad;
    --orange: var(--bsp-orange);
    --orange-dark: var(--bsp-orange-dark);
    --cream: var(--bsp-surface);
    --ink: #07376d;
}

.brand-logo,
.auth-brand-logo,
.admin-brand-logo,
.courier-brand-logo {
    box-shadow: 0 4px 14px rgba(25, 23, 49, .2);
}

/* Public website */
.notice-bar,
.hero,
footer,
.dashboard-header,
.customer-header,
.quote-header,
.courier-header {
    background-color: var(--bsp-navy);
}

.hero {
    background-image:
        radial-gradient(circle at 84% 35%, rgba(248, 203, 39, .13), transparent 24%),
        linear-gradient(118deg, var(--bsp-deep), var(--bsp-navy));
}

.button,
.tracking-control button,
.shipment-submit button,
.customer-button,
.quote-submit button,
.delivery-table-panel button,
.pickup-filters button,
.pickup-info form button {
    background: var(--bsp-orange);
}

.button:hover,
.tracking-control button:hover,
.shipment-submit button:hover,
.customer-button:hover,
.quote-submit button:hover {
    background: var(--bsp-orange-dark);
}

.eyebrow,
.card-kicker,
.brand-copy small,
.customer-page-head > div:first-child > span,
.quote-intro > span,
.result-heading > div > span {
    color: var(--bsp-orange);
}

.tracking-card,
.service-card.featured,
.selected-price,
.card.accent {
    border-top-color: var(--bsp-yellow);
}

/* Authentication and customer portals */
.auth-brand-panel {
    background:
        radial-gradient(circle at 12% 82%, rgba(248, 203, 39, .16), transparent 34%),
        linear-gradient(145deg, var(--bsp-deep), var(--bsp-navy));
}

.access-panel {
    background: linear-gradient(120deg, var(--bsp-deep), var(--bsp-navy));
}

.auth-form > button {
    background: var(--bsp-orange);
}

.auth-form > button:hover {
    background: var(--bsp-orange-dark);
}

/* Administration and support portals */
.admin-sidebar {
    background: linear-gradient(180deg, var(--bsp-deep) 0%, var(--bsp-navy) 100%);
}

.admin-nav a:hover,
.admin-nav a.active {
    background: var(--bsp-orange);
}

.admin-button,
.create-form button,
.record-grid button,
.rate-actions button {
    background: var(--bsp-navy);
}

.admin-button:hover,
.create-form button:hover,
.record-grid button:hover,
.rate-actions button:hover {
    background: var(--bsp-deep);
}

.admin-avatar,
.dashboard-stat strong,
.quick-admin-links > a,
.quick-admin-links > a > span {
    color: var(--bsp-navy);
}

.admin-avatar,
.quick-admin-links > a > span {
    background: #ebeefa;
}

.admin-brand {
    border-bottom: 1px solid rgba(248, 203, 39, .25);
}

.admin-brand strong,
.nav-label {
    color: #ffe39a;
}

.admin-workspace,
.customer-body,
.dashboard-body,
.quote-body,
.courier-body {
    background-color: var(--bsp-surface);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--bsp-orange) !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, .12);
}

.alert.error,
.delivery-failed,
.status-failed,
.status-cancelled {
    color: #a3262d;
    border-color: #f5c5c2;
    background: #fff0ef;
}

/* Accessible password visibility control used by every portal. */
.password-control {
    position: relative;
    display: block;
    width: 100%;
}

.password-control > input {
    width: 100%;
    padding-right: 48px !important;
}

.password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 7px;
    display: grid;
    place-items: center;
    width: 37px !important;
    min-width: 37px;
    height: 37px !important;
    min-height: 37px;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 7px !important;
    color: var(--bsp-navy) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--bsp-orange) !important;
    background: #fff1e5 !important;
    outline: 2px solid transparent;
}

.password-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle .eye-closed,
.password-toggle[aria-pressed="true"] .eye-open {
    display: none;
}

.password-toggle[aria-pressed="true"] .eye-closed {
    display: block;
}

/* Shared responsive guardrails for every browser-facing layout. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

main,
section,
article,
aside,
form,
.panel {
    min-width: 0;
}

p,
dd,
td,
small,
code {
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    button,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    .button,
    .admin-button,
    .customer-button {
        min-height: 44px;
    }

    .admin-sidebar {
        width: min(250px, calc(100vw - 44px));
    }

    .admin-topbar,
    .topbar-left,
    .admin-user,
    .page-head,
    .panel-head,
    .shipment-head-actions,
    .admin-document-actions {
        min-width: 0;
        flex-wrap: wrap;
    }

    .admin-workspace .panel,
    .customer-panel {
        padding: 18px;
    }

    .admin-workspace h1,
    .customer-main h1 {
        overflow-wrap: anywhere;
    }
}