/*=========================================================
TRACK ORDER

Loaded only on page-track-order.php, on top of common.css (fonts,
tokens, .container, .eyebrow, .section-heading, .badge-circle,
.btn-rose). One URL, two states - the search card/how-it-works are
always in the markup, .track-results starts hidden and is revealed
by script.js after a successful lookup, same pattern as the Style
Blueprint quiz/results split in style-report.css.
=========================================================*/

/*=========================================================
HERO
=========================================================*/

.track-hero{
    padding:0;
    background:var(--rose-tint);
}

/* Deliberately short (a floor, not a fixed height - actual content
   still sets it) - the tall hero this started from pushed the search
   fields below the fold, which is the one thing this page exists to
   avoid making a visitor scroll to find. */
.track-hero-inner{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    align-items:center;
    min-height:200px;
}

.track-hero-text{
    padding:30px 55px 30px max(40px, calc((100vw - 1200px) / 2 + 20px));
}

.track-hero-text h1{
    margin-top:10px;
}

.track-hero-text p{
    max-width:380px;
    font-size:14px;
    line-height:1.7;
}

/* A definite height, not height:100%/min-height - against an
   auto-sized grid row those resolve against the image's OWN natural
   aspect ratio (a circular percentage-height case CSS Grid falls back
   to), which silently re-inflated the hero back past 500px tall no
   matter how the text column was trimmed. */
.track-hero-image{
    position:relative;
    height:200px;
}

.track-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.track-hero-image::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:130px;
    background:linear-gradient(to right, var(--rose-tint), transparent);
    z-index:2;
}

/*=========================================================
SEARCH CARD
=========================================================*/

.track-search{
    padding:28px 0 60px;
    background:var(--background);
}

.track-search-card{
    background:var(--surface);
    border:1px solid var(--border);
    padding:36px 40px;
    max-width:1040px;
    margin:0 auto;
}

.track-search-fields{
    display:flex;
    align-items:flex-start;
    gap:28px;
}

.track-field{
    flex:1;
}

.track-field-label{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--text-light);
    margin-bottom:10px;
}

.track-field-input{
    position:relative;
    display:block;
}

.track-field-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    pointer-events:none;
}

.track-field-input input{
    width:100%;
    padding:13px 14px 13px 42px;
    border:1px solid var(--border);
    font-size:14px;
    font-family:var(--font-body);
    background:var(--surface);
    color:var(--text);
}

.track-hint{
    display:block;
    margin-top:8px;
    font-size:12px;
    color:var(--text-light);
}

.track-error{
    color:#a4615f;
}

.track-captcha-field{
    flex:1;
}

.track-captcha-row{
    display:flex;
    align-items:stretch;
    gap:10px;
}

.track-captcha-box{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:48px;
    border:1px solid var(--border);
    background-color:#f6f1ea;
    background-image:radial-gradient(var(--gold-soft) 0.6px, transparent 0.6px);
    background-size:7px 7px;
}

.track-captcha-char{
    display:inline-block;
    font-family:var(--font-heading);
    font-size:20px;
    font-weight:700;
    letter-spacing:1px;
    color:var(--rose-deep);
    transform:rotate(calc(var(--tilt, 0) * 1deg));
}

.track-captcha-loading{
    font-size:14px;
    color:var(--text-light);
}

.track-captcha-refresh{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    flex:none;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-light);
    cursor:pointer;
    transition:var(--transition-border);
}

.track-captcha-refresh:hover{
    border-color:var(--gold-soft);
    color:var(--rose-deep);
}

.track-captcha-refresh svg{
    width:18px;
    height:18px;
}

.track-captcha-refresh.is-spinning svg{
    animation:track-spin .5s ease;
}

@keyframes track-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(180deg); }
}

.track-captcha-input{
    width:100%;
    margin-top:10px;
    padding:12px 14px;
    border:1px solid var(--border);
    font-size:14px;
    font-family:var(--font-body);
    text-transform:uppercase;
    letter-spacing:1px;
}

.track-submit-col{
    flex:none;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding-top:24px;
}

.track-submit-col .btn-rose{
    margin-top:0;
    white-space:nowrap;
}

.track-submit-col .btn-rose:disabled{
    opacity:.6;
    cursor:default;
}

.track-safe{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    color:var(--text-light);
    white-space:nowrap;
}

.track-safe img{
    width:15px;
    height:15px;
}

#track-search-error{
    margin-top:18px;
}

/*=========================================================
HOW IT WORKS
=========================================================*/

.track-how{
    padding:55px 0 60px;
    background:var(--rose-tint);
}

.track-how-steps{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:18px;
    margin-top:36px;
}

.track-how-step{
    flex:1;
    max-width:220px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.track-how-step .badge-circle{
    background:var(--surface);
    margin-bottom:18px;
}

.track-how-step h3{
    font-size:17px;
    margin-bottom:6px;
}

.track-how-step p{
    font-size:13px;
    line-height:1.6;
    color:var(--text-light);
}

.track-how-arrow{
    flex:none;
    font-size:22px;
    color:var(--gold-soft);
    padding-top:38px;
}

/*=========================================================
RESULTS
=========================================================*/

.track-results{
    background:var(--background);
}

.track-results--hidden,
.track-search-state--hidden{
    display:none;
}

.track-results-head{
    padding-top:44px;
}

.track-results-head h1{
    margin-top:8px;
}

.track-results-head p{
    color:var(--text-light);
    max-width:480px;
}

.track-results-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    margin-top:24px;
    padding:14px 20px;
    background:var(--surface);
    border:1px solid var(--border);
}

.track-results-tracking{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    color:var(--text-light);
}

.track-results-tracking img{
    width:16px;
    height:16px;
}

.track-results-tracking strong{
    color:var(--text);
    font-variant-numeric:tabular-nums;
}

.track-results-again{
    background:none;
    border:none;
    font-size:13px;
    font-weight:600;
    color:var(--rose-deep);
    cursor:pointer;
    text-decoration:underline;
}

.track-orders-list{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:26px;
}

.track-order-card{
    background:var(--surface);
    border:1px solid var(--border);
    padding:26px 28px;
}

/* One row: [id/placed] [items/fabric] [photo] [status] [timeline] [delivery] -
   the image sits after the order-id details and the timeline runs in
   the same row as the photo and text, matching the UX reference. */
.track-order-row{
    display:flex;
    align-items:center;
    gap:24px;
}

.track-order-group{
    flex:none;
}

.track-order-stat{
    margin-bottom:12px;
}

.track-order-stat:last-child{
    margin-bottom:0;
}

.track-order-stat span{
    display:block;
    font-size:10.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--text-light);
    margin-bottom:3px;
}

.track-order-stat strong{
    font-size:13.5px;
    font-weight:600;
    color:var(--text);
    white-space:nowrap;
}

.track-order-photo{
    width:72px;
    height:72px;
    object-fit:cover;
    background:var(--rose-tint);
    flex:none;
}

.track-order-status{
    flex:none;
    width:200px;
}

.track-order-status-label{
    display:block;
    font-size:10.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--text-light);
    margin-bottom:6px;
}

.track-order-status-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}

.track-order-status-title h3{
    font-family:var(--font-heading);
    font-size:18px;
    font-weight:600;
    margin:0;
    color:var(--rose-deep);
}

.track-order-status-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    flex:none;
    border-radius:50%;
    background:var(--rose-tint);
}

.track-order-status-icon img{
    width:16px;
    height:16px;
}

.track-order-status p{
    font-size:12.5px;
    line-height:1.5;
    color:var(--text-light);
    margin:0;
}

.track-order-delivery{
    flex:none;
    text-align:right;
}

.track-order-delivery span{
    display:block;
    font-size:10.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--text-light);
    margin-bottom:4px;
}

.track-order-delivery strong{
    display:block;
    font-family:var(--font-heading);
    font-size:16px;
    color:var(--rose-deep);
    margin-bottom:12px;
    white-space:nowrap;
}

.track-order-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 18px;
    border:1px solid var(--rose-deep);
    background:none;
    color:var(--rose-deep);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
    transition:var(--transition);
    white-space:nowrap;
}

.track-order-toggle:hover{
    background:var(--rose-tint);
}

/*=========================================================
TIMELINE

Sits inline within .track-order-row (flex:1, between the status
column and the delivery column) rather than as its own full-width row
below - see the comment on .track-order-row above.
=========================================================*/

