/* =====================================================================
   "নতুন রং ও স্টাইল" — colour and style refresh of the current layout
   (design review round 2, draft). Loaded only while the switch is on.

   Same page structure, sections, links and admin data: only colours,
   type, spacing, buttons, cards, header and footer change. The old
   stylesheet is built on theme variables, so most of the change is the
   token block below; the rest restyles a few components.
   Tokens follow docs/DESIGN.md §2.
   ===================================================================== */

body.tw-style-refresh {
    /* Brand */
    --rf-pink: #FF1A58;        /* big CTAs, badges, active states */
    --rf-pink-600: #EB0A4A;    /* hover / pressed */
    --rf-pink-700: #D6003F;    /* small pink text, links (5.3:1 on white) */
    --rf-pink-100: #FFE0E9;
    --rf-pink-50: #FFF0F4;
    /* Ink, text, surfaces */
    --rf-ink: #1E2939;
    --rf-body: #4A5565;
    --rf-muted: #6A7282;
    --rf-dark: #15171C;        /* near-black bars: notice, category bar, footer */
    --rf-darker: #0D0E11;
    --rf-surface: #F8F9FB;
    --rf-line: #ECEEF2;
    /* Shape */
    --rf-r-sm: 8px;
    --rf-r-md: 12px;
    --rf-r-lg: 16px;
    --rf-r-xl: 24px;
    --rf-shadow-card: 0 1px 2px rgba(30, 41, 57, .06), 0 4px 12px rgba(30, 41, 57, .06);
    --rf-shadow-raise: 0 2px 4px rgba(30, 41, 57, .08), 0 10px 24px rgba(30, 41, 57, .10);
    /* Body text keeps the current site's order (Bangla font first). Putting Roboto
       first everywhere made every Bangla line fall back font by font, which cost
       about a tenth more layout time on each page load. */
    --rf-font: "Hind Siliguri", "Roboto", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --rf-font-latin: "Roboto", "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* The old stylesheet's theme variables, re-pointed */
    --primary: var(--rf-pink);
    --primary-color: var(--rf-pink);
    --primary-dark: var(--rf-pink-700);
    --primary-light: #FF5C86;
    --primary-soft: var(--rf-pink-100);
    --primary-rgb: 255, 26, 88;
    --secondary: var(--rf-ink);
    --secondary-color: var(--rf-ink);
    --footer-bg: var(--rf-dark);
    --copyright-bg: var(--rf-darker);
    --text: var(--rf-ink);
    --muted: var(--rf-muted);
    --border: var(--rf-line);

    font-family: var(--rf-font);
    color: var(--rf-ink);
}

/* Form controls do not inherit the page font on their own. */
body.tw-style-refresh :is(button, input, select, textarea) {
    font-family: inherit;
}

/* The old CSS pins these to plain Roboto, so their Bangla text fell back to a
   system font. They keep Roboto for Latin text and digits, with Hind Siliguri
   for the Bangla. */
body.tw-style-refresh :is(.notice-badge, .top-categories-title, .hot-deal-heading-text h2, .flash-sale-heading-text h2,
    .section-head h2, .btn-view-all, .product-title, .product-price, .btn-order, .btn-load-more,
    .category-banner h1, .product-detail-price) {
    font-family: var(--rf-font-latin);
}

body.tw-style-refresh :focus-visible {
    outline: 2px solid var(--rf-pink-700);
    outline-offset: 2px;
}

/* ---------- Header ---------- */
body.tw-style-refresh .notice-ticker {
    background: var(--rf-dark);
}

body.tw-style-refresh .notice-badge {
    background: var(--rf-pink);
}

body.tw-style-refresh .notice-text {
    color: #E5E7EB;
    font-weight: 400;
}

/* The admin "breaking news" ticker sets its colours inline, hence !important. */
body.tw-style-refresh .news-ticker-bar {
    background: var(--rf-dark) !important;
}

body.tw-style-refresh .news-ticker-label {
    background: var(--rf-pink) !important;
}

body.tw-style-refresh .news-ticker-item {
    color: #E5E7EB !important;
}

body.tw-style-refresh .site-header {
    background: #fff;
    border-bottom: 1px solid var(--rf-line);
}

body.tw-style-refresh .header-search,
body.tw-style-refresh .mobile-search {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: 999px;
}

body.tw-style-refresh .header-search:focus-within,
body.tw-style-refresh .mobile-search:focus-within {
    background: #fff;
    border-color: var(--rf-pink-700);
    box-shadow: 0 0 0 3px rgba(255, 26, 88, .12);
}

body.tw-style-refresh .header-search .search-submit,
body.tw-style-refresh .mobile-search .search-submit {
    border-radius: 999px;
    background: var(--rf-pink);
}

body.tw-style-refresh .cart-btn {
    border-radius: 999px;
    background: var(--rf-pink-50);
    color: var(--rf-pink-700);
    border: 1px solid var(--rf-pink-100);
}

body.tw-style-refresh .cart-count {
    background: var(--rf-ink);
    color: #fff;
}

body.tw-style-refresh .profile-btn {
    background: var(--rf-surface);
    color: var(--rf-ink);
    border: 1px solid var(--rf-line);
}

body.tw-style-refresh .btn-track {
    border-radius: 999px;
    background: var(--rf-ink);
    color: #fff;
}

body.tw-style-refresh .btn-track:hover {
    background: #000;
}

@media (min-width: 901px) {
    body.tw-style-refresh .header-category-bar {
        background: var(--rf-dark);
        border-top: 0;
    }

    body.tw-style-refresh .header-category-inner > .header-cat-link,
    body.tw-style-refresh .header-category-inner > .header-cat-item {
        border-right: 0;
    }

    body.tw-style-refresh .header-cat-link {
        font-weight: 500;
        font-size: 14.5px;
        padding: 12px 18px;
        position: relative;
    }

    body.tw-style-refresh .header-cat-link:hover,
    body.tw-style-refresh .header-cat-link.active {
        background: transparent;
        color: #fff;
    }

    body.tw-style-refresh .header-cat-link::after {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--rf-pink);
        opacity: 0;
        transition: opacity .2s;
    }

    body.tw-style-refresh .header-cat-link:hover::after,
    body.tw-style-refresh .header-cat-link.active::after {
        opacity: 1;
    }
}

/* ---------- Section headings and "see all" ---------- */
body.tw-style-refresh .section-head {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
}

body.tw-style-refresh .section-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rf-ink);
    font-size: 22px;
    font-weight: 700;
    text-transform: none;
}

body.tw-style-refresh .section-head h2::before {
    content: '';
    width: 5px;
    height: 22px;
    border-radius: 5px;
    background: var(--rf-pink);
    flex-shrink: 0;
}

body.tw-style-refresh .btn-view-all {
    background: #fff;
    color: var(--rf-ink);
    border: 1.5px solid var(--rf-ink);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    padding: 6px 16px;
}

body.tw-style-refresh .btn-view-all:hover {
    background: var(--rf-ink);
    color: #fff;
}

/* ---------- Home: top categories ---------- */
body.tw-style-refresh .top-categories-panel {
    background: var(--rf-pink-50);
    border-radius: var(--rf-r-xl);
    box-shadow: none;
}

body.tw-style-refresh .top-categories-title {
    color: var(--rf-ink);
    font-size: 22px;
}

body.tw-style-refresh .top-categories-title-wrap::after {
    width: 40px;
    height: 4px;
    background: var(--rf-pink);
}

body.tw-style-refresh .top-categories-viewall {
    background: var(--rf-ink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
}

/* ---------- Product cards (home, category, search, brand) ---------- */
body.tw-style-refresh .product-card {
    background: #fff;
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r-lg);
    transition: border-color .2s, box-shadow .2s;
}

body.tw-style-refresh .product-card:hover {
    border-color: var(--rf-pink-100);
    box-shadow: var(--rf-shadow-raise);
}

body.tw-style-refresh .product-thumb {
    background: var(--rf-surface);
}

body.tw-style-refresh .product-thumb img {
    border-radius: var(--rf-r-lg) var(--rf-r-lg) 0 0;
}

body.tw-style-refresh .product-body {
    padding: 12px 12px 14px;
}

body.tw-style-refresh .product-title {
    color: var(--rf-ink);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
}

body.tw-style-refresh .product-price {
    color: var(--rf-pink-700);
    font-size: 16px;
    font-weight: 700;
}

body.tw-style-refresh .product-price del,
body.tw-style-refresh .product-price .old {
    color: var(--rf-muted);
    font-weight: 400;
}

body.tw-style-refresh .deal-badge {
    background: var(--rf-pink);
    border-radius: var(--rf-r-sm);
}

body.tw-style-refresh .btn-order {
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    padding: 9px 0;
    background: var(--rf-pink);
}

body.tw-style-refresh .btn-order:hover {
    background: var(--rf-pink-700);
}

body.tw-style-refresh .btn-cart {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--rf-pink-100);
    background: var(--rf-pink-50);
    color: var(--rf-pink-700);
}

body.tw-style-refresh .btn-cart:hover {
    background: var(--rf-pink);
    border-color: var(--rf-pink);
    color: #fff;
}

/* ---------- Category page ---------- */
body.tw-style-refresh .shop-toolbar {
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r-lg);
    box-shadow: none;
}

body.tw-style-refresh .shop-sidebar {
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r-lg);
    box-shadow: none;
    overflow: hidden;
}

body.tw-style-refresh .shop-sidebar-head {
    background: var(--rf-ink);
    color: #fff;
}

body.tw-style-refresh .shop-cat-list li a:hover,
body.tw-style-refresh .shop-cat-list li a.active {
    background: var(--rf-pink-50);
    color: var(--rf-pink-700);
}

body.tw-style-refresh .shop-filter-apply {
    border-radius: 999px;
}

body.tw-style-refresh .shop-sort select {
    border-radius: 999px;
    border-color: var(--rf-line);
}

/* ---------- Product page ---------- */
body.tw-style-refresh .product-detail-title {
    color: var(--rf-ink);
    font-weight: 700;
}

body.tw-style-refresh .product-attrs {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r-md);
}

body.tw-style-refresh .product-detail-price {
    color: var(--rf-pink-700);
    font-weight: 700;
}

body.tw-style-refresh .product-detail-price del {
    color: var(--rf-muted);
    font-weight: 400;
}

body.tw-style-refresh .btn-add-cart,
body.tw-style-refresh .btn-buy-now {
    border-radius: 999px;
    font-weight: 700;
    font-size: 16px;
}

body.tw-style-refresh .btn-add-cart {
    border: 1.5px solid var(--rf-pink);
    color: var(--rf-pink-700);
}

body.tw-style-refresh .btn-add-cart:hover {
    background: var(--rf-pink-50);
    color: var(--rf-pink-700);
}

body.tw-style-refresh .btn-buy-now {
    background: var(--rf-pink);
}

body.tw-style-refresh .btn-buy-now:hover {
    background: var(--rf-pink-700);
}

body.tw-style-refresh .qty-selector {
    border-radius: 999px;
    overflow: hidden;
}

body.tw-style-refresh .weight-btn {
    border-radius: 999px;
}

body.tw-style-refresh .product-description,
body.tw-style-refresh .product-reviews {
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r-lg);
    box-shadow: none;
}

body.tw-style-refresh .pd-section-title,
body.tw-style-refresh .reviews-head h2 {
    color: var(--rf-ink);
}

body.tw-style-refresh .btn-write-review {
    border-radius: 999px;
}

/* ---------- Cart page ---------- */
body.tw-style-refresh .cart-page-card {
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r-lg);
    box-shadow: none;
}

/* The wider new font must not push the cart past the screen edge. */
@media (max-width: 860px) {
    body.tw-style-refresh .cart-page-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.tw-style-refresh .cart-page-checkout-btn,
body.tw-style-refresh .cart-page-coupon-btn {
    border-radius: 999px;
    background: var(--rf-pink);
    font-weight: 700;
}

body.tw-style-refresh .cart-page-coupon-input {
    border-radius: 999px;
}

/* ---------- Checkout (styling only) ---------- */
body.tw-style-refresh .ck-page {
    background: var(--rf-surface);
}

body.tw-style-refresh .ck-card {
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-r-lg);
    box-shadow: none;
}

body.tw-style-refresh .ck-card-head,
body.tw-style-refresh .ck-summary-title {
    background: #fff;
}

body.tw-style-refresh .ck-step-badge {
    background: var(--rf-ink);
    box-shadow: none;
}

body.tw-style-refresh .ck-input {
    border-radius: var(--rf-r-md);
    border-color: var(--rf-line);
    background-color: #fff; /* not the shorthand: it wiped the checkout select's arrow */
}

body.tw-style-refresh .ck-pay-option {
    border-radius: var(--rf-r-md);
}

body.tw-style-refresh .ck-place-order,
body.tw-style-refresh .ck-mobile-bar-btn,
body.tw-style-refresh .ck-coupon-btn {
    background: var(--rf-pink);
    border-radius: 999px;
    box-shadow: none;
}

body.tw-style-refresh .ck-place-order:hover {
    background: var(--rf-pink-700);
}

/* ---------- Features bar and footer ---------- */
body.tw-style-refresh .features-bar {
    background: var(--rf-pink-50);
    color: var(--rf-ink);
    border-top: 1px solid var(--rf-pink-100);
}

body.tw-style-refresh .feature-item i {
    color: var(--rf-pink);
}

body.tw-style-refresh .feature-item h4 {
    color: var(--rf-ink);
}

body.tw-style-refresh .feature-item p {
    color: var(--rf-body);
}

body.tw-style-refresh .site-footer {
    background: var(--rf-dark);
    color: #C9CDD6;
}

body.tw-style-refresh .footer-logo {
    display: inline-block;
    background: #fff;
    border-radius: var(--rf-r-md);
    padding: 8px 12px;
}

body.tw-style-refresh .footer-about p,
body.tw-style-refresh .footer-newsletter p {
    color: #AEB4BF;
}

body.tw-style-refresh .footer-grid h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

body.tw-style-refresh .footer-grid ul a {
    color: #C9CDD6;
}

body.tw-style-refresh .footer-grid ul a:hover {
    color: #FF6F95;
}

body.tw-style-refresh .social-links a {
    background: rgba(255, 255, 255, .08);
}

body.tw-style-refresh .social-links a:hover {
    background: var(--rf-pink);
}

body.tw-style-refresh .newsletter-form {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    border-radius: 999px;
}

body.tw-style-refresh .newsletter-form button {
    background: var(--rf-pink);
    color: #fff;
    border-radius: 999px;
}

body.tw-style-refresh .newsletter-form button:hover {
    background: var(--rf-pink-700);
}

body.tw-style-refresh .footer-bottom {
    background: var(--rf-darker);
    border-top-color: rgba(255, 255, 255, .06);
    color: #9CA3AF;
}

/* ---------- Bottom navigation (new five-item bar) ---------- */
@media (max-width: 900px) {
    body.tw-style-refresh .sbn {
        background: #fff;
        box-shadow: 0 -1px 0 var(--rf-line), 0 -4px 16px rgba(30, 41, 57, .08);
    }

    body.tw-style-refresh .sbn-item {
        color: var(--rf-muted);
    }

    body.tw-style-refresh .sbn-item.is-active {
        color: var(--rf-pink-700);
    }

    body.tw-style-refresh .sbn-item.is-active:not(.sbn-item--centre)::before {
        content: '';
        position: absolute;
        top: -6px;
        width: 22px;
        height: 3px;
        border-radius: 3px;
        background: var(--rf-pink);
    }

    body.tw-style-refresh .sbn-badge {
        background: var(--rf-pink);
    }

    body.tw-style-refresh .sbn-item--centre .sbn-badge {
        background: var(--rf-ink);
    }

    body.tw-style-refresh .sbn-item--centre .sbn-label {
        color: var(--rf-ink);
        font-weight: 700;
    }

    body.tw-style-refresh .sbn-item--centre .sbn-icon {
        box-shadow: 0 6px 16px rgba(30, 41, 57, .22);
    }
}

/* ---------- Old mobile bottom bar (when the new one is off) ---------- */
body.tw-style-refresh .mobile-bottom-nav a.active,
body.tw-style-refresh .mobile-bottom-nav a:hover {
    color: var(--rf-pink-700);
}

/* ---------- Chat button: near-black, so it never looks like the green WhatsApp button ----------
   The admin can pick another colour (--tw-chat, set in the page head); the white ring stays. */
body.tw-style-refresh #gcc-toggle {
    background: var(--tw-chat, var(--rf-ink));
    box-shadow: 0 8px 24px rgba(30, 41, 57, .35), 0 0 0 3px #fff;
}

body.tw-style-refresh #gcc-toggle:hover {
    box-shadow: 0 10px 28px rgba(30, 41, 57, .45), 0 0 0 3px #fff;
}

body.tw-style-refresh .gcc-header-icon-wrap,
body.tw-style-refresh .gcc-msg.bot .gcc-avatar {
    background: var(--tw-chat, var(--rf-ink));
}