:root{
    --ax-ink:#1C1917; --ax-ink-soft:#6B6560; --ax-ink-faint:#9C948C;
    --ax-canvas:#FBF9F7; --ax-surface:#FFFFFF; --ax-border:#ECE6DF;
    --ax-red:#DC2626; --ax-red-dark:#9F1C1C; --ax-red-wash:#FDF1F0;
    --ax-gold:#E8A33D; --ax-gold-wash:#FDF6E9;
    --ax-green:#15803D; --ax-green-wash:#F0FBF4;
}
.axomify-mobile-container { max-width: 460px; margin: 24px auto; background: var(--ax-surface); font-family: 'Inter',sans-serif; padding: 24px; border-radius: 20px; box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 8px 24px -12px rgba(28,25,23,.12); border: 1px solid var(--ax-border); box-sizing: border-box; color: var(--ax-ink); }
.axomify-tracker-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.axomify-tracker-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--ax-red); box-shadow:0 0 0 3px var(--ax-red-wash); }
.axomify-tracker-eyebrow span { font-family:'Sora',sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ax-ink-soft); }

.axomify-recent-list { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.axomify-recent-card { text-align:left; width:100%; background:var(--ax-canvas); border:1px solid var(--ax-border); border-radius:12px; padding:12px 14px; cursor:pointer; font-family:'Inter',sans-serif; transition:border-color .15s ease, background-color .15s ease; }
.axomify-recent-card:hover { border-color:#DDD4C8; background:#fff; }
.axomify-recent-card.active { border-color:var(--ax-red); background:var(--ax-red-wash); }
.axomify-recent-card .rc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.axomify-recent-card .rc-id { font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; color:var(--ax-ink); }
.axomify-recent-card .rc-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.axomify-recent-card .rc-summary { font-size:12.5px; color:var(--ax-ink-soft); }
.axomify-recent-card .rc-meta { font-size:11px; color:var(--ax-ink-faint); margin-top:3px; }
.axomify-manual-toggle { font-size:12.5px; color:var(--ax-ink-soft); text-align:center; margin:14px 0 4px 0; cursor:pointer; text-decoration:underline; }
.axomify-form { display:none; margin-top:10px; }
.axomify-form input { width: 100%; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--ax-border); background:var(--ax-canvas); border-radius: 10px; box-sizing: border-box; font-size: 14px; font-family:'Inter',sans-serif; }
.axomify-form input:focus { outline:none; border-color:var(--ax-red); background:#fff; box-shadow:0 0 0 3px var(--ax-red-wash); }
.axomify-form button { width: 100%; padding: 13px; background: linear-gradient(180deg,#E23F3F,var(--ax-red)); color:#fff; border:none; border-radius:999px; font-family:'Sora',sans-serif; font-weight:700; cursor:pointer; font-size: 14px; box-shadow:0 8px 18px -6px rgba(220,38,38,.5); }

.info-boxes { display: flex; gap: 10px; margin-top: 20px; }
.info-box { flex: 1; background: var(--ax-canvas); padding: 12px; border-radius: 12px; text-align: center; border: 1px solid var(--ax-border); }
.info-box span { display: block; font-family:'Sora',sans-serif; font-size: 10px; color: var(--ax-ink-faint); text-transform: uppercase; letter-spacing:.05em; margin-bottom: 4px; }
.info-box strong { font-family:'Sora',sans-serif; font-size: 17px; color: var(--ax-ink); }
.otp-highlight { background: var(--ax-green-wash) !important; border: 1px solid #CBEBD6 !important; }
.otp-highlight strong { color: var(--ax-green) !important; }
.stepper { margin-top: 26px; padding-left: 10px; position: relative; }
.step-item { display: flex; align-items: flex-start; margin-bottom: 25px; position: relative; }
.step-item:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: 22px; bottom: -25px; width: 2px; background: var(--ax-border); }
.step-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--ax-border); margin-right: 15px; z-index: 2; flex-shrink: 0; display:flex; align-items:center; justify-content:center; color: #fff; font-size: 12px; }
.step-content { font-size: 14px; color: var(--ax-ink-soft); line-height: 1.3; }
.step-content strong { font-family:'Sora',sans-serif; }
.step-content .time-stamp { font-size: 11px; color: var(--ax-ink-faint); display: block; margin-top: 2px; }
.step-item.done .step-icon { background: var(--ax-green); }
.step-item.done .step-content { color: var(--ax-ink); font-weight: 500; }
.step-item.done:not(:last-child)::after { background: var(--ax-green); }
.step-item.current .step-icon { background: var(--ax-red); box-shadow: 0 0 0 4px var(--ax-red-wash); }
.step-item.current .step-content { color: var(--ax-red-dark); font-weight: bold; }
.details-card { background: var(--ax-canvas); border:1px solid var(--ax-border); border-radius: 14px; padding: 16px; margin-top: 20px; display: none; }
.card-title { font-family:'Sora',sans-serif; font-size: 11px; font-weight: 700; color: var(--ax-ink-faint); text-transform: uppercase; letter-spacing:.06em; margin-bottom: 10px; border-bottom: 1px solid var(--ax-border); padding-bottom: 8px; }
.details-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.call-btn { background: var(--ax-green); color: white !important; padding: 7px 14px; border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; }
.order-items-list { margin-top: 20px; border-top: 1px dashed var(--ax-border); padding-top: 15px; display: none; }
.order-items-list h4 { font-family:'Sora',sans-serif; margin: 0 0 10px 0; font-size: 12px; color: var(--ax-ink); text-transform: uppercase; letter-spacing:.05em; font-weight: bold;}
.item-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ax-ink-soft); margin-bottom: 6px; }
.item-detail-row { font-size: 11px; color: var(--ax-ink-faint); padding-left: 6px; margin: -2px 0 8px 0; }
.item-detail-row a { color: var(--ax-red); font-weight: 600; text-decoration: none; }

/* 1.0.5: Standard Delivery/Courier shipment card (#courier_shipment_card) -- reuses
   .details-card/.card-title/.details-row above; these are the only new rules needed. */
.shipment-row { align-items: flex-start; padding: 6px 0; }
.shipment-row:not(:last-child) { border-bottom: 1px dashed var(--ax-border); }
.shipment-not-shipped-notice { font-size: 12.5px; color: var(--ax-ink-soft); text-align: center; padding: 4px 0; }