/* ========== 1. ROOT & VARIABLES - PREMIUM DESIGN SYSTEM ========== */
:root {
    /* Brand Core - Industrial/Woodworking Theme */
    --primary-red: #e11113;
    --primary-red-dark: #b00e10;
    --primary-red-darker: #8a0b0d;
    --primary-red-light: #ff3436;

    /* NEW: Modern Blue/Teal Tracking Interface Colors */
    --primary-blue: #1E3A8A;
    --primary-blue-light: #3B82F6;
    --secondary-teal: #0891B2;
    --secondary-teal-light: #06B6D4;
    --accent-blue-bg: #F0F9FF;

    /* NEW: Status Colors - Bold & Clear */
    --status-completed: #10B981;
    --status-active: #3B82F6;
    --status-pending: #9CA3AF;

    /* Sophisticated Neutrals - Industrial Feel */
    --charcoal-900: #1a1d23;
    --charcoal-800: #2d3139;
    --charcoal-700: #404550;
    --charcoal-600: #5a5f6b;
    --slate-500: #6b7280;
    --slate-400: #9ca3af;
    --slate-300: #d1d5db;
    --slate-200: #e5e7eb;
    --slate-100: #f3f4f6;
    --slate-50: #f9fafb;

    /* Process Status Colors - Trust-Building Palette */
    --status-received: #f3f4f6;
    --status-assembling: #dbeafe;
    --status-queue: #e0f2fe;
    --status-cutting: #3b82f6;
    --status-edging: #8b5cf6;
    --status-cnc: #6366f1;
    --status-ready: #10b981;
    --status-collected: #6b7280;

    /* Functional Colors */
    --success-green: #10b981;
    --success-green-light: #d1fae5;
    --warning-amber: #f59e0b;
    --warning-amber-light: #fef3c7;
    --error-red: #dc2626;
    --error-red-light: #fee2e2;
    --info-blue: #3b82f6;
    --info-blue-light: #dbeafe;

    /* Surface & Background */
    --surface-white: #ffffff;
    --surface-elevated: rgba(255, 255, 255, 0.95);
    --surface-overlay: rgba(255, 255, 255, 0.85);

    /* Typography Scale (Major Third - 1.250) */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;    /* 60px - NEW */
    --text-hero: 4rem;       /* 64px - NEW for hero titles */
    --text-order-number: 3rem;  /* 48px - NEW for order numbers */
    --text-progress: 2.25rem;   /* 36px - NEW for progress percentage */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* Spacing Scale (8px grid) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Elevation & Shadow System */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Interactive Shadows - Red Brand Glow */
    --shadow-red-sm: 0 4px 12px rgba(225, 17, 19, 0.15);
    --shadow-red-md: 0 8px 20px rgba(225, 17, 19, 0.25);
    --shadow-red-lg: 0 12px 28px rgba(225, 17, 19, 0.35);

    /* NEW: Blue Glow Shadows */
    --shadow-blue-sm: 0 4px 12px rgba(59, 130, 246, 0.15);
    --shadow-blue-md: 0 8px 20px rgba(59, 130, 246, 0.25);
    --shadow-blue-active: 0 0 24px rgba(59, 130, 246, 0.4);

    /* Inner Shadows */
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Border Radius System */
    --radius-sm: 6px;
    --radius-base: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Font Family */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Legacy compatibility (keep for smooth transition) */
    --accent-red: #e11113;
    --accent-red-dark: #c81e1e;
    --success: #10b981;
    --warning: #f59e0b;
    --light: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: rgba(255, 255, 255, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --spacing-small: 1rem;
    --spacing-medium: 1.5rem;
    --spacing-large: 2rem;
    --font-size-base: 1rem;
    --font-size-heading: 1.75rem;
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

/* ========== 2. GLOBAL & BODY STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--slate-100);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin: 0;
}

/* ========== 3. MAIN CONTAINER & LAYOUT ========== */
.tracking-container {
    width: 100%;
    max-width: 1400px;
    background: var(--surface-white);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.brand-section {
    position: relative;
    background: linear-gradient(155deg,
        var(--charcoal-900) 0%,
        var(--charcoal-800) 40%,
        var(--charcoal-700) 100%
    );
    color: var(--surface-white);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    overflow: hidden;
}

/* Subtle red accent overlay */
.brand-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(
        ellipse at top right,
        rgba(225, 17, 19, 0.15) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

/* Subtle woodgrain texture overlay */
.brand-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.02) 2px,
        rgba(255, 255, 255, 0.02) 4px
    );
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}

.brand-section > * {
    position: relative;
    z-index: 2;
}

.tracking-section {
    padding: var(--spacing-large) var(--spacing-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.tracking-wrapper {
    width: 100%;
    max-width: 600px;
}

/* ========== 4. BRAND SECTION ========== */
.brand-section .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: var(--spacing-medium);
}

.logo i {
    font-size: 2.5rem;
    color: var(--accent-red);
}

.logo h1 {
    font-size: 1.5rem;
    font-weight: 600;
}

.brand-content h2 {
    font-size: var(--font-size-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-small);
    margin-top: 2rem;
}

.brand-content p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: var(--spacing-medium);
}

.features {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-sm);
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-red);
    color: var(--slate-100);
    font-weight: var(--font-medium);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.features li:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

/* ========== NEW: HERO SECTION - MODERN IMMERSIVE DESIGN ========== */
.hero-section {
    position: relative;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-teal) 100%);
    padding: var(--space-16) var(--space-6);
    padding-bottom: 2rem;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Subtle pattern overlay for depth */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.02) 10px,
            rgba(255, 255, 255, 0.02) 20px
        );
    opacity: 0.5;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Hero Logo */
.hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.hero-logo img {
    height: 60px;
    width: auto;
    /* Restore original logo colors - no filter */
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Hero Title - DRAMATIC SIZE */
.hero-title {
    font-size: clamp(2.5rem, 8vw, var(--text-hero)); /* 64px on desktop */
    font-weight: var(--font-extrabold);
    color: var(--surface-white);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.95);
    font-weight: var(--font-medium);
    margin: 0;
    margin-top: calc(var(--space-2) * -1);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ========== GLASSMORPHIC SEARCH CARD ========== */
.search-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    margin-top: var(--space-2);
}

.search-card .form-group {
    margin-bottom: var(--space-6);
}

.search-card .form-group label {
    display: block;
    color: var(--surface-white);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
    text-align: left;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.search-card .input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.search-card .input-group i {
    position: absolute;
    left: var(--space-4);
    color: var(--primary-blue);
    font-size: var(--text-lg);
}

.search-card .input-group input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-10) + var(--space-2));
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-base);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    background: rgba(255, 255, 255, 0.9);
    color: var(--charcoal-900);
    transition: all 0.3s ease;
}

.search-card .input-group input::placeholder {
    color: var(--slate-400);
}

.search-card .input-group input:focus {
    outline: none;
    border-color: var(--surface-white);
    background: var(--surface-white);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.search-card .btn-track {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background: var(--primary-red);
    color: var(--surface-white);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-red-sm);
}

.search-card .btn-track:hover {
    background: var(--primary-red-dark);
    box-shadow: var(--shadow-red-md);
    transform: translateY(-2px);
}

.search-card .btn-track:active {
    transform: translateY(0);
}

.search-card .btn-track:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ========== TRUST INDICATORS ==========
.trust-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin-top: var(--space-4);
}

.trust-indicators span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.trust-indicators span i {
    color: var(--success-green);
} */

/* ========== PAGE FOOTER ========== */
.page-footer {
    padding: var(--space-6) var(--space-4);
    background: var(--slate-50);
    text-align: center;
    border-top: 1px solid var(--slate-200);
}

.page-footer .contact-support {
    margin-bottom: var(--space-4);
}

.page-footer .contact-support p {
    font-size: var(--text-base);
    color: var(--charcoal-700);
}

.page-footer .contact-support a {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: var(--font-semibold);
    transition: color 0.3s ease;
}

.page-footer .contact-support a:hover {
    color: var(--primary-red-dark);
    text-decoration: underline;
}

.page-footer .info-message {
    display: flex;
    align-items: flex-start;          /* better for multi-line text */
    gap: var(--space-3);

    max-width: 610px;
    margin: 0 auto var(--space-4);    /* center */

    padding: var(--space-4);
    background: var(--info-blue-light);
    border-radius: var(--radius-base);

    text-align: left;                 /* avoid centered paragraphs */
}

.page-footer .info-message i {
    color: var(--info-blue);
    font-size: var(--text-lg);
}

.page-footer .info-message p {
    font-size: var(--text-sm);
    color: var(--charcoal-700);
    margin: 0;
}

.page-footer .copyright {
    font-size: var(--text-sm);
    color: var(--slate-500);
    margin: 0;
}

.features li i {
    color: var(--success-green);
    font-size: 1.25rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}

.brand-footer {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: var(--spacing-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-small);
}

.logo img:first-child {
    height: 50px;
    width: auto;
}

.logo img:last-child {
    max-width: 250px;
    height: auto;
}

/* ========== 5. TRACKING SECTION ========== */
.tracking-section h2 {
    font-size: var(--font-size-heading);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-small);
}

.tracking-section > .tracking-wrapper > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-large);
}

.form-group {
    margin-bottom: var(--spacing-medium);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.input-group {
    position: relative;
}

.input-group i {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-400);
    font-size: var(--text-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.input-group input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    border: 2px solid var(--slate-300);
    border-radius: var(--radius-md);
    background: var(--surface-white);
    box-shadow: var(--shadow-inner), var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: var(--shadow-inner), 0 0 0 4px rgba(225, 17, 19, 0.1), var(--shadow-red-md);
    transform: translateY(-2px);
}

.input-group:focus-within i {
    color: var(--primary-red);
    transform: translateY(-50%) scale(1.1);
}

/* Recent Orders Section (inside search card) */
.search-card .recent-orders {
    margin-bottom: var(--space-6);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-base);
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: fadeIn 0.3s ease-out;
}

.search-card .recent-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--charcoal-900);
    font-weight: var(--font-bold);
}

.search-card .recent-orders-header i {
    margin-right: var(--space-2);
}

.search-card .clear-history {
    background: transparent;
    border: none;
    color: var(--charcoal-600);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-card .clear-history:hover {
    background-color: rgba(220, 38, 38, 0.15);
    color: var(--primary-red-dark);
}

.recent-orders-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.search-card .order-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-white);
    border: 2px solid var(--primary-blue-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Shimmer effect overlay */
.search-card .order-chip::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transition: left 0.5s ease;
}

.search-card .order-chip:hover::before {
    left: 100%;
}

.search-card .order-chip:hover {
    border-color: var(--primary-red);
    background-color: var(--surface-white);
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-red-sm);
}

.search-card .order-chip:active {
    transform: translateY(0) scale(1);
}

.chip-number {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chip-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.btn-track {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 50%, var(--primary-red-darker) 100%);
    color: var(--surface-white);
    border: none;
    padding: var(--space-5) var(--space-6);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-red-md);
    overflow: hidden;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animated gradient shimmer */
