/* ==========================================================================
   CoreNcore — inner pages (auth, account, profile, track, legal, reviews)
   Ye views purane theme ke class naam use karte hain (.auth-card, .fg, .oc-*).
   Har view dobara likhne ke bajaye unhi naamo ko CoreNcore ki bhasha me
   style kar diya gaya hai. Naya markup likho to corencore.css wale
   class naam (.field, .btn, .summary) use karna — ye file legacy ke liye hai.
   ========================================================================== */

/* ---------------- generic blocks ---------------- */

.page {
    background: #fff;
    border: 1px solid var(--line);
    padding: 26px;
    margin-bottom: 20px;
}

.muted { color: var(--fg-mute); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full, .fg.full { grid-column: 1 / -1; }

.fg, .fld { margin-bottom: 16px; }
.fg label, .fld label { display: block; margin-bottom: 6px; color: var(--fg); font-size: 14px; }

.err {
    color: var(--sale);
    font-size: 13px;
    margin-top: 5px;
}

.btn-sm { min-height: 38px; padding: 0 18px; font-size: 14px; }

.btn-ghost {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--fg);
}

.btn-ghost:hover { background: var(--fg); color: #fff; }

/* .e-ico = empty-state emoji, .sh-ico = section heading ka icon.
   font-size akela kaafi nahi tha — inke andar inline SVG hote hain jinke paas
   width attribute nahi hai, isliye SVG ko alag se naapna padta hai. */
.e-ico, .sh-ico { font-size: 30px; line-height: 1; }
.e-ico { display: block; margin-bottom: 10px; }

.sh-ico {
    display: inline-flex;
    align-items: center;
    vertical-align: -3px;
    margin-right: 6px;
    font-size: inherit;
}

.sh-ico svg { width: .95em; height: .95em; }
.e-ico svg { width: 46px; height: 46px; margin: 0 auto; }

/* ---------------- auth ---------------- */

.auth-card {
    max-width: 440px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    padding: 32px;
}

.auth-card h2 { font-size: 26px; }

.auth-err {
    padding: 12px 14px;
    border: 1px solid var(--sale);
    background: #fdf3f2;
    color: #8a1b12;
    font-size: 14px;
    margin-bottom: 16px;
}

.auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--fg-mute);
    font-size: 13px;
}

.auth-or::before, .auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(46, 46, 46, .55);
    background: #fff;
    color: var(--fg);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.btn-google:hover { background: var(--bg); }

.otp-input {
    letter-spacing: 10px;
    text-align: center;
    font-size: 22px;
}

.dev-otp {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    background: var(--tan-soft);
    font-size: 13px;
}

/* ---------------- account / orders ---------------- */

/* Account page: baayen sidebar + content */
.acc-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    padding: 40px 0;
}

/* Profile page ka layout ALAG hai — sidebar nahi, do cards saath me
   (details + password). Pehle ise .acc-grid ke saath 250px column mila tha,
   jisse andar ka form-grid dab ke 94px ke do khaane ban gaya tha. */
.prof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 24px;
    padding: 32px 0;
    align-items: start;
}

.acc-card, .pcard, .ord-card, .prof-side {
    background: #fff;
    border: 1px solid var(--line);
    padding: 22px;
    margin-bottom: 16px;
}

.ord-cards { display: grid; gap: 14px; }

.account-nav { display: grid; gap: 2px; }

.account-nav a {
    display: block;
    padding: 11px 14px;
    border: 1px solid transparent;
    color: var(--fg-soft);
    font-size: 14.5px;
}

.account-nav a:hover { background: var(--tan-soft); color: var(--fg); }
.account-nav a.active { background: var(--fg); color: #fff; }

.acc-avatar, .pb-avatar {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--tan);
    color: #fff;
    font-size: 24px;
    overflow: hidden;
}

.acc-avatar img, .pb-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- profile ---------------- */

.prof-banner, .prof-head, .pb-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.prof-name, .pb-name { color: var(--fg); font-size: 19px; }
.prof-email, .pb-email, .pb-meta { color: var(--fg-mute); font-size: 14px; }

.prof-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; }

.ps-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14.5px;
}

/* ---------------- order confirmation ---------------- */

.oc-head { text-align: center; padding: 40px 0 24px; }
.oc-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--r-pill);
    background: var(--teal);
    color: #fff;
    font-size: 13px;
}

.oc-body { background: #fff; border: 1px solid var(--line); padding: 26px; }
.oc-date, .oc-no { color: var(--fg-mute); font-size: 14px; }

.oc-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}

.oc-item img { width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--line-soft); }
.oc-it-title { color: var(--fg); font-size: 15px; }
.oc-it-meta { color: var(--fg-mute); font-size: 13px; }
.oc-it-price { color: var(--fg); }

.oc-total {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 10px;
    border-top: 1px solid var(--line);
    color: var(--fg);
    font-size: 18px;
}

.oc-foot { text-align: center; padding: 26px 0 50px; }

/* ---------------- track ---------------- */

/* Pehle yahan `.track` bhi tha. Wo naam kahin use hi nahi hota tha is page pe,
   par reviews ke rating bar ka andar wala span `.track` hai — usse 22px padding
   mil jaati thi aur 6px ki patli line 46px ka mota dabba ban jaati thi. */
.trk-item {
    background: #fff;
    border: 1px solid var(--line);
    padding: 22px;
    margin-bottom: 16px;
}

.trk-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
.trk-img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line-soft); }
.trk-title { color: var(--fg); font-size: 15px; }
.trk-meta, .trk-var { color: var(--fg-mute); font-size: 13px; }
.trk-price, .trk-total { color: var(--fg); }

.timeline { display: grid; gap: 0; margin: 22px 0; }

