/* ==========================================================
           Track Order — design tokens
           Palette references Japan-blue indigo (shipped from JPN→PH)
           against a warm paper surface. Kept deliberately quiet:
           the stepper + status chips carry the color, not chrome.
           ========================================================== */
        :root{
            --paper:        #FAF9F4;
            --surface:      #FFFFFF;
            --surface-soft: #F3F1EA;
            --border:       #E4E0D3;

            --text-main:    #1C1D22;
            --text-head:    #14151A;
            --text-muted:   #6B6D74;
            --text-dim:     #AFB0B6;

            --accent:       #2B3E70;
            --accent-soft:  #E9ECF6;
            --accent-strong:#1E2C52;

            --success:      #3E7A5C;
            --success-soft: #E7F1EA;

            --warning:      #B0740F;
            --warning-soft: #FAF0DC;

            --danger:       #B3453A;
            --danger-soft:  #F8EAE7;

            --radius-lg: 18px;
            --radius-md: 12px;
            --radius-sm: 8px;
            --radius-pill: 999px;

            --shadow-card: 0 1px 2px rgba(20,21,26,.05), 0 1px 0 rgba(20,21,26,.03);
            --shadow-pop:  0 10px 30px rgba(28,29,34,.09);

                        --font-display: 'Plus Jakarta Sans', sans-serif;
                        --font-body: 'Inter', sans-serif;
        }

        /* [hidden] must always win, regardless of what else targets the element by id/class */
        [hidden]{ display:none !important; }

        *,*::before,*::after{ box-sizing:border-box; }

        body.public-page{
            margin:0;
            background:var(--paper);
            color:var(--text-main);
            font-family:var(--font-body);
            font-size:15.5px;
            line-height:1.5;
            -webkit-font-smoothing:antialiased;
            -webkit-text-size-adjust:100%;
            overflow-x:hidden;
            padding-left:env(safe-area-inset-left);
            padding-right:env(safe-area-inset-right);
        }

        a{ color:inherit; }

        button{ font-family:inherit; }

        .payment-methods-callout{
            max-width:520px;
            margin:18px 0 20px;
            padding:16px 18px;
            border:2px solid var(--accent);
            border-radius:var(--radius-md);
            background:var(--accent-soft);
            color:var(--text-main);
            box-shadow:var(--shadow-card);
        }
        .payment-methods-title{
            display:block;
            margin-bottom:9px;
            color:var(--accent-strong);
            font-family:var(--font-display);
            font-size:.78rem;
            letter-spacing:.1em;
            text-transform:uppercase;
        }
        .payment-methods-list{
            display:grid;
            gap:5px;
            font-size:.88rem;
            line-height:1.45;
            font-weight:700;
        }
        .payment-methods-list span{ display:block; }
        @media (max-width:560px){
            .payment-methods-callout{ padding:14px; }
            .payment-methods-list{ font-size:.8rem; }
        }

        svg{ display:block; }

        ::selection{ background:var(--accent-soft); color:var(--accent-strong); }

        :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

        /* ── Hero (Boutique & Editorial) ─────────────────────── */
        .track-hero{
            position:relative;
            background:
                radial-gradient(100% 120% at 50% -10%, rgba(246, 243, 235, 0.9) 0%, rgba(251, 249, 244, 0.4) 65%, var(--paper) 100%),
                var(--paper);
            border-bottom:1px solid var(--border);
            padding:clamp(44px, 7vw, 76px) 20px clamp(36px, 5vw, 54px);
        }

        .track-hero-content{
            position:relative;
            z-index:1;
            display:flex;
            flex-direction:column;
            align-items:center;
            width:100%;
            max-width:none;
            margin:0 auto;
            text-align:center;
        }

        /* Brand Logo */
        .track-brand-container{
            display:flex;
            justify-content:center;
            align-items:center;
            margin:28px 0 20px;
        }

        .track-brand-link{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            text-decoration:none;
            transition:transform 0.25s ease, opacity 0.2s ease;
        }

        .track-brand-link:hover{
            transform:translateY(-2px);
            opacity:0.92;
        }

        .track-brand-logo{
            display:block;
            height:auto;
            width:clamp(220px, 36vw, 300px);
            max-width:100%;
            object-fit:contain;
        }

        .track-instagram-link{
            order:5;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:7px;
            margin:14px auto 0;
            padding:0;
            border:0;
            background:transparent;
            color:var(--text-muted);
            font-size:.78rem;
            font-weight:600;
            text-decoration:none;
            transition:color .2s ease, transform .2s ease;
        }

        .track-instagram-link:hover{
            transform:translateY(-2px);
                font-family:var(--font-display);
        }

        .track-instagram-link svg{ width:20px; height:20px; flex:0 0 auto; transition:transform .3s ease, color .2s ease; }

        .track-hero-content h1{
            font-family:var(--font-display);
            font-weight:600;
            font-size:clamp(1.85rem, 3.8vw, 2.5rem);
            letter-spacing:-0.02em;
            color:var(--text-head);
            line-height:1.2;
            margin:0 0 10px;
        }

        .track-hero-sub{
            margin:0 auto 28px;
            max-width:440px;
            color:var(--text-muted);
            font-size:1rem;
        }

        .track-search-form{ margin:0 auto; max-width:480px; }

        .track-search-row{
            display:flex;
            align-items:center;
            gap:4px;
            background:var(--surface);
            border:1.5px solid var(--border);
            border-radius:var(--radius-pill);
            padding:6px 6px 6px 18px;
            box-shadow:var(--shadow-card);
            transition:border-color .15s ease, box-shadow .15s ease;
        }

        .track-search-row:focus-within{
            border-color:var(--accent);
            box-shadow:0 0 0 4px var(--accent-soft);
        }

        .track-search-icon{ color:var(--text-dim); flex-shrink:0; }

        .track-search-input{
            flex:1;
            min-width:0;
            border:0;
            background:transparent;
            font-family:var(--font-body);
            font-size:0.9375rem;
            color:var(--text-main);
            padding:10px 6px;
        }

        .track-search-input::placeholder{ color:var(--text-dim); }
        .track-search-input:focus{ outline:none; }

        .track-search-btn{
            flex-shrink:0;
            display:inline-flex;
            align-items:center;
            gap:6px;
            border:0;
            cursor:pointer;
            background:var(--accent);
            color:#fff;
            font-family:var(--font-display);
            font-weight:700;
            font-size:0.875rem;
            padding:12px 22px;
            border-radius:var(--radius-pill);
            transition:background .15s ease, transform .1s ease;
        }

        .track-search-btn:hover{ background:var(--accent-strong); }
        .track-search-btn:active{ transform:scale(.97); }
        .track-search-btn:disabled{ opacity:.7; cursor:progress; }

        .track-search-hints{
            margin:16px 0 0;
            font-size:0.8125rem;
            color:var(--text-dim);
        }

        /* ── Results shell ────────────────────────────────────── */
        .track-results-section{
            max-width:1080px;
            width:100%;
            margin:0 auto;
            padding:28px 24px 80px;
        }

        /* Segmented tab control */
        .track-tabs-wrapper{ margin-bottom:14px; }

        .track-tabs{
            display:inline-flex;
            gap:2px;
            background:var(--surface-soft);
            border:1px solid var(--border);
            padding:4px;
            border-radius:var(--radius-pill);
            width:100%;
        }

        .track-tab{
            flex:1;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:7px;
            border:0;
            background:transparent;
            cursor:pointer;
            font-family:var(--font-display);
            font-weight:600;
            font-size:0.8125rem;
            color:var(--text-muted);
            padding:9px 14px;
            border-radius:var(--radius-pill);
            transition:background .15s ease, color .15s ease;
        }

        .track-tab.active{
            background:var(--surface);
            color:var(--text-head);
            box-shadow:var(--shadow-card);
        }

        .track-tab-count{
            font-size:0.6875rem;
            font-weight:700;
            padding:1px 7px;
            border-radius:var(--radius-pill);
            background:var(--surface-soft);
            color:var(--text-muted);
        }

        .track-tab.active .track-tab-count{
            background:var(--accent-soft);
            color:var(--accent);
        }

        /* Summary bar (id-controlled visibility from JS; styling only here) */
        .track-summary-bar{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:var(--radius-md);
            padding:13px 18px;
            margin-bottom:16px;
        }

        .track-summary-label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--text-muted);
            font-size:0.8125rem;
            font-weight:600;
        }

        .track-summary-value{
            font-family:var(--font-display);
            font-size:1.1875rem;
            font-weight:700;
            color:var(--text-head);
        }

        /* ── Welcome Card (Premium Redesign) ────────────────── */
        .track-welcome-card {
            position: relative;
            overflow: hidden;
            text-align: center;
            padding: 56px 36px 48px;
            background: linear-gradient(145deg, #ffffff 0%, var(--surface) 100%);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: 0 6px 32px rgba(30, 39, 73, 0.07), 0 1px 4px rgba(30, 39, 73, 0.04);
        }

        /* Decorative blurred circles */
        .track-welcome-bg-deco {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }
        .deco-circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.18;
            filter: blur(38px);
        }
        .deco-circle-1 {
            width: 180px; height: 180px;
            background: var(--accent);
            top: -50px; left: -40px;
        }
        .deco-circle-2 {
            width: 140px; height: 140px;
            background: #b08d57;
            bottom: -30px; right: -20px;
        }
        .deco-circle-3 {
            width: 100px; height: 100px;
            background: var(--accent);
            top: 40%; right: 20%;
            opacity: 0.09;
        }

        .track-welcome-inner {
            position: relative;
            z-index: 1;
        }

        .track-welcome-icon-wrap {
            width: 64px;
            height: 64px;
            margin: 0 auto 20px;
            border-radius: 20px;
            background: var(--accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(30, 39, 73, 0.22);
        }

        .track-welcome-title {
            font-family:var(--font-display);
            font-weight: 700;
            font-size: clamp(1.4rem, 3.5vw, 1.85rem);
            color: var(--text-head);
            margin: 0 0 10px;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .track-welcome-sub {
            margin: 0 auto 28px;
            font-size: 0.9375rem;
            max-width: 440px;
            line-height: 1.65;
            color: var(--text-muted);
        }

        /* Divider */
        .track-welcome-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 0 auto 24px;
            max-width: 120px;
        }
        .track-welcome-divider-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, transparent, var(--border), transparent);
        }
        .track-welcome-divider-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.45;
        }

        /* Pills row */
        .track-welcome-pills {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .track-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 14px;
            border-radius: 100px;
            background: var(--surface-soft);
            border: 1px solid var(--border);
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-body);
            letter-spacing: 0.01em;
            transition: background .18s, border-color .18s, transform .15s;
        }
        .track-pill svg {
            width: 13px;
            height: 13px;
            color: var(--accent);
            flex-shrink: 0;
        }
        .track-pill:hover {
            background: var(--surface);
            border-color: var(--accent);
            transform: translateY(-1px);
        }


        /* ── Empty / Error States ────────────────────────────── */
        .track-empty-state {
            text-align: center;
            padding: 48px 28px 44px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            color: var(--text-muted);
        }

        .empty-state-icon-wrap {
            width: 54px;
            height: 54px;
            margin: 0 auto 18px;
            border-radius: 50%;
            background: var(--accent-soft);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 12px rgba(30, 39, 73, 0.08);
            border: 1px solid rgba(43, 62, 112, 0.12);
        }

        .empty-title {
            font-family:var(--font-display);
            font-weight: 600;
            font-size: clamp(1.2rem, 3vw, 1.5rem);
            color: var(--text-head);
            margin: 0 0 8px;
            letter-spacing: -0.015em;
            line-height: 1.25;
        }

        .empty-sub {
            margin: 0 auto;
            font-size: 0.9375rem;
            max-width: 460px;
            line-height: 1.6;
            color: var(--text-muted);
        }

        /* ── Order card ───────────────────────────────────────── */
        #search-results{ display:flex; flex-direction:column; gap:14px; }
        #search-results [data-order-panel]{ display:flex; flex-direction:column; gap:14px; }

        .order-card{
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:var(--radius-lg);
            overflow:hidden;
            box-shadow:var(--shadow-card);
        }

        .order-head{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            padding:12px 18px;
        }

        .order-head-left{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }

        .order-invoice{
            font-family:var(--font-display);
            font-weight:700;
            font-size:0.9375rem;
            color:var(--text-head);
        }

        .order-date{ font-size:0.8125rem; color:var(--text-dim); }

        .order-head-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

        /* Status + payment chips (shared) */
        .item-chip{
            display:inline-flex;
            align-items:center;
            font-family:var(--font-display);
            font-weight:600;
            font-size:0.6875rem;
            letter-spacing:.01em;
            padding:5px 11px;
            border-radius:var(--radius-pill);
            border:1px solid transparent;
            white-space:nowrap;
        }

        .chip-pending    { background:#fef9c3; color:#854d0e; border-color:#fde047; }
        .chip-ready      { background:#dcfce7; color:#166534; border-color:#86efac; }
        .chip-ontheway   { background:#fef9c3; color:#854d0e; border-color:#fde047; }
        .chip-delivered  { background:#dcfce7; color:#166534; border-color:#86efac; }
        .chip-returned   { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
        .chip-cancelled  { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }

        .item-card .chip-pending,
        .invoice-paper .chip-pending{ background:#fef9c3; color:#854d0e; border-color:#fde047; }
        .item-card .chip-ready,
        .item-card .chip-delivered,
        .invoice-paper .chip-ready,
        .invoice-paper .chip-delivered{ background:#dcfce7; color:#166534; border-color:#86efac; }

        .chip-full    { background:var(--success-soft); color:var(--success); }
        .chip-down    { background:var(--warning-soft); color:var(--warning); }
        .chip-notpaid { background:var(--surface-soft); color:var(--text-muted); border-color:var(--border); }

        /* Detail rows */
        .order-details-compact{
            display:flex;
            flex-direction:column;
            gap:9px;
            padding:2px 20px 18px;
        }

        .details-row{
            display:flex;
            align-items:baseline;
            gap:8px;
            font-size:0.875rem;
            color:var(--text-main);
        }

        .details-row svg{ align-self:center; }

        .details-label{
            color:var(--text-muted);
            flex-shrink:0;
        }

        .details-username{
            color:var(--text-dim);
            font-size:0.8125rem;
        }

        /* Invoice total strip — modern minimalist */
        .invoice-total{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:8px 18px;
            background:var(--surface);
            border-top:1px solid var(--border);
            border-bottom:1px solid var(--border);
        }
        .invoice-total-metrics{
            display:flex;
            align-items:stretch;
        }
        .invoice-total-metric{
            display:flex;
            flex-direction:column;
            gap:2px;
            padding:0 16px;
            position:relative;
        }
        .invoice-total-metric:first-child{ padding-left:0; }
        .invoice-total-metric:last-child{ padding-right:0; }
        .invoice-total-metric__label{
            font-size:0.625rem;
            font-weight:600;
            letter-spacing:0.1em;
            text-transform:uppercase;
            color:var(--text-dim);
            line-height:1;
        }
        .invoice-total-metric__value{
            font-family:var(--font-display);
            font-size:0.875rem;
            font-weight:700;
            letter-spacing:-0.015em;
            line-height:1.2;
            color:var(--text-head);
            font-variant-numeric:tabular-nums;
        }
        .invoice-total-metric--balance.is-due .invoice-total-metric__value{ color:var(--warning); }
        .invoice-total-metric--balance.is-paid .invoice-total-metric__value{ color:var(--success); }
        .invoice-total-meta{
            font-size:0.75rem;
            font-weight:500;
            color:var(--text-dim);
            letter-spacing:0.01em;
            white-space:nowrap;
        }
        @media (max-width: 560px){
            .invoice-total{ padding:10px 14px; gap:10px; }
            .invoice-total-metric{ padding:0 10px; }
            .invoice-total-metric__value{ font-size:0.8125rem; }
        }

        /* ── Item progress stepper ─ modern minimal ────────────── */
        .order-progress-section{
            padding:20px 20px 22px;
            background:var(--surface);
            border-top:1px solid var(--border);
            border-bottom:1px solid var(--border);
        }

        .item-progress-wrap{
            position:relative;
            max-width:560px;
            margin:0 auto;
            padding:0 4px 0;
        }

        /* ── Track line ── */
        .progress-track-bg,
        .progress-track-fill{
            display:block !important;
            position:absolute;
            top:16px;
            height:2px;
            border-radius:999px;
        }

        .progress-track-bg{
            left:16.67%;
            right:16.67%;
            background:var(--border);
        }

        .progress-track-fill{
            left:16.67%;
            right:auto;
            width:0;
            background:linear-gradient(90deg, var(--accent-strong), var(--accent));
            transition:width .5s cubic-bezier(.4,0,.2,1);
        }

        /* ── Steps grid ── */
        .item-progress{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:0;
            align-items:start;
        }

        .progress-step{
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:10px;
            min-width:0;
            position:relative;
            z-index:1;
        }

        /* ── Dot ── */
        .progress-dot{
            width:32px;
            height:32px;
            border-radius:50%;
            background:var(--surface);
            border:2px solid var(--border);
            display:flex;
            align-items:center;
            justify-content:center;
            color:var(--text-dim);
            font-size:0.6875rem;
            font-weight:700;
            transition:all .3s cubic-bezier(.4,0,.2,1);
            position:relative;
        }

        /* Completed step */
        .progress-dot.done{
            background:var(--accent-strong);
            border-color:var(--accent-strong);
            color:#fff;
            box-shadow:0 1px 3px rgba(30,44,82,.18);
        }

        /* Current active step — filled blue with ring pulse */
        .progress-dot.active{
            background:var(--accent-strong);
            border-color:var(--accent-strong);
            color:#fff;
            box-shadow:0 0 0 4px rgba(43,62,112,.18);
            animation:stepper-pulse 2.4s ease-in-out infinite;
        }

        @keyframes stepper-pulse{
            0%,100%{ box-shadow:0 0 0 4px rgba(43,62,112,.18); }
            50%{ box-shadow:0 0 0 7px rgba(43,62,112,.10); }
        }

        /* ── Label ── */
        .progress-label{
            font-family:var(--font-body);
            font-size:0.75rem;
            font-weight:500;
            color:var(--text-dim);
            text-align:center;
            line-height:1.3;
            max-width:110px;
            word-wrap:break-word;
            letter-spacing:0.01em;
            transition:color .25s ease, font-weight .25s ease;
        }

        .progress-label.done-label{
            color:var(--accent-strong);
            font-weight:600;
        }

        .progress-label.active-label{
            color:var(--accent-strong);
            font-weight:700;
        }

        /* ── Mobile ── */
        @media (max-width:560px){
            .order-progress-section{ padding:16px 14px 18px; }
            .item-progress-wrap{ padding:0; }
            .progress-dot{ width:28px; height:28px; }
            .progress-dot svg{ width:10px; height:10px; }
            .progress-label{ font-size:0.6875rem; max-width:90px; }
            .progress-track-bg{ left:16.67%; right:16.67%; }
        }

        .item-cancelled-banner,
        .item-returned-banner{
            display:flex;
            align-items:center;
            gap:10px;
            font-size:0.8125rem;
            font-weight:600;
            padding:13px 16px;
            margin:0;
            border-radius:var(--radius-md);
            border:1px solid transparent;
            line-height:1.45;
        }

        .item-cancelled-banner{
            background:var(--danger-soft);
            color:var(--danger);
            border-color:rgba(179,69,58,.18);
            margin:14px 20px 0;
        }
        .item-returned-banner{
            background:var(--warning-soft);
            color:var(--warning);
            border-color:rgba(176,116,15,.18);
            margin:14px 20px 0;
        }

        /* Actions */
        .order-actions{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            padding:18px 20px 20px;
        }

        .btn-outline-primary,
        .btn-primary-lg{
            display:inline-flex;
            align-items:center;
            gap:7px;
            border-radius:var(--radius-pill);
            font-family:var(--font-display);
            font-weight:600;
            font-size:0.8125rem;
            padding:10px 18px;
            cursor:pointer;
            transition:background .15s ease, color .15s ease, border-color .15s ease;
        }

        .btn-outline-primary{
            background:var(--surface);
            border:1.5px solid var(--border);
            color:var(--text-main);
        }

        .btn-outline-primary:hover{ border-color:var(--accent); color:var(--accent); }

        .btn-outline-primary.active{
            background:var(--accent);
            border-color:var(--accent);
            color:#fff;
        }

        .btn-primary-lg{
            background:var(--accent);
            border:1.5px solid var(--accent);
            color:#fff;
            margin-left:auto;
        }

        .btn-primary-lg:hover{ background:var(--accent-strong); }
        .btn-primary-lg:disabled{ cursor:default; }

        .btn-screenshot.is-uploading{ opacity:.75; }
        .btn-screenshot.is-done{ background:var(--success); border-color:var(--success); }
        .btn-screenshot.is-error{ background:var(--danger); border-color:var(--danger); }

        /* Note */
        .order-note{
            padding:14px 20px;
            font-size:0.8125rem;
            color:var(--text-muted);
            border-top:1px solid var(--border);
            line-height:1.55;
        }

        .order-note strong{ color:var(--text-main); }
        .order-note--card{
            background:var(--accent-soft);
            border-left:3px solid var(--accent);
            display:flex;
            gap:8px;
            align-items:flex-start;
            word-break:break-word;
        }


        /* ── Breakdown (expandable) ───────────────────────────── */
        .order-breakdown-content{
            border-top:1px solid var(--border);
            background:var(--surface-soft);
            padding:18px 20px 20px;
        }

        .breakdown-container{ display:flex; flex-direction:column; gap:16px; }

        .breakdown-table{
            width:100%;
            border-collapse:collapse;
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:var(--radius-md);
            overflow:hidden;
            font-size:0.8125rem;
        }

        .breakdown-table thead th{
            text-align:left;
            font-family:var(--font-display);
            font-weight:700;
            font-size:0.6875rem;
            letter-spacing:.02em;
            color:var(--text-muted);
            background:var(--surface-soft);
            padding:10px 14px;
            border-bottom:1px solid var(--border);
        }

        .breakdown-table td{
            padding:11px 14px;
            border-bottom:1px solid var(--border);
            vertical-align:middle;
        }

        .breakdown-table tbody tr:last-child td{ border-bottom:0; }

        .table-item-name{ font-weight:600; color:var(--text-main); }
        .table-item-note{ font-size:0.75rem; color:var(--text-muted); margin-top:2px; }

        .table-price{ white-space:nowrap; }
        .table-price-label{ display:block; font-size:0.6875rem; color:var(--text-dim); }
        .table-price strong{ font-weight:600; color:var(--text-main); }

        .delivery-status-badge,
        .pay-status-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            font-size:0.75rem;
            font-weight:600;
            padding:4px 9px;
            border:1px solid transparent;
            border-radius:var(--radius-pill);
            white-space:nowrap;
        }

        .delivery-status-badge.placed{ background:#fef9c3; border-color:#fde047; color:#854d0e; }
        .delivery-status-badge.ready{ background:#dcfce7; border-color:#86efac; color:#166534; }
        .delivery-status-badge.in-transit{ background:#fef9c3; border-color:#fde047; color:#854d0e; }
        .delivery-status-badge.purchased{ background:#dcfce7; border-color:#86efac; color:#166534; }
        .delivery-status-badge.returned,
        .delivery-status-badge.cancelled{ background:#fee2e2; border-color:#fca5a5; color:#991b1b; }

        .status-icon,
        .pay-status-dot{ font-size:8px; line-height:1; }

        .status-icon.placed, .pay-status-badge .status-icon.placed{ color:var(--text-dim); }
        .status-icon.purchased{ color:var(--accent); }
        .status-icon.in-transit{ color:var(--warning); }
        .status-icon.ready{ color:var(--success); }

        .pay-status-dot.paid{ color:var(--success); }
        .pay-status-dot.downpayment{ color:var(--warning); }
        .pay-status-dot.unpaid{ color:var(--text-dim); }

        .summary-item{
            background:var(--surface);
            padding:12px 14px;
            display:flex;
            flex-direction:column;
            gap:4px;
        }

        .summary-label{ font-size:0.6875rem; color:var(--text-muted); }
        .summary-value{ font-family:var(--font-display); font-weight:700; font-size:0.9375rem; color:var(--text-head); }
        .summary-value.accent{ color:var(--accent); }
        .summary-value.warning{ color:var(--warning); }

        .breakdown-customer{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:1px;
            background:var(--border);
            border:1px solid var(--border);
            border-radius:var(--radius-md);
            overflow:hidden;
            margin:0 20px 16px;
        }
        .breakdown-customer-item{
            background:var(--surface-soft);
            padding:14px 16px;
            display:flex;
            flex-direction:column;
            gap:5px;
            min-height:88px;
        }
        .breakdown-customer-item:only-child{
            grid-column:1 / -1;
        }
        .breakdown-customer-item .summary-label{
            font-size:0.6875rem;
            letter-spacing:0.04em;
            text-transform:none;
            color:var(--text-dim);
            font-weight:700;
        }
        .breakdown-customer-item .summary-value{
            font-size:0.9375rem;
            word-break:break-word;
            line-height:1.45;
            color:var(--text-head);
        }
        .breakdown-customer-username{
            font-size:0.75rem;
            color:var(--text-dim);
            font-weight:500;
            margin-top:2px;
        }
        .invoice-progress-block{ padding:16px 20px 0; }
        .breakdown-summary{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
            gap:1px;
            background:var(--border);
            border:1px solid var(--border);
            border-radius:var(--radius-md);
            overflow:hidden;
            margin-top:16px;
        }

        /* invoice print customer/footer — also for download only */
        .invoice-customer-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
            gap:1px;
            background:var(--border);
            border-bottom:1px solid var(--border);
        }
        .invoice-customer-cell{
            background:var(--surface);
            padding:14px 18px;
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .invoice-customer-cell .summary-label{ font-size:0.6875rem; color:var(--text-muted); }
        .invoice-customer-cell .summary-value{ font-family:var(--font-display); font-weight:700; font-size:0.9375rem; color:var(--text-head); word-break:break-word; }
        .invoice-totals-footer{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
            gap:1px;
            background:var(--border);
            border-top:1px solid var(--border);
        }
        .invoice-totals-footer .summary-item{ background:var(--surface); padding:14px 18px; }

        /* ── Invoice totals — Subtotal / Received / DUE — all same row style, right-aligned ── */
        .invoice-totals-block{ margin-top:16px; }
        .invoice-totals-rows{
            display:flex;
            flex-direction:column;
            align-items:flex-end;
            gap:0;
            padding:0 0 2px;
        }
        .invoice-total-row{
            display:flex;
            justify-content:space-between;
            align-items:baseline;
            gap:32px;
            width:100%;
            max-width:340px;
            padding:9px 4px;
            font-size:0.875rem;
            border-bottom:1px solid transparent;
        }
        .invoice-total-row + .invoice-total-row{ border-top:1px solid var(--border); }
        .invoice-total-row span{ color:var(--text-muted); font-weight:500; white-space:nowrap; }
        .invoice-total-row strong{
            color:var(--text-head);
            font-family:var(--font-display);
            font-weight:700;
            font-size:0.9375rem;
            white-space:nowrap;
        }
        .invoice-total-row--due{
            border-top:1.5px solid var(--text-head) !important;
            margin-top:2px;
            padding-top:11px;
        }
        .invoice-total-row--due span{
            color:var(--text-head);
            font-weight:700;
        }
        .invoice-total-row--due strong{
            font-weight:800;
            font-size:1rem;
        }

        /* ── Item card (per-item breakdown; rendered defensively) ─ */
        .item-card{
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:var(--radius-md);
            padding:16px;
        }

        .item-card + .item-card{ margin-top:12px; }
        .item-card.item-cancelled{ opacity:.7; }

        .item-header{ display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
        .item-name{ font-weight:600; font-size:0.9375rem; color:var(--text-main); }
        .item-chips{ display:flex; gap:6px; flex-wrap:wrap; }

        .item-pricing{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
            gap:10px;
            margin-top:12px;
        }

        .item-price-pill{
            background:var(--surface-soft);
            border-radius:var(--radius-sm);
            padding:9px 12px;
            display:flex;
            flex-direction:column;
            gap:3px;
        }

        .item-price-pill span{ font-size:0.6875rem; color:var(--text-muted); }
        .item-price-pill strong{ font-size:0.9375rem; color:var(--text-main); }

        /* ── Responsive ───────────────────────────────────────── */
        @media (max-width: 768px){
            .track-results-section{ padding:24px 16px 64px; }
            .track-hero{ padding:clamp(36px, 6vw, 56px) 16px clamp(30px, 4.5vw, 44px); }
            .item-pricing{ grid-template-columns:repeat(auto-fit, minmax(95px, 1fr)); gap:8px; }
        }

        @media (max-width: 560px){
            .track-hero{ padding:32px 14px 28px; }
            .track-brand-container{ margin-bottom:16px; }
            .track-hero-content h1{ font-size:clamp(1.5rem, 5.5vw, 1.85rem); margin-bottom:8px; }
            .track-hero-sub{ font-size:0.875rem; margin-bottom:22px; max-width:340px; }

            .track-search-row{
                padding:4px 4px 4px 14px;
            }
            .track-search-icon{ width:16px; height:16px; }
            .track-search-input{ font-size:0.875rem; padding:8px 4px; }
            .track-search-btn{ padding:10px 18px; font-size:0.8125rem; min-height:40px; }

            .track-tabs{ padding:3px; gap:3px; }
            .track-tab{ font-size:0.75rem; padding:8px 8px; min-height:40px; }
            .track-tab-count{ font-size:0.65rem; padding:1px 5px; }

            .track-summary-bar{ padding:11px 14px; flex-wrap:wrap; gap:8px; }
            .track-summary-label{ font-size:0.75rem; gap:6px; }
            .track-summary-value{ font-size:1.05rem; }

            .track-results-section{ padding:18px 12px 64px; }

            .order-head{ padding:14px 14px 12px; gap:8px; }
            .order-invoice{ font-size:0.875rem; }
            .order-date{ font-size:0.75rem; }
            .order-details-compact{ padding:2px 14px 14px; gap:7px; }
            .details-row{ font-size:0.8125rem; flex-wrap:wrap; }

            .invoice-total{ padding:10px 14px; flex-wrap:wrap; gap:10px; }
            .invoice-total-metrics{ width:100%; justify-content:space-between; }
            .invoice-total-metric{ padding:0 8px; }
            .invoice-total-metric__value{ font-size:0.8125rem; }
            .invoice-total-meta{ font-size:0.6875rem; width:100%; text-align:right; }

            .order-progress-section{ padding:14px 8px 12px; }
            .item-progress-wrap{ padding:4px 4px 2px; }
            .item-progress{ gap:4px; }
            .progress-step{ gap:6px; }
            .progress-dot{ width:26px; height:26px; font-size:10px; }
            .progress-label{ font-size:0.625rem; max-width:68px; line-height:1.2; }

            .item-card{ padding:14px; }
            .item-pricing{ grid-template-columns:repeat(2, 1fr); gap:6px; margin-top:10px; }
            .item-price-pill{ padding:7px 10px; }
            .item-price-pill span{ font-size:0.625rem; }
            .item-price-pill strong{ font-size:0.8125rem; }

            .order-actions{ padding:12px 12px 14px; gap:8px; }
            .order-actions .btn-breakdown,
            .order-actions .btn-send-details{
                flex:1 1 calc(50% - 4px);
                min-width:0;
                justify-content:center;
                padding:10px 10px;
                font-size:0.75rem;
                white-space:nowrap;
                min-height:40px;
            }
            .order-actions .btn-screenshot{
                flex:1 1 100%;
                width:100%;
                justify-content:center;
                margin-left:0 !important;
                padding:11px 16px;
                font-size:0.8125rem;
                min-height:40px;
            }

            .order-breakdown-content{ padding:12px 12px 14px; }
            .breakdown-table{
                display:block;
                border:0;
                background:transparent;
                font-size:0.8125rem;
            }
            .breakdown-table thead{ display:none; }
            .breakdown-table tbody{ display:grid; gap:12px; }
            .breakdown-table tbody tr{
                display:grid;
                grid-template-columns:repeat(2, minmax(0, 1fr));
                gap:6px;
                padding:8px;
                background:var(--surface);
                border:1px solid var(--border);
                border-radius:14px;
                box-shadow:0 1px 0 rgba(20,21,26,.03), 0 4px 16px rgba(20,21,26,.03);
            }
            .breakdown-table td,
            .breakdown-table tbody tr:last-child td{
                display:flex;
                flex-direction:column;
                justify-content:space-between;
                gap:3px;
                min-width:0;
                min-height:56px;
                padding:8px 10px;
                border:1px solid var(--border);
                border-radius:9px;
                background:var(--surface-soft);
            }
            .breakdown-table td::before{
                content:attr(data-label);
                display:block;
                font-size:0.5625rem;
                font-weight:700;
                letter-spacing:0;
                line-height:1.2;
                color:var(--text-dim);
            }
            .breakdown-table td:first-child{
                grid-column:1;
                background:var(--surface-soft);
                border-color:var(--border);
                padding:8px 10px;
            }
            .breakdown-table td:first-child .table-item-name{
                font-family:var(--font-display);
                font-size:0.8125rem;
                line-height:1.35;
                color:var(--text-head);
            }
            .breakdown-table td:first-child .table-item-note{
                margin-top:4px;
                font-size:0.6875rem;
            }
            .breakdown-table td:last-child{
                grid-column:2;
                grid-row:1;
                align-items:flex-start;
                text-align:left;
                background:var(--surface-soft);
                min-height:56px;
            }
            .breakdown-table td:nth-child(2),
            .breakdown-table td:nth-child(4){
                background:var(--surface-soft);
            }
            .breakdown-table td:nth-child(3),
            .breakdown-table td:nth-child(5){
                background:var(--surface-soft);
            }
            .breakdown-table td strong{
                font-size:0.8125rem;
                color:var(--text-head);
                line-height:1.4;
            }
            .breakdown-table td.text-center{ text-align:left; }
            .breakdown-table .table-price-label{ display:none; }
            .breakdown-customer{
                grid-template-columns:1fr;
                margin:0 14px 14px;
            }
            .breakdown-customer-item{
                min-height:0;
                padding:10px;
            }
            .breakdown-customer-item .summary-label{ font-size:0.5625rem; }
            .breakdown-customer-item .summary-value{ font-size:0.75rem; }
            .breakdown-customer-username{ font-size:0.625rem; }
            .invoice-progress-block{ padding:12px 14px 0; }
            .breakdown-table td:last-child strong,
            .breakdown-table td:last-child .delivery-status-badge{
                align-self:flex-start;
            }
        }

        /* Small Phones (iPhone SE, Galaxy S8 <= 380px) */
        @media (max-width: 380px){
            .track-hero{ padding:28px 12px 24px; }
            .track-brand-logo{ width:clamp(190px, 54vw, 235px); }
            .track-hero-content h1{ font-size:1.45rem; }

            .track-search-row{ padding:3px 3px 3px 10px; }
            .track-search-input{ font-size:0.8125rem; }
            .track-search-btn{ padding:8px 14px; font-size:0.75rem; }

            .track-tab{ font-size:0.6875rem; padding:7px 4px; }
            .track-tab-count{ display:none; }

            .progress-dot{ width:22px; height:22px; font-size:9px; }
            .progress-label{ font-size:0.58rem; max-width:56px; }

            .order-actions .btn-breakdown,
            .order-actions .btn-send-details{
                flex:1 1 100%;
            }
        }

        /* Desktop & Wide PC Displays (>= 1200px) */
        @media (min-width: 1200px){
            .track-hero{ padding:64px 24px 52px; }
            .track-results-section{ max-width:1080px; padding:32px 24px 88px; }
            .invoice-paper{ max-width:960px; margin:0 auto; }
        }

        /* ── Redesigned Breakdown button ─────────────────────── */
        .btn-breakdown{
            display:inline-flex;
            align-items:center;
            gap:8px;
            background:var(--surface);
            border:1.5px solid var(--border);
            color:var(--text-head);
            font-family:var(--font-display);
            font-weight:700;
            font-size:0.8125rem;
            letter-spacing:.01em;
            padding:10px 18px;
            border-radius:var(--radius-pill);
            cursor:pointer;
            line-height:1;
            box-shadow:var(--shadow-card);
            transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
        }
        .btn-breakdown:hover{
            background:var(--accent);
            border-color:var(--accent);
            color:#fff;
            box-shadow:0 6px 18px rgba(43,62,112,.18);
            transform:translateY(-1px);
        }
        .btn-breakdown:active{ transform:translateY(0) scale(.98); }
        .btn-breakdown svg{ width:16px; height:16px; flex-shrink:0; opacity:.9; }
        .btn-breakdown:hover svg{ opacity:1; }

        /* ── Invoice detail page (in-track navigation) ────────── */
        .invoice-detail-nav{
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom:18px;
        }
        .btn-back{
            display:inline-flex;
            align-items:center;
            gap:8px;
            background:var(--surface);
            border:1px solid var(--border);
            color:var(--text-main);
            font-family:var(--font-display);
            font-weight:600;
            font-size:0.8125rem;
            padding:9px 14px;
            border-radius:var(--radius-pill);
            cursor:pointer;
            box-shadow:var(--shadow-card);
            transition:all .15s ease;
        }
        .btn-back:hover{ border-color:var(--accent); color:var(--accent); background:var(--surface); }
        .invoice-detail-crumbs{
            font-size:0.8125rem;
            color:var(--text-muted);
            display:flex;
            align-items:center;
            gap:6px;
        }
        .invoice-detail-crumbs strong{ color:var(--text-head); font-weight:700; }

        .invoice-paper{
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:var(--radius-lg);
            overflow:hidden;
            box-shadow:var(--shadow-pop);
        }
        .invoice-paper-header{
            display:flex;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            padding:22px 24px 18px;
            background:linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 78%);
            border-bottom:1px solid var(--border);
        }
        .invoice-paper-eyebrow{
            font-size:0.6875rem;
            font-weight:800;
            letter-spacing:.09em;
            text-transform:uppercase;
            color:var(--accent);
            margin:0 0 6px;
        }
        .invoice-paper-title{
            font-family:var(--font-display);
            font-size:clamp(1.25rem, 3vw, 1.6rem);
            font-weight:800;
            letter-spacing:-.02em;
            color:var(--text-head);
            margin:0 0 4px;
            line-height:1.15;
        }
        .invoice-paper-title-row{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
        }
        .invoice-paper-title-row .invoice-paper-title{ margin-bottom:0; }
        .invoice-proof-action{ margin-top:14px; }
        .invoice-paper-sub{
            font-size:0.8125rem;
            color:var(--text-muted);
            margin:0;
        }
        .invoice-paper-head-right{
            display:flex;
            flex-direction:column;
            align-items:flex-end;
            gap:10px;
        }
        .invoice-paper-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
        .invoice-paper-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
        .invoice-paper-actions .item-chip{ margin-left:0; }
        .btn-download{
            display:inline-flex;
            align-items:center;
            gap:6px;
            border:1px solid var(--border);
            background:var(--surface);
            color:var(--text-main);
            font-family:var(--font-display);
            font-weight:600;
            font-size:0.8125rem;
            padding:8px 14px;
            border-radius:var(--radius-pill);
            cursor:pointer;
        }
        .btn-download:hover{ border-color:var(--accent); color:var(--accent); }
        .btn-download:disabled{ opacity:0.65; cursor:not-allowed; }
        @keyframes spinPdf { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        .invoice-meta-strip{
            display:flex;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
            padding:14px 24px;
            background:var(--surface-soft);
            border-bottom:1px solid var(--border);
        }
        .invoice-meta-strip-item{
            display:flex;
            flex-direction:column;
            gap:2px;
        }
        .invoice-meta-strip-item span{
            font-size:0.6875rem;
            font-weight:700;
            letter-spacing:.04em;
            text-transform:uppercase;
            color:var(--text-dim);
        }
        .invoice-meta-strip-item strong{
            font-size:0.9375rem;
            font-weight:700;
            color:var(--text-head);
        }

        .invoice-items-wrap{ padding:20px 20px 6px; }
        .invoice-items-title{
            font-family:var(--font-display);
            font-weight:800;
            font-size:0.9375rem;
            color:var(--text-head);
            margin:0 0 12px;
            letter-spacing:-.01em;
        }
        .invoice-detail-note{
            margin:0 20px 18px;
            padding:12px 14px;
            background:var(--accent-soft);
            border:1px solid var(--border);
            border-radius:var(--radius-md);
            font-size:0.8125rem;
            color:var(--text-muted);
            line-height:1.55;
        }
        .invoice-detail-note strong{ color:var(--text-head); }


        @media (max-width: 560px){
            .invoice-paper-header{ padding:18px 16px 14px; }
            .invoice-paper-head-right{ align-items:flex-start; width:100%; }
            .invoice-paper-title-row{ gap:8px; }
            .invoice-paper-title-row .item-chip{ font-size:0.625rem; padding:4px 9px; }
            .invoice-proof-action{ margin-top:12px; }
            .invoice-paper-chips{ justify-content:flex-start; }
            .invoice-meta-strip{ padding:12px 16px; }
            .invoice-items-wrap{ padding:16px 14px 4px; }
            .invoice-detail-nav{ flex-wrap:wrap; }
            .invoice-totals-rows{ align-items:stretch; }
            .invoice-total-row{ max-width:none; }
        }
        @media print{
            body.public-page{ background:#fff; }
            .track-hero, #order-tabs-wrapper, #orders-summary-bar, #search-results, .invoice-detail-nav{ display:none !important; }
            #breakdown-detail{ display:block !important; }
            .invoice-paper{ box-shadow:none; border:1px solid #ddd; }
        }

        @media (prefers-reduced-motion: reduce){
            *{ transition:none !important; animation:none !important; }
        }

        /* ── Send Details ───────────────────────────────────── */
        .btn-send-details{
            display:inline-flex;
            align-items:center;
            gap:8px;
            background:var(--surface);
            border:1.5px solid var(--border);
            color:var(--text-head);
            font-family:var(--font-display);
            font-weight:700;
            font-size:0.8125rem;
            letter-spacing:.01em;
            padding:10px 18px;
            border-radius:var(--radius-pill);
            cursor:pointer;
            line-height:1;
            box-shadow:var(--shadow-card);
            transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
        }
        .btn-send-details:hover{
            background:var(--accent);
            border-color:var(--accent);
            color:#fff;
            box-shadow:0 6px 18px rgba(43,62,112,.18);
            transform:translateY(-1px);
        }
        .btn-send-details:active{ transform:translateY(0) scale(.98); }
        .btn-send-details svg{ width:16px; height:16px; flex-shrink:0; opacity:.9; }
        .btn-send-details:hover svg{ opacity:1; }
        .send-details-overlay{
            position:fixed; inset:0;
            background:rgba(20,21,26,.45);
            backdrop-filter:blur(4px);
            display:flex; align-items:center; justify-content:center;
            padding:20px; z-index:9999;
        }
        .send-details-overlay[hidden]{ display:none !important; }
        .send-details-modal{
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow-pop);
            width:100%; max-width:420px;
            overflow:hidden;
        }
        .send-details-header{
            padding:18px 20px 14px;
            border-bottom:1px solid var(--border);
            display:flex; justify-content:space-between; align-items:center;
        }
        .send-details-header h3{
            margin:0; font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--text-head);
        }
        .send-details-close{
            width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
            background:var(--surface); color:var(--text-muted); cursor:pointer;
            display:inline-flex; align-items:center; justify-content:center;
        }
        .send-details-close:hover{ border-color:var(--text-dim); color:var(--text-head); }
        .send-details-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px; }
        .send-details-label{ font-size:0.8125rem; font-weight:600; color:var(--text-main); margin:0 0 6px; display:block; }
        .send-details-select{
            width:100%; padding:11px 12px; border:1.5px solid var(--border); border-radius:10px;
            background:var(--surface); color:var(--text-main); font-family:var(--font-body); font-size:0.9375rem;
            appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%236B6D74' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
        }
        .send-details-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
        .send-details-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }
        .btn-send-submit{
            background:var(--accent); color:#fff; border:1.5px solid var(--accent);
            font-family:var(--font-display); font-weight:700; font-size:0.8125rem;
            padding:10px 18px; border-radius:var(--radius-pill); cursor:pointer;
        }
        .btn-send-submit:hover{ background:var(--accent-strong); }
        .send-details-reminder{
            position:relative;
            z-index:1;
            background:var(--surface-soft);
            border:1px solid var(--border);
            border-radius:10px;
            padding:12px 14px;
        }
        .send-details-reminder[hidden]{ display:none !important; }
        .send-details-reminder-title{
            font-size:0.6875rem; font-weight:800; letter-spacing:.07em;
            text-transform:uppercase; color:var(--accent); margin-bottom:8px;
        }
        .send-details-reminder-text{
            font-size:0.875rem; line-height:1.55; color:var(--text-head);
            font-weight:600; word-break:break-word;
        }
        .send-details-reminder--lalamove .send-details-reminder-text{
            font-family:var(--font-display); font-size:0.8125rem;
        }
        .send-details-input{
            position:relative;
            z-index:2;
            width:100%; padding:10px 12px; border:1.5px solid var(--border);
            border-radius:10px; background:var(--surface);
            font-family:var(--font-body); font-size:0.875rem; color:var(--text-main);
            margin-bottom:8px;
            pointer-events:auto;
            min-height:44px;
        }
        .send-details-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
        .send-details-input:last-of-type{ margin-bottom:0; }

        @media (max-width: 480px){
            .send-details-overlay{ padding:12px; }
            .send-details-modal{ max-width:100%; border-radius:14px; }
            .send-details-header{ padding:14px 16px 12px; }
            .send-details-body{ padding:14px 16px 16px; gap:12px; }
            .send-details-actions{ flex-direction:column-reverse; }
            .send-details-actions .btn-send-details,
            .send-details-actions .btn-send-submit{ width:100%; justify-content:center; min-height:42px; }
        }


        /* ── Uploaded payment screenshots dropdown (invoice view) ── */
        .invoice-proofs-dropdown{
            margin-top:20px; border:1px solid var(--border); border-radius:12px;
            background:var(--surface); overflow:hidden;
        }
        .invoice-proofs-dropdown summary{
            display:flex; align-items:center; justify-content:space-between; gap:8px;
            cursor:pointer; list-style:none; padding:13px 14px;
            font-weight:800; font-size:0.95rem; color:var(--accent);
            background:var(--accent-soft); user-select:none;
        }
        .invoice-proofs-dropdown summary::-webkit-details-marker{ display:none; }
        .invoice-proofs-caret{ font-size:0.8rem; transition:transform .2s ease; }
        .invoice-proofs-dropdown[open] summary{ border-bottom:1px solid var(--border); }
        .invoice-proofs-dropdown[open] .invoice-proofs-caret{ transform:rotate(180deg); }
        .invoice-proofs-grid{ display:flex; flex-wrap:wrap; gap:10px; padding:14px; }
        .invoice-proofs-grid a{
            display:block; width:110px; height:130px; border:1px solid var(--border);
            border-radius:8px; overflow:hidden; background:var(--surface-soft);
        }
        .invoice-proofs-grid img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }

        /* Dropdown placement inside the order card */
        .order-proofs-slot{ padding:0 20px 18px; }
        .order-proofs-slot:empty{ display:none; }
        .order-proofs-slot .invoice-proofs-dropdown{ margin-top:0; }
        @media (max-width:560px){ .order-proofs-slot{ padding:0 12px 14px; } }
/* Sent delivery details inside the proofs dropdown — readable type, strong contrast */
.invoice-delivery-block{ background:#fff; padding:16px 16px 6px; font-family:var(--font-display); }
.invoice-delivery-title{
    font-weight:800; font-size:1rem; letter-spacing:0; text-transform:none;
    color:var(--text-head); margin-bottom:12px;
}
.invoice-delivery-list{
    margin:0 0 14px; display:grid; gap:0;
    border:1px solid #E5E7EB; border-radius:12px; overflow:hidden; background:#fff;
}
.invoice-delivery-list div{
    display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:baseline;
    padding:12px 16px; font-size:1.02rem; line-height:1.5;
}
.invoice-delivery-list div + div{ border-top:1px solid #E5E7EB; }
.invoice-delivery-list div{ background:#fff; }
.invoice-delivery-list dt{ font-weight:600; font-size:0.95rem; color:#4B4F5C; }
.invoice-delivery-list dd{ margin:0; font-weight:700; color:var(--text-head); word-break:break-word; }
@media (max-width:560px){
    .invoice-delivery-list div{ grid-template-columns:1fr; gap:2px; padding:10px 14px; font-size:1rem; }
}

/* ── Redesigned dropdown button (proofs + delivery details) ── */
.invoice-proofs-dropdown{
    border:1px solid var(--border); border-radius:14px; background:var(--surface);
    box-shadow:0 1px 3px rgba(23,42,82,.06); transition:box-shadow .2s ease, border-color .2s ease;
}
.invoice-proofs-dropdown:hover{ box-shadow:0 4px 14px rgba(23,42,82,.10); border-color:var(--accent); }
.invoice-proofs-dropdown summary{
    justify-content:flex-start; gap:12px; padding:12px 14px;
    background:var(--surface); color:var(--text-head); font-weight:700; font-size:0.95rem;
    transition:background .2s ease;
}
.invoice-proofs-dropdown summary:hover{ background:var(--accent-soft); }
.invoice-proofs-dropdown[open] summary{ background:var(--accent-soft); }
.invoice-proofs-label{ flex:1 1 auto; min-width:0; line-height:1.3; }
.invoice-proofs-count{
    flex:0 0 auto; min-width:26px; height:26px; padding:0 8px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:0.8rem;
    border:1px solid var(--accent);
}
.invoice-proofs-caret{
    flex:0 0 auto; width:30px; height:30px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--surface-soft); color:var(--accent); transition:transform .2s ease, background .2s ease;
}
.invoice-proofs-dropdown[open] .invoice-proofs-caret{ transform:rotate(180deg); background:var(--surface); }
@media (max-width:560px){
    .invoice-proofs-dropdown summary{ gap:10px; padding:10px 12px; font-size:0.88rem; }
}