.btn-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-track:hover::before {
    transform: translateX(100%);
}

.btn-track:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-red-lg);
}

.btn-track:active {
    transform: translateY(0);
    box-shadow: var(--shadow-red-sm);
}

.error-message {
    display: none;
    margin: var(--space-6) auto;
    max-width: 700px;
    padding: var(--space-5);
    color: #991b1b;
    background: linear-gradient(135deg, var(--error-red-light) 0%, #fef2f2 100%);
    border: 2px solid #fecaca;
    border-left: 4px solid var(--error-red);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    align-items: center;
    gap: var(--space-3);
    font-weight: var(--font-medium);
    animation: shakeAndSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes shakeAndSlideIn {
    0% { opacity: 0; transform: translateX(-20px); }
    25% { transform: translateX(10px); }
    50% { transform: translateX(-5px); }
    75% { transform: translateX(3px); }
    100% { opacity: 1; transform: translateX(0); }
}

.error-message i {
    font-size: var(--text-xl);
}

/* ========== 6. RESULTS - MODERN CARD-BASED LAYOUT ========== */
.results-wrapper {
    display: none;
    margin: var(--space-8) auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 900px;
    padding: 0 var(--space-4) var(--space-6);
    animation: slideUpFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.results-wrapper.show {
    display: block;
}

/* ========== CARD SYSTEM ========== */
.card {
    background: var(--surface-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--charcoal-900);
    margin: 0 0 var(--space-6) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.card-title i {
    color: var(--primary-blue);
}

/* ========== CARD 1: ORDER SUMMARY ========== */
.card-summary {
    background: linear-gradient(135deg, var(--surface-white) 0%, var(--accent-blue-bg) 100%);
}

.card-summary .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.order-number-section {
    flex: 1;
}

.order-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-2);
}

.order-number-large {
    font-size: clamp(1rem, 6vw, var(--text-order-number)); /* 48px on desktop */
    font-weight: var(--font-extrabold);
    color: var(--primary-blue);
    margin: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ========== PROGRESS BAR ========== */
.progress-container {
    margin-bottom: var(--space-6);
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: var(--slate-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--space-3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue-light) 0%, var(--secondary-teal) 100%);
    border-radius: var(--radius-full);
    transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: var(--surface-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.progress-text {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--charcoal-900);
    text-align: center;
}

/* ========== SUMMARY DETAILS ========== */
.summary-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
    padding-top: var(--space-6);
    border-top: 1px solid var(--slate-200);
}

.summary-details .detail-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.summary-details .detail-item i {
    font-size: var(--text-xl);
    color: var(--primary-blue);
    margin-top: var(--space-1);
}

.summary-details .detail-item label {
    display: block;
    font-size: var(--text-sm);
    color: var(--slate-500);
    margin-bottom: var(--space-1);
    font-weight: var(--font-medium);
}

.summary-details .detail-item strong {
    display: block;
    font-size: var(--text-base);
    color: var(--charcoal-900);
    font-weight: var(--font-semibold);
}

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--charcoal-900) 0%, var(--charcoal-800) 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

/* Animated background pattern */
.result-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px);
    animation: slidePattern 20s linear infinite;
    z-index: 0;
}

@keyframes slidePattern {
    0% { transform: translateX(0); }
    100% { transform: translateX(20px); }
}

.result-header > * {
    position: relative;
    z-index: 1;
}

.result-header .header-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
    color: white;
    display: grid;
    place-items: center;
    font-size: var(--text-2xl);
    box-shadow: 0 4px 12px rgba(225, 17, 19, 0.4);
    flex-shrink: 0;
}

.result-header h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.result-header p {
    color: var(--slate-300);
    font-size: var(--text-sm);
}

.order-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-large);
    padding: var(--space-6);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.info-item i {
    font-size: 1.5rem; /* Larger icons for visibility */
    color: var(--primary-light);
}

.info-item h4 {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item p {
    font-size: 1rem;
    font-weight: 600;
}

.status-container {
    margin-top: var(--spacing-medium);
    padding: 0 var(--space-6) var(--space-6);
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-medium);
}

.status-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    border-radius: var(--radius-full);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    max-width: fit-content;
}

/* Static indicator dot (no pulse animation) */
.status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 12px currentColor;
    flex-shrink: 0;
}
/* Status badge colors - enhanced with new design system */

.status-badge.status-PRZYJETE {
    background: linear-gradient(135deg, var(--slate-100) 0%, var(--slate-200) 100%);
    color: var(--charcoal-700);
    border-color: var(--slate-300);
}

