/* =============================================================
   New design (v2) — loaded ONLY by pages whose <html> has class "ps-v2" (Home, Category for now).
   Every rule is scoped under html.ps-v2, so pages that haven't been converted yet look exactly as before.
   Light is the default; html[data-theme="dark"] switches to the dark palette (top-bar sun/moon button).
   To change the accent colour: edit --acc (dark) / --acc (light) below.
   ============================================================= */
html.ps-v2 {
    /* these are the DARK values — they only apply when data-theme="dark" (the light block right below wins otherwise) */
    --bg: #07090d; --card: #12151b; --card2: #1a1e26; --line: #232832;
    --txt: #f2f4f8; --mut: #8b94a5; --acc: #ff9500; --pill: #050505; --glow: rgba(255, 149, 0, 0.18);
    --btn: #ff9500; --btn-fg: #111111; --btn-h: #ffa726; --focus: rgba(255, 149, 0, 0.45);
    --ok-bg: rgba(34, 197, 94, 0.14); --ok-fg: #4ade80; --ok-bd: rgba(34, 197, 94, 0.3);
    --err-bg: rgba(239, 68, 68, 0.14); --err-fg: #ff8a8a; --err-bd: rgba(239, 68, 68, 0.3);
    --warn-fg: #fbbf24;
    --info-bg: rgba(255, 149, 0, 0.1); --info-fg: #ffc266; --info-bd: rgba(255, 149, 0, 0.28);
    --ff: "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color-scheme: dark;
}
html.ps-v2:not([data-theme="dark"]) {
    --bg: #f3f7fc; --card: #ffffff; --card2: #f0f4f9; --line: #e3edf7;
    --txt: #0b1b2f; --mut: #546a85; --acc: #2563eb; --pill: #0b1b2f; --glow: rgba(37, 99, 235, 0.15);
    --btn: #0b1b2f; --btn-fg: #ffffff; --btn-h: #1e3a5e; --focus: #b6d0fe;
    --ok-bg: #e3f5eb; --ok-fg: #1c6b4a; --ok-bd: #c8ecd8;
    --err-bg: #fce8ec; --err-fg: #b33a4a; --err-bd: #f5d0d6;
    --warn-fg: #856318;
    --info-bg: #eef4fd; --info-fg: #14304f; --info-bd: #d6e4f7;
    color-scheme: light;
}

/* Dark-mode text helpers. Defined ONLY in dark, so a rule written as color: var(--ink2, #566a85) looks exactly the
   same as before in light mode and switches to a readable colour in dark mode. */
html[data-theme="dark"] {
    --ink: #f2f4f8; --ink2: #aebbd0; --ink-ok: #4ade80; --ink-err: #ff8a8a; --ink-or: #fb923c; --ink-acc: #8db4ff;
}

html.ps-v2 body { background: var(--bg); color: var(--txt); transition: background 0.3s ease, color 0.3s ease; }
/* soft accent glow at the very top of the page */
html.ps-v2 body::before {
    content: ""; position: fixed; inset: -20% -10% auto; height: 340px; pointer-events: none; z-index: 0;
    background: radial-gradient(60% 100% at 50% 0, var(--glow), transparent);
}
html.ps-v2 .app { position: relative; z-index: 1; }
/* Bangla-friendly font on text elements (icons keep Font Awesome: <i> is deliberately not listed) */
html.ps-v2 body,
html.ps-v2 body :where(div, span, a, p, button, input, textarea, h1, h2, h3, b, strong, small, label, form, section, nav) { font-family: var(--ff); }

/* ---------- Top bar ---------- */
html.ps-v2 .top-bar {
    background: color-mix(in srgb, var(--card) 80%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-color: var(--line); box-shadow: none;
}
html.ps-v2 .menu-icon, html.ps-v2 .icon-btn { color: var(--txt); transition: color 0.2s ease, transform 0.15s ease; }
html.ps-v2 .menu-icon:hover, html.ps-v2 .icon-btn:hover { color: var(--acc); }
html.ps-v2 .icon-btn:active, html.ps-v2 .menu-icon:active { transform: scale(0.88); }
html.ps-v2 .icon-btn .badge { background: var(--acc); color: #fff; }
html.ps-v2 .lang-toggle { color: var(--mut); }
html.ps-v2 .back-link { color: var(--acc); }

/* ---------- Side menu ---------- */
html.ps-v2 .side-menu { background: var(--card); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35); }
html.ps-v2 .side-menu-header { border-bottom-color: var(--line); }
html.ps-v2 .menu-close-btn { color: var(--mut); }
html.ps-v2 .side-menu-links a, html.ps-v2 .side-menu-links .pwa-install-btn { color: var(--txt); transition: background 0.2s ease, transform 0.15s ease; }
html.ps-v2 .side-menu-links a i, html.ps-v2 .side-menu-links .pwa-install-btn i { color: var(--mut); }
html.ps-v2 .side-menu-links a:hover, html.ps-v2 .side-menu-links .pwa-install-btn:hover { background: var(--card2); }
html.ps-v2 .side-menu-links a:active { transform: scale(0.97); }
html.ps-v2 .side-menu-links a.danger, html.ps-v2 .side-menu-links a.danger i { color: var(--err-fg); }

/* ---------- Category chips (sticky). The active chip gets the rotating glow border. ---------- */
html.ps-v2 .cats-wrap {
    position: sticky; top: 0; z-index: 20; margin: 0 -0.75rem;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 0.75rem 6px;
    background: linear-gradient(var(--bg) 70%, transparent);
}
html.ps-v2 .cats-bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: 3px; }
html.ps-v2 .cats-bar::-webkit-scrollbar { display: none; }
html.ps-v2 .cat-chip {
    flex: none; border: 1px solid var(--line); background: var(--card); color: var(--mut); border-radius: 999px;
    padding: 8px 16px; font-size: 0.86rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    text-decoration: none; transition: color 0.25s ease, background 0.25s ease, transform 0.15s ease;
}
html.ps-v2 .cat-chip:hover { color: var(--txt); }
html.ps-v2 .cat-chip:active { transform: scale(0.93); }
html.ps-v2 .cat-chip.active { position: relative; isolation: isolate; background: var(--pill); color: #fff; border-color: transparent; }
html.ps-v2 .cat-chip.active::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
    background: conic-gradient(from var(--a), transparent 0 40deg, var(--acc) 90deg, transparent 140deg 220deg, var(--acc) 270deg, transparent 320deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: psBeamSpin 3.2s linear infinite;
}
html.ps-v2 .product-grid { transition: opacity 0.2s ease; }
html.ps-v2 .product-grid.is-loading { opacity: 0.45; pointer-events: none; }

/* ---------- Category page header ---------- */
html.ps-v2 .categories-wrapper { display: flex; flex-direction: column; gap: 1rem; }
html.ps-v2 .page-header h1 { font-size: 1.4rem; font-weight: 700; color: var(--txt); display: flex; align-items: center; gap: 0.5rem; }
html.ps-v2 .page-header h1 i { color: var(--acc); }

/* ---------- Section headers ---------- */
html.ps-v2 .section-header { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.2rem; margin-bottom: 0.3rem; }
html.ps-v2 .section-header h3 { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.2px; color: var(--txt); }
html.ps-v2 .section-header a { color: var(--acc); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
html.ps-v2 .section-header a:hover { text-decoration: underline; }

/* ---------- Customer reviews ---------- */
html.ps-v2 .reviews-scroll {
    display: flex; gap: 0.7rem; overflow-x: auto; padding: 4px 1px 10px; margin: 0 -0.75rem; padding-left: 0.75rem; padding-right: 0.75rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory;
}
html.ps-v2 .reviews-scroll::-webkit-scrollbar { display: none; }
html.ps-v2 .review-card {
    flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line);
    border-radius: 20px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
html.ps-v2 .review-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
html.ps-v2 .review-top { display: flex; align-items: center; gap: 0.6rem; }
html.ps-v2 .review-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--acc), #c7360f); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex: none;
}
html.ps-v2 .review-info { min-width: 0; flex: 1 1 auto; }
html.ps-v2 .review-name { font-weight: 600; font-size: 0.9rem; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ps-v2 .review-product { font-size: 0.74rem; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-decoration: none; max-width: 100%; }
html.ps-v2 a.review-product { color: var(--acc); }
html.ps-v2 a.review-product:hover { text-decoration: underline; }
html.ps-v2 .review-stars { color: #f5a524; font-size: 0.78rem; }
html.ps-v2 .review-text { font-size: 0.84rem; color: var(--mut); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Footer link cards ---------- */
html.ps-v2 .footer-links { display: flex; gap: 0.5rem; }
html.ps-v2 .footer-links .flink {
    flex: 1; min-width: 0; background: var(--card); border-radius: 18px; border: 1px solid var(--line);
    padding: 0.75rem 0.4rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem;
    text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease;
}
html.ps-v2 .footer-links .flink:hover { border-color: var(--acc); transform: translateY(-4px); }
html.ps-v2 .footer-links .flink-icon {
    width: 38px; height: 38px; border-radius: 12px; background: var(--card2); color: var(--acc);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: transform 0.3s ease;
}
html.ps-v2 .footer-links .flink:hover .flink-icon { transform: rotate(-8deg) scale(1.1); }
html.ps-v2 .footer-links .flink-label { font-weight: 600; font-size: 0.78rem; color: var(--txt); white-space: nowrap; }
html.ps-v2 .footer-links .flink-cta { color: var(--acc); font-weight: 600; font-size: 0.66rem; white-space: nowrap; }

/* ---------- Recent orders ticker ---------- */
html.ps-v2 .recent-orders { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 0.7rem; overflow: hidden; }
html.ps-v2 .recent-orders .ro-live { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); animation: roPulse 1.8s ease-in-out infinite; }
@keyframes roPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
html.ps-v2 .recent-orders .ro-viewport { flex: 1 1 auto; min-width: 0; height: 2.5rem; position: relative; overflow: hidden; }
html.ps-v2 .recent-orders .ro-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 0.5rem; opacity: 0; transform: translateY(100%); transition: opacity 0.35s ease, transform 0.35s ease; }
html.ps-v2 .recent-orders .ro-item.is-active { opacity: 1; transform: translateY(0); }
html.ps-v2 .recent-orders .ro-item.is-leaving { opacity: 0; transform: translateY(-100%); }
html.ps-v2 .recent-orders .ro-avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--card2); color: var(--acc); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; }
html.ps-v2 .recent-orders .ro-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
html.ps-v2 .recent-orders .ro-line1 { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
html.ps-v2 .recent-orders .ro-item b { font-size: 0.82rem; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
html.ps-v2 .recent-orders .ro-item .ro-product { font-size: 0.74rem; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ps-v2 .recent-orders .ro-badge { flex: 0 0 auto; font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 60px; }

/* ---------- Footer legal ---------- */
html.ps-v2 .footer-legal { font-size: 0.66rem; color: var(--mut); border-top-color: var(--line); }
html.ps-v2 .footer-legal a { color: var(--acc); }

/* ---------- Sections fade/slide in while scrolling (CSS only; ignored by older browsers) ---------- */
@supports (animation-timeline: view()) {
    html.ps-v2 .section-header, html.ps-v2 .reviews-scroll, html.ps-v2 .footer-links, html.ps-v2 .recent-orders {
        animation: psReveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
}
@keyframes psReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (max-width: 550px) {
    html.ps-v2 .page-header h1 { font-size: 1.2rem; }
    html.ps-v2 .footer-links { gap: 0.4rem; }
    html.ps-v2 .footer-links .flink { padding: 0.6rem 0.25rem; border-radius: 16px; }
    html.ps-v2 .footer-links .flink-icon { width: 34px; height: 34px; font-size: 0.9rem; }
    html.ps-v2 .footer-links .flink-label { font-size: 0.72rem; }
    html.ps-v2 .footer-links .flink-cta { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    html.ps-v2 .cat-chip.active::before, html.ps-v2 .recent-orders .ro-live { animation: none; }
    html.ps-v2 .section-header, html.ps-v2 .reviews-scroll, html.ps-v2 .footer-links, html.ps-v2 .recent-orders { animation: none; }
}


/* =============================================================
   STEP 2 — shared pieces for account / auth / profile / search pages
   ============================================================= */
/* alerts (success / error / notice) in both themes */
html.ps-v2 .alert { border-radius: 14px; }
html.ps-v2 .alert-success { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-bd); }
html.ps-v2 .alert-danger { background: var(--err-bg); color: var(--err-fg); border: 1px solid var(--err-bd); }
html.ps-v2 .alert[data-notice] { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-bd); }

/* cards: gentle rise-in when the page opens */
html.ps-v2 :is(.auth-wrapper, .profile-wrapper, .legal-wrapper, .orders-wrapper, .library-wrapper, .reviews-wrapper) {
    animation: psRise 0.5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes psRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* inputs: orange/blue focus ring + smooth transition */
html.ps-v2 :is(.form-group, .profile-form .form-group) input { transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
html.ps-v2 :is(.form-group input, .otp-input):focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px var(--glow); background: var(--card); }
html.ps-v2 input::placeholder { color: var(--mut); opacity: 0.8; }
html.ps-v2 .form-group input:-webkit-autofill { -webkit-text-fill-color: var(--txt); box-shadow: 0 0 0 40px var(--card2) inset; }

/* primary buttons */
html.ps-v2 :is(.auth-btn, .submit-btn) { transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.25s ease; }
html.ps-v2 :is(.auth-btn, .submit-btn):hover:not(:disabled) { background: var(--btn-h); box-shadow: 0 8px 22px -8px var(--glow); }
html.ps-v2 :is(.auth-btn, .submit-btn):active:not(:disabled) { transform: scale(0.97); }
html.ps-v2 .auth-btn:disabled:hover { background: var(--btn); }
html.ps-v2 .google-btn { background: var(--card2); color: var(--txt); border-color: var(--line); }
html.ps-v2 .google-btn:hover { background: var(--card2); border-color: var(--acc); }
html.ps-v2 .menu-item:hover { background: var(--card2); }
html.ps-v2 .menu-item .menu-badge { background: var(--acc); color: var(--btn-fg, #fff); }
html.ps-v2 .menu-item.danger, html.ps-v2 .menu-item.danger > i { color: var(--err-fg); }
html.ps-v2 .menu-item.danger:hover { background: var(--err-bg); }
html.ps-v2 .menu-item { transition: background 0.2s ease, transform 0.15s ease, padding-left 0.2s ease; }
html.ps-v2 .menu-item:hover { padding-left: 1.05rem; }
html.ps-v2 .menu-item:active { transform: scale(0.98); }
html.ps-v2 .profile-avatar { background: linear-gradient(145deg, var(--acc), #ff5e3a); color: #fff; border-color: var(--card); }
html.ps-v2 .subpage-header .icon-circle { background: var(--card2); color: var(--acc); }
html.ps-v2 .profile-form .form-group input:disabled { background: var(--card2); opacity: 0.7; }
html.ps-v2 .otp-input.filled { background: var(--glow); border-color: var(--acc); }
html.ps-v2 .otp-input.invalid { background: var(--err-bg); border-color: var(--err-bd); color: var(--err-fg); }
html.ps-v2 .otp-resend-btn:not(:disabled), html.ps-v2 .otp-paste-btn { background: var(--card2); color: var(--acc); border-color: var(--line); }
html.ps-v2 .otp-timer-chip { background: var(--info-bg); color: var(--info-fg); }

/* search / reviews wrappers */
@keyframes psBeat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } 80% { transform: scale(1); } 90% { transform: scale(1.12); } }
html.ps-v2 .empty-results > i { animation: psFloat 3s ease-in-out infinite; }
@keyframes psFloat { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
    html.ps-v2 :is(.auth-wrapper, .profile-wrapper, .legal-wrapper, .orders-wrapper, .library-wrapper, .reviews-wrapper) { animation: none; }
    html.ps-v2 .empty-results > i { animation: none; }
    }

/* ---- Text-colour fixes (contrast) — same look, readable in both themes ---- */
html.ps-v2 .required { color: var(--err-fg); }
html.ps-v2 .lib-pay-btn { color: var(--btn-fg, #fff); }
html.ps-v2 .side-menu-links .pwa-installed-badge, html.ps-v2 .side-menu-links .pwa-installed-badge i { color: var(--ok-fg) !important; }
html.ps-v2[data-theme="dark"] .review-avatar { background: linear-gradient(135deg, var(--acc), #ff7a45); color: var(--btn-fg, #111); }
html.ps-v2[data-theme="dark"] .lib-pay-btn:hover { background: #ffa726; }


/* ---------- হোম: "বাছাই" বার (ক্যাটাগরি চিপের নিচে) ---------- */
html.ps-v2 .ps-sort-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin: 4px 2px 0; }
html.ps-v2 .ps-sec-title { font-size: 0.98rem; font-weight: 800; color: var(--txt); margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
html.ps-v2 .ps-sec-title i { color: var(--acc); }
html.ps-v2 .ps-sort-box { display: flex; align-items: center; gap: 6px; margin-left: auto; }
html.ps-v2 .ps-sort-label { font-size: 0.78rem; font-weight: 700; color: var(--mut); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
html.ps-v2 .ps-sort-select {
    background: var(--card); color: var(--txt); border: 1px solid var(--line); border-radius: 12px;
    padding: 7px 12px; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; outline: none; max-width: 190px;
    transition: border-color 0.2s;
}
html.ps-v2 .ps-sort-select:focus { border-color: var(--acc); }