/* ============================================================
   Cremona Coffee — Order Tracking Page
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --accent: #D35C32; --surface: #fff; --bg: #f4f6fb;
    --text: #1a1a2e; --text2: #555; --border: #e2e8f0;
    --radius: 14px; --shadow: 0 4px 24px rgba(0,0,0,.08);
    --danger: #e25c5c; --success: #22c55e;
}
html { scroll-behavior: smooth; }
body { font-family: 'Outfit',sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* Header */
.track-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.track-header-inner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; max-width: 520px; margin: 0 auto; }
.back-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: none; cursor: pointer; color: var(--text); text-decoration: none; font-size: 0.9rem; flex-shrink: 0; }
.track-brand { display: flex; align-items: center; gap: 10px; }
.track-logo { height: 34px; }
.track-store-name { font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
.track-subtitle { font-size: 0.72rem; color: var(--text2); }

/* Page wrapper */
.track-page { max-width: 520px; margin: 0 auto; padding: 12px 0 40px; }

/* Order ID banner */
.order-id-banner {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--accent), #E06B42);
    color: #fff; padding: 12px 20px; margin: 12px 16px 0;
    border-radius: var(--radius); font-weight: 600; font-size: 0.9rem;
}
.order-id-banner i { opacity: .8; }
.order-id-banner span { flex: 1; font-family: monospace; font-size: 0.85rem; }
.copy-btn { background: rgba(255,255,255,.2); border: none; color: #fff; cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; }

/* Cards */
.track-card { background: var(--surface); border-radius: var(--radius); padding: 18px; margin: 12px 16px 0; box-shadow: var(--shadow); }
.error-card { text-align: center; }
.card-label { font-size: 0.78rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }

/* Loading */
.loading-state { text-align: center; padding: 24px; color: var(--text2); }
.loading-state p { margin-top: 10px; font-size: 0.88rem; }

/* Stepper */
.stepper-v { display: flex; flex-direction: column; }
.step-row { display: flex; align-items: center; gap: 14px; }
.step-dot-v { width: 40px; height: 40px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; color: var(--text2); font-weight: 700; transition: all .4s; }
.step-row.done .step-dot-v { background: #22c55e; color: #fff; }
.step-row.active .step-dot-v { color: #fff; }
@keyframes pulse { 0%{transform:scale(.9)} 100%{transform:scale(1)} }
.step-text { flex: 1; padding: 8px 0; }
.step-lbl { font-size: 0.88rem; font-weight: 600; color: var(--text2); }
.step-active { color: var(--text); font-weight: 700; }
.step-connector { width: 2px; height: 22px; background: var(--border); margin: 2px 0 2px 19px; transition: background .4s; }
.step-connector.done { background: #22c55e; }

/* Info rows */
.info-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 0.85rem; }
.info-row i { color: var(--accent); margin-top: 2px; width: 14px; flex-shrink: 0; }
.phone-link { color: #22c55e; text-decoration: none; }

/* Items */
.item-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.item-row:last-child { border-bottom: none; }
.total-row { display: flex; justify-content: space-between; padding-top: 10px; font-size: 0.95rem; }
.map-hint { font-size: 0.76rem; color: var(--text2); }

/* Empty / Error state */
.track-center-box { max-width: 400px; margin: 60px auto; padding: 0 20px; text-align: center; }
.empty-icon { font-size: 3rem; margin-bottom: 12px; }
.track-center-box h2 { font-size: 1.1rem; margin-bottom: 8px; }
.track-center-box p { font-size: 0.85rem; color: var(--text2); margin-bottom: 20px; }
.search-box { display: flex; flex-direction: column; gap: 10px; }
.track-input { padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.9rem; font-family: inherit; outline: none; }
.track-input:focus { border-color: var(--accent); }
.track-btn-primary { padding: 12px; border-radius: 10px; background: var(--accent); color: #fff; border: none; font-size: 0.95rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.track-btn-secondary { padding: 11px 16px; border-radius: 10px; border: 2px solid var(--accent); color: var(--accent); background: transparent; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; }

/* Back to menu */
.back-to-menu-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 13px; border-radius: 12px; background: var(--bg); border: 2px solid var(--border); color: var(--text2); text-decoration: none; font-size: 0.9rem; font-weight: 600; }

/* Leaflet override */
.leaflet-container { font-family: 'Outfit',sans-serif; }
.leaflet-control-attribution { font-size: .6rem !important; }

.search-tabs{display:flex;gap:8px;margin-bottom:16px;}
.stab{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);font-size:0.88rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text2);transition:all .2s;}
.stab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.saved-order-hint{margin-top:20px;padding:14px;background:#f0f4ff;border-radius:12px;border:1.5px solid #d0deff;font-size:0.8rem;color:#555;}

.search-back-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0;font-size:0.82rem;}
.search-back-link{color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:6px;}
.search-phone-label{color:var(--text2);}

.order-list-item{display:block;padding:14px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text);position:relative;transition:background .15s;}
.order-list-item:last-child{border-bottom:none;}
.order-list-item:hover{background:var(--bg);}
.order-list-item.order-list-latest{background:#f0f7ff;}
.latest-badge{display:inline-block;background:var(--accent);color:#fff;font-size:0.68rem;font-weight:700;padding:2px 10px;border-radius:20px;margin-bottom:8px;}
.order-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.order-list-num{font-weight:700;font-size:0.88rem;font-family:monospace;}
.order-list-total{font-weight:700;color:var(--accent);}
.order-list-meta{display:flex;align-items:center;justify-content:space-between;}
.order-status-badge{padding:3px 10px;border-radius:20px;font-size:0.75rem;font-weight:600;}
.order-list-time{font-size:0.74rem;color:var(--text2);}

/* FA icon fix */.empty-icon{font-size:3rem;margin-bottom:12px;color:#D35C32;text-align:center;}.track-center-box .empty-icon i{font-size:3rem;}

/* ===== PICKUP INFO CARD ===== */
.pickup-info-card {
    border: 2px solid var(--accent);
    background: linear-gradient(135deg, #fff9f6 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}
.pickup-info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #E06B42, #f59e0b);
}
.pickup-info-card .card-label {
    margin-top: 4px;
}
.pickup-info-desc {
    font-size: 0.82rem;
    color: var(--text2);
    line-height: 1.5;
    margin-bottom: 4px;
}
.pickup-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}
.pickup-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pickup-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.pickup-action-icon--direction {
    background: #eef6ff;
    color: #3b82f6;
}
.pickup-action-icon--wa {
    background: #ecfdf5;
    color: #22c55e;
}
.pickup-action-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pickup-action-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.pickup-action-sublabel {
    font-size: 0.74rem;
    color: var(--text2);
}
.pickup-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
}
.pickup-action-btn:active {
    transform: scale(0.96);
}
.pickup-action-btn--direction {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 2px 8px rgba(59,130,246,.3);
}
.pickup-action-btn--direction:hover {
    box-shadow: 0 4px 12px rgba(59,130,246,.4);
}
.pickup-action-btn--wa {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(34,197,94,.3);
}
.pickup-action-btn--wa:hover {
    box-shadow: 0 4px 12px rgba(34,197,94,.4);
}
.pickup-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--text2);
}
.pickup-contact-row i {
    color: var(--accent);
    width: 14px;
    flex-shrink: 0;
}