.tl-label { position: relative; padding: 0 0 26px 30px; font-size: 14.5px; }

.tl-label::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.tl-label:last-child::before { display: none; }

.tl-dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--fg-mute);
}

.tl-dot.done, .tl-label.done .tl-dot { background: var(--teal); border-color: var(--teal); }

/* ---------------- legal / info pages ---------------- */

.legal-wrap { max-width: 820px; margin: 0 auto; padding: 44px 0; }

.legal-card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 34px;
}

.legal-card h2 { font-size: 24px; margin-top: 28px; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card h3 { font-size: 18px; margin-top: 20px; }
.legal-card ul { padding-left: 20px; }
.legal-card li { margin-bottom: 7px; }

.legal-updated { color: var(--fg-mute); font-size: 14px; margin-bottom: 22px; }

.legal-note, .legal-contact {
    border: 1px solid var(--line);
    background: var(--tan-soft);
    padding: 16px 18px;
    margin-top: 22px;
    font-size: 14.5px;
}

/* ---------------- contact form ---------------- */

.cf { max-width: 640px; margin: 0 auto; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Honeypot — asli customer ise dekh hi nahi sakta, bots bhar dete hain.
   display:none mat karna, kuch bots hidden fields skip kar dete hain. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-ok {
    padding: 13px 16px;
    border: 1px solid var(--teal);
    background: #f0f7f5;
    color: #0c6355;
    margin-bottom: 18px;
    font-size: 14.5px;
}

/* ---------------- reviews ---------------- */

/* Sitaron ka rang ek hi jagah — reviews ke summary, breakdown bar aur picker
   teeno isi ko use karte hain.
   Layout: baayen patli summary, daayen form + reviews. Pehle `.rv` par koi
   display hi nahi thi, isliye dono hisse ek doosre ke neeche poori chaudai me
   chip jate the aur rating bars pooray page jitni lambi ho jaati thi. */
.rv {
    --star: #c9932e;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    padding: 44px 0;
    border-top: 1px solid var(--line-soft);
    align-items: start;
}

.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 24px; }
.rv-big { color: var(--fg); font-size: 38px; line-height: 1; }
.rv-side { min-width: 0; }

/* Bina review wale product pe summary khaali rehti hai — tab do column ka
   matlab nahi, form poori chaudai le le. */
.rv:has(.rv-side:empty) { grid-template-columns: minmax(0, 1fr); }
.rv:has(.rv-side:empty) .rv-side { display: none; }

/* Rating breakdown ki ek line: "5 ★  [====----]  3" */
.rv-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--fg-mute);
    font-size: 12.5px;
}

.rv-bar .track { flex: 1; height: 6px; background: var(--line-soft); overflow: hidden; }
.rv-bar .fill { display: block; height: 100%; background: var(--star); }

.rv-lbl { margin-bottom: 6px; color: var(--fg-mute); font-size: 13px; }

/* ---- Star picker ----
   Markup radio + label ka hai (5,4,3,2,1 ke order me). Chalne ke liye CSS
   zaroori hai: radios chhupane padte hain aur labels ko bade sitare banana
   padta hai. Wo CSS pehle view ke inline <style> me thi — hataane par yahan
   nahi aayi thi, isliye form pe kachche radio buttons dikhne lage the.

   row-reverse isliye: DOM me 5 pehle hai par dikhna 1 se 5 (baayen se daayen)
   chahiye. Isse `input:checked ~ label` apne aap us star aur uske baayein
   waale sab bhar deta hai. */
.rv-pick {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}

/* Chhupe rahen par keyboard aur screen-reader ke liye mojood rahen —
   display:none karne se radio tab se pahunch me hi nahi aata. */
.rv-pick input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rv-pick label {
    color: rgba(46, 46, 46, .2);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s var(--ease);
}

.rv-pick input:checked ~ label { color: var(--star); }

/* Hover pe chuna hua rang hata do, warna dono mil ke preview dhundhla ho jata hai */
.rv-pick:hover input:checked ~ label { color: rgba(46, 46, 46, .2); }
.rv-pick label:hover,
.rv-pick label:hover ~ label { color: var(--star); }

.rv-pick input:focus-visible + label { outline: 2px solid var(--fg); outline-offset: 3px; }

.rv-item { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }

.rv-av {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tan);
    color: #fff;
    font-size: 15px;
}

.rv-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--tan-soft);
    color: var(--fg);
    font-size: 12px;
}

.rv-form { background: #fff; border: 1px solid var(--line); padding: 22px; margin-top: 24px; }
/* .rv-pick upar "Star picker" section me hai — yahan ek duplicate pada tha
   jo uska gap override kar raha tha. */
.rv-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rv-photos img { width: 74px; height: 74px; object-fit: cover; border: 1px solid var(--line-soft); }

/* ---------------- misc (inline <style> se yahan aaye) ---------------- */

/* `.fill` ka rule yahan se hataya gaya — wo sirf reviews ke rating bar me use
   hota hai (progress fill, text nahi), aur uski styling `.rv-bar .fill` me hai. */

/* Order-confirmation aur track rows ka beech wala column */
.oc-it-info, .trk-info { min-width: 0; }

/* Timeline ka ek padaav */
.tl-step { position: relative; padding: 0 0 26px 30px; font-size: 14.5px; }

.tl-step::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.tl-step:last-child::before { display: none; }

/* ---------------- responsive ---------------- */

@media (max-width: 820px) {
    .acc-grid, .prof-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 0; }
    .rv { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .form-grid, .cf-row { grid-template-columns: 1fr; }
    .page, .legal-card, .auth-card { padding: 20px; }
    .trk-item, .oc-item { grid-template-columns: 52px 1fr; }
    .trk-item > :last-child, .oc-item > :last-child { grid-column: 2; }
}