/* ============================================================
   ACFICK Customer Portal — Shared Portal Styles
   Extends css/style.css design tokens
   ============================================================ */

/* --- Portal Layout --- */
.portal-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
}

.portal-main {
    flex: 1;
    padding: 40px 0 80px;
    background-color: #d0d7d7;
}
body.dark-mode .portal-main {
    background-color: #1e2c2c;
}

/* --- Auth Pages (login, register) --- */
.auth-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-card {
    background-color: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 48px 40px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 4px 24px var(--shadow-color);
}

.auth-card__logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-card__logo img {
    height: 48px;
    object-fit: contain;
}

.auth-card__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.auth-card__subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 32px;
}

/* --- Form Styles --- */
.portal-form-group {
    margin-bottom: 20px;
}

.portal-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.portal-form-group input,
.portal-form-group select,
.portal-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--form-border);
    border-radius: 3px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.portal-form-group input:focus,
.portal-form-group select:focus,
.portal-form-group textarea:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

body.dark-mode .portal-form-group input:focus,
body.dark-mode .portal-form-group select:focus,
body.dark-mode .portal-form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.portal-form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.portal-form-group--error input,
.portal-form-group--error select,
.portal-form-group--error textarea {
    border-color: #cc0000;
}

.portal-form-group .field-error {
    color: #cc0000;
    font-size: 0.78rem;
    margin-top: 4px;
    display: none;
}

.portal-form-group--error .field-error {
    display: block;
}

.portal-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.portal-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--text-primary);
}

.portal-checkbox label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    cursor: pointer;
}

.portal-checkbox a {
    color: var(--text-primary);
    font-weight: 600;
}

/* --- Alerts --- */
.portal-alert {
    padding: 12px 16px;
    border-radius: 3px;
    font-size: 0.875rem;
    margin-bottom: 20px;
    display: none;
    border-left: 3px solid;
}

.portal-alert--error {
    background-color: #fff0f0;
    border-color: #cc0000;
    color: #8b0000;
}

.portal-alert--success {
    background-color: #f0fff4;
    border-color: #00803a;
    color: #004d22;
}

.portal-alert--info {
    background-color: #f0f6ff;
    border-color: #0050b3;
    color: #002d80;
}

body.dark-mode .portal-alert--error  { background: #3a0000; color: #ffb3b3; }
body.dark-mode .portal-alert--success { background: #00261a; color: #a3ffcc; }
body.dark-mode .portal-alert--info    { background: #001233; color: #a3c4ff; }

/* --- Buttons --- */
.btn-portal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    background-color: var(--black);
    color: var(--white);
    border: 2px solid var(--black);
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.25s ease;
    width: 100%;
}

.btn-portal:hover {
    background-color: transparent;
    color: var(--black);
}

body.dark-mode .btn-portal {
    background-color: #ffffff;
    color: #1a1a1a;
    border-color: #ffffff;
}

body.dark-mode .btn-portal:hover {
    background-color: transparent;
    color: #ffffff;
}

.btn-portal--outline {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-portal--outline:hover {
    border-color: var(--text-primary);
    background-color: transparent;
    color: var(--text-primary);
}

.btn-portal--sm {
    padding: 8px 16px;
    font-size: 0.75rem;
    width: auto;
}

.btn-portal--danger {
    background-color: #cc0000;
    border-color: #cc0000;
    color: #fff;
}

.btn-portal--danger:hover {
    background-color: transparent;
    color: #cc0000;
}

.btn-portal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-portal .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.btn-portal.loading .btn-spinner {
    display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Auth Links --- */
.auth-links {
    text-align: center;
    margin-top: 24px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.auth-links a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-links a:hover { text-decoration: underline; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border-color);
}

/* --- Google Sign-In button --- */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 20px;
    border: 1.5px solid var(--border-color);
    border-radius: 4px;
    background: var(--form-bg);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: 0.3px;
    transition: background 0.18s, box-shadow 0.18s, border-color 0.18s;
    text-decoration: none;
}
.btn-google:hover {
    background: rgba(66, 133, 244, 0.06);
    border-color: rgba(66, 133, 244, 0.4);
    box-shadow: 0 1px 6px rgba(66, 133, 244, 0.15);
}
body.dark-mode .btn-google:hover {
    background: rgba(66, 133, 244, 0.1);
}

/* --- Portal Header extension --- */
.portal-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--black);
    color: var(--white);
    border: 2px solid var(--black);
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
}

.cart-btn:hover {
    background: transparent;
    color: var(--black);
}

body.dark-mode .cart-btn {
    background: #fff;
    color: #1a1a1a;
    border-color: #fff;
}

body.dark-mode .cart-btn:hover {
    background: transparent;
    color: #fff;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #cc0000;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    display: none;
}

/* --- Dashboard Layout --- */
.portal-dashboard {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

.portal-sidebar {
    background: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 24px 0;
    position: sticky;
    top: 100px;
}

.sidebar-user {
    padding: 0 24px 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.sidebar-user__name {
    font-weight: 700;
    font-size: 1rem;
}

.sidebar-user__email {
    font-size: 0.8rem;
    color: var(--text-secondary);
    word-break: break-all;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-nav a:hover, .sidebar-nav a.active {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-left-color: var(--text-primary);
}

.sidebar-nav a i { width: 18px; }

/* --- Page Header --- */
.portal-page-header {
    margin-bottom: 32px;
    margin-top: 36px;
}

.portal-page-header h1 {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.portal-page-header p {
    color: var(--text-secondary);
    margin-top: 4px;
}

/* --- Cards --- */
.portal-card {
    background: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 24px;
}

.portal-card__title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

/* --- Product Grid --- */
.products-portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.product-portal-card {
    background: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.product-portal-card:hover {
    box-shadow: 0 8px 24px var(--shadow-color);
    transform: translateY(-2px);
}

.product-portal-card__img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 3rem;
}

.product-portal-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-portal-card__body {
    padding: 16px;
}

.product-portal-card__name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.product-portal-card__desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}

.product-portal-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.product-portal-card__price {
    font-size: 1.1rem;
    font-weight: 700;
}

.product-portal-card__unit {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.availability-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.availability-badge--available { background: #e6f7ed; color: #00803a; }
.availability-badge--limited   { background: #fff7e6; color: #d46b00; }
.availability-badge--out_of_stock { background: #fff0f0; color: #cc0000; }

body.dark-mode .availability-badge--available { background: #002d16; color: #6fe09c; }
body.dark-mode .availability-badge--limited   { background: #2d1800; color: #ffb366; }
body.dark-mode .availability-badge--out_of_stock { background: #3a0000; color: #ff9999; }

/* --- Search & Filter Bar --- */
.portal-search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.portal-search-bar input,
.portal-search-bar select {
    padding: 10px 14px;
    border: 1px solid var(--form-border);
    border-radius: 3px;
    background: var(--form-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

.portal-search-bar input { flex: 1; min-width: 200px; }
.portal-search-bar select { min-width: 160px; }

.portal-search-bar input:focus,
.portal-search-bar select:focus {
    border-color: var(--text-primary);
}

/* --- Cart / Order Summary --- */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cart-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--black);
    color: var(--white);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cart-table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.cart-table tr:last-child td { border-bottom: none; }

.cart-table .cart-qty-input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--form-border);
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: center;
}

.cart-total-row {
    background: var(--bg-secondary);
    font-weight: 700;
}

/* --- Order History Table --- */
.order-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.order-history-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--black);
    color: var(--white);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-history-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.order-history-table tr:last-child td { border-bottom: none; }

.order-history-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* --- Status Badges --- */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge--Received    { background: #e6f0ff; color: #0050b3; }
.status-badge--In_Progress { background: #fff7e6; color: #d46b00; }
.status-badge--Ready       { background: #e6f7ed; color: #00803a; }
.status-badge--Completed   { background: #f0f0f0; color: #555555; }
.status-badge--Cancelled   { background: #fff0f0; color: #cc0000; }

body.dark-mode .status-badge--Received    { background: #001a40; color: #80b3ff; }
body.dark-mode .status-badge--In_Progress { background: #2d1800; color: #ffb366; }
body.dark-mode .status-badge--Ready       { background: #002d16; color: #6fe09c; }
body.dark-mode .status-badge--Completed   { background: #2a2a2a; color: #aaaaaa; }
body.dark-mode .status-badge--Cancelled   { background: #3a0000; color: #ff9999; }

/* --- Loading Skeleton --- */
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 3px;
}

@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

/* --- Product Qty Selector on Products Page --- */
.qty-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-selector button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 3px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-selector input {
    width: 54px;
    text-align: center;
    padding: 6px;
    border: 1px solid var(--form-border);
    border-radius: 3px;
    background: var(--form-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* --- Phone Input with Country Code --- */
/* A quiet line under a field explaining what it is for — not an error. */
.field-hint {
    display: block;
    margin-top: 5px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.phone-input-group {
    display: flex;
    align-items: stretch;
}

.phone-flag-picker {
    position: relative;
    flex-shrink: 0;
}

.phone-flag-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 100%;
    min-width: 92px;
    border: 1px solid var(--form-border);
    border-right: none;
    border-radius: 3px 0 0 3px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.phone-flag-trigger:focus {
    outline: none;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}

body.dark-mode .phone-flag-trigger:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.phone-flag-img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
}

.phone-flag-chevron {
    font-size: 0.55rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    margin-left: 2px;
}

.phone-flag-trigger[aria-expanded="true"] .phone-flag-chevron {
    transform: rotate(180deg);
}

.phone-flag-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    background: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    box-shadow: 0 8px 28px var(--shadow-color);
    width: 256px;
    display: none;
}

.phone-flag-menu.open { display: block; }

.phone-flag-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}

.phone-flag-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--form-border);
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.phone-flag-search:focus { border-color: var(--text-primary); }

.phone-flag-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 224px;
    overflow-y: auto;
}

.phone-flag-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.1s ease;
}

.phone-flag-list li:hover,
.phone-flag-list li.active {
    background: var(--bg-secondary);
}

.phone-flag-list .pf-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-flag-list .pf-code {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-family: monospace;
    white-space: nowrap;
}

.portal-form-group .phone-input-group input[type="tel"] {
    border-radius: 0 3px 3px 0;
    flex: 1;
    min-width: 0;
}

.portal-form-group--error .phone-flag-trigger {
    border-color: #cc0000;
}

/* --- Footer (minimal for portal) --- */
.portal-footer {
    background: var(--header-bg);
    color: var(--text-primary);
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    margin-top: auto;
    /* Was 0 -8px 16px rgba(0,0,0,.5) — a hard dark band across the page.
       Wider spread at a fraction of the opacity reads as a soft lift. */
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .portal-dashboard {
        grid-template-columns: 1fr;
    }
    .portal-sidebar {
        position: static;
    }
}

@media (max-width: 600px) {
    .auth-card {
        padding: 32px 20px;
    }
    .portal-search-bar {
        flex-direction: column;
    }
    .portal-search-bar input,
    .portal-search-bar select {
        width: 100%;
    }
    .cart-table th:nth-child(3),
    .cart-table td:nth-child(3) {
        display: none;
    }
}

@media (max-width: 480px) {
    .products-portal-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PORTAL BURGER MENU — auth page header
   ============================================================ */

.portal-burger {
    position: relative;
    display: flex;
    align-items: center;
}

.portal-burger-btn {
    background: none;
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.portal-burger-btn:hover,
.portal-burger-btn[aria-expanded="true"] {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.portal-burger-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    /* Logical, not `right: 0`: in Arabic the header reverses and the burger
       moves to the left edge, where a right-anchored menu would open off the
       side of the screen. inset-inline-end resolves to right in LTR and left
       in RTL, so the menu always opens back into the page. */
    inset-inline-end: 0;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    min-width: 210px;
    z-index: 9999;
    overflow: hidden;
}

.portal-burger-menu.open { display: block; }

.portal-burger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 20px;
}

.portal-burger-item + .portal-burger-item {
    border-top: 1px solid var(--border-color);
}

.portal-burger-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.portal-burger-toggle-btn {
    margin: 0 !important;
    border-radius: 40% !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    flex-shrink: 0;
}

body.dark-mode .portal-burger-menu {
    background-color: #313030;
}

/* Centered, tighter nav on portal pages */
.portal-body .nav ul {
    justify-content: center;
}
.portal-body .nav ul li {
    margin-left: 32px;
    margin-right: 32px;
}

/* Desktop: hide nav links inside burger dropdown */
@media (min-width: 769px) {
    .portal-burger-nav-item,
    .portal-burger-divider {
        display: none !important;
    }
}

/* Nav links inside burger dropdown */
.portal-burger-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s ease;
}

.portal-burger-nav-item + .portal-burger-nav-item {
    border-top: 1px solid var(--border-color);
}

.portal-burger-nav-item:hover {
    background: var(--bg-secondary);
}

.portal-burger-nav-item.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.portal-burger-nav-item i {
    width: 16px;
    text-align: center;
    opacity: 0.7;
}

.portal-burger-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 4px 0;
}

/* Sign out row */
.portal-burger-item--signout {
    border-top: 1px solid var(--border-color);
}

.portal-burger-label--danger {
    color: #cc0000 !important;
}

.portal-burger-signout {
    background: none !important;
    border: none !important;
    color: #cc0000 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* The language and dark-mode buttons next to this one fill in on hover, so a
   drop in opacity alone read as "nothing happened". Match their feedback: a
   filled circle in the button's own red. */
.portal-burger-signout:hover,
.portal-burger-signout:focus-visible {
    background-color: rgba(204, 0, 0, 0.12) !important;
    color: #a30000 !important;
    opacity: 1 !important;
}

.portal-burger-signout:active {
    background-color: rgba(204, 0, 0, 0.2) !important;
}

.portal-burger-signout:focus-visible {
    outline: 2px solid #cc0000;
    outline-offset: 2px;
}

/* Dark red on a dark panel is already low contrast; lift it on hover. */
body.dark-mode .portal-burger-signout {
    color: #ff6b6b !important;
}

body.dark-mode .portal-burger-signout:hover,
body.dark-mode .portal-burger-signout:focus-visible {
    background-color: rgba(255, 107, 107, 0.18) !important;
    color: #ff8a8a !important;
}

body.dark-mode .portal-burger-signout:active {
    background-color: rgba(255, 107, 107, 0.28) !important;
}

body.dark-mode .portal-burger-signout:focus-visible {
    outline-color: #ff6b6b;
}

/* The whole row highlights too, so the target feels as large as it looks. */
.portal-burger-item--signout {
    transition: background-color 0.2s ease;
}

.portal-burger-item--signout:hover {
    background-color: rgba(204, 0, 0, 0.06);
}

body.dark-mode .portal-burger-item--signout:hover {
    background-color: rgba(255, 107, 107, 0.09);
}

/* ============================================================
   AUTH SPLIT LAYOUT — login, register, forgot/reset/verify
   ============================================================ */

.auth-split {
    display: flex;
    align-items: stretch;
}

/* --- Brand panel (left) ---
   A deep #145f68 field whose trailing edge is cut on a diagonal and lit by a
   cyan seam. The slant is the panel's own clip-path; the seam is achieved by
   painting the panel in the bright accent and laying the dark surface on top
   via ::before, clipped a few px short so a sliver of accent shows through. */
.auth-split {
    background: var(--auth-canvas, #eaf1f2);
}

body.dark-mode .auth-split {
    --auth-canvas: #0a1416;
}

body.auth-page {
    --auth-slant: 110px;
    --auth-seam: 3px;
    --auth-brand-width: 46%;
    --auth-brand-pad: 56px;
    --auth-brand-inner: 360px;
    --auth-card-width: 430px;
}

.auth-brand {
    width: var(--auth-brand-width);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 60px;
    padding-inline: var(--auth-brand-pad) calc(var(--auth-slant) + 24px);
    position: sticky;
    top: 0;
    /* Was 100vh, from when the header floated over this panel. The header now
       occupies its own space, so a full viewport height here would overflow by
       exactly the header and force a scrollbar on an otherwise short page.
       Stretching to the split — itself flex:1 of the viewport — fills the gap
       between header and footer instead. */
    align-self: stretch;
    overflow: hidden;
    background: linear-gradient(180deg, #7bf9ea 0%, #26cddb 45%, #0d7c8a 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--auth-slant)) 100%, 0 100%);
}

/* The actual panel surface, inset from the seam. */
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(900px 520px at 12% 8%, rgba(45, 214, 226, 0.30), transparent 62%),
        radial-gradient(700px 500px at 85% 95%, rgba(20, 95, 104, 0.55), transparent 60%),
        linear-gradient(155deg, #04222733 0%, #072f35 8%, #0d4c55 48%, #145f68 100%);
    background-color: #06282d;
    clip-path: polygon(
        0 0,
        calc(100% - var(--auth-seam)) 0,
        calc(100% - var(--auth-slant) - var(--auth-seam)) 100%,
        0 100%
    );
}

/* In Arabic the flex row reverses, so the panel sits on the right — the
   diagonal has to mirror with it or it cuts against the window edge. */
[dir="rtl"] .auth-brand {
    clip-path: polygon(var(--auth-slant) 0, 100% 0, 100% 100%, 0 100%);
}

[dir="rtl"] .auth-brand::before {
    clip-path: polygon(
        calc(var(--auth-slant) + var(--auth-seam)) 0,
        100% 0,
        100% 100%,
        var(--auth-seam) 100%
    );
}

[dir="rtl"] .auth-brand__rule { margin-left: auto; }

.auth-brand__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--auth-brand-inner);
}

/* The logo is the anchor of the panel now, so it is deliberately large and
   sits in its own glow. */
.auth-brand__logo {
    height: 128px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin-bottom: 34px;
    filter: drop-shadow(0 0 30px rgba(94, 244, 228, 0.35));
}

.auth-brand__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: clamp(2.1rem, 3vw, 3.1rem);
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: #ffffff;
    line-height: 1.02;
    margin-bottom: 14px;
}

/* The whole phrase reads white — the cyan is carried by the seam and the
   rule beneath instead of the wordmark. Flat white, no glow. */
.auth-brand__title span {
    color: #ffffff;
}

/* Thin accent rule under the heading, echoing the seam. */
.auth-brand__rule {
    width: 64px;
    height: 3px;
    border: 0;
    margin: 0 0 20px;
    background: linear-gradient(90deg, #5ef4e4, rgba(94, 244, 228, 0));
}

.auth-brand__tagline {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.92rem;
    line-height: 1.75;
    margin-bottom: 34px;
}

.auth-brand__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-brand__features li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-brand__features li i {
    width: 26px;
    height: 26px;
    min-width: 26px;
    background: rgba(94, 244, 228, 0.12);
    border: 1px solid rgba(94, 244, 228, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #5ef4e4;
}

/* --- Auth header: no logo, just a way back --- */
.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Sits on the header bar now, not on the teal panel, so it follows the
       theme's text colour the way the footer's text does. */
    color: var(--text-primary);
    text-decoration: none;
    padding: 6px 2px;
    transition: transform 0.2s ease;
}

.auth-back-link i { font-size: 0.8rem; }

/* Movement only — the colour stays put on hover. */
.auth-back-link:hover { transform: translateX(3px); }
[dir="rtl"] .auth-back-link:hover { transform: translateX(-3px); }

[dir="rtl"] .auth-back-link i { transform: scaleX(-1); }

/* Absolute rather than fixed: identical at the top of the page — transparent,
   with the teal running full-bleed behind it — but it belongs to the document,
   so it scrolls away instead of hovering over the copy. These are single-task
   pages; nothing here needs to follow the user down the form. */
/* The header controls line up with the columns underneath them rather than
   with the page container: the back link to the brand copy's left edge, the
   burger to the card's outer edge. Both regions mirror the geometry of the
   panel below via the shared custom properties, so they track at any width. */
body.auth-page .header .container {
    max-width: none;
    padding: 0;
}

body.auth-page .header-inner {
    display: flex;
    align-items: center;
    /* The inherited 20px gap would shrink the right region and throw its
       centred inner off the card's edge by half that. */
    gap: 0;
}

.auth-header-left {
    width: var(--auth-brand-width);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding-inline: var(--auth-brand-pad) calc(var(--auth-slant) + 24px);
}

.auth-header-left__inner {
    width: 100%;
    max-width: var(--auth-brand-inner);
}

.auth-header-right {
    flex: 1;
    display: flex;
    justify-content: center;
    padding-inline: 24px 48px;
}

.auth-header-right__inner {
    width: 100%;
    max-width: var(--auth-card-width);
    display: flex;
    justify-content: flex-end;
}

/* A solid bar matching .portal-footer at the other end of the page: the same
   surface, the same hairline and soft shadow, mirrored to face downwards.
   Being opaque, it takes its own space in the flow rather than floating over
   the teal panel — so the brand banner now starts underneath it.
   The !important beats .header.scrolled, which the page's scroll handler adds
   past 50px and which would otherwise swap in a translucent blurred surface. */
body.auth-page .header {
    position: relative;
    background-color: var(--header-bg) !important;
    color: var(--text-primary);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

/* --- Form panel (right) --- */
.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-block: 80px;
    padding-inline: 24px 48px;
    background: transparent;
}

.auth-form-panel .auth-card {
    max-width: var(--auth-card-width);
    border-radius: 16px;
    border: 1px solid rgba(20, 95, 104, 0.16);
    box-shadow: 0 20px 55px rgba(6, 40, 45, 0.13);
    /* Was 120px, most of which was clearance for the floating header. */
    margin-top: 56px;
    position: relative;
    overflow: hidden;
}

.auth-card__title {
    color: #06282d;
}

body.dark-mode .auth-card__title {
    color: #eafcfa;
}

body.dark-mode .auth-form-panel .auth-card {
    background-color: #111f22;
    border-color: rgba(94, 244, 228, 0.16);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.auth-form-panel .auth-card__logo { display: none; }

/* Teal primary button in auth pages */
.auth-form-panel .btn-portal:not(.btn-portal--outline) {
    background-color: #145f68;
    border-color: #145f68;
    color: #ffffff;
}

.auth-form-panel .btn-portal:not(.btn-portal--outline):hover {
    background-color: transparent;
    color: #145f68;
}

body.dark-mode .auth-form-panel .btn-portal:not(.btn-portal--outline) {
    background-color: #1b7e8c;
    border-color: #1b7e8c;
    color: #ffffff;
}

body.dark-mode .auth-form-panel .btn-portal:not(.btn-portal--outline):hover {
    background-color: transparent;
    color: #1b7e8c;
}

/* --- Input icons --- */
.auth-input-wrap {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 1;
}

.auth-input-wrap input {
    padding-left: 38px !important;
}

/* --- Password reveal toggle ---
   Typing a password that must satisfy four rules, blind, on a phone keyboard
   is where sign-ups get abandoned. The eye sits inside the field. */
.auth-input-wrap--pw input {
    padding-right: 44px !important;
}

.auth-pw-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px 10px;
    line-height: 1;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.2s ease;
    z-index: 2;
}

.auth-pw-toggle:hover { color: var(--text-primary); }

.auth-pw-toggle:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 1px;
}

[dir="rtl"] .auth-input-wrap .auth-input-icon { left: auto; right: 14px; }
[dir="rtl"] .auth-input-wrap input { padding-left: 14px !important; padding-right: 38px !important; }
[dir="rtl"] .auth-input-wrap--pw input { padding-left: 44px !important; }
[dir="rtl"] .auth-pw-toggle { right: auto; left: 4px; }

/* --- Live password requirement checklist ---
   These four mirror PASSWORD_PATTERN in backend/schemas/auth.py. They stay on
   screen while typing, unlike the placeholder they replaced. */
.auth-pw-rules {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 12px;
}

.auth-pw-rules li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.auth-pw-rules li::before {
    content: "\f111";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.42rem;
    width: 12px;
    text-align: center;
}

.auth-pw-rules li.ok { color: #1a7f4b; }
.auth-pw-rules li.ok::before { content: "\f00c"; font-size: 0.7rem; }
body.dark-mode .auth-pw-rules li.ok { color: #4ade80; }

/* The terms checkbox is a .portal-checkbox, not a .portal-form-group, so it
   needs its own error styling to match the rest of the form. */
.portal-checkbox .field-error {
    display: none;
    flex-basis: 100%;
    color: #cc0000;
    font-size: 0.78rem;
    margin-top: 4px;
}

/* .portal-checkbox is a non-wrapping flex row; the error needs its own line. */
.portal-checkbox.portal-form-group--error { flex-wrap: wrap; }
.portal-checkbox.portal-form-group--error .field-error { display: block; }
.portal-checkbox.portal-form-group--error label { color: #cc0000; }
.portal-checkbox.portal-form-group--error input[type="checkbox"] { outline: 1px solid #cc0000; }

/* --- Auth split responsive --- */
@media (max-width: 860px) {
    .auth-split { flex-direction: column; }

    /* Stacked: there are no columns to align to, so the header goes back to
       a plain edge-to-edge bar. */
    body.auth-page .header .container { max-width: 1200px; padding: 0 20px; }
    body.auth-page .header-inner { justify-content: space-between; }

    .auth-header-left,
    .auth-header-right {
        width: auto;
        flex: 0 0 auto;
        padding-inline: 0;
        justify-content: flex-start;
    }

    .auth-header-left__inner,
    .auth-header-right__inner { max-width: none; }

    /* The white burger that used to live here is gone with the transparent
       header: the button now sits on the header bar, where the themed default
       is what reads correctly in both colour modes. */

    /* Stacked: the diagonal moves to the bottom edge so the seam still reads. */
    .auth-brand {
        --auth-slant: 0px;
        width: 100%;
        position: static;
        height: auto;
        /* Was 100px on top to clear the header floating over this banner —
           the header holds its own space now. */
        padding: 46px 20px;
        min-height: 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
    }

    .auth-brand::before {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 33px), 0 calc(100% - 3px));
    }

    /* Stacked, both directions share the horizontal slant — only which way it
       falls changes. Padding is deliberately not repeated here: it was a copy
       of the old 100px top used to clear the floating header, and left the
       Arabic banner 54px taller than the English one. */
    [dir="rtl"] .auth-brand {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 30px));
    }

    [dir="rtl"] .auth-brand::before {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3px), 0 calc(100% - 33px));
    }

    .auth-brand__inner {
        max-width: 100%;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .auth-brand__rule { display: none; }

    .auth-brand__logo { height: 62px; margin-bottom: 0; }
    .auth-brand__title { font-size: 1.5rem; margin-bottom: 0; }
    .auth-brand__tagline,
    .auth-brand__features { display: none; }

    .auth-form-panel {
        padding: 28px 20px 60px;
        flex: 1;
        align-items: center;
        justify-content: center;
    }

    .auth-form-panel .auth-card { margin-top: 0; }

    /* The banner above already carries the logo at full size — repeating it
       inside the card just pushed the form down. */
    .auth-form-panel .auth-card__logo { display: none; }
}

/* ===== My Orders: tracked order cards (portal/orders.html) ===== */
.orders-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.orders-tab {
    padding: 10px 18px; border: 2px solid var(--text-primary); background: transparent;
    color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer;
}
.orders-tab.active { background: var(--text-primary); color: var(--bg-primary); }
.orders-tab__count { opacity: 0.7; font-weight: 400; }
.orders-note { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 14px; }

.order-card { margin-bottom: 18px; }
.order-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.order-card__ref { font-weight: 700; letter-spacing: 0.5px; }
.order-card__date { color: var(--text-secondary); font-size: 0.85rem; margin-top: 2px; }

.order-stage { padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap;
    background: #e6f0f1; color: #145f68; }
.order-stage--completed { background: #e6f7ed; color: #00803a; }
.order-stage--delayed, .order-stage--not_accepted { background: #fff0f0; color: #cc0000; }
.order-stage--awaiting_payment { background: #fff7e6; color: #b35c00; }
.order-stage--unknown { background: #f0f0f0; color: #555555; }
body.dark-mode .order-stage { background: #0f3337; color: #7fd0d8; }
body.dark-mode .order-stage--completed { background: #002d16; color: #6fe09c; }
body.dark-mode .order-stage--delayed, body.dark-mode .order-stage--not_accepted { background: #3a0000; color: #ff9999; }
body.dark-mode .order-stage--awaiting_payment { background: #2d1800; color: #ffb366; }
body.dark-mode .order-stage--unknown { background: #2a2a2a; color: #aaaaaa; }

/* The timeline: six steps joined by a line, done ones filled in teal. */
.order-steps { list-style: none; display: grid; grid-template-columns: repeat(8, 1fr); margin: 0 0 18px; padding: 0; }
.order-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.order-step::before { content: ""; position: absolute; top: 17px; inset-inline-start: -50%; width: 100%; height: 3px;
    background: var(--border-color); z-index: 0; }
.order-step:first-child::before { display: none; }
.order-step__dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 0.85rem; background: var(--bg-secondary);
    color: var(--text-secondary); border: 2px solid var(--border-color); }
.order-step__label { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.3; }
.order-step.done::before, .order-step.current::before { background: #145f68; }
.order-step.done .order-step__dot { background: #145f68; border-color: #145f68; color: #fff; }
.order-step.current .order-step__dot { border-color: #145f68; color: #145f68; background: var(--form-bg);
    box-shadow: 0 0 0 4px rgba(20, 95, 104, 0.15); }
.order-step.current .order-step__label { color: var(--text-primary); font-weight: 700; }
.order-step.delayed .order-step__dot { border-color: #cc0000; color: #cc0000; }
body.dark-mode .order-step.done::before, body.dark-mode .order-step.current::before { background: #4fb3bf; }
body.dark-mode .order-step.done .order-step__dot { background: #4fb3bf; border-color: #4fb3bf; color: #0b2124; }
body.dark-mode .order-step.current .order-step__dot { border-color: #4fb3bf; color: #4fb3bf; }

.order-alert { background: #fff0f0; color: #a10000; padding: 10px 14px; font-size: 0.9rem; margin-bottom: 14px; }
.order-alert a { color: inherit; font-weight: 700; margin-inline-start: 6px; white-space: nowrap; }
.order-alert--info { background: #fff7e6; color: #8a4700; }
body.dark-mode .order-alert { background: #3a0000; color: #ffb3b3; }
body.dark-mode .order-alert--info { background: #2d1800; color: #ffcc99; }

.order-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; font-size: 0.9rem; margin-bottom: 14px; }
.order-facts i { color: #145f68; margin-inline-end: 4px; }
.order-progress { display: inline-flex; align-items: center; gap: 10px; }
.order-progress__bar { width: 140px; height: 8px; background: var(--border-color); border-radius: 4px; overflow: hidden; }
.order-progress__bar span { display: block; height: 100%; background: #145f68; }

.order-quote { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--border-color); border-inline-start: 3px solid #145f68; }
.order-quote > div { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.order-quote__total { font-weight: 700; color: #145f68; }
.order-quote__valid { color: var(--text-secondary); font-size: 0.85rem; }
.order-quote .btn-portal { width: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
body.dark-mode .order-quote__total, body.dark-mode .order-facts i { color: #7fd0d8; }

.order-items { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.order-items th { text-align: start; padding: 8px; background: var(--black); color: var(--white); font-weight: 600; }
.order-items td { padding: 9px 8px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.order-items td:nth-child(2) { overflow-wrap: anywhere; }
.order-type { display: inline-block; padding: 2px 8px; font-size: 0.72rem; font-weight: 700; border-radius: 3px; }
.order-type--upvc { background: #e9ecef; color: #333; }
.order-type--irr { background: #e6f0f1; color: #145f68; }
body.dark-mode .order-type--upvc { background: #2a2a2a; color: #ddd; }
body.dark-mode .order-type--irr { background: #0f3337; color: #7fd0d8; }

.order-meta { margin-top: 12px; font-size: 0.85rem; display: grid; gap: 4px; }
.order-meta div { display: flex; gap: 10px; }
.order-meta div > span:first-child { color: var(--text-secondary); min-width: 80px; }

@media (max-width: 640px) {
    /* Eight steps across a phone: smaller dots, and only the current
       step's name, so the labels never collide. */
    .order-step__label { font-size: 0.62rem; display: none; }
    .order-step.current .order-step__label { display: block; white-space: nowrap; }
    .order-step__dot { width: 26px; height: 26px; font-size: 0.65rem; }
    .order-step::before { top: 12px; }

    /* On a phone each item is its own block: the specification across the
       full width and the quantity under it, so neither is squeezed or
       pushed past the card. */
    .order-items, .order-items tbody, .order-items tr, .order-items td { display: block; width: 100%; }
    .order-items thead { display: none; }
    .order-items { font-size: 0.85rem; border-top: 1px solid var(--border-color); }
    .order-items tr { padding: 10px 0; border-bottom: 1px solid var(--border-color); }
    .order-items td { padding: 2px 0; border: none; }
    .order-items td:first-child:not(:has(.order-type)) { display: none; }   /* "—" when the type is not known */
    .order-items__qty { color: var(--text-secondary); margin-top: 4px; }
    .order-items__qty::before { content: attr(data-label) ": "; font-weight: 600; }
}

/* ===== Saved delivery details (cart checkbox, account card) ===== */
.save-details { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 16px; cursor: pointer;
    font-size: 0.92rem; color: var(--text-primary); }
.save-details input { width: 18px; height: 18px; margin-top: 2px; accent-color: #145f68; flex-shrink: 0; }
.saved-delivery { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 14px; font-size: 0.92rem; }
.saved-delivery dt { color: var(--text-secondary); }
.saved-delivery dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
    .saved-delivery { grid-template-columns: 1fr; gap: 2px; }
    .saved-delivery dd { margin-bottom: 8px; }
}

/* ===== Delivery details form (js/portal/delivery-form.js: cart, account page) ===== */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

select.portal-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.delivery-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-secondary);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

/* ===== Account page: member since, verified badge, address book ===== */
.member-since { color: var(--text-secondary); margin-top: 4px; }
.verify-badge { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; padding: 1px 8px;
    border-radius: 999px; font-size: 0.68rem; letter-spacing: 0.5px; text-transform: none; vertical-align: middle; }
.verify-badge.ok { background: #e6f7ed; color: #00803a; }
.verify-badge.no { background: #fff7e6; color: #b35c00; }
body.dark-mode .verify-badge.ok { background: #002d16; color: #6fe09c; }
body.dark-mode .verify-badge.no { background: #2d1800; color: #ffb366; }

.addresses-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.addresses-head .btn-portal { display: inline-flex; align-items: center; gap: 8px; }
.addresses-empty { color: var(--text-secondary); margin: 0; }
.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.address-card { border: 1px solid var(--border-color); padding: 14px 16px; display: flex; flex-direction: column; }
.address-card.is-default { border-color: #145f68; box-shadow: inset 3px 0 0 #145f68; }
[dir="rtl"] .address-card.is-default { box-shadow: inset -3px 0 0 #145f68; }
.address-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.address-card__default { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e6f0f1; color: #145f68; }
body.dark-mode .address-card__default { background: #0f3337; color: #7fd0d8; }
.address-card .saved-delivery { flex: 1; align-content: start; font-size: 0.86rem; }
.address-card__actions { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.address-action { background: none; border: none; padding: 4px 0; font: inherit; font-size: 0.85rem; font-weight: 600;
    color: var(--text-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.address-action:hover { color: #145f68; }
.address-action.danger { color: #c62828; }

.address-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1000; align-items: flex-start;
    justify-content: center; overflow-y: auto; padding: 40px 16px; }
.address-modal__box { background: var(--form-bg); width: 100%; max-width: 640px; padding: 26px; border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.address-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.address-modal__head h3 { margin: 0; font-size: 1.15rem; }
.address-modal__close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--text-secondary); }
.address-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
@media (max-width: 520px) { .address-modal { padding: 16px 10px; } .address-modal__box { padding: 18px 14px; } }