/* Shared identity: the supplied logo stays whole, with a readable business name. */
.brk-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    color: inherit;
    text-decoration: none;
}
.brk-brand:hover { color: inherit; text-decoration: none; }
.brk-brand:focus-visible { outline: 3px solid #76baff; outline-offset: 5px; border-radius: 12px; }
.brk-brand .brk-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-align: right;
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    line-height: 1.45;
}
.brk-brand .brk-logo {
    display: block;
    width: 56px;
    height: 56px;
    max-width: none;
    flex: 0 0 56px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: #0b5aa4;
}
.brk-brand .brk-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brk-brand .brk-name { display: block; font-size: 21px; font-weight: 800; line-height: 1.4; white-space: nowrap; letter-spacing: 0; }
.brk-brand .brk-subtitle { display: block; margin: 0; font-size: 12px; font-weight: 400; line-height: 1.5; opacity: .85; }

/* Public storefront and management navigation. */
#topNav .nav-topbar { height: auto; min-height: 78px; padding-block: 10px; gap: 16px; }
#topNav .brk-brand { color: #fff; }
.admin-topbar { height: auto; min-height: 82px; padding-block: 10px; }
.admin-topbar .brk-brand { color: #fff; }
.admin-brand.brk-brand .brk-identity { flex-direction: row; }
.admin-shell .admin-nav { top: 82px; max-width: 100%; }
@media (min-width: 992px) {
    .admin-shell .admin-nav { flex-wrap: wrap; justify-content: flex-start; }
}

/* Standalone advertising pages use the same identity without the system menu. */
.site-header.brk-ad-header { border-top: 3px solid #0b5aa4; box-shadow: 0 3px 18px rgba(21, 53, 87, .06); }
.brk-ad-header .site-header-inner { min-height: 86px; padding-block: 12px; flex-wrap: wrap; }
.brk-ad-header .brk-brand { color: #123c63; }
.brk-ad-header .brk-subtitle { color: #52677a; }
.brk-ad-header .header-actions { margin-inline-start: auto; flex-wrap: wrap; }

/* Keep the name visible in WhatsApp on small screens; links scroll separately. */
.wa-topbar { height: 58px; min-height: 58px; gap: 12px; padding-block: 0; }
.wa-topbar .wa-nav { min-width: 0; max-width: 100%; flex: 1 1 auto; }
.wa-topbar .brk-logo { width: 42px; height: 42px; flex-basis: 42px; }
.wa-topbar .brk-name { font-size: 18px; }
.wa-topbar .brk-subtitle { font-size: 10px; }
.wa-brand.brk-brand .brk-identity, .wa-brand.brk-brand .brk-copy { display: flex; }
.wa-app-main { min-height: calc(100dvh - 58px); }

.brk-auth-body { flex-direction: column; justify-content: flex-start; }
.brk-auth-header { width: 100%; padding: 18px 24px; background: rgba(9, 36, 67, .8); }
.brk-auth-header .brk-brand { color: #fff; }
.brk-auth-body main { margin-block: auto; }

@media (max-width: 991.98px) {
    #topNav .nav-topbar { min-height: 70px; gap: 8px; }
    #topNav .brk-logo, .admin-topbar .brk-logo { width: 48px; height: 48px; flex-basis: 48px; }
    #topNav .brk-name, .admin-topbar .brk-name { font-size: 18px; }
    #topNav .brk-subtitle, .admin-topbar .brk-subtitle { font-size: 10px; }
    .admin-topbar { min-height: 72px; }
    .admin-shell .admin-nav { top: 72px; }
}
@media (max-width: 800px) {
    .wa-topbar { height: 54px; min-height: 54px; gap: 8px; padding: 0 10px; }
    .wa-topbar .brk-logo { width: 36px; height: 36px; flex-basis: 36px; }
    .wa-topbar .brk-name { font-size: 16px; }
    .wa-topbar .brk-subtitle { font-size: 9px; }
    .wa-app-main, .wa-shell { min-height: calc(100dvh - 54px); }
}
@media (max-width: 575.98px) {
    .brk-brand .brk-identity { gap: 9px; }
    .brk-ad-header .site-header-inner { padding: 10px 12px; gap: 10px; }
    .brk-ad-header .brk-name { font-size: 20px; }
    .brk-ad-header .brk-subtitle { font-size: 11px; }
    .brk-ad-header .header-actions { width: 100%; margin: 0; }
    .brk-ad-header .header-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
    .brk-auth-header { padding: 14px 16px; }
}
@media (max-width: 380px) {
    #topNav .brk-logo, .admin-topbar .brk-logo { width: 42px; height: 42px; flex-basis: 42px; }
    #topNav .brk-name, .admin-topbar .brk-name { font-size: 16px; }
    #topNav .brk-subtitle, .admin-topbar .brk-subtitle { font-size: 9px; }
    #topNav .nav-actions { gap: 3px; }
    #topNav .nav-actions .icon-btn { width: 34px; height: 36px; padding: 4px; }
    .admin-topbar .user-avatar { display: none; }
}