.status-badge.status-NA_SKLADANCE,
.status-badge.status-KOMPLETOWANE {
    background: linear-gradient(135deg, var(--status-assembling) 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: #93c5fd;
}

.status-badge.status-W_KOLEJCE_DO_CIECIA {
    background: linear-gradient(135deg, var(--status-cutting) 0%, #3b82f6 100%);
    color: white;
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.status-badge.status-POCIETE {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.status-badge.status-OKLEJONE {
    background: linear-gradient(135deg, var(--status-edging) 0%, #a78bfa 100%);
    color: white;
    border-color: #c4b5fd;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.status-badge.status-CNC {
    background: linear-gradient(135deg, var(--status-cnc) 0%, #818cf8 100%);
    color: white;
    border-color: #a5b4fc;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.status-badge.status-GOTOWE {
    background: linear-gradient(135deg, var(--status-ready) 0%, #059669 100%);
    color: white;
    border-color: #34d399;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.status-badge.status-ODEBRANE {
    background: linear-gradient(135deg, var(--status-collected) 0%, var(--slate-500) 100%);
    color: white;
    border-color: var(--slate-400);
}

/* ========== MODERN VERTICAL TIMELINE ========== */
.status-timeline {
    position: relative;
    padding: var(--space-6) 0;
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* ========== TIMELINE ITEMS ========== */
.timeline-item {
    position: relative;
    display: flex;
    gap: var(--space-5);
    padding-bottom: var(--space-8);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* Connecting line between items */
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 23px; /* Center of 48px marker */
    top: 48px;
    bottom: 0;
    width: 3px;
    background: var(--slate-200);
    border-radius: var(--radius-full);
}

/* ========== TIMELINE MARKERS ========== */
.timeline-marker {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: var(--text-xl);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Pending state (default) */
.timeline-item.pending .timeline-marker {
    background: var(--slate-100);
    color: var(--slate-400);
    border: 3px solid var(--slate-200);
}

/* Completed state - Green gradient */
.timeline-item.completed .timeline-marker {
    background: linear-gradient(135deg, var(--status-completed) 0%, #059669 100%);
    color: var(--surface-white);
    border: 3px solid #34d399;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.timeline-item.completed:not(:last-child)::before {
    background: linear-gradient(180deg, var(--status-completed) 0%, var(--slate-200) 100%);
}

/* Active state - Blue gradient with pulse */
.timeline-item.active .timeline-marker {
    background: linear-gradient(135deg, var(--status-active) 0%, #2563EB 100%);
    color: var(--surface-white);
    border: 3px solid #60A5FA;
    box-shadow: var(--shadow-blue-active);
    animation: markerPulse 2s ease infinite;
}

@keyframes markerPulse {
    0%, 100% {
        box-shadow: 0 0 24px rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 32px rgba(59, 130, 246, 0.6), 0 0 0 8px rgba(59, 130, 246, 0.1);
    }
}

/* Timeline item entrance animation */
@keyframes slideInTimeline {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========== TIMELINE CONTENT ========== */
.timeline-content {
    flex: 1;
    padding-top: var(--space-1);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
    gap: var(--space-3);
}

.timeline-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--charcoal-900);
    margin: 0;
}

.timeline-time {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--slate-500);
    white-space: nowrap;
}

.timeline-description {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--slate-600);
    margin: 0;
}

/* Enhanced styles for active item */
.timeline-item.active .timeline-title {
    color: var(--status-active);
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
}

.timeline-item.active .timeline-time {
    color: var(--status-active);
    font-weight: var(--font-semibold);
}

.timeline-item.active .timeline-description {
    color: var(--charcoal-700);
    font-weight: var(--font-medium);
}

/* Enhanced styles for completed items */
.timeline-item.completed .timeline-title {
    color: var(--charcoal-800);
}

.timeline-item.completed .timeline-time {
    color: var(--status-completed);
}

/* ========== STATUS DESCRIPTION SECTION ========== */
.current-status-info {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--accent-blue-bg) 0%, var(--surface-white) 100%);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-blue);
    text-align: center;
    font-size: var(--text-base);
    color: var(--charcoal-700);
    line-height: 1.6;
}

.current-status-info strong {
    color: var(--charcoal-900);
    font-weight: var(--font-bold);
}

/* ========== 7. CONTACT & FOOTER ========== */
.contact-support {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.contact-support a {
    color: var(--accent-red);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.contact-support a:hover {
    text-decoration: underline;
    color: var(--accent-red-dark);
}

/* ========== 8. COOKIE BANNER ========== */
#cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(20, 26, 36, 0.95);
    backdrop-filter: blur(8px);
    color: var(--light);
    padding: var(--spacing-small);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    text-align: center;
}

#cookie-banner p {
    margin: 0;
    font-size: 0.9rem;
}

#cookie-banner button {
    background-color: var(--accent-red);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
}

#cookie-banner button:hover {
    background-color: var(--accent-red-dark);
}

/* ========== 9. INFO MESSAGE STYLE ========== */
.info-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: var(--spacing-large);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    background-color: #eef2ff; /* Softer blue background */
    color: #3730a3;
    border: 1px solid #a5b4fc;
}

/* ========== 10. PWA INSTALL PROMPT ========== */
.install-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 500px;
    width: calc(100% - 40px);
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.install-prompt-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.install-prompt-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.install-prompt-text {
    flex-grow: 1;
}

.install-prompt-text h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.install-prompt-text p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.install-prompt-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-install {
    background: linear-gradient(to right, var(--accent-red), var(--accent-red-dark));
    color: white;
    border: none;
    padding: 0.7rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-install:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(225, 17, 19, 0.3);
}

.btn-dismiss {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.btn-dismiss:hover {
    background-color: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.info-message i {
    margin-top: 0.2rem;
    font-size: 1.2rem;
}

.info-message p {
    margin: 0;
    line-height: 1.5;
}

/* ========== 10. RESPONSIVE DESIGN (LARGER SCREENS) ========== */
@media (min-width: 1024px) {
    /* Keep single-column layout - no side-by-side */
    body {
        padding: 0;
    }

    .tracking-container {
        flex-direction: column; /* Keep single-column immersive layout */
        max-width: 100%;
        border-radius: 0;
    }

    /* Hero section - full width on desktop */
    .hero-section {
        min-height: 70vh;
    }

    /* Results wrapper - centered with max width */
    .results-wrapper {
        max-width: 1000px;
        padding: 0 var(--space-8) var(--space-12);
    }

    /* Summary details grid - 3 columns on desktop */
    .summary-details {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Cookie banner - horizontal layout */
    #cookie-banner {
        flex-direction: row;
        justify-content: center;
        padding: 1rem 2rem;
    }

    #cookie-banner p {
        text-align: left;
    }

    /* Page footer - wider max width */
    .page-footer {
        padding: var(--space-8) var(--space-6);
    }
}

/* Make cookie banner smaller on mobile */
@media (max-width: 768px) {
  #cookie-banner {
    padding: 0.5rem 1rem;       /* reduce padding */
    font-size: 0.8rem;          /* slightly smaller text */
    gap: 0.5rem;                /* less spacing between elements */
  }

  #cookie-banner button {
    padding: 0.5rem 1rem;       /* smaller button */
    font-size: 0.8rem;
  }

  /* Adjust status badge for mobile */
  .status-badge {
    font-size: 0.7rem;
    padding: 0.5rem 0.9rem;
    gap: 0.5rem;
    max-width: 100%;
  }

  .status-badge::before {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
  }

  /* Compact install prompt on mobile */
  .install-prompt {
    bottom: 10px;
    width: calc(100% - 20px);
  }

  .install-prompt-content {
    padding: 0.75rem;
  }

  .install-prompt-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .install-prompt-text h3 {
    font-size: 0.9rem;
  }

  .install-prompt-text p {
    font-size: 0.75rem;
  }

  .btn-install {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .btn-dismiss {
    width: 36px;
    height: 36px;
  }

  .ios-install-content {
    max-width: calc(100% - 20px);
    margin: 20px 10px;
  }

  .ios-instructions li {
    padding: 0.75rem;
  }

  .instruction-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .update-toast {
    bottom: 10px;
    max-width: calc(100% - 20px);
  }
}

/* ========== MOBILE TOUCH & ACCESSIBILITY ========== */
/* Prevent double-tap zoom */
button,
.btn-track,
.order-chip,
input {
    touch-action: manipulation;
}

/* Better tap highlight */
* {
    -webkit-tap-highlight-color: rgba(225, 17, 19, 0.1);
}

/* Smooth touch scrolling */
.tracking-container,
.result-container {
    -webkit-overflow-scrolling: touch;
}

/* Keyboard navigation focus */
:focus-visible {
    outline: 3px solid var(--primary-red);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .status-badge,
    .order-chip {
        border-width: 3px;
    }
}

/* GPU acceleration for animations */
.timeline-step,
.status-badge,
.info-item,
.btn-track,
.order-chip {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Will-change for animated elements */
.timeline-progress,
.btn-track::before,
.order-chip::before {
    will-change: transform;
}

/* ========== LOADING SKELETON STATES ========== */
/* Base skeleton shimmer animation */
.skeleton {
    background: linear-gradient(90deg, var(--slate-200) 0%, var(--slate-100) 50%, var(--slate-200) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

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

/* Loading skeleton state for result container */
.loading-skeleton .result-header {
    opacity: 0.6;
}

.loading-skeleton .order-info .info-item p {
    height: 24px;
    width: 80%;
    background: linear-gradient(90deg, var(--slate-200) 0%, var(--slate-100) 50%, var(--slate-200) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent;
    overflow: hidden;
}

.loading-skeleton .timeline-step .step-icon {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Smooth transition when skeleton removed */
.result-container:not(.loading-skeleton) {
    animation: contentFadeIn 0.4s ease-in-out;
}

@keyframes contentFadeIn {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* ========== iOS INSTALL MODAL STYLES ========== */
.ios-install-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ios-install-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ios-install-content {
  position: relative;
  background: white;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease-out;
}

.ios-install-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

.ios-install-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.ios-install-header h3 i {
  color: var(--text-secondary);
}

.ios-dismiss-btn {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition);
}

.ios-dismiss-btn:hover {
  background: #f3f4f6;
  color: var(--text-primary);
}

.ios-install-body {
  padding: 1.5rem;
}

.ios-install-body > p {
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.ios-instructions {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.ios-instructions li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: #f9fafb;
  border-radius: 12px;
  border-left: 4px solid var(--accent-red);
  transition: var(--transition);
}

.ios-instructions li:hover {
  background: #f3f4f6;
  transform: translateX(4px);
}

.instruction-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.instruction-text {
  flex-grow: 1;
}

.instruction-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.instruction-text span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ios-benefits {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.ios-benefits p {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
}

.ios-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ios-benefits li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.ios-benefits i {
  color: var(--accent-red);
  font-size: 1rem;
}

.ios-install-footer {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  justify-content: center;
}

.btn-ios-got-it {
  background: linear-gradient(to right, var(--accent-red), var(--accent-red-dark));
  color: white;
  border: none;
  padding: 0.9rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(225, 17, 19, 0.3);
}

.btn-ios-got-it:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(225, 17, 19, 0.4);
}

.btn-ios-got-it:active {
  transform: translateY(0);
}

/* ========== UPDATE TOAST STYLES ========== */
.update-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  max-width: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 10001;
  animation: slideInRight 0.4s ease-out;
  border-left: 4px solid var(--accent-red);
}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.toast-content i {
  color: var(--accent-red);
  font-size: 1.5rem;
  animation: rotate 2s linear infinite;
}

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

.toast-content span {
  flex-grow: 1;
  font-weight: 600;
  color: var(--text-primary);
}

.btn-reload {
  background: var(--accent-red);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-reload:hover {
  background: var(--accent-red-dark);
  transform: scale(1.05);
}

.btn-reload:active {
  transform: scale(0.98);
}

/* =========================================================================
   Phone-login (SMS OTP) — new components for the multi-order view
   All styles scoped to new class names so the single-order flow is unchanged.
   ========================================================================= */

/* --- Announcement banner ----------------------------------------------- */
.announcement-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.95), rgba(59, 130, 246, 0.85));
    color: #fff;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.35);
    margin: 0 auto 1.25rem;
    max-width: 560px;
    animation: announcementSlide 0.6s ease-out;
}
@keyframes announcementSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.announcement-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.announcement-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.4;
}
.announcement-text strong {
    font-weight: 700;
}
.announcement-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.announcement-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* --- "albo" divider ---------------------------------------------------- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem auto;
    max-width: 560px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}
.auth-divider span {
    padding: 0 0.4rem;
}

/* --- Phone-login card -------------------------------------------------- */
.phone-search-card {
    border-left: 3px solid var(--primary-blue-light);
}
.phone-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1rem;
    text-align: center;
    letter-spacing: 0.01em;
}
/* Helper text sits on the glassmorphic card over the dark hero — slate-500
   is unreadable there. Use white with a soft opacity to match the rest of
   the card's text hierarchy. */
.phone-helper {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    margin: 0.4rem 0 0;
    line-height: 1.4;
}
.phone-helper-office {
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.88);
}
.phone-helper-office strong {
    color: #fca5a5;  /* light red — readable on dark background */
}
/* Higher specificity than `.search-card .btn-track` above, so the blue
   gradient wins when both .btn-track and .btn-phone are applied. */
.search-card .btn-track.btn-phone {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
}
.search-card .btn-track.btn-phone:hover {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}

/* --- OTP step card ----------------------------------------------------- */
.otp-step-card {
    border-left: 3px solid var(--primary-blue-light);
    animation: announcementSlide 0.4s ease-out;
}
.otp-confirm {
    text-align: center;
    font-size: 0.95rem;
    color: #4b5563;
    margin: 0 0 1.25rem;
}
.otp-confirm strong {
    color: #111827;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.otp-input-group {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin: 0 auto 1.25rem;
    max-width: 340px;
}
.otp-digit {
    width: 100%;
    aspect-ratio: 1 / 1;
    font-size: 1.65rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -moz-appearance: textfield;
}
.otp-digit::-webkit-outer-spin-button,
.otp-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.otp-digit:focus {
    outline: none;
    border-color: var(--primary-blue-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.otp-digit:not(:placeholder-shown) {
    background: rgba(59, 130, 246, 0.04);
}
.otp-error {
    background: #fee2e2;
    color: #991b1b;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    margin: 0 0 1rem;
    text-align: center;
    font-weight: 500;
}
.otp-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-size: 0.88rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.link-btn {
    background: transparent;
    border: none;
    color: var(--primary-blue-light);
    cursor: pointer;
    font-weight: 600;
    font-size: inherit;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.link-btn:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-blue);
}
.link-btn:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}
.link-btn.link-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

/* --- My orders view ---------------------------------------------------- */
.my-orders-section {
    padding: 1.5rem 1rem 2rem;
    max-width: 920px;
    margin: 0 auto;
}
.my-orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.my-orders-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.order-count-badge {
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 500;
}
.archive-count-badge {
    font-size: 0.85rem;
    color: #6b7280;
    margin-left: 0.35rem;
    font-weight: 500;
}
.my-orders-actions {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-wrap: wrap;
}
.my-orders-list,
.my-orders-archive {
    display: grid;
    gap: 0.75rem;
}
.my-orders-loading {
    padding: 2rem 1rem;
    text-align: center;
    color: #6b7280;
}
.my-orders-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}
.my-orders-archive-wrap {
    margin-top: 1.25rem;
}
.btn-show-archive {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #4b5563;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.btn-show-archive:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* --- Compact order card ------------------------------------------------ */
.order-card-compact {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.order-card-compact:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.08);
    transform: translateY(-1px);
}
.order-card-compact-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.occ-num {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.occ-active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    flex-shrink: 0;
}
.occ-order-number {
    font-weight: 700;
    font-size: 1.1rem;
    color: #111827;
    letter-spacing: 0.02em;
}
.order-card-compact .status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
}
.order-card-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    font-size: 0.82rem;
    color: #6b7280;
}
.order-card-compact-meta i {
    margin-right: 0.25rem;
    color: #94a3b8;
}

/* Archived (Odebrane) cards are visibly muted */
.my-orders-archive .order-card-compact {
    opacity: 0.75;
    background: #fafafa;
}
.my-orders-archive .occ-active-dot {
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

/* --- Upsell banner (on single-order result) ---------------------------- */
.upsell-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(30, 58, 138, 0.05));
    border: 1px solid rgba(30, 58, 138, 0.2);
    border-radius: 12px;
    margin-top: 1rem;
}
.upsell-banner > i {
    color: #f59e0b;
    font-size: 1.25rem;
    margin-top: 2px;
}
.upsell-text {
    flex: 1;
    font-size: 0.92rem;
    color: #374151;
}
.upsell-text strong {
    display: block;
    color: #111827;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* --- Devices page ------------------------------------------------------ */
.devices-container {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
.hero-section-compact {
    min-height: auto;
    padding: 2.5rem 1rem 1.5rem;
}
.hero-section-compact .hero-content {
    gap: 0.5rem;
}
.link-back {
    margin-top: 0.5rem;
    color: #fff;
    display: inline-flex;
    gap: 0.35rem;
}
.link-back:hover {
    background: rgba(255, 255, 255, 0.15);
}
.devices-section {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
}
.devices-list {
    display: grid;
    gap: 0.85rem;
}
.device-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    transition: border-color 0.15s ease;
}
.device-card-current {
    border-color: var(--primary-blue-light);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), #fff);
}
.device-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.device-info {
    flex: 1;
    min-width: 0;
}
.device-name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.device-name i {
    color: var(--primary-blue-light);
}
.device-ua {
    word-break: break-word;
    max-width: 100%;
}
.device-current-badge {
    background: #d1fae5;
    color: #065f46;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.device-meta {
    font-size: 0.83rem;
    color: #6b7280;
    line-height: 1.5;
}
.device-expiry {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-top: 0.2rem;
}
.btn-revoke-device {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #374151;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.btn-revoke-device:hover:not(:disabled) {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}
.btn-revoke-device:disabled {
    opacity: 0.6;
    cursor: wait;
}
.btn-revoke-all {
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    background: transparent;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s ease;
}
.btn-revoke-all:hover:not(:disabled) {
    background: #fee2e2;
}
.devices-footer-note {
    margin-top: 1.5rem;
    padding: 1rem 1.15rem;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: #4b5563;
    font-size: 0.85rem;
}
.devices-footer-note i {
    color: #94a3b8;
    margin-top: 2px;
}
.devices-footer-note p {
    margin: 0;
    line-height: 1.5;
}
.devices-empty-card {
    max-width: 480px;
    margin: 2rem auto;
    text-align: center;
}
.devices-empty-card h3 {
    margin: 0.5rem 0;
    color: #111827;
}
.devices-empty-card p {
    color: #4b5563;
    margin-bottom: 1.25rem;
}
.devices-empty-icon {
    font-size: 2.5rem;
    color: #94a3b8;
}

/* --- Mobile tweaks ----------------------------------------------------- */
@media (max-width: 568px) {
    .announcement-banner {
        font-size: 0.88rem;
        padding: 0.75rem 0.9rem;
    }
    .otp-input-group {
        gap: 0.35rem;
        max-width: 300px;
    }
    .otp-digit {
        font-size: 1.4rem;
    }
    .my-orders-title {
        font-size: 1.25rem;
    }
    .device-head {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-revoke-device {
        width: 100%;
    }
    /* The hero title is dramatic on desktop but eats the entire mobile
       viewport, pushing the primary CTA (phone card) below the fold.
       Scale down so at least part of the card is visible on first paint. */
    .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }
    .hero-subtitle {
        font-size: 0.95rem;
    }
}

/* --- Compact hero when the user is logged in (my-orders view) ----------
   The giant "Śledź Swoje Zamówienie" hero is marketing copy for new
   visitors. A returning user landing on their orders list doesn't need
   the whole pitch again — collapse to a compact header so the orders
   list is closer to the top on mobile. Toggled by adding
   .hero-section-logged-in via script.js. */
.hero-section.hero-section-logged-in {
    min-height: auto;
    padding: 1.5rem 1rem 1rem;
}
.hero-section.hero-section-logged-in .hero-title,
.hero-section.hero-section-logged-in .hero-subtitle {
    display: none;
}
.hero-section.hero-section-logged-in .hero-logo img {
    max-height: 56px;
}
@media (max-width: 568px) {
    .hero-section.hero-section-logged-in {
        padding: 1rem 1rem 0.5rem;
    }
    .hero-section.hero-section-logged-in .hero-logo img {
        max-height: 44px;
    }
}

/* ============================================================= */
/* Dashboard enrichment: push toggle, ready group, card expander */
/* ============================================================= */

/* --- Push toggle button states --- */
.push-toggle.push-on,
.push-toggle.push-on i { color: #16a34a; }
.push-toggle.push-blocked { color: #b45309; opacity: 0.9; }

/* --- "Gotowe do odbioru" group --- */
.ready-group {
    border: 1px solid #bbf7d0;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 65%);
    border-radius: 14px;
    padding: 0.85rem;
    margin-bottom: 1rem;
}
.ready-group-head {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 700; color: #15803d; font-size: 1.02rem;
    margin-bottom: 0.25rem;
}
.ready-pickup {
    display: flex; align-items: center; gap: 0.4rem;
    color: #166534; font-size: 0.88rem; margin: 0 0 0.7rem;
}
.ready-group .order-card-compact { background: #fff; }

/* --- Card head clickable + chevron --- */
.order-card-compact-head { cursor: pointer; }
.occ-chevron {
    margin-left: 0.5rem; flex-shrink: 0;
    color: #94a3b8; font-size: 0.8rem;
    transition: transform 0.2s ease;
}
.order-card-compact.expanded .occ-chevron { transform: rotate(180deg); }

/* --- Expander (timeline + cut-list) --- */
.occ-expander {
    margin-top: 0.7rem; padding-top: 0.7rem;
    border-top: 1px dashed #e2e8f0;
}
/* Compact the reused single-order timeline inside a card */
.occ-timeline .timeline-item { padding-bottom: 0.9rem; gap: 0.7rem; }
.occ-timeline .timeline-item:not(:last-child)::before { left: 15px; top: 32px; }
.occ-timeline .timeline-marker { width: 32px; height: 32px; font-size: 0.85rem; }
.occ-timeline .timeline-title { font-size: 0.86rem; }

.occ-cutlist {
    background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px;
    padding: 0.5rem 0.7rem; margin-top: 0.5rem;
}
.occ-cutlist-label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 0.35rem;
}
.occ-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.2rem 0; font-size: 0.9rem;
}
.occ-item-color { font-weight: 600; color: #1e293b; }
.occ-item-thick {
    font-size: 0.72rem; color: #64748b;
    background: #eef2f7; border-radius: 5px; padding: 0 6px;
}
.occ-item-qty { margin-left: auto; font-weight: 600; color: #2563eb; white-space: nowrap; }

/* ================================================================ */
/* Dashboard redesign — clean, light & branded (logged-in view)     */
/* Goal: answer "what can I pick up / how far along is everything"   */
/* at a glance. Calm semantic colour: green=ready, blue=in progress, */
/* grey=done; Marecki red stays reserved for primary brand actions.  */
/* ================================================================ */

/* Header action links → tidy pills */
.my-orders-actions .link-inline {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.42rem 0.72rem; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.my-orders-actions .link-inline:hover { background: #e2e8f0; }
.my-orders-actions .push-toggle.push-on { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.my-orders-actions .push-toggle.push-on i { color: #16a34a; }
.my-orders-actions .push-toggle.push-blocked { background: #fef3c7; border-color: #fde68a; color: #b45309; }

/* Sections spaced apart; cards within a section sit closer together */
.my-orders-list { display: flex; flex-direction: column; gap: 1.5rem; }
.dash-section { display: flex; flex-direction: column; gap: 0.6rem; }
.dash-section-body { display: grid; gap: 0.6rem; }
.dash-section-title {
    display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.1rem;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #94a3b8;
}
.dash-section-ready .dash-section-title { color: #16a34a; }

/* Collapsible section header (button reset + chevron). Lets a carpenter with
   many ready orders fold the list away; the choice persists via localStorage. */
.dash-section-toggle {
    justify-content: space-between;
    width: 100%; padding: 0.3rem 0;
    background: none; border: 0; cursor: pointer;
    font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.dash-section-toggle .dash-section-label { display: inline-flex; align-items: center; gap: 0.45rem; }
.dash-section-count { font-weight: 700; opacity: 0.85; }
.dash-section-chevron {
    font-size: 0.85rem; transition: transform 0.2s ease; transform: rotate(180deg);
}
.dash-section.collapsed .dash-section-chevron { transform: rotate(0deg); }
.dash-section.collapsed .dash-section-body { display: none; }

/* --- Status-summary hero ---------------------------------------- */
.dash-summary { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.dash-summary:empty { display: none; }
.dash-stat {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.9rem; border-radius: 12px;
    border: 1px solid #e5e7eb; background: #fff;
}
.dash-stat-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.dash-stat-body { flex: 1; min-width: 0; }
.dash-stat-num {
    font-size: 1.1rem; font-weight: 800; color: #0f172a;
    line-height: 1.2; letter-spacing: -0.01em;
}
.dash-stat-sub { font-size: 0.8rem; color: #64748b; margin-top: 0.1rem; }

.dash-stat-ready { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 80%); }
.dash-stat-ready .dash-stat-icon { background: #dcfce7; color: #16a34a; }
.dash-stat-ready .dash-stat-num { color: #14532d; }
.dash-stat-progress .dash-stat-icon { background: #e0f2fe; color: #0284c7; }

/* --- Cards: colour-coded left edge, calm surface ---------------- */
.order-card-compact {
    position: relative; overflow: hidden;
    border-radius: 14px; padding: 0.9rem 1rem 0.9rem 1.15rem;
}
.order-card-compact::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #cbd5e1;
}
.order-card-compact.tone-ready::before { background: #16a34a; }
.order-card-compact.tone-progress::before { background: #0ea5e9; }
.order-card-compact.tone-done::before { background: #cbd5e1; }
.order-card-compact:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}
.occ-order-number { font-weight: 800; font-size: 1.05rem; color: #0f172a; letter-spacing: 0.01em; }

/* Soft, calm dashboard badges (override the loud single-order gradients) */
.order-card-compact .status-badge {
    text-transform: none; letter-spacing: 0; font-weight: 700;
    font-size: 0.74rem; padding: 0.22rem 0.62rem; border: none; box-shadow: none;
    background: #e0f2fe; color: #075985;
}
.order-card-compact .status-badge::before { display: none; }
.order-card-compact .status-badge.status-GOTOWE { background: #dcfce7; color: #15803d; }
.order-card-compact .status-badge.status-ODEBRANE { background: #f1f5f9; color: #64748b; }

/* --- Per-card mini progress (no tap needed) --------------------- */
.occ-progress { margin: 0.15rem 0 0.55rem; }
.occ-progress-track { height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.occ-progress-track span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}
.occ-progress-label { margin-top: 0.32rem; font-size: 0.78rem; font-weight: 600; color: #0369a1; }

/* Archived (Odebrane) cards stay muted */
.my-orders-archive .order-card-compact { opacity: 0.8; background: #fafafa; }

/* Head: number left, badge + chevron grouped on the right */
.order-card-compact-head { gap: 0.55rem; margin-bottom: 0.45rem; }
.order-card-compact-head .occ-order-number { margin-right: auto; }
.order-card-compact .occ-chevron { margin-left: 0; }

/* ---- Pull-to-refresh indicator (standalone PWA only) ---- */
.pull-refresh {
    position: fixed; left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    transform: translateX(-50%) translateY(0);
    z-index: 1500; opacity: 0;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
    color: #0ea5e9; font-size: 1rem;
    pointer-events: none;
}
.pull-refresh.ready { color: #16a34a; }
.pull-refresh.spinning i { animation: pr-spin 0.7s linear infinite; }
@keyframes pr-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }