/* ===============================================================
   VYONIKA — VIEW ORDER (Flipkart/Myntra-style redesign)
================================================================= */

:root{
    --vy-ink:#15171A;
    --vy-ink-soft:#5B5F66;
    --vy-ink-faint:#9BA0A6;
    --vy-paper:#F1F2F4;
    --vy-card:#FFFFFF;
    --vy-line:#E7E7E5;
    --vy-brand:#111214;
    --vy-forest:#1E7B45;
    --vy-forest-bg:#E9F5EE;
    --vy-clay:#C1502E;
    --vy-clay-bg:#FBEAE3;
    --vy-amber:#B5760A;
    --vy-amber-bg:#FBF1DD;
    --vy-slate-bg:#EEF0F2;
    --vy-radius-lg:18px;
    --vy-radius-md:14px;
    --vy-shadow: 0 1px 2px rgba(20,20,15,.04), 0 8px 24px -12px rgba(20,20,15,.10);
}

.vy-container *{ box-sizing:border-box; }

/* ===============================================================
   THEME ISOLATION
   The parent theme skins every <button>/.button on the site using
   CSS custom properties (--gz-button-bg-color, --gz-link-color-hover,
   etc.), and forces all My Account pages into its site-wide .container
   class (with its own side padding). Both would otherwise bleed into
   this page. Reset them here, scoped to .vy-container only, so the
   rest of the site is completely unaffected.
================================================================= */

.vy-container{
    --gz-button-bg-color:transparent;
    --gz-button-bg-color-hover:transparent;
    --gz-button-color:inherit;
    --gz-button-color-hover:inherit;
    --gz-button-border-width:0px;
    --gz-button-border-color:transparent;
    --gz-button-border-color-hover:transparent;
    --gz-button-padding-top:0;
    --gz-button-padding-right:0;
    --gz-button-padding-bottom:0;
    --gz-button-padding-left:0;
    --gz-button-rounded:0;
    --gz-link-color:inherit;
    --gz-link-color-hover:#FF3F6C;
}
.vy-container :where(button){
    all:unset;
    box-sizing:border-box;
    cursor:pointer;
    font-family:inherit;
}
.vy-container :where(a){
    box-sizing:border-box;
}

/* Cancel the parent theme's forced .container side padding on this
   page only — targets the specific wrapper around our content, so
   nothing else on the site (including the footer's own .container)
   is affected. */
.container:has(.vy-container){
    padding-left:0 !important;
    padding-right:0 !important;
    max-width:none !important;
}
/* Fallback for browsers without :has() support. Covers BOTH contexts
   this stylesheet now renders in: the account View Order endpoint
   (body.woocommerce-view-order) and the standalone public Track Order
   page template, which WordPress auto-classes as
   body.page-template-page-track-order-php based on the filename. */
body.woocommerce-view-order #site-content > .container,
body.page-template-page-track-order-php #site-content > .container{
    padding-left:0 !important;
    padding-right:0 !important;
    max-width:none !important;
}

.vy-container{
    max-width:480px;
    margin:0 auto;
    padding-bottom:96px;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color:var(--vy-ink);
    background:var(--vy-paper);
    position:relative;
}

/* ===== TOP BAR ===== */
.vy-topbar{
    background:var(--vy-card);
    display:flex; align-items:center; gap:12px;
    padding:16px 16px;
    border-bottom:1px solid var(--vy-line);
    position:sticky; top:0; z-index:10;
}
.vy-icon-btn{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--vy-slate-bg); color:var(--vy-ink); flex-shrink:0;
    border:none; cursor:pointer;
}
.vy-title-block{ flex:1; min-width:0; }
.vy-topbar h1{ margin:0; font-size:18px; font-weight:700; line-height:1.2; }
.vy-sub{ font-size:11.5px; color:var(--vy-ink-faint); margin-top:1px; }
.vy-top-actions{ display:flex; gap:8px; margin-left:auto; }

.vy-container main{ padding:14px 14px 0; }
.vy-block{ margin-bottom:14px; }

/* ===== STATUS BANNER ===== */
.vy-banner{
    border-radius:var(--vy-radius-lg);
    padding:18px; display:flex; gap:14px; align-items:flex-start;
    box-shadow:var(--vy-shadow);
}
.vy-banner--success{ background:var(--vy-forest); color:#fff; }
.vy-banner--info{ background:var(--vy-brand); color:#fff; }
.vy-banner--warning{ background:var(--vy-amber-bg); color:var(--vy-ink); }
.vy-banner--danger{ background:var(--vy-clay); color:#fff; }
.vy-banner--neutral{ background:var(--vy-card); color:var(--vy-ink); border:1px solid var(--vy-line); }
.vy-b-icon{
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.vy-banner--warning .vy-b-icon{ background:rgba(181,118,10,.14); }
.vy-banner--neutral .vy-b-icon{ background:var(--vy-slate-bg); }
.vy-banner h2{ margin:0 0 3px; font-size:18px; font-weight:700; }
.vy-banner p{ margin:0; font-size:13px; opacity:.92; line-height:1.45; }
.vy-b-meta{ font-size:12px; opacity:.8; margin-top:8px; }

/* The theme sets its own color directly on every h1-h6 and p tag,
   which wins over the white text color inherited from .vy-banner.
   Set it explicitly per banner variant instead. */
.vy-banner--success h2, .vy-banner--success p, .vy-banner--success .vy-b-meta,
.vy-banner--info h2, .vy-banner--info p, .vy-banner--info .vy-b-meta,
.vy-banner--danger h2, .vy-banner--danger p, .vy-banner--danger .vy-b-meta{
    color:#fff !important;
}
.vy-banner--warning h2, .vy-banner--warning p, .vy-banner--warning .vy-b-meta,
.vy-banner--neutral h2, .vy-banner--neutral p, .vy-banner--neutral .vy-b-meta{
    color:var(--vy-ink) !important;
}

/* ===== SHIPMENT TRACKER ===== */
.vy-tracker-card{
    background:var(--vy-card); border-radius:var(--vy-radius-lg);
    box-shadow:var(--vy-shadow); padding:20px 16px 6px;
}
.vy-tracker-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.vy-tracker-title h3{ margin:0; font-size:14px; font-weight:700; }
.vy-eta{ font-size:12px; font-weight:700; color:var(--vy-forest); }

.vy-h-tracker{ display:flex; padding:0 4px 4px; }
.vy-h-step{ flex:1; text-align:center; position:relative; }
.vy-h-line{
    position:absolute; top:13px; left:-50%; width:100%; height:3px;
    background:var(--vy-line); z-index:0;
}
.vy-h-step:first-child .vy-h-line{ display:none; }
.vy-h-step.done .vy-h-line{ background:var(--vy-forest); }
.vy-h-step.current .vy-h-line{ background:linear-gradient(90deg, var(--vy-forest), var(--vy-line)); }
.vy-h-dot{
    width:28px; height:28px; border-radius:50%;
    background:var(--vy-slate-bg); color:var(--vy-ink-faint);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 8px; position:relative; z-index:1;
    border:3px solid var(--vy-card);
}
.vy-h-step.done .vy-h-dot{ background:var(--vy-forest); color:#fff; }
.vy-h-step.current .vy-h-dot{ background:var(--vy-forest); color:#fff; box-shadow:0 0 0 5px var(--vy-forest-bg); }
.vy-h-label{ font-size:10.5px; font-weight:600; color:var(--vy-ink-faint); line-height:1.25; }
.vy-h-step.done .vy-h-label, .vy-h-step.current .vy-h-label{ color:var(--vy-ink); }

.vy-no-shipment{
    font-size:12.5px; color:var(--vy-ink-faint); text-align:center;
    padding:16px 4px 20px; margin:0;
}

.vy-courier-row{
    margin-top:18px; padding:12px 4px; border-top:1px dashed var(--vy-line);
    display:flex; align-items:center; gap:10px; cursor:pointer;
}
.vy-c-ic{ width:34px; height:34px; border-radius:10px; background:var(--vy-slate-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vy-c-mid{ flex:1; min-width:0; }
.vy-c-name{ font-size:12.5px; font-weight:700; }
.vy-c-sub{ font-size:11.5px; color:var(--vy-ink-faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vy-chev{ transition:transform .2s ease; color:var(--vy-ink-faint); flex-shrink:0; }
.vy-chev.open{ transform:rotate(180deg); }

.vy-awb-line{
    display:flex; align-items:center; gap:8px;
    background:var(--vy-paper); border-radius:10px; padding:9px 12px; margin:4px 4px 6px;
    font-size:12.5px;
}
.vy-awb-code{ font-weight:700; letter-spacing:.02em; flex:1; }
.vy-copy-btn{
    display:flex; align-items:center; gap:5px; background:transparent; border:none;
    color:var(--vy-brand); font-weight:700; font-size:11.5px; cursor:pointer; padding:4px 6px;
}
.vy-track-ext-btn{
    display:flex; align-items:center; justify-content:center; gap:7px;
    width:calc(100% - 8px); background:var(--vy-slate-bg); color:var(--vy-ink); border:none;
    border-radius:10px; padding:11px; font-size:12.5px; font-weight:700;
    cursor:pointer; margin:0 4px 14px; text-decoration:none;
}

.vy-v-timeline{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 4px; }
.vy-v-timeline.open{ max-height:900px; padding-bottom:14px; }
.vy-v-step{ display:flex; gap:12px; padding-bottom:18px; position:relative; }
.vy-v-step:last-child{ padding-bottom:4px; }
.vy-v-rail{ display:flex; flex-direction:column; align-items:center; width:16px; flex-shrink:0; }
.vy-v-dot{ width:9px; height:9px; border-radius:50%; background:var(--vy-forest); margin-top:4px; }
.vy-v-connector{ flex:1; width:2px; background:var(--vy-line); margin-top:3px; }
.vy-v-step:last-child .vy-v-connector{ display:none; }
.vy-vt-title{ font-weight:700; font-size:12.5px; }
.vy-vt-time{ color:var(--vy-ink-faint); font-size:11.5px; margin-top:1px; }

/* ===== GENERIC CARD (notes, price, address, help) ===== */
.vy-card{ background:var(--vy-card); border-radius:var(--vy-radius-lg); box-shadow:var(--vy-shadow); padding:16px; }
.vy-card-title-sm{ font-size:14px; font-weight:700; margin:0 0 2px; }
.vy-card-head{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.vy-card-head h3{ margin:0; font-size:14px; font-weight:700; }
.vy-count-pill{
    background:var(--vy-slate-bg); color:var(--vy-ink-soft); font-size:11px; font-weight:700;
    padding:2px 8px; border-radius:20px; margin-left:6px;
}

/* ===== ORDER UPDATES ===== */
.vy-notes-preview{ margin-top:14px; }
.vy-notes-more{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.vy-notes-more.open{ max-height:1200px; }
.vy-view-all-btn{
    display:block; width:100%; text-align:center; background:none; border:none;
    padding:10px 0 2px; font-size:12px; font-weight:700; color:var(--vy-brand); cursor:pointer;
}
.vy-note-item{ display:flex; gap:10px; padding-bottom:14px; }
.vy-n-ic{ width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.vy-note-item--system .vy-n-ic{ background:var(--vy-slate-bg); color:var(--vy-ink-soft); }
.vy-note-item--customer .vy-n-ic{ background:var(--vy-forest-bg); color:var(--vy-forest); }
.vy-n-body{ font-size:12.5px; background:var(--vy-paper); border-radius:10px; padding:9px 11px; flex:1; }
.vy-note-item--customer .vy-n-body{ background:var(--vy-forest-bg); }
.vy-n-time{ display:block; color:var(--vy-ink-faint); font-size:11px; margin-top:3px; }
.vy-note-tag{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--vy-forest); display:block; margin-bottom:2px; }

/* ===== ITEMS ===== */
.vy-items-card{ background:var(--vy-card); border-radius:var(--vy-radius-lg); box-shadow:var(--vy-shadow); padding:14px 14px 6px; }
.vy-items-head{ padding:2px 2px 12px; }
.vy-items-head h3{ margin:0; font-size:14px; font-weight:700; }
.vy-item-row{ display:flex; gap:12px; padding:12px 2px; border-top:1px solid var(--vy-line); }
.vy-item-row:first-of-type{ border-top:none; }
.vy-item-row.vy-item-extra{ display:none; }
.vy-item-img img{ width:58px; height:58px; border-radius:10px; object-fit:cover; background:var(--vy-slate-bg); flex-shrink:0; }
.vy-item-info{ flex:1; min-width:0; }
.vy-i-name{ font-size:12.8px; font-weight:700; line-height:1.3; margin:0 0 3px; }
.vy-i-meta{ font-size:11.5px; color:var(--vy-ink-faint); margin:0 0 6px; }
.vy-i-bottom{ display:flex; align-items:center; justify-content:space-between; }
.vy-i-price{ font-size:12.5px; font-weight:700; }
.vy-status-pill{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; }
.vy-status-pill--success{ background:var(--vy-forest-bg); color:var(--vy-forest); }
.vy-status-pill--info{ background:var(--vy-slate-bg); color:var(--vy-ink-soft); }
.vy-status-pill--danger{ background:var(--vy-clay-bg); color:var(--vy-clay); }
.vy-rate-row{ display:flex; align-items:center; gap:5px; margin-top:6px; }
.vy-rate-row span{ font-size:11px; color:var(--vy-ink-faint); }
.vy-star-link{ display:flex; gap:2px; color:#D7D9DC; text-decoration:none; }
.vy-show-all-btn{
    display:block; width:100%; text-align:center; background:none; border:none;
    padding:14px 0; font-size:12.5px; font-weight:700; color:var(--vy-brand); cursor:pointer;
    border-top:1px solid var(--vy-line); margin-top:2px;
}

/* ===== PRICE DETAILS ===== */
.vy-price-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.vy-price-body.open{ max-height:400px; }
.vy-price-inner{ padding-top:12px; }
.vy-price-row{ display:flex; justify-content:space-between; font-size:12.8px; padding:7px 0; color:var(--vy-ink-soft); }
.vy-price-row--total{ color:var(--vy-ink); font-weight:800; font-size:14px; border-top:1px dashed var(--vy-line); margin-top:4px; padding-top:12px; }
.vy-discount{ color:var(--vy-forest); }
.vy-pay-pill{
    display:inline-flex; align-items:center; gap:6px; background:var(--vy-paper); border-radius:20px;
    padding:5px 10px; font-size:11px; font-weight:700; margin-top:10px;
}

/* ===== ADDRESS ===== */
.vy-addr-body{ display:flex; gap:12px; margin-top:12px; }
.vy-addr-ic{ width:34px; height:34px; border-radius:10px; background:var(--vy-slate-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vy-addr-text{ font-size:12.8px; line-height:1.5; color:var(--vy-ink-soft); flex:1; }
.vy-addr-text strong{ color:var(--vy-ink); display:block; font-size:13.5px; margin-bottom:2px; }
.vy-addr-phone{ display:block; margin-top:4px; color:var(--vy-ink); }

/* ===== HELP ===== */
.vy-help-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.vy-help-opt{
    border:1px solid var(--vy-line); border-radius:var(--vy-radius-md); padding:14px 6px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; background:var(--vy-card);
    text-decoration:none;
}
.vy-h-ic{ width:34px; height:34px; border-radius:50%; background:var(--vy-paper); display:flex; align-items:center; justify-content:center; color:var(--vy-ink); }
.vy-help-opt span{ font-size:11px; font-weight:700; color:var(--vy-ink-soft); }
.vy-policy-link{
    display:block; text-align:center; font-size:12px; font-weight:700; color:var(--vy-ink-soft);
    padding-top:14px; text-decoration:underline; text-underline-offset:2px;
}

.vy-thankyou{ text-align:center; font-size:12px; color:var(--vy-ink-faint); padding:20px 0 6px; }

/* ===== STICKY BOTTOM BAR ===== */
.vy-bottom-bar{
    position:fixed; left:0; right:0; bottom:0;
    max-width:480px; margin:0 auto;
    background:var(--vy-card); border-top:1px solid var(--vy-line);
    padding:12px 14px; display:flex; gap:10px;
    box-shadow:0 -6px 20px rgba(0,0,0,.05);
    z-index:30;
}
.vy-bb-btn{
    flex:1; border:none; border-radius:var(--vy-radius-md); padding:13px;
    font-size:13px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;
    text-decoration:none;
}
.vy-bb-primary{ background:var(--vy-brand); color:#fff; }
.vy-bb-secondary{ background:var(--vy-slate-bg); color:var(--vy-ink); }
.vy-bb-secondary.vy-bb-danger{ color:var(--vy-clay); }
.vy-bb-full{ width:100%; }

.vy-toast{
    position:fixed; bottom:78px; left:50%; transform:translateX(-50%) translateY(10px);
    background:var(--vy-brand); color:#fff; font-size:11.5px; font-weight:600;
    padding:8px 14px; border-radius:20px; opacity:0; transition:all .25s ease; pointer-events:none;
    white-space:nowrap; z-index:40; max-width:88%; text-align:center;
}
.vy-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== HOVER STATES (Myntra pink) ===== */
.vy-copy-btn:hover,
.vy-view-all-btn:hover,
.vy-show-all-btn:hover,
.vy-policy-link:hover{
    color:#FF3F6C !important;
}
.vy-icon-btn:hover{
    background:#FFE1E9 !important;
    color:#FF3F6C !important;
}
.vy-help-opt:hover{
    border-color:#FF3F6C !important;
}
.vy-help-opt:hover .vy-h-ic{
    background:#FFE1E9 !important;
    color:#FF3F6C !important;
}
.vy-help-opt:hover span{
    color:#FF3F6C !important;
}
.vy-track-ext-btn:hover{
    background:#FFE1E9 !important;
    color:#FF3F6C !important;
}
.vy-bb-primary:hover{
    background:#FF3F6C !important;
}
.vy-bb-secondary:hover{
    background:#FFE1E9 !important;
    color:#FF3F6C !important;
}
.vy-star-link:hover{
    color:#FF3F6C !important;
}

/* ===== ICON SIZING (defensive — guards against the theme forcing
   svg dimensions on generic buttons) ===== */
.vy-icon-btn svg,
.vy-copy-btn svg,
.vy-track-ext-btn svg,
.vy-h-ic svg,
.vy-c-ic svg,
.vy-addr-ic svg,
.vy-b-icon svg{
    display:block !important;
    width:auto !important;
    height:auto !important;
    flex-shrink:0 !important;
}

/* MOBILE */
@media (max-width:600px){
    .vy-container{ max-width:100%; }
    .vy-bottom-bar{ max-width:100%; }
}