.track-timeline{
    display:flex;
    flex:1;
    min-width:0;
}

.track-node{
    position:relative;
    flex:1;
    text-align:center;
}

.track-node::before{
    content:"";
    position:absolute;
    top:13px;
    left:-50%;
    width:100%;
    height:2px;
    background:var(--border);
    z-index:0;
}

.track-node:first-child::before{
    display:none;
}

/* Reached-or-passed segments read as fully green (matching
   .status-pill--completed's green elsewhere in the theme) - only the
   exact current node keeps the rose "you are here" treatment below. */
.track-node--done::before,
.track-node--current::before{
    background:#5c8a5c;
}

.track-node-icon{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    margin:0 auto 8px;
    border-radius:50%;
    border:2px solid var(--border);
    background:var(--surface);
    color:var(--text-light);
    font-size:11px;
    font-weight:700;
}

.track-node--done .track-node-icon{
    border-color:#5c8a5c;
    background:#5c8a5c;
    color:var(--white);
}

.track-node--current .track-node-icon{
    border-color:var(--rose-deep);
    background:var(--rose-tint);
    color:var(--rose-deep);
}

.track-node-label{
    display:block;
    font-size:10.5px;
    font-weight:600;
    color:var(--text-light);
    line-height:1.3;
}

.track-node--current .track-node-label{
    color:var(--rose-deep);
}

.track-node--done .track-node-label{
    color:#5c8a5c;
}

.track-node-date{
    display:block;
    margin-top:2px;
    font-size:10px;
    color:var(--text-light);
    font-variant-numeric:tabular-nums;
}

/*=========================================================
DETAILS PANEL (View Details toggle)
=========================================================*/

.track-order-details{
    display:none;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--border);
}

.track-order-details.is-open{
    display:block;
}

.track-order-details span{
    display:block;
    font-size:10.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--text-light);
    margin-bottom:6px;
}

.track-order-details p{
    font-size:13.5px;
    line-height:1.7;
    color:var(--text);
    margin:0;
}

/*=========================================================
SAVITUR CIRCLE SECTION
=========================================================*/

.savitur-circle-details{
    margin-top:32px;
    padding-top:32px;
    border-top:1px solid var(--border);
}

.circle-section-header{
    margin-bottom:28px;
}

.circle-section-header h3{
    font-family:var(--font-heading);
    font-size:22px;
    font-weight:600;
    color:var(--rose-deep);
    margin:0 0 8px 0;
}

.circle-section-header p{
    font-size:13.5px;
    color:var(--text-light);
    margin:0;
}

.circle-section-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    margin-bottom:28px;
}

.circle-section-card{
    background:var(--surface);
    border:1px solid var(--border);
    padding:20px;
    border-radius:4px;
}

.circle-section-card h4{
    font-family:var(--font-heading);
    font-size:16px;
    font-weight:600;
    color:var(--text);
    margin:0 0 16px 0;
}

/* Balance Card */
.balance-number{
    font-family:var(--font-heading);
    font-size:48px;
    font-weight:700;
    color:var(--rose-deep);
    line-height:1;
    margin-bottom:4px;
}

.balance-label{
    font-size:12px;
    color:var(--text-light);
    text-transform:uppercase;
    letter-spacing:0.8px;
    margin-bottom:8px;
}

.balance-worth{
    font-family:var(--font-heading);
    font-size:14px;
    font-weight:600;
    color:var(--gold-soft);
    margin-bottom:16px;
}

.btn-redeem{
    display:block;
    width:100%;
    padding:12px 16px;
    margin-bottom:12px;
    background:var(--rose-deep);
    color:var(--white);
    border:none;
    border-radius:4px;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.btn-redeem:hover{
    background:#8a3f4a;
}

.circle-link{
    display:block;
    font-size:12px;
    color:var(--rose-deep);
    text-decoration:none;
    font-weight:600;
    transition:var(--transition);
}

.circle-link:hover{
    color:var(--gold-soft);
}

/* Earning Methods */
.earning-methods{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:16px;
}

.earning-method{
    display:flex;
    gap:12px;
    padding:12px;
    background:var(--rose-tint);
    border-radius:4px;
    align-items:flex-start;
}

.earning-icon{
    font-size:20px;
    flex:none;
}

.earning-method strong{
    display:block;
    font-size:12px;
    color:var(--text);
    margin-bottom:4px;
}

.earning-range{
    display:block;
    font-size:11px;
    color:var(--text-light);
    margin-bottom:6px;
}

.earning-points{
    display:block;
    font-size:12px;
    font-weight:700;
    color:var(--rose-deep);
}

/* Savitur Code */
.savitur-code{
    text-align:center;
    padding:16px;
    background:var(--rose-tint);
    border-radius:4px;
    margin-bottom:16px;
}

.code-value{
    font-family:var(--font-heading);
    font-size:28px;
    font-weight:700;
    color:var(--rose-deep);
    margin-bottom:4px;
    letter-spacing:2px;
}

.code-label{
    display:block;
    font-size:11px;
    color:var(--text-light);
    text-transform:uppercase;
    letter-spacing:0.8px;
    margin-bottom:12px;
}

.btn-copy-code{
    padding:10px 16px;
    background:var(--rose-deep);
    color:var(--white);
    border:none;
    border-radius:4px;
    font-family:var(--font-body);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.btn-copy-code:hover{
    background:#8a3f4a;
}

/* Share Section */
.card-description{
    font-size:12px;
    color:var(--text-light);
    margin:0 0 16px 0;
}

.btn-share-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:12px 16px;
    margin-bottom:12px;
    background:#25D366;
    color:var(--white);
    border:none;
    border-radius:4px;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:var(--transition);
}

.btn-share-whatsapp:hover{
    background:#1eaa50;
}

.share-benefit{
    font-size:12px;
    color:var(--text-light);
    margin:0;
}

/* Footer Info */
.circle-section-footer{
    padding:16px;
    background:var(--rose-tint);
    border-radius:4px;
}

.footer-info strong{
    display:block;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:var(--text);
    margin-bottom:6px;
}

.footer-info p{
    font-size:12px;
    color:var(--text-light);
    margin:0;
    line-height:1.5;
}

/*=========================================================
EMPTY STATE
=========================================================*/

.track-orders-empty{
    padding:40px;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text-light);
    font-size:14px;
}

/*=========================================================
HELP BAND
=========================================================*/

.track-help-band{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    margin:40px 0 60px;
    padding:26px 30px;
    background:var(--rose-tint);
}

.track-help-item{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text);
}

.track-help-item img{
    width:32px;
    height:32px;
    flex:none;
}

.track-help-item strong{
    display:block;
    font-size:13px;
    font-weight:600;
}

.track-help-item span{
    display:block;
    font-size:12px;
    color:var(--text-light);
}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:992px){

    .track-hero-inner{
        grid-template-columns:1fr;
    }

    .track-hero-image{
        height:160px;
        order:-1;
    }

    .track-hero-image::before{
        display:none;
    }

    .track-hero-text{
        padding:26px 30px;
    }

    .track-search-fields{
        flex-direction:column;
        align-items:stretch;
    }

    .track-submit-col{
        padding-top:4px;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }

    .track-how-steps{
        flex-wrap:wrap;
        row-gap:30px;
    }

    .track-how-arrow{
        display:none;
    }

    .track-order-row{
        flex-wrap:wrap;
        row-gap:18px;
    }

    .track-timeline{
        flex-basis:100%;
        padding-top:18px;
        border-top:1px solid var(--border);
    }

    .track-order-delivery{
        flex-basis:100%;
        text-align:left;
        display:flex;
        align-items:center;
        gap:16px;
    }

    .track-order-delivery span,
    .track-order-delivery strong{
        margin-bottom:0;
    }

    .track-help-band{
        grid-template-columns:1fr 1fr;
    }

    .circle-section-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    .track-search-card{
        padding:26px 22px;
    }

    .track-node-label{
        font-size:10px;
    }

    .track-node-date{
        display:none;
    }

    .track-help-band{
        grid-template-columns:1fr;
    }

    .track-order-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .track-order-status,
    .track-timeline,
    .track-order-delivery{
        width:100%;
    }

    .track-order-delivery{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .balance-number{
        font-size:36px;
    }

    .code-value{
        font-size:20px;
    }

    .circle-section-header h3{
        font-size:18px;
    }

    .circle-section-card h4{
        font-size:14px;
    }

}