/*
Theme Name: ResellHaat
Theme URI: https://resellhaat.com
Author: ResellHaat Engineering Team
Author URI: https://resellhaat.com
Description: Complete mobile-first responsive WordPress & WooCommerce theme for ResellHaat.com — Bangladesh's reselling and dropshipping platform. Built to match the approved ResellHaat UI design for both Before Login and After Login reseller experiences.
Version: 4.5.9
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: resellhaat
Tags: e-commerce, woocommerce, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

:root {
  --rh-primary: #008F7D;
  --rh-primary-dark: #006E60;
  --rh-primary-light: #EAF8F5;
  --rh-secondary: #26323B;
  --rh-bg: #FFFFFF;
  --rh-surface: #F7FBFA;
  --rh-border: #DCECE8;
  --rh-text: #26323B;
  --rh-text-muted: #5A6B75;
  --rh-danger: #D9383A;
  --rh-warning: #E68A00;
  --rh-success: #008F7D;
  --rh-radius-sm: 8px;
  --rh-radius-md: 12px;
  --rh-radius-lg: 18px;
  --rh-radius-pill: 999px;
  --rh-shadow-sm: 0 2px 8px rgba(38, 50, 59, 0.06);
  --rh-shadow-md: 0 6px 20px rgba(0, 143, 125, 0.10);
  --rh-font: 'Hind Siliguri', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--rh-font);
  background-color: var(--rh-bg);
  color: var(--rh-text);
  line-height: 1.55;
  overflow-x: hidden;
  padding-bottom: 72px; /* Space for sticky mobile bottom nav */
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }
}

a {
  color: var(--rh-primary);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: var(--rh-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.rh-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 14px;
}

@media (min-width: 768px) {
  .rh-container {
    padding: 0 24px;
  }
}

/* ==========================================================================
   HEADER (Matches Before Login & After Login Top Bar)
   ========================================================================== */
.rh-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--rh-bg);
  border-bottom: 1px solid var(--rh-border);
  box-shadow: 0 1px 6px rgba(38, 50, 59, 0.05);
}

.rh-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 10px;
}

.rh-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rh-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--rh-secondary);
  border-radius: var(--rh-radius-sm);
  cursor: pointer;
}

.rh-menu-toggle:hover,
.rh-menu-toggle:focus-visible {
  background: var(--rh-primary-light);
  outline: none;
}

.rh-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rh-brand-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 380px) {
  .rh-brand-logo img {
    height: 34px;
  }
}

/* Desktop Navigation Links */
.rh-desktop-nav {
  display: none;
}

@media (min-width: 1024px) {
  .rh-desktop-nav {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .rh-desktop-nav a {
    color: var(--rh-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 6px 10px;
    border-radius: var(--rh-radius-sm);
  }
  .rh-desktop-nav a:hover,
  .rh-desktop-nav a.active {
    color: var(--rh-primary);
    background: var(--rh-primary-light);
  }
}

/* Header Right Actions (Balance Pill + Avatar or Login/Register) */
.rh-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rh-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rh-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--rh-radius-pill);
  padding: 6px 13px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 143, 125, 0.22);
  white-space: nowrap;
}

.rh-balance-pill:hover {
  background: var(--rh-primary-dark);
}

.rh-balance-pill .rh-taka-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 700;
  font-size: 0.8rem;
}

.rh-avatar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--rh-primary);
  background: var(--rh-primary-light);
  color: var(--rh-primary-dark);
  font-weight: 700;
  font-size: 0.9rem;
  overflow: hidden;
  flex-shrink: 0;
}

/* ==========================================================================
   SLIDE-OUT DRAWER MENU (Matches Screen 3 "Menu" in 19562.png)
   ========================================================================== */
.rh-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(38, 50, 59, 0.45);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rh-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.rh-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 86vw;
  background: var(--rh-bg);
  z-index: 2000;
  transform: translateX(-100%);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(38, 50, 59, 0.16);
}

.rh-drawer.is-open {
  transform: translateX(0);
}

.rh-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rh-border);
}

.rh-drawer-close {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--rh-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: var(--rh-radius-sm);
}

.rh-drawer-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rh-border);
  background: #FAFCFB;
  color: var(--rh-secondary);
}

.rh-drawer-profile-info {
  display: flex;
  align-items: center;
  gap: 11px;
}

.rh-drawer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--rh-primary);
  background: var(--rh-primary-light);
  color: var(--rh-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
}

.rh-drawer-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rh-secondary);
  line-height: 1.25;
}

.rh-drawer-role {
  font-size: 0.8rem;
  color: var(--rh-text-muted);
}

.rh-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 20px;
}

.rh-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--rh-radius-sm);
  color: var(--rh-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid #F1F6F5;
}

.rh-drawer-item:hover,
.rh-drawer-item.is-active {
  background: var(--rh-primary-light);
  color: var(--rh-primary-dark);
  font-weight: 600;
}

.rh-drawer-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rh-primary);
  flex-shrink: 0;
}

.rh-drawer-divider {
  height: 1px;
  background: var(--rh-border);
  margin: 6px 4px;
}

/* ==========================================================================
   BEFORE LOGIN HERO & LANDING SECTIONS (Matches Screen 1 in 19562.png)
   ========================================================================== */
.rh-hero-guest {
  background: linear-gradient(135deg, #F3FBF9 0%, #EAF8F5 55%, #FFFFFF 100%);
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--rh-border);
}

.rh-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}

@media (min-width: 900px) {
  .rh-hero-guest {
    padding: 42px 0;
  }
  .rh-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
  }
}

.rh-hero-title {
  font-size: 1.65rem;
  line-height: 1.28;
  font-weight: 800;
  color: #006E60;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .rh-hero-title {
    font-size: 2.35rem;
  }
}

.rh-hero-subtitle {
  font-size: 0.95rem;
  color: var(--rh-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}

.rh-hero-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
}

@media (min-width: 640px) {
  .rh-hero-cta-stack {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.rh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--rh-radius-md);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
}

.rh-btn-sm {
  padding: 7px 13px;
  font-size: 0.84rem;
  border-radius: var(--rh-radius-sm);
}

.rh-btn-primary {
  background: var(--rh-primary);
  color: #FFFFFF;
  border-color: var(--rh-primary);
  box-shadow: 0 3px 10px rgba(0, 143, 125, 0.22);
}

.rh-btn-primary:hover {
  background: var(--rh-primary-dark);
  color: #FFFFFF;
}

.rh-btn-outline {
  background: #FFFFFF;
  color: var(--rh-primary-dark);
  border-color: var(--rh-primary);
}

.rh-btn-outline:hover {
  background: var(--rh-primary-light);
  color: var(--rh-primary-dark);
}

.rh-btn-secondary {
  background: var(--rh-secondary);
  color: #FFFFFF;
  border-color: var(--rh-secondary);
}

.rh-btn-block {
  width: 100%;
}

/* 4-Step Visual Process Strip (Matches Screen 1 "কিভাবে কাজ করে?") */
.rh-section {
  padding: 22px 0;
}

.rh-section-alt {
  background: var(--rh-surface);
}

.rh-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}

.rh-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--rh-secondary);
}

@media (min-width: 768px) {
  .rh-section-title {
    font-size: 1.35rem;
  }
}

.rh-see-more-link {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--rh-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.rh-steps-visual-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
  margin-bottom: 16px;
}

@media (max-width: 359px) {
  .rh-steps-visual-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rh-step-mini {
  background: #FFFFFF;
  border: 1px solid var(--rh-border);
  border-radius: var(--rh-radius-md);
  padding: 10px 6px;
  position: relative;
}

.rh-step-mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--rh-primary-light);
  color: var(--rh-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}

.rh-step-mini-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rh-primary);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.rh-step-mini-text {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--rh-secondary);
  line-height: 1.3;
}

/* 4 Feature Trust Strip at bottom of Before Login screen */
.rh-trust-strip {
  background: var(--rh-primary-light);
  border-radius: var(--rh-radius-md);
  padding: 12px 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
}

@media (max-width: 359px) {
  .rh-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rh-trust-item {
  padding: 4px;
  border-right: 1px solid rgba(0, 143, 125, 0.16);
}

.rh-trust-item:last-child {
  border-right: none;
}

.rh-trust-icon {
  color: var(--rh-primary);
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
}

.rh-trust-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rh-secondary);
  line-height: 1.25;
}

/* ==========================================================================
   AFTER LOGIN DASHBOARD & ICON GRIDS (Matches Screen 2 in 19562.png)
   ========================================================================== */
.rh-promo-banner {
  background: linear-gradient(125deg, #D9F4EE 0%, #EAF8F5 60%, #CBECE4 100%);
  border-radius: var(--rh-radius-lg);
  padding: 16px;
  margin-top: 12px;
  border: 1px solid #BFE6DD;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 400px) {
  .rh-promo-banner {
    grid-template-columns: 1fr;
  }
}

.rh-promo-banner h2 {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--rh-secondary);
  line-height: 1.3;
  margin-bottom: 6px;
}

.rh-promo-banner p {
  font-size: 0.8rem;
  color: var(--rh-secondary);
  line-height: 1.45;
}

.rh-banner-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  grid-column: 1 / -1;
}

.rh-banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 143, 125, 0.28);
}

.rh-banner-dot.active {
  background: var(--rh-primary);
  width: 16px;
  border-radius: 99px;
}

/* 4 Social / Support Quick Circles (Call Center, Facebook, YouTube, Telegram) */
.rh-quick-socials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 0 6px;
  text-align: center;
}

.rh-social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--rh-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.rh-social-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.rh-social-call { background: #008F7D; }
.rh-social-fb   { background: #1877F2; }
.rh-social-yt   { background: #FF0000; }
.rh-social-tg   { background: #26A5E4; }

/* Pastel Icon Grid (4 columns on mobile & desktop, 2-col fallback <340px) */
.rh-pastel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

@media (max-width: 340px) {
  .rh-pastel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rh-pastel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 6px;
  border-radius: var(--rh-radius-md);
  color: var(--rh-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  gap: 7px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rh-pastel-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rh-shadow-sm);
  color: var(--rh-secondary);
}

.rh-pastel-teal   { background: #E4F7F4; color: #00796B; }
.rh-pastel-orange { background: #FFF2E5; color: #E66A00; }
.rh-pastel-blue   { background: #E9F2FF; color: #1967D2; }
.rh-pastel-yellow { background: #FFF8E1; color: #D98200; }
.rh-pastel-peach  { background: #FDECE8; color: #D94826; }
.rh-pastel-purple { background: #F3E8FD; color: #7B2CBF; }
.rh-pastel-green  { background: #E6F8EA; color: #1E8E3E; }
.rh-pastel-pink   { background: #FCE8EE; color: #C2185B; }

.rh-pastel-card span.rh-card-label {
  color: var(--rh-secondary);
}

/* Bottom 2 wide support pills in After Login screen */
.rh-dual-support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.rh-support-pill-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: var(--rh-radius-md);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--rh-secondary);
}

.rh-support-faq { background: #E9F3FF; }
.rh-support-center { background: #FFF5E5; }

/* ==========================================================================
   CATEGORY BUTTONS / CARDS (Public Homepage - No Product Photos)
   ========================================================================== */
.rh-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 600px) {
  .rh-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .rh-category-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.rh-category-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: #FFFFFF;
  border: 1px solid var(--rh-border);
  border-radius: var(--rh-radius-md);
  color: var(--rh-secondary);
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--rh-shadow-sm);
}

.rh-category-card:hover {
  border-color: var(--rh-primary);
  background: var(--rh-primary-light);
  color: var(--rh-primary-dark);
}

.rh-category-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--rh-radius-sm);
  background: var(--rh-primary-light);
  color: var(--rh-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
}

/* ==========================================================================
   PRODUCT CATALOG GRID (3 Cards/Row on Mobile >=360px, 2-col fallback <360px)
   ========================================================================== */
.rh-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 359px) {
  .rh-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (min-width: 768px) {
  .rh-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1100px) {
  .rh-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
}

.rh-product-card {
  background: #FFFFFF;
  border: 1px solid var(--rh-border);
  border-radius: var(--rh-radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--rh-shadow-sm);
}

.rh-product-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F3F7F6;
  overflow: hidden;
}

.rh-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rh-stock-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 143, 125, 0.92);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.rh-stock-badge.out {
  background: rgba(217, 56, 58, 0.92);
}

.rh-product-body {
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.rh-product-title {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--rh-secondary);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.95rem;
}

@media (min-width: 768px) {
  .rh-product-body {
    padding: 10px;
  }
  .rh-product-title {
    font-size: 0.88rem;
  }
}

.rh-product-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--rh-primary-dark);
}

.rh-product-suggested {
  font-size: 0.68rem;
  color: var(--rh-text-muted);
}

.rh-product-action {
  margin-top: 4px;
  width: 100%;
  padding: 5px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  background: var(--rh-primary);
  color: #FFFFFF;
  text-align: center;
  display: block;
}

.rh-product-action:hover {
  background: var(--rh-primary-dark);
  color: #FFFFFF;
}

/* ==========================================================================
   DASHBOARD KPI WIDGETS, TABLES & FORMS
   ========================================================================== */
.rh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}

@media (min-width: 768px) {
  .rh-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rh-kpi-card {
  background: #FFFFFF;
  border: 1px solid var(--rh-border);
  border-left: 4px solid var(--rh-primary);
  border-radius: var(--rh-radius-sm);
  padding: 12px;
  box-shadow: var(--rh-shadow-sm);
}

.rh-kpi-label {
  font-size: 0.76rem;
  color: var(--rh-text-muted);
  font-weight: 600;
}

.rh-kpi-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--rh-secondary);
  margin-top: 3px;
}

.rh-card {
  background: #FFFFFF;
  border: 1px solid var(--rh-border);
  border-radius: var(--rh-radius-md);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--rh-shadow-sm);
}

.rh-form-group {
  margin-bottom: 12px;
}

.rh-form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rh-secondary);
  margin-bottom: 5px;
}

.rh-input,
.rh-select,
.rh-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #C5DDD8;
  border-radius: var(--rh-radius-sm);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--rh-secondary);
  background: #FFFFFF;
}

.rh-input:focus,
.rh-select:focus,
.rh-textarea:focus {
  outline: none;
  border-color: var(--rh-primary);
  box-shadow: 0 0 0 3px rgba(0, 143, 125, 0.14);
}

.rh-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.rh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.rh-table th,
.rh-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--rh-border);
  text-align: left;
}

.rh-table th {
  background: var(--rh-primary-light);
  color: var(--rh-secondary);
  font-weight: 700;
}

.rh-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
}

.rh-badge-pending   { background: #FFF4E5; color: #B25E00; }
.rh-badge-confirmed { background: #E8F4FD; color: #0B65C6; }
.rh-badge-shipped   { background: #F1E8FD; color: #6A1B9A; }
.rh-badge-delivered { background: #E6F8EA; color: #1B7E36; }
.rh-badge-settled   { background: #008F7D; color: #FFFFFF; }
.rh-badge-cancelled { background: #FDECE8; color: #C62828; }

/* ==========================================================================
   STICKY MOBILE BOTTOM NAVIGATION BAR (Matches Screen 1 & Screen 2)
   ========================================================================== */
.rh-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: #FFFFFF;
  border-top: 1px solid var(--rh-border);
  box-shadow: 0 -2px 10px rgba(38, 50, 59, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
}

@media (min-width: 1024px) {
  .rh-bottom-nav {
    display: none;
  }
}

.rh-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--rh-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  height: 100%;
}

.rh-bottom-nav-item.is-active,
.rh-bottom-nav-item:hover {
  color: var(--rh-primary);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.rh-footer {
  background: var(--rh-secondary);
  color: #E2ECE9;
  padding: 32px 0 24px;
  margin-top: 32px;
  font-size: 0.88rem;
}

.rh-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .rh-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.rh-footer h4 {
  color: #FFFFFF;
  margin-bottom: 10px;
  font-size: 1rem;
}

.rh-footer ul {
  list-style: none;
}

.rh-footer ul li {
  margin-bottom: 6px;
}

.rh-footer a {
  color: #B8D8D2;
}

.rh-footer a:hover {
  color: #FFFFFF;
}

.rh-hidden {
  display: none !important;
}

/* ==========================================================================
   NAMESPACED AUTHENTICATION UI (Matches Reference Image 1 & Reference Image 2)
   ========================================================================== */
.rh-auth-topbar {
  background: #008F7D;
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(0, 143, 125, 0.2);
}

.rh-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
}

.rh-auth-brand:hover {
  color: #FFFFFF;
}

.rh-auth-bag-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-auth-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.rh-auth-brand-title {
  font-size: 1.22rem;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.rh-auth-brand-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
}

.rh-auth-menu-toggle:hover,
.rh-auth-menu-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

.rh-is-auth-page {
  background: linear-gradient(180deg, #EAF8F5 0%, #FFFFFF 38%, #FFFFFF 76%, #EAF8F5 100%);
}

.rh-auth-shell {
  max-width: 470px;
  margin: 0 auto;
  padding: 12px 4px 28px;
}

.rh-auth-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 24px 18px 26px;
  box-shadow: 0 8px 30px rgba(38, 50, 59, 0.07);
  border: 1px solid #E2F1EE;
}

@media (min-width: 640px) {
  .rh-auth-shell {
    padding: 28px 12px 42px;
  }
  .rh-auth-card {
    padding: 32px 28px 34px;
  }
}

.rh-auth-hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.rh-auth-bag-img {
  width: 82px;
  height: auto;
  object-fit: contain;
}

.rh-auth-bag-reg {
  width: 112px;
}

.rh-auth-heading {
  font-size: 1.65rem;
  font-weight: 800;
  color: #26323B;
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.25;
}

.rh-auth-subheading {
  font-size: 0.9rem;
  color: #5A6B75;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.5;
}

.rh-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rh-auth-field-wrap {
  display: flex;
  flex-direction: column;
}

.rh-auth-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #26323B;
  margin-bottom: 6px;
}

.rh-auth-label .rh-req {
  color: #D9383A;
}

.rh-auth-label .rh-opt {
  font-weight: 500;
  color: #5A6B75;
  font-size: 0.84rem;
}

.rh-auth-input-box {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #CEDFDB;
  border-radius: 12px;
  padding: 4px 10px;
  min-height: 50px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rh-auth-input-box:focus-within {
  border-color: #008F7D;
  box-shadow: 0 0 0 3px rgba(0, 143, 125, 0.13);
}

.rh-auth-phone-row {
  padding-right: 6px;
  gap: 6px;
}

.rh-auth-input-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
}

.rh-auth-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.94rem;
  color: #26323B;
  padding: 8px 6px;
}

.rh-auth-input:focus {
  outline: none;
}

.rh-auth-input::placeholder {
  color: #7D8E97;
}

.rh-auth-field-hint {
  font-size: 0.78rem;
  color: #697A84;
  margin-top: 5px;
  padding-left: 4px;
}

.rh-auth-eye-btn {
  border: none;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.rh-auth-eye-btn:hover {
  background: #EAF8F5;
}

.rh-auth-inline-btn {
  background: #008F7D;
  color: #FFFFFF;
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.rh-auth-inline-btn:hover {
  background: #006E60;
}

.rh-auth-inline-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* OTP Verification Panel (Matches Reference Image 2) */
.rh-otp-panel {
  background: #EEF9F6;
  border: 1px solid #CDECE5;
  border-radius: 14px;
  padding: 12px;
}

.rh-otp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.rh-otp-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

@media (max-width: 379px) {
  .rh-otp-controls-row {
    flex-direction: column;
    align-items: stretch;
  }
  .rh-verify-btn {
    width: 100%;
    padding: 10px;
  }
}

.rh-otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  flex: 1;
}

.rh-otp-digit {
  width: 100%;
  height: 42px;
  border: 1.5px solid #C8DDD8;
  border-radius: 8px;
  background: #FFFFFF;
  text-align: center;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #26323B;
  padding: 0;
}

.rh-otp-digit:focus {
  outline: none;
  border-color: #008F7D;
  box-shadow: 0 0 0 2px rgba(0, 143, 125, 0.18);
}

.rh-otp-feedback {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 8px;
  min-height: 18px;
}

.rh-otp-feedback.is-success {
  color: #00796B;
}

.rh-otp-feedback.is-error {
  color: #D9383A;
}

.rh-resend-btn {
  background: none;
  border: none;
  color: #008F7D;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.rh-resend-btn:disabled {
  color: #697A84;
  text-decoration: none;
  cursor: default;
}

.rh-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #00796B;
  background: #E4F7F4;
  padding: 3px 10px;
  border-radius: 99px;
  align-self: flex-start;
}

.rh-auth-optional-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #5A6B75;
  margin-top: 6px;
}

.rh-info-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.3px solid #5A6B75;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.rh-auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}

.rh-auth-forgot-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: #008F7D;
}

.rh-auth-submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #008F7D;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 143, 125, 0.25);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.rh-auth-submit-btn:hover {
  background: #006E60;
  color: #FFFFFF;
}

.rh-auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0 14px;
  color: #697A84;
  font-size: 0.85rem;
}

.rh-auth-divider::before,
.rh-auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #DCECE8;
}

.rh-auth-divider span {
  padding: 0 12px;
}

.rh-auth-switch-row {
  text-align: center;
  font-size: 0.92rem;
  color: #26323B;
}

.rh-auth-switch-link {
  font-weight: 700;
  color: #008F7D;
  margin-left: 4px;
}

.rh-auth-switch-link.rh-underline {
  text-decoration: underline;
}

.rh-step2-summary {
  background: #EAF8F5;
  border: 1px solid #BCE5DC;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.86rem;
  display: grid;
  gap: 4px;
}

.rh-verified-inline {
  color: #00796B;
  font-weight: 700;
}

/* ==========================================================================
   V1.3.0 HOMEPAGE REDESIGN: COMPACT RECTANGULAR BANNER, COMMERCIAL CARDS,
   CALL CENTER MODAL, DEMO PRODUCT SHOWCASE & 5-ITEM BOTTOM NAVIGATION
   ========================================================================== */
.rh-homepage-wrap {
  padding-top: 12px;
  padding-bottom: 20px;
}

/* 1. Compact Rectangular Banner (Significantly reduced height, clean teal & white) */
.rh-compact-banner {
  background: linear-gradient(120deg, #EAF8F5 0%, #FFFFFF 65%, #E3F6F2 100%);
  border: 1px solid #C6E6DF;
  border-left: 4px solid #008F7D;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(38, 50, 59, 0.04);
}

@media (min-width: 768px) {
  .rh-compact-banner {
    padding: 16px 22px;
  }
}

.rh-compact-banner-content {
  flex: 1;
  min-width: 0;
}

.rh-compact-banner-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.3;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .rh-compact-banner-title {
    font-size: 1.3rem;
  }
}

.rh-compact-banner-text {
  font-size: 0.8rem;
  color: #495A63;
  line-height: 1.45;
  margin-bottom: 10px;
  max-width: 680px;
}

@media (min-width: 768px) {
  .rh-compact-banner-text {
    font-size: 0.88rem;
  }
}

.rh-compact-banner-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rh-btn-compact {
  padding: 7px 13px;
  font-size: 0.82rem;
  border-radius: 8px;
  font-weight: 700;
  gap: 6px;
}

.rh-compact-banner-emblem {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 359px) {
  .rh-compact-banner-emblem {
    display: none;
  }
}

.rh-banner-badge-box {
  background: #FFFFFF;
  border: 1px solid #D3ECE6;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 143, 125, 0.08);
}

.rh-banner-bag-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 3px;
  object-fit: contain;
}

.rh-banner-badge-caption {
  font-size: 0.68rem;
  font-weight: 700;
  color: #008F7D;
}

/* 2. Quick Connect Strip (Call Center, Facebook, YouTube, Telegram) */
.rh-connect-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

@media (min-width: 768px) {
  .rh-connect-strip {
    gap: 12px;
  }
}

.rh-connect-card {
  background: #FFFFFF;
  border: 1px solid #D7EAE6;
  border-radius: 10px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  color: #26323B;
  box-shadow: 0 1px 4px rgba(38, 50, 59, 0.04);
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}

.rh-connect-card:hover,
.rh-connect-card:focus-visible {
  border-color: #008F7D;
  background: #F4FBF9;
  color: #26323B;
  transform: translateY(-1px);
  outline: none;
}

.rh-connect-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-connect-teal { background: #008F7D; }
.rh-connect-fb   { background: #1877F2; }
.rh-connect-yt   { background: #D32F2F; }
.rh-connect-tg   { background: #1E96C8; }

.rh-connect-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #26323B;
  line-height: 1.2;
}

.rh-connect-sub {
  font-size: 0.65rem;
  color: #5A6B75;
}

.rh-connect-soon-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: #006E60;
  background: #EAF8F5;
  border: 1px solid #BDE3DC;
  padding: 1px 6px;
  border-radius: 99px;
}

.rh-coming-soon-toast {
  margin-top: 8px;
  background: #26323B;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  text-align: center;
}

/* 3. Commercial-Grade Homepage Category & Tool Cards */
.rh-home-block {
  margin-top: 18px;
}

.rh-pro-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 349px) {
  .rh-pro-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .rh-pro-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1100px) {
  .rh-pro-category-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
  }
  .rh-pro-tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rh-pro-cat-card {
  background: #FFFFFF;
  border: 1px solid #D5EAE5;
  border-radius: 10px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  color: #26323B;
  box-shadow: 0 2px 6px rgba(38, 50, 59, 0.04);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.rh-pro-cat-card:hover,
.rh-pro-cat-card:focus-visible {
  border-color: #008F7D;
  background: #EAF8F5;
  color: #006E60;
  box-shadow: 0 4px 12px rgba(0, 143, 125, 0.10);
  outline: none;
}

.rh-pro-cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #EAF8F5;
  color: #008F7D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rh-pro-cat-card:hover .rh-pro-cat-icon {
  background: #008F7D;
  color: #FFFFFF;
}

.rh-pro-cat-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #26323B;
  line-height: 1.25;
}

.rh-pro-support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #D5EAE5;
  border-radius: 10px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  color: #26323B;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(38, 50, 59, 0.04);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rh-pro-support-btn:hover,
.rh-pro-support-btn:focus-visible {
  border-color: #008F7D;
  background: #EAF8F5;
  color: #006E60;
  outline: none;
}

/* 4. Catalog Filter Pills, Empty State & Demo Product Cards */
.rh-catalog-header-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .rh-catalog-header-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.rh-catalog-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rh-filter-pill {
  padding: 5px 11px;
  border-radius: 99px;
  background: #FFFFFF;
  border: 1px solid #CDE4DF;
  color: #26323B;
  font-size: 0.76rem;
  font-weight: 600;
}

.rh-filter-pill.is-active,
.rh-filter-pill:hover {
  background: #008F7D;
  border-color: #008F7D;
  color: #FFFFFF;
}

.rh-catalog-search-form {
  margin-bottom: 12px;
}

.rh-search-box-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.rh-empty-state-box {
  background: #FFFFFF;
  border: 1px dashed #B9DCD5;
  border-radius: 12px;
  padding: 20px 14px;
  text-align: center;
  margin-bottom: 14px;
}

.rh-empty-state-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #EAF8F5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

.rh-empty-state-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #26323B;
  margin-bottom: 4px;
}

.rh-empty-state-desc {
  font-size: 0.82rem;
  color: #5A6B75;
  max-width: 540px;
  margin: 0 auto;
}

.rh-demo-banner-note {
  background: #EAF8F5;
  border: 1px solid #BDE3DC;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.78rem;
  color: #26323B;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rh-demo-pill {
  background: #26323B;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

.rh-demo-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 768px) {
  .rh-demo-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

.rh-product-card-premium {
  border-radius: 10px;
  border: 1px solid #D5EAE5;
}

.rh-demo-thumb {
  background: linear-gradient(145deg, #F2FBF9 0%, #E4F5F1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}

.rh-badge-demo {
  background: #26323B;
}

.rh-demo-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rh-demo-art-code {
  font-size: 0.7rem;
  font-weight: 700;
  color: #006E60;
}

.rh-product-meta-list {
  display: grid;
  gap: 2px;
  font-size: 0.73rem;
  color: #495A63;
  margin: 4px 0;
}

.rh-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.rh-meta-profit {
  color: #008F7D;
  border-top: 1px dashed #DFEFEA;
  padding-top: 2px;
  margin-top: 2px;
}

.rh-demo-detail-trigger {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

/* 5. Call Center & Demo Product Modal Popup */
.rh-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(38, 50, 59, 0.55);
  z-index: 3000;
}

.rh-modal {
  position: fixed;
  inset: 0;
  z-index: 3001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.rh-modal-card {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 390px;
  padding: 22px 18px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 12px 34px rgba(38, 50, 59, 0.22);
  border: 1px solid #D5EAE5;
}

.rh-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: #F1F7F6;
  color: #26323B;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.rh-modal-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #EAF8F5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.rh-modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #26323B;
  margin-bottom: 4px;
}

.rh-modal-desc {
  font-size: 0.86rem;
  color: #5A6B75;
  margin-bottom: 10px;
}

.rh-modal-number-pill {
  display: inline-block;
  background: #F4FBF9;
  border: 1px solid #CBE8E1;
  color: #26323B;
  font-size: 0.84rem;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 14px;
}

.rh-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 340px) {
  .rh-modal-actions {
    grid-template-columns: 1fr;
  }
}

.rh-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
}

.rh-modal-btn:hover {
  color: #FFFFFF;
  opacity: 0.94;
}

.rh-modal-btn-call {
  background: #008F7D;
}

.rh-modal-btn-wa {
  background: #1DA851;
}

.rh-footer-link-btn {
  background: none;
  border: none;
  color: #B8D8D2;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
}

.rh-footer-link-btn:hover {
  color: #FFFFFF;
}

/* Safe-area support & active bar on 5-item bottom navigation */
.rh-bottom-nav {
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.rh-bottom-nav-item {
  position: relative;
}

.rh-bottom-nav-item.is-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 3px;
  background: #008F7D;
  border-radius: 0 0 4px 4px;
}

/* ==========================================================================
   V1.4.0 COMPLETE PRODUCT CATALOG, 17-DEPARTMENT CATEGORY GRID,
   SINGLE CATEGORY SUBCATEGORY CHIPS & RESELLER BUSINESS PRODUCT CARDS
   ========================================================================== */
.rh-catalog-v140-wrap {
  padding-bottom: 28px;
}

.rh-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
  color: #5A6B75;
  margin-bottom: 8px;
}

.rh-breadcrumb a {
  color: #5A6B75;
  font-weight: 500;
}

.rh-breadcrumb a:hover {
  color: #008F7D;
}

.rh-crumb-sep {
  color: #9EB0B8;
}

.rh-allprod-header {
  margin-bottom: 12px;
}

.rh-allprod-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.2;
}

.rh-allprod-subtitle {
  font-size: 0.85rem;
  color: #5A6B75;
  margin-top: 2px;
}

/* Search & Filter Trigger Row */
.rh-allprod-search-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 14px;
}

.rh-search-input-group {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #CFE3DF;
  border-radius: 10px;
  padding: 3px 5px 3px 10px;
  box-shadow: 0 2px 6px rgba(38, 50, 59, 0.04);
}

.rh-search-input-group:focus-within {
  border-color: #008F7D;
}

.rh-search-icon {
  display: inline-flex;
  margin-right: 6px;
}

.rh-search-field {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.86rem;
  color: #26323B;
  padding: 6px 4px;
}

.rh-search-field:focus {
  outline: none;
}

.rh-search-submit-btn {
  background: #008F7D;
  color: #FFFFFF;
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.rh-filter-drawer-toggle {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid #CFE3DF;
  background: #FFFFFF;
  color: #26323B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rh-filter-drawer-toggle:hover {
  border-color: #008F7D;
  color: #008F7D;
}

/* Compact Promotional Banner on All Products Page */
.rh-catalog-mini-banner {
  background: linear-gradient(125deg, #DDF5F0 0%, #EAF8F5 65%, #CBECE4 100%);
  border: 1px solid #BEE4DC;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.rh-cmb-text h2 {
  font-size: 1.08rem;
  font-weight: 800;
  color: #26323B;
  margin-bottom: 3px;
}

.rh-cmb-text p {
  font-size: 0.8rem;
  color: #495A63;
  margin-bottom: 8px;
}

.rh-cmb-btn {
  display: inline-flex;
  align-items: center;
  background: #008F7D;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
}

.rh-cmb-btn:hover {
  background: #006E60;
  color: #FFFFFF;
}

.rh-cmb-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Complete Category Tile Grid (4 cols on mobile >=360px, 3 cols on <360px, 6-8 cols on desktop) */
.rh-cat-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

@media (max-width: 359px) {
  .rh-cat-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
}

@media (min-width: 768px) {
  .rh-cat-tile-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 1100px) {
  .rh-cat-tile-grid {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 10px;
  }
}

.rh-cat-tile-card {
  background: #FFFFFF;
  border: 1px solid #D7EAE5;
  border-radius: 12px;
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 6px;
  color: #26323B;
  box-shadow: 0 2px 5px rgba(38, 50, 59, 0.03);
  transition: border-color 0.15s ease, transform 0.12s ease;
}

.rh-cat-tile-card:hover {
  border-color: #008F7D;
  background: #F3FBF9;
  color: #006E60;
  transform: translateY(-1px);
}

.rh-cat-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #EAF8F5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rh-cat-tile-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #26323B;
  line-height: 1.22;
  word-break: break-word;
}

/* Complete Subcategory Directory Groups on All Products Page */
.rh-cat-directory-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .rh-cat-directory-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1100px) {
  .rh-cat-directory-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rh-cat-dept-card {
  background: #FFFFFF;
  border: 1px solid #DCECE8;
  border-radius: 10px;
  padding: 10px 12px;
}

.rh-cat-dept-head {
  margin-bottom: 6px;
}

.rh-cat-dept-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #26323B;
}

.rh-cat-dept-title:hover {
  color: #008F7D;
}

.rh-cat-dept-mini-icon svg {
  width: 18px;
  height: 18px;
}

.rh-cat-sub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rh-sub-chip-link {
  font-size: 0.71rem;
  font-weight: 600;
  color: #3E5059;
  background: #F4FAF8;
  border: 1px solid #D5EAE4;
  border-radius: 99px;
  padding: 3px 9px;
}

.rh-sub-chip-link:hover {
  background: #008F7D;
  border-color: #008F7D;
  color: #FFFFFF;
}

/* 4 Browsing Tabs Strip (সব প্রোডাক্ট, নতুন প্রোডাক্ট, ট্রেন্ডিং প্রোডাক্ট, টপ সেলিং) */
.rh-browsing-tabs-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #D7EAE5;
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 12px;
}

@media (max-width: 359px) {
  .rh-browsing-tabs-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rh-browse-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #26323B;
  text-align: center;
}

.rh-browse-tab.is-active,
.rh-browse-tab:hover {
  background: #EAF8F5;
  color: #006E60;
}

.rh-tab-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: #EAF8F5;
  color: #008F7D;
}

/* Single Category Header & Horizontal Subcategory Scroller (Matches Right Screen of 20330.png) */
.rh-single-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #D7EAE5;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.rh-cat-back-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #F3FAF8;
  border: 1px solid #CFE3DF;
  color: #26323B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.rh-single-cat-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #EAF8F5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-single-cat-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.2;
}

.rh-single-cat-desc {
  font-size: 0.75rem;
  color: #5A6B75;
  margin-top: 2px;
}

.rh-subcat-scroller {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}

.rh-subcat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  text-align: center;
  color: #26323B;
  flex-shrink: 0;
}

.rh-subcat-pill-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #F2F8F7;
  border: 1.5px solid #D5EAE4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #26323B;
}

.rh-subcat-pill.is-active .rh-subcat-pill-circle {
  background: #008F7D;
  border-color: #008F7D;
  color: #FFFFFF;
}

.rh-subcat-pill.is-active .rh-subcat-pill-circle svg {
  stroke: #FFFFFF;
}

.rh-subcat-pill-text {
  font-size: 0.71rem;
  font-weight: 700;
  color: #26323B;
  max-width: 72px;
  line-height: 1.2;
}

/* Sorting, Filter & Grid/List View Toolbar */
.rh-toolbar-row {
  margin-bottom: 12px;
}

.rh-toolbar-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.rh-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rh-toolbar-select {
  background: #FFFFFF;
  border: 1px solid #CFE3DF;
  border-radius: 8px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #26323B;
}

.rh-toolbar-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  border: 1px solid #CFE3DF;
  border-radius: 8px;
  padding: 7px 11px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #26323B;
  cursor: pointer;
}

.rh-toolbar-right {
  display: inline-flex;
  gap: 5px;
}

.rh-view-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #CFE3DF;
  background: #FFFFFF;
  color: #26323B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rh-view-toggle-btn.is-active {
  background: #008F7D;
  border-color: #008F7D;
  color: #FFFFFF;
}

.rh-filter-panel {
  background: #F4FBF9;
  border: 1px solid #C6E6DF;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.rh-filter-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

/* ==========================================================================
   RESELLER BUSINESS PRODUCT CARD (Matches Right Screen of 20330.png)
   ========================================================================== */
.rh-reseller-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 339px) {
  .rh-reseller-product-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .rh-reseller-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1100px) {
  .rh-reseller-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

.rh-reseller-product-grid.is-list-view {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .rh-reseller-product-grid.is-list-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rh-reseller-card {
  background: #FFFFFF;
  border: 1px solid #D7EAE5;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(38, 50, 59, 0.05);
}

.rh-reseller-product-grid.is-list-view .rh-reseller-card {
  flex-direction: row;
  align-items: stretch;
}

.rh-rc-media {
  position: relative;
  background: #F6FAF9;
  aspect-ratio: 1 / 0.88;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rh-reseller-product-grid.is-list-view .rh-rc-media {
  width: 135px;
  aspect-ratio: auto;
  flex-shrink: 0;
}

.rh-rc-img-link,
.rh-rc-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rh-rc-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #FFFFFF;
  z-index: 2;
}

.rh-card-badge-new      { background: #008F7D; }
.rh-card-badge-trending { background: #D94826; }
.rh-card-badge-top      { background: #C62828; }
.rh-card-badge-offer    { background: #B26A00; }

.rh-rc-fav-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #DCECE8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.rh-rc-demo-tag {
  position: absolute;
  top: 7px;
  right: 7px;
  background: #26323B;
  color: #FFFFFF;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.rh-rc-content {
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.rh-rc-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rh-rc-title a {
  color: #26323B;
}

.rh-rc-cat-crumb {
  font-size: 0.68rem;
  color: #63757F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3-Column Price Strip (পাইকারি মূল্য | সাজেস্টেড মূল্য | সম্ভাব্য লাভ) */
.rh-rc-price-strip {
  background: #EAF8F5;
  border: 1px solid #CBEAE3;
  border-radius: 8px;
  padding: 5px 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  text-align: center;
  margin: 2px 0;
}

.rh-rc-price-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 143, 125, 0.15);
  padding: 0 2px;
}

.rh-rc-price-col:last-child {
  border-right: none;
}

.rh-rc-price-lbl {
  font-size: 0.58rem;
  color: #52646E;
  line-height: 1.15;
}

.rh-rc-price-val {
  font-size: 0.73rem;
  font-weight: 800;
  color: #26323B;
  margin-top: 1px;
}

.rh-rc-profit-val {
  color: #008F7D;
}

/* 2-Button Action Row (ছবি ডাউনলোড & অর্ডার করুন / বিস্তারিত) */
.rh-rc-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: auto;
}

.rh-rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.rh-rc-btn-download {
  background: #FFFFFF;
  color: #008F7D;
  border: 1px solid #008F7D;
}

.rh-rc-btn-download:hover {
  background: #EAF8F5;
  color: #006E60;
}

.rh-rc-btn-order {
  background: #008F7D;
  color: #FFFFFF;
  border: 1px solid #008F7D;
}

.rh-rc-btn-order:hover {
  background: #006E60;
  color: #FFFFFF;
}

/* Pagination */
.rh-pagination-wrap {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rh-pagination-wrap .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #CFE3DF;
  color: #26323B;
  font-size: 0.82rem;
  font-weight: 700;
}

.rh-pagination-wrap .page-numbers.current,
.rh-pagination-wrap .page-numbers:hover {
  background: #008F7D;
  border-color: #008F7D;
  color: #FFFFFF;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================================================
   V1.5.0 ALL PRODUCTS PAGE: 8 MAIN CATEGORY SECTIONS, SUBCATEGORY CHIPS,
   DYNAMIC PRODUCT COUNTS & 4-COL MOBILE / 8-COL DESKTOP PRODUCT GRIDS
   (Matches Reference Image 20332.png)
   ========================================================================== */
.rh-catalog-v150-wrap {
  padding-top: 8px;
  padding-bottom: 28px;
}

.rh-ap-top-header {
  background: linear-gradient(135deg, #EAF8F5 0%, #F7FCFB 65%, #E3F6F1 100%);
  border: 1px solid #CDE8E1;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 900px) {
  .rh-ap-top-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
  }
  .rh-ap-top-left {
    flex: 1;
    max-width: 680px;
  }
}

.rh-ap-top-features {
  display: none;
}

@media (min-width: 900px) {
  .rh-ap-top-features {
    display: grid;
    gap: 5px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #CDE8E1;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #26323B;
    min-width: 210px;
  }
}

.rh-ap-feat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rh-ap-feat-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #008F7D;
  color: #FFFFFF;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 4 Quick Filter Pills Row (নতুন পণ্য, ট্রেন্ডিং প্রোডাক্ট, টপ সেলিং, সকল প্রোডাক্ট) */
.rh-ap-quick-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}

@media (max-width: 359px) {
  .rh-ap-quick-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rh-ap-qpill {
  background: #FFFFFF;
  border: 1px solid #D7EAE5;
  border-radius: 99px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #26323B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-ap-qpill.is-active,
.rh-ap-qpill:hover {
  border-color: #008F7D;
  background: #EAF8F5;
  color: #006E60;
}

.rh-qpill-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  flex-shrink: 0;
}

.rh-qb-teal  { background: #E0F5F1; color: #008F7D; }
.rh-qb-rose  { background: #FDECE8; color: #D94826; }
.rh-qb-green { background: #E6F8EA; color: #1E8E3E; }
.rh-qb-gold  { background: #FFF6E0; color: #B26A00; }

/* 8 Stacked Category Showcase Sections */
.rh-eight-sections-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rh-cat-showcase-section {
  background: #FFFFFF;
  border: 1px solid #D7EAE5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(38, 50, 59, 0.04);
}

.rh-cat-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 143, 125, 0.10);
}

/* Subtle Category-Specific Pastel Header Accents Matching 20332.png */
.rh-sec-accent-blue .rh-cat-sec-header     { background: #E8F4FA; }
.rh-sec-accent-rose .rh-cat-sec-header     { background: #FDEEEF; }
.rh-sec-accent-amber .rh-cat-sec-header    { background: #FFF3E8; }
.rh-sec-accent-teal .rh-cat-sec-header     { background: #E4F7F4; }
.rh-sec-accent-warm .rh-cat-sec-header     { background: #FFF6E9; }
.rh-sec-accent-coral .rh-cat-sec-header    { background: #FDEFF2; }
.rh-sec-accent-lavender .rh-cat-sec-header { background: #F2EEFD; }
.rh-sec-accent-mint .rh-cat-sec-header     { background: #E6F7EE; }

.rh-cat-sec-title-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #26323B;
}

.rh-cat-sec-title-link:hover {
  color: #008F7D;
}

.rh-cat-sec-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(0, 143, 125, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(38, 50, 59, 0.06);
}

.rh-cat-sec-heading-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.rh-cat-sec-heading {
  font-size: 1rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .rh-cat-sec-heading {
    font-size: 1.12rem;
  }
}

.rh-cat-sec-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #00796B;
}

.rh-cat-sec-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #008F7D;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 143, 125, 0.22);
}

.rh-cat-sec-arrow:hover {
  background: #006E60;
  color: #FFFFFF;
}

/* All Configured Subcategory Links Directly Beneath the Category Heading */
.rh-cat-sec-subchips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 12px;
  background: #FAFCFB;
  border-bottom: 1px solid #EDF5F3;
}

.rh-sec-subchip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  background: #FFFFFF;
  border: 1px solid #D3E7E2;
  color: #26323B;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.rh-sec-subchip:hover {
  background: #008F7D;
  border-color: #008F7D;
  color: #FFFFFF;
}

.rh-cat-sec-body {
  padding: 10px 12px 12px;
}

/* 4 Columns on Mobile (>=380px), 3/2 Cols on Narrow Mobile, 8 Columns on Desktop */
.rh-sec-products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 379px) {
  .rh-sec-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .rh-sec-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 1024px) {
  .rh-sec-products-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 1200px) {
  .rh-sec-products-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
  }
}

.rh-sec-prod-card {
  background: #FFFFFF;
  border: 1px solid #DCECE8;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rh-sec-prod-card:hover {
  border-color: #008F7D;
  box-shadow: 0 3px 10px rgba(0, 143, 125, 0.10);
}

.rh-sec-prod-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #26323B;
}

.rh-sec-prod-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F5FAF8;
  overflow: hidden;
}

.rh-sec-prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rh-sec-prod-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #008F7D;
  color: #FFFFFF;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}

.rh-sec-prod-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.rh-sec-prod-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #26323B;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rh-sec-prod-prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.63rem;
  color: #495A63;
}

.rh-spp-line strong {
  color: #26323B;
}

.rh-spp-profit-pill {
  background: #EAF8F5;
  color: #00796B;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 0.62rem;
  font-weight: 700;
  margin-top: 2px;
  text-align: center;
}

.rh-sec-empty-state {
  background: #F9FCFB;
  border: 1px dashed #CBE4DE;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: #5A6B75;
  text-align: center;
}

/* ==========================================================================
   V1.6.0 PIXEL-PRECISE PRODUCT UI REDESIGN (Matches Reference Image 20399.png)
   Screen A: Section-Specific Pastel Containers + 4-Col Mobile Product Previews
   Screen B: Finger-Scrollable Subcategory Cards + 3-Col Mobile Product Cards
   ========================================================================== */
.rh-catalog-v160-wrap {
  padding-top: 6px;
  padding-bottom: 32px;
}

/* Screen A Page Header */
.rh-sa-page-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .rh-sa-page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
}

.rh-sa-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.2;
}

.rh-sa-subheading {
  font-size: 0.82rem;
  color: #5A6B75;
  margin-top: 2px;
}

.rh-sa-search-form {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #CFE3DF;
  border-radius: 10px;
  padding: 3px 4px 3px 10px;
  width: 100%;
  max-width: 420px;
}

.rh-sa-search-form:focus-within {
  border-color: #008F7D;
}

.rh-sa-search-icon {
  display: inline-flex;
  margin-right: 6px;
}

.rh-sa-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.84rem;
  color: #26323B;
  padding: 5px 4px;
}

.rh-sa-search-input:focus {
  outline: none;
}

.rh-sa-search-btn {
  background: #008F7D;
  color: #FFFFFF;
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

/* Screen A Section-Specific Colored Pastel Containers (Matches Left Screen of 20399.png) */
.rh-sa-sections-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rh-sa-section-box {
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(38, 50, 59, 0.06);
  box-shadow: 0 2px 6px rgba(38, 50, 59, 0.03);
}

@media (min-width: 768px) {
  .rh-sa-section-box {
    padding: 14px 16px;
  }
}

.rh-sa-section-box.rh-sec-accent-blue     { background: #DFF2FC; border-color: #C4E5F8; }
.rh-sa-section-box.rh-sec-accent-rose     { background: #FDE8EE; border-color: #F8D0DC; }
.rh-sa-section-box.rh-sec-accent-amber    { background: #FCEEDF; border-color: #F6DDC2; }
.rh-sa-section-box.rh-sec-accent-teal     { background: #DFF7F2; border-color: #C0ECE3; }
.rh-sa-section-box.rh-sec-accent-warm     { background: #FDF1DF; border-color: #F6DFBE; }
.rh-sa-section-box.rh-sec-accent-lavender { background: #EFE8FD; border-color: #DDD0FA; }
.rh-sa-section-box.rh-sec-accent-coral    { background: #FCEBF3; border-color: #F5D3E3; }
.rh-sa-section-box.rh-sec-accent-mint     { background: #E4F7EA; border-color: #C7EDD3; }

.rh-sa-sec-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rh-sa-sec-title-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #26323B;
}

.rh-sa-sec-title-link:hover {
  color: #008F7D;
}

.rh-sa-sec-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-sa-sec-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .rh-sa-sec-title {
    font-size: 1.06rem;
  }
}

.rh-sa-sec-count {
  font-weight: 700;
  font-size: 0.86rem;
  color: #26323B;
  margin-left: 2px;
}

/* Screen A 4-Column Mobile Grid (Adapts to 6-8 Columns on Desktop) */
.rh-sa-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 768px) {
  .rh-sa-grid-4 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 1100px) {
  .rh-sa-grid-4 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
  }
}

.rh-sa-card {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 3px rgba(38, 50, 59, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rh-sa-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 143, 125, 0.12);
}

.rh-sa-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: #26323B;
}

.rh-sa-card-img {
  width: 100%;
  aspect-ratio: 1 / 0.88;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 4px;
}

.rh-sa-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rh-sa-subcard-icon {
  aspect-ratio: auto;
  height: 38px;
}

.rh-sa-card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rh-sa-card-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #26323B;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .rh-sa-card-title {
    font-size: 0.76rem;
  }
}

.rh-sa-card-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.rh-sa-wholesale {
  font-size: 0.58rem;
  color: #5A6B75;
}

.rh-sa-pill {
  display: inline-block;
  background: #EAF8F5;
  color: #00796B;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}

.rh-sa-sublinks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(38, 50, 59, 0.07);
}

.rh-sa-sublink-pill {
  background: rgba(255, 255, 255, 0.88);
  color: #26323B;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}

.rh-sa-sublink-pill:hover {
  background: #008F7D;
  color: #FFFFFF;
}

/* ==========================================================================
   SCREEN B — MAIN CATEGORY / SUBCATEGORY PAGE (Matches Right Screen of 20399.png)
   ========================================================================== */
.rh-sb-header-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 10px;
}

.rh-sb-back-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #D5EAE5;
  color: #26323B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.rh-sb-cat-thumb {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #DFF2FC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-sb-cat-info {
  min-width: 0;
}

.rh-sb-cat-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.22;
}

.rh-sb-cat-count {
  font-size: 0.92rem;
  font-weight: 700;
  color: #26323B;
}

.rh-sb-cat-desc {
  font-size: 0.74rem;
  color: #5A6B75;
  margin-top: 2px;
}

/* Horizontal Finger-Scrollable Subcategory Cards (Screen B) */
.rh-sb-subcat-scroller {
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  margin-bottom: 8px;
  scrollbar-width: none;
}

.rh-sb-subcat-scroller::-webkit-scrollbar {
  display: none;
}

.rh-sb-subcard {
  min-width: 60px;
  background: #FFFFFF;
  border: 1px solid #DCECE8;
  border-radius: 11px;
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: #26323B;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(38, 50, 59, 0.04);
}

.rh-sb-subcard-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rh-sb-subcard-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #26323B;
  line-height: 1.15;
  white-space: nowrap;
}

.rh-sb-subcard.is-selected {
  background: #008F7D;
  border-color: #008F7D;
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 143, 125, 0.25);
}

.rh-sb-subcard.is-selected .rh-sb-subcard-label {
  color: #FFFFFF;
}

.rh-sb-subcard.is-selected .rh-sb-subcard-icon svg {
  stroke: #FFFFFF;
}

/* Screen B Three-Column Mobile Product Grid (Adapts to 4-5 Columns on Desktop) */
.rh-screen-b-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

@media (max-width: 329px) {
  .rh-screen-b-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .rh-screen-b-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1100px) {
  .rh-screen-b-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
}

.rh-sb-card {
  background: #FFFFFF;
  border: 1px solid #DFECE8;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(38, 50, 59, 0.04);
}

.rh-sb-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.95;
  background: #FAFAFA;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 5px;
}

.rh-sb-img-link,
.rh-sb-img-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rh-sb-fav-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.rh-sb-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.rh-sb-card-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .rh-sb-card-title {
    font-size: 0.84rem;
  }
}

.rh-sb-card-title a {
  color: #26323B;
}

.rh-sb-price-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.62rem;
  color: #5A6B75;
}

@media (min-width: 768px) {
  .rh-sb-price-rows {
    font-size: 0.74rem;
  }
}

.rh-sb-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.rh-sb-pval {
  color: #006E60;
  font-weight: 700;
}

.rh-sb-profit-line .rh-sb-plbl,
.rh-sb-profit-line .rh-sb-pval {
  color: #008F7D;
  font-weight: 800;
}

.rh-sb-action-pill {
  margin-top: 3px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: #DFF5F0;
  color: #006E60;
  border: 1px solid #BCE5DC;
  border-radius: 99px;
  padding: 4px 5px;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .rh-sb-action-pill {
    font-size: 0.74rem;
    padding: 6px 10px;
  }
}

.rh-sb-action-pill:hover {
  background: #008F7D;
  border-color: #008F7D;
  color: #FFFFFF;
}

.rh-sb-bag-dot {
  font-size: 0.64rem;
}

.rh-sb-subcat-crumb {
  color: #008F7D;
  font-weight: 700;
  margin: 0 3px;
}



/* ==========================================================================
   V1.8.1 PREMIUM SINGLE PRODUCT DETAILS PAGE (Matches 20412.png)
   Mobile-First Single-Column + Balanced Desktop Two-Column Layout
   ========================================================================== */
.rh-single-product-container {
  padding-top: 8px;
  padding-bottom: 36px;
}

.rh-sp-page-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

/* Compact Single Product Top Navigation Bar */
.rh-sp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 4px 2px;
}

.rh-sp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #26323B;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 5px 10px 5px 6px;
  border-radius: 9px;
  background: #FFFFFF;
  border: 1px solid #DCECE8;
}

.rh-sp-back-link:hover {
  color: #008F7D;
  border-color: #008F7D;
}

.rh-sp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rh-sp-top-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #DCECE8;
  color: #26323B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rh-sp-cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  border-radius: 99px;
  background: #008F7D;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Main Product Hero Grid: Single Column on Mobile, Balanced 2-Column on Desktop */
.rh-sp-main-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E2EEEB;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(38, 50, 59, 0.04);
}

@media (min-width: 900px) {
  .rh-sp-main-grid {
    display: grid;
    grid-template-columns: minmax(340px, 46%) minmax(380px, 54%);
    gap: 28px;
    padding: 22px;
    align-items: start;
  }
  .rh-sp-gallery-col {
    position: sticky;
    top: 76px;
  }
}

/* 1. Product Image Gallery Stage */
.rh-sp-main-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F4F5F6;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E6ECEE;
}

.rh-sp-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
}

.rh-sp-no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #6C7D87;
  font-size: 0.84rem;
}

/* Top-Right Wishlist Heart Button */
.rh-sp-fav-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(38, 50, 59, 0.08);
  box-shadow: 0 3px 10px rgba(38, 50, 59, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

/* Prev / Next Image Navigation Arrows */
.rh-sp-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(38, 50, 59, 0.08);
  box-shadow: 0 2px 8px rgba(38, 50, 59, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

.rh-sp-arrow-prev {
  left: 10px;
}

.rh-sp-arrow-next {
  right: 10px;
}

.rh-sp-nav-arrow:hover {
  background: #FFFFFF;
  border-color: #008F7D;
}

/* Bottom-Right Image Counter Pill (1/4) */
.rh-sp-img-counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(38, 50, 59, 0.85);
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
  z-index: 3;
  letter-spacing: 0.02em;
}

/* 2. Two Compact Action Buttons Directly Under Main Image */
.rh-sp-media-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.rh-sp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.rh-sp-btn-video {
  background: #F6F8F8;
  border: 1.5px solid #D5E0E2;
  color: #26323B;
}

.rh-sp-btn-video:hover:not(.is-unavailable) {
  border-color: #008F7D;
  background: #EAF8F5;
  color: #26323B;
}

.rh-sp-btn-download {
  background: #EAF8F5;
  border: 1.5px solid #008F7D;
  color: #006E60;
}

.rh-sp-btn-download:hover:not(.is-unavailable) {
  background: #008F7D;
  color: #FFFFFF;
}

.rh-sp-btn-download:hover:not(.is-unavailable) svg {
  stroke: #FFFFFF;
}

.rh-sp-action-btn.is-unavailable {
  opacity: 0.52;
  cursor: not-allowed;
}

.rh-sp-yt-icon {
  display: inline-flex;
  align-items: center;
}

/* 3. Compact Selectable Thumbnail Strip */
.rh-sp-thumbs-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.rh-sp-thumb-btn {
  aspect-ratio: 1 / 1;
  background: #F4F5F6;
  border: 2px solid #E4ECEE;
  border-radius: 12px;
  padding: 4px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rh-sp-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.rh-sp-thumb-btn.is-active,
.rh-sp-thumb-btn:hover {
  border-color: #008F7D;
  background: #EAF8F5;
}

/* 4. Product Title, Reviews, SKU & Meta Strip */
.rh-sp-info-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

.rh-sp-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1B252C;
  line-height: 1.3;
  margin: 0;
}

@media (min-width: 768px) {
  .rh-sp-title {
    font-size: 1.45rem;
  }
}

.rh-sp-design-tag {
  font-weight: 700;
  color: #26323B;
}

.rh-sp-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rh-sp-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.rh-sp-review-count {
  font-size: 0.84rem;
  font-weight: 600;
  color: #5A6B75;
}

.rh-sp-sku-row {
  font-size: 0.96rem;
  font-weight: 800;
  color: #1B252C;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rh-sp-sku-num {
  color: #0082E6;
  font-weight: 800;
}

.rh-sp-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: #4A5963;
  padding: 4px 0;
}

.rh-sp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rh-sp-meta-item .is-instock {
  color: #008F7D;
  font-weight: 700;
}

.rh-sp-meta-item .is-outofstock {
  color: #D9383A;
  font-weight: 700;
}

.rh-sp-cat-inline-link {
  color: #26323B;
  text-decoration: none;
}

.rh-sp-cat-inline-link:hover {
  color: #008F7D;
}

/* 5. Visually Distinct Wholesale & Suggested Selling Price Cards */
.rh-sp-price-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rh-sp-price-card {
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rh-sp-price-card.is-wholesale {
  background: #E6F6F3;
  border: 1px solid #C5EAE3;
  border-left: 4px solid #008F7D;
}

.rh-sp-price-card.is-suggested {
  background: #F2F4F5;
  border: 1px solid #E1E6E8;
  border-left: 4px solid #63727A;
}

.rh-sp-price-lbl {
  font-size: 0.76rem;
  font-weight: 700;
  color: #26323B;
}

.rh-sp-price-val {
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.2;
}

.rh-sp-price-card.is-wholesale .rh-sp-price-val {
  color: #007A6A;
}

.rh-sp-price-card.is-suggested .rh-sp-price-val {
  color: #1B252C;
}

/* 6. Size Selector, Selling Price, Profit Box, Quantity & Order Button */
.rh-sp-order-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 2px;
}

.rh-sp-field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rh-sp-field-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1B252C;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rh-sp-req-sub {
  font-weight: 500;
  color: #5A6B75;
  font-size: 0.82rem;
}

.rh-sp-size-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rh-sp-size-pill,
.rh-sp-color-pill {
  min-width: 58px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #F9FBFB;
  border: 1.5px solid #DCE4E7;
  color: #26323B;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.14s ease;
}

.rh-sp-size-pill.is-selected,
.rh-sp-color-pill.is-selected {
  background: #E6F6F3;
  border-color: #008F7D;
  color: #007A6A;
  box-shadow: 0 2px 6px rgba(0, 143, 125, 0.12);
}

.rh-sp-size-pill.is-disabled {
  background: #F1F3F4;
  border-color: #E2E6E8;
  color: #9EB0B8;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Reseller Selling Price Input Pill */
.rh-sp-selling-input-wrap {
  display: flex;
  align-items: center;
  background: #F9FBFB;
  border: 1.5px solid #D5E0E3;
  border-radius: 999px;
  padding: 4px 14px 4px 5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rh-sp-selling-input-wrap:focus-within {
  border-color: #008F7D;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(0, 143, 125, 0.1);
}

.rh-sp-selling-input-wrap.is-invalid {
  border-color: #D9383A;
  background: #FFF8F8;
}

.rh-sp-taka-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EAECEE;
  color: #26323B;
  font-size: 0.98rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
}

.rh-sp-selling-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1B252C;
  padding: 6px 0;
}

.rh-sp-selling-input:focus {
  outline: none;
}

.rh-sp-validation-msg {
  font-size: 0.78rem;
  font-weight: 600;
  color: #D9383A;
  background: #FDECE8;
  border: 1px solid #F7C6C7;
  border-radius: 8px;
  padding: 6px 10px;
}

/* Automatic Profit Summary Card */
.rh-sp-profit-box {
  background: #E6F6F3;
  border: 1px solid #C5EAE3;
  border-radius: 12px;
  padding: 11px 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rh-sp-profit-box.is-loss {
  background: #FDECE8;
  border-color: #F5B7B8;
}

.rh-sp-profit-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rh-sp-profit-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rh-sp-calc-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.rh-sp-profit-heading {
  font-size: 0.84rem;
  font-weight: 800;
  color: #007A6A;
  line-height: 1.25;
}

.rh-sp-profit-box.is-loss .rh-sp-profit-heading {
  color: #B42325;
}

.rh-sp-profit-formula {
  font-size: 0.72rem;
  color: #4A5B65;
  margin-top: 1px;
}

.rh-sp-profit-amount {
  font-size: 1.28rem;
  font-weight: 800;
  color: #007A6A;
  white-space: nowrap;
}

.rh-sp-profit-box.is-loss .rh-sp-profit-amount {
  color: #D9383A;
}

.rh-sp-profit-extra {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed #B9E2DA;
  font-size: 0.78rem;
  color: #26323B;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rh-sp-profit-extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Quantity Stepper Row */
.rh-sp-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.rh-sp-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: #F8FAFA;
  border: 1.5px solid #D5E0E3;
  border-radius: 999px;
  padding: 3px;
}

.rh-sp-qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF;
  color: #26323B;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(38, 50, 59, 0.08);
}

.rh-sp-qty-btn:hover {
  background: #EAF8F5;
  color: #008F7D;
}

.rh-sp-qty-field {
  width: 46px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1B252C;
  -moz-appearance: textfield;
}

.rh-sp-qty-field::-webkit-outer-spin-button,
.rh-sp-qty-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Prominent Main Order Button (অর্ডার করুন) */
.rh-sp-order-btn {
  width: 100%;
  height: 48px;
  background: #008F7D;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 143, 125, 0.24);
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.rh-sp-order-btn:hover:not(:disabled) {
  background: #007465;
  transform: translateY(-1px);
}

.rh-sp-order-btn:disabled {
  background: #9EB0B8;
  box-shadow: none;
  cursor: not-allowed;
}

/* 7. Expandable Product Description & Specifications Card (পণ্যের বিবরণ) */
.rh-sp-desc-card {
  margin-top: 14px;
  background: #FFFFFF;
  border: 1px solid #E2EEEB;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(38, 50, 59, 0.03);
}

.rh-sp-desc-header {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: inherit;
  color: #1B252C;
}

.rh-sp-desc-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rh-sp-desc-heading {
  font-size: 1.02rem;
  font-weight: 800;
  color: #1B252C;
  margin: 0;
}

.rh-sp-desc-chevron {
  transition: transform 0.2s ease;
}

.rh-sp-desc-header[aria-expanded="false"] .rh-sp-desc-chevron {
  transform: rotate(180deg);
}

.rh-sp-desc-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #EDF3F1;
  font-size: 0.88rem;
  color: #394852;
  line-height: 1.6;
}

.rh-sp-desc-body.is-collapsed {
  display: none;
}

.rh-sp-desc-prose p {
  margin: 0 0 8px;
}

.rh-sp-spec-list {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rh-sp-spec-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  font-size: 0.85rem;
}

.rh-sp-spec-lbl {
  font-weight: 600;
  color: #4A5963;
}

.rh-sp-spec-val {
  margin: 0;
  color: #1B252C;
  font-weight: 600;
  display: flex;
  gap: 6px;
}

.rh-sp-spec-colon {
  color: #6C7D87;
}

/* 8. Related Products Section (এই ক্যাটাগরির আরো পণ্য) */
.rh-sp-related-section {
  margin-top: 18px;
}

.rh-sp-related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rh-sp-related-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rh-sp-related-bag {
  display: inline-flex;
  align-items: center;
}

.rh-sp-related-heading {
  font-size: 1.02rem;
  font-weight: 800;
  color: #1B252C;
  margin: 0;
}

.rh-sp-related-more {
  font-size: 0.84rem;
  font-weight: 700;
  color: #008F7D;
  text-decoration: none;
}

.rh-sp-related-more:hover {
  text-decoration: underline;
}

.rh-sp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 359px) {
  .rh-sp-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .rh-sp-related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

.rh-sp-rel-card {
  background: #FFFFFF;
  border: 1px solid #E2EEEB;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(38, 50, 59, 0.03);
  transition: border-color 0.15s ease, transform 0.12s ease;
}

.rh-sp-rel-card:hover {
  border-color: #008F7D;
  transform: translateY(-1px);
}

.rh-sp-rel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F4F5F6;
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rh-sp-rel-img-link,
.rh-sp-rel-img-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.rh-sp-rel-fav {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.rh-sp-rel-body {
  padding-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rh-sp-rel-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1B252C;
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rh-sp-rel-title a {
  color: #1B252C;
  text-decoration: none;
}

.rh-sp-rel-sku {
  font-size: 0.62rem;
  color: #5A6B75;
}

.rh-sp-rel-prices {
  display: flex;
  flex-direction: column;
  font-size: 0.65rem;
  color: #007A6A;
}

.rh-sp-rel-s {
  color: #5A6B75;
  font-size: 0.6rem;
}

.rh-sp-related-empty {
  font-size: 0.84rem;
  color: #5A6B75;
  background: #FFFFFF;
  border: 1px dashed #CBE4DF;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

/* ==========================================================================
   V2.5.0 PREMIUM GUEST HOMEPAGE & RESPONSIVE DESIGN (Matches 21715.png)
   Brand Identity: Primary #008F7D | Secondary #26323B | Background White & Light Teal
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

/* Ensure fixed bottom navigation never covers content on mobile */
@media (max-width: 899px) {
  body.rh-is-guest,
  body.rh-is-logged-in {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   1. GUEST HEADER & TOPBAR (Matches 21715.png Desktop & Mobile)
   -------------------------------------------------------------------------- */
.rh-guest-header {
  background: #FFFFFF;
  border-bottom: 1px solid #DCECE8;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(38, 50, 59, 0.04);
}

.rh-guest-topbar {
  border-bottom: 1px solid #EBF3F1;
}

.rh-guest-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  gap: 12px;
  padding: 8px 16px;
}

@media (min-width: 900px) {
  .rh-guest-topbar-inner {
    min-height: 64px;
    gap: 20px;
    padding: 10px 20px;
  }
}

/* Brand Lockup */
.rh-guest-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: #26323B;
  flex-shrink: 0;
}

.rh-guest-logo-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .rh-guest-logo-icon {
    width: 38px;
    height: 38px;
  }
}

.rh-guest-brand-stack {
  display: flex;
  flex-direction: column;
}

.rh-guest-brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.2;
}

.rh-guest-brand-title strong {
  color: #008F7D;
}

.rh-guest-brand-sub {
  font-size: 0.68rem;
  color: #64748B;
  font-weight: 500;
  display: none;
}

@media (min-width: 900px) {
  .rh-guest-brand-sub {
    display: block;
  }
}

/* Search Bar (Desktop) */
.rh-guest-search-bar {
  display: none;
  flex: 1;
  max-width: 440px;
  position: relative;
}

@media (min-width: 900px) {
  .rh-guest-search-bar {
    display: flex;
    align-items: center;
  }
}

.rh-guest-search-input {
  width: 100%;
  height: 40px;
  padding: 0 46px 0 16px;
  background: #F8FAFC;
  border: 1.5px solid #D5EAE5;
  border-radius: 999px;
  font-size: 0.88rem;
  color: #26323B;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.rh-guest-search-input:focus {
  background: #FFFFFF;
  border-color: #008F7D;
  box-shadow: 0 0 0 3px rgba(0, 143, 125, 0.12);
}

.rh-guest-search-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #008F7D;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.rh-guest-search-btn:hover {
  background: #007667;
}

/* Header Right: Hotline & Auth */
.rh-guest-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rh-guest-support-badge {
  display: none;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #26323B;
  padding: 4px 10px;
  border-radius: 8px;
  background: #F0FDF9;
  border: 1px solid #D5EAE5;
  transition: border-color 0.15s ease;
}

.rh-guest-support-badge:hover {
  border-color: #008F7D;
}

@media (min-width: 992px) {
  .rh-guest-support-badge {
    display: inline-flex;
  }
}

.rh-guest-support-ico {
  color: #008F7D;
  display: flex;
  align-items: center;
}

.rh-guest-support-meta {
  display: flex;
  flex-direction: column;
}

.rh-guest-support-label {
  font-size: 0.68rem;
  color: #64748B;
  line-height: 1;
}

.rh-guest-support-num {
  font-size: 0.84rem;
  font-weight: 800;
  color: #008F7D;
  line-height: 1.2;
}

.rh-guest-auth-btns {
  display: none;
  align-items: center;
  gap: 8px;
}

@media (min-width: 640px) {
  .rh-guest-auth-btns {
    display: inline-flex;
  }
}

.rh-guest-btn-login {
  height: 36px;
  padding: 0 16px;
  background: #FFFFFF;
  color: #26323B;
  border: 1.5px solid #D5EAE5;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.rh-guest-btn-login:hover {
  border-color: #008F7D;
  color: #008F7D;
  background: #F0FDF9;
}

.rh-guest-btn-reg {
  height: 36px;
  padding: 0 18px;
  background: #008F7D;
  color: #FFFFFF;
  border: 1.5px solid #008F7D;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.rh-guest-btn-reg:hover {
  background: #007667;
  color: #FFFFFF;
}

/* Mobile Hamburger Toggle */
.rh-guest-menu-toggle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #DCECE8;
  background: #FFFFFF;
  color: #26323B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (min-width: 900px) {
  .rh-guest-menu-toggle {
    display: none !important;
  }
}

/* 2. Desktop Sub-Navigation Bar */
.rh-guest-subnav {
  display: none;
  background: #FFFFFF;
  border-bottom: 1px solid #EBF3F1;
}

@media (min-width: 900px) {
  .rh-guest-subnav {
    display: block;
  }
}

.rh-guest-subnav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 8px 16px;
}

.rh-subnav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #26323B;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.rh-subnav-item svg {
  color: #008F7D;
}

.rh-subnav-item:hover,
.rh-subnav-item.is-active {
  color: #008F7D;
}

/* 3. Forest Green Running Animated Ticker (Marquee) */
.rh-announcement-ticker {
  background: linear-gradient(90deg, #002C26 0%, #005A4F 25%, #008F7D 50%, #005A4F 75%, #002C26 100%);
  color: #FFFFFF;
  padding: 7px 0;
  overflow: hidden;
  position: relative;
  z-index: 99;
  border-bottom: 1.5px solid #00E5C9;
  box-shadow: 0 2px 12px rgba(0, 143, 125, 0.35);
}

.rh-top-ticker {
  position: relative;
  z-index: 100;
}

.rh-ticker-badge {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #042E28;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.rh-ticker-item strong {
  color: #FDE68A;
  font-weight: 800;
}

.rh-ticker-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.rh-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  animation: rhTickerRun 30s linear infinite;
  will-change: transform;
}

.rh-ticker-track:hover {
  animation-play-state: paused;
}

.rh-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.rh-ticker-ico {
  font-size: 1rem;
  line-height: 1;
}

.rh-ticker-dot {
  color: #6EE7B7;
  font-size: 1.15rem;
  opacity: 0.85;
}

@keyframes rhTickerRun {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
  .rh-ticker-track {
    animation-duration: 22s;
    gap: 16px;
  }
  .rh-ticker-item {
    font-size: 0.76rem;
    gap: 6px;
  }
}

/* Mobile Guest Dropdown Menu */
.rh-guest-mobile-menu {
  background: #FFFFFF;
  border-bottom: 1.5px solid #DCECE8;
  padding: 12px 16px;
  box-shadow: 0 8px 20px rgba(38, 50, 59, 0.08);
}

.rh-guest-mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rh-guest-mobile-search-form {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.rh-guest-mobile-search-input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #D5EAE5;
  border-radius: 8px;
  font-size: 0.88rem;
}

.rh-guest-mobile-search-btn {
  height: 38px;
  padding: 0 14px;
  background: #008F7D;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
}

.rh-guest-m-link {
  padding: 8px 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #26323B;
  text-decoration: none;
  border-radius: 6px;
}

.rh-guest-m-link:hover {
  background: #F0FDF9;
  color: #008F7D;
}

.rh-guest-m-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #EBF3F1;
}

/* --------------------------------------------------------------------------
   2. HERO SECTION (Matches 21715.png Desktop & Mobile)
   -------------------------------------------------------------------------- */
.rh-lp-hero {
  background: linear-gradient(135deg, #EAF8F5 0%, #F5FCFA 50%, #FFFFFF 100%);
  border-bottom: 1px solid #DCECE8;
  padding: 24px 0 30px;
}

@media (min-width: 900px) {
  .rh-lp-hero {
    padding: 44px 0 48px;
  }
}

.rh-lp-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 900px) {
  .rh-lp-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 36px;
  }
}

.rh-lp-hero-title {
  font-size: 1.48rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.32;
  margin: 0 0 12px;
}

@media (min-width: 900px) {
  .rh-lp-hero-title {
    font-size: 2.2rem;
  }
}

.rh-lp-hero-desc {
  font-size: 0.92rem;
  color: #4A5963;
  line-height: 1.62;
  margin: 0 0 20px;
}

.rh-lp-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 540px) {
  .rh-lp-hero-actions {
    flex-direction: row;
    align-items: center;
  }
}

.rh-lp-cta-primary {
  height: 44px;
  padding: 0 22px;
  background: #008F7D;
  color: #FFFFFF;
  border: 1.5px solid #008F7D;
  border-radius: 9px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 143, 125, 0.2);
  transition: all 0.15s ease;
}

.rh-lp-cta-primary:hover {
  background: #007667;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.rh-lp-cta-secondary {
  height: 44px;
  padding: 0 20px;
  background: #FFFFFF;
  color: #008F7D;
  border: 1.5px solid #008F7D;
  border-radius: 9px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.rh-lp-cta-secondary:hover {
  background: #F0FDF9;
  color: #007667;
}

.rh-lp-hero-visual {
  display: flex;
  justify-content: center;
}

.rh-lp-hero-img-wrap {
  width: 100%;
  max-width: 480px;
}

.rh-lp-hero-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

/* --------------------------------------------------------------------------
   3. TRUST / BENEFITS STRIP (Matches 21715.png 4 Cards)
   -------------------------------------------------------------------------- */
.rh-lp-trust-strip {
  display: none !important;
}

.rh-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 768px) {
  .rh-trust-grid {
    gap: 16px;
    padding: 4px 0;
  }
}

.rh-trust-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

@media (min-width: 768px) {
  .rh-trust-card {
    flex-direction: row;
    gap: 8px;
    padding: 10px 14px;
    background: #FFFFFF;
    border-radius: 999px;
  }
}

.rh-trust-ico {
  font-size: 1.15rem;
  line-height: 1;
}

.rh-trust-txt {
  font-size: 0.72rem;
  font-weight: 700;
  color: #26323B;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .rh-trust-txt {
    font-size: 0.88rem;
  }
}

/* --------------------------------------------------------------------------
   4. COMMON SECTION HEADINGS
   -------------------------------------------------------------------------- */
.rh-lp-section {
  padding: 26px 0;
  scroll-margin-top: 70px;
}

@media (min-width: 900px) {
  .rh-lp-section {
    padding: 38px 0;
  }
}

.rh-lp-section-alt {
  background: #F4FBF9;
  border-top: 1px solid #E1F0EC;
  border-bottom: 1px solid #E1F0EC;
}

.rh-lp-section-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rh-lp-section-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: #26323B;
  margin: 0;
}

@media (min-width: 768px) {
  .rh-lp-section-heading {
    font-size: 1.45rem;
  }
}

.rh-lp-section-heading .rh-mob-title {
  display: inline;
}

.rh-lp-section-heading .rh-desk-title {
  display: none;
}

@media (min-width: 768px) {
  .rh-lp-section-heading .rh-mob-title {
    display: none;
  }
  .rh-lp-section-heading .rh-desk-title {
    display: inline;
  }
}

.rh-lp-see-all-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: #008F7D;
  text-decoration: none;
}

.rh-lp-see-all-link:hover {
  text-decoration: underline;
}

.rh-lp-see-all-link .rh-mob-link {
  display: inline;
}

.rh-lp-see-all-link .rh-desk-link {
  display: none;
}

@media (min-width: 768px) {
  .rh-lp-see-all-link .rh-mob-link {
    display: none;
  }
  .rh-lp-see-all-link .rh-desk-link {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   5. PRODUCT CATEGORY GRID (Mobile EXACTLY 4 Cards / Row — Section 3 Constraint)
   -------------------------------------------------------------------------- */
.rh-lp-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 600px) and (max-width: 899px) {
  .rh-lp-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 900px) {
  .rh-lp-category-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
  }
}

.rh-lp-cat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 6px 3px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 900px) {
  .rh-lp-cat-card {
    padding: 12px 6px;
    border-radius: 12px;
  }
}

.rh-lp-cat-card:hover {
  border-color: #008F7D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 143, 125, 0.08);
}

.rh-lp-cat-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.rh-lp-cat-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@media (min-width: 900px) {
  .rh-lp-cat-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
  }
}

.rh-lp-cat-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #26323B;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (min-width: 900px) {
  .rh-lp-cat-name {
    font-size: 0.85rem;
  }
}

.rh-lp-cat-count {
  font-size: 0.65rem;
  color: #64748B;
  margin-top: 1px;
}

@media (max-width: 599px) {
  .rh-lp-cat-count {
    display: none; /* Keep mobile cards ultra-compact as in 21715.png */
  }
}

/* --------------------------------------------------------------------------
   6. PRODUCT GRID (Mobile EXACTLY 3 Cards / Row — Section 3 Constraint)
   -------------------------------------------------------------------------- */
.rh-lp-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 600px) and (max-width: 899px) {
  .rh-lp-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (min-width: 900px) {
  .rh-lp-product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }
}

.rh-lp-prod-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 6px 4px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 900px) {
  .rh-lp-prod-card {
    padding: 10px 8px;
    border-radius: 12px;
  }
}

.rh-lp-prod-card:hover {
  border-color: #008F7D;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.rh-lp-pthumb-wrap {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8FAFC;
  border-radius: 6px;
  margin-bottom: 4px;
}

@media (min-width: 900px) {
  .rh-lp-pthumb-wrap {
    height: 82px;
    margin-bottom: 8px;
    border-radius: 8px;
  }
}

.rh-lp-pthumb {
  max-height: 52px;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 900px) {
  .rh-lp-pthumb {
    max-height: 74px;
  }
}

.rh-lp-pinfo {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rh-lp-ptitle {
  font-size: 0.68rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.25;
  height: 24px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0 0 4px;
}

@media (min-width: 900px) {
  .rh-lp-ptitle {
    font-size: 0.82rem;
    height: 34px;
    line-height: 1.35;
    margin-bottom: 6px;
  }
}

.rh-lp-pprice-block {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rh-lp-pprice-row {
  font-size: 0.62rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

@media (min-width: 900px) {
  .rh-lp-pprice-row {
    font-size: 0.74rem;
    justify-content: space-between;
  }
}

.rh-lp-pwholesale .rh-lp-pprice-val {
  color: #008F7D;
  font-weight: 800;
}

.rh-lp-psuggested {
  color: #64748B;
  font-size: 0.58rem;
}

@media (min-width: 900px) {
  .rh-lp-psuggested {
    font-size: 0.7rem;
  }
}

/* --------------------------------------------------------------------------
   7. HOW IT WORKS (৪টি সহজ ধাপ Matches 21715.png)
   -------------------------------------------------------------------------- */
.rh-lp-section-center-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 20px;
}

.rh-lp-section-center-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #26323B;
  margin: 4px 0 6px;
}

@media (min-width: 768px) {
  .rh-lp-section-center-title {
    font-size: 1.55rem;
  }
}

.rh-lp-section-center-sub {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

.rh-lp-steps-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  align-items: stretch;
}

@media (min-width: 768px) {
  .rh-lp-steps-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
}

.rh-lp-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 3px 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: all 0.25s ease;
}

@media (min-width: 768px) {
  .rh-lp-step-node {
    flex-direction: row;
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    text-align: left;
    align-items: center;
    gap: 10px;
  }
}

.rh-lp-step-node:hover {
  transform: translateY(-2px);
  border-color: #008F7D;
  box-shadow: 0 6px 16px rgba(0, 143, 125, 0.14);
}

@media (max-width: 767px) {
  .rh-lp-step-node:not(:last-child)::after {
    content: →;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: 800;
    color: #008F7D;
    z-index: 2;
    background: #FFFFFF;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CCFBF1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}

.rh-lp-step-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #008F7D 0%, #005A4F 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 143, 125, 0.3);
  margin-bottom: 3px;
}

@media (min-width: 768px) {
  .rh-lp-step-badge {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
    margin-bottom: 0;
  }
}

.rh-lp-step-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .rh-lp-step-text-wrap {
    align-items: flex-start;
  }
}

.rh-lp-step-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: #1E293B;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .rh-lp-step-title {
    font-size: 0.88rem;
  }
}

.rh-lp-step-sub {
  font-size: 0.58rem;
  color: #64748B;
  line-height: 1.15;
  margin-top: 1px;
}

@media (min-width: 768px) {
  .rh-lp-step-sub {
    font-size: 0.72rem;
  }
}

.rh-lp-step-arrow {
  display: none !important;
}

@media (min-width: 768px) {
  .rh-lp-step-arrow {
    display: block !important;
    color: #008F7D;
    font-weight: 800;
    font-size: 1.1rem;
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   8. INCOME GUIDE, SERVICES, FAQ & FINAL CTA
   -------------------------------------------------------------------------- */
.rh-lp-earn-cards-grid,
.rh-lp-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 768px) {
  .rh-lp-earn-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .rh-lp-services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

.rh-lp-earn-card,
.rh-lp-service-item {
  background: #FFFFFF;
  border: 1px solid #DCECE8;
  border-radius: 12px;
  padding: 16px 14px;
  box-shadow: 0 2px 8px rgba(38, 50, 59, 0.03);
}

.rh-lp-earn-card-featured {
  background: #EAF8F5;
  border-color: #008F7D;
}

.rh-lp-earn-card h3,
.rh-lp-service-item h4 {
  font-size: 0.96rem;
  font-weight: 800;
  color: #26323B;
  margin: 6px 0 6px;
}

.rh-lp-earn-card p,
.rh-lp-service-item p {
  font-size: 0.84rem;
  color: #4A5963;
  line-height: 1.55;
  margin: 0;
}

.rh-lp-earn-icon,
.rh-service-ico {
  font-size: 1.4rem;
}

/* FAQ Accordion Grid */
.rh-lp-faq-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .rh-lp-faq-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.rh-faq-item {
  background: #FFFFFF;
  border: 1px solid #DCECE8;
  border-radius: 12px;
  padding: 14px 16px;
}

.rh-faq-q {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #26323B;
  margin-bottom: 5px;
}

.rh-faq-a {
  font-size: 0.84rem;
  color: #4A5963;
  line-height: 1.55;
  margin: 0;
}

/* Final CTA Card */
.rh-lp-final-cta-card {
  background: linear-gradient(135deg, #EAF8F5 0%, #FFFFFF 100%);
  border: 1.5px solid #008F7D;
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.rh-lp-final-cta-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #26323B;
  margin: 0 0 8px;
}

.rh-lp-final-cta-desc {
  font-size: 0.88rem;
  color: #4A5963;
  line-height: 1.55;
  margin: 0 auto 16px;
  max-width: 520px;
}

.rh-lp-final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rh-lp-cta-btn {
  height: 40px;
  padding: 0 16px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   9. GUEST ORDER RESTRICTION MODAL (Section 4 Requirement)
   -------------------------------------------------------------------------- */
.rh-guest-order-modal .rh-gom-card {
  max-width: 440px;
  padding: 28px 24px;
  text-align: center;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid #DCECE8;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.rh-gom-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #EAF8F5;
  color: #008F7D;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.rh-gom-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #1E293B;
  line-height: 1.4;
  margin-bottom: 8px;
}

.rh-gom-desc {
  font-size: 0.86rem;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 20px;
}

.rh-gom-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rh-gom-btn-reg {
  height: 44px;
  background: #008F7D;
  color: #FFFFFF;
  border-radius: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.rh-gom-btn-reg:hover {
  background: #007667;
  color: #FFFFFF;
}

.rh-gom-btn-login {
  height: 42px;
  background: #FFFFFF;
  color: #008F7D;
  border: 1.5px solid #008F7D;
  border-radius: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.rh-gom-btn-login:hover {
  background: #F0FDF9;
}

/* --------------------------------------------------------------------------
   PREMIUM SMOOTH ANIMATIONS & MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
/* Scroll Reveal */
.rh-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.rh-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Hero Visual Float & Ambient Glow */
.rh-lp-hero-img-wrap {
  position: relative;
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0, 143, 125, 0.14);
  animation: rhHeroFloat 5s ease-in-out infinite alternate;
  will-change: transform;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rh-lp-hero-img-wrap:hover {
  transform: scale(1.015) translateY(-4px);
  box-shadow: 0 22px 55px rgba(0, 143, 125, 0.2);
}

@keyframes rhHeroFloat {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -9px, 0);
  }
}

/* Primary CTA Button Shimmer Sweep */
.rh-lp-cta-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.rh-lp-cta-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -70%;
  width: 45%;
  height: 200%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(25deg);
  transition: none;
  pointer-events: none;
}

.rh-lp-cta-primary:hover::after {
  left: 140%;
  transition: left 0.75s ease-in-out;
}

/* Mobile Tactile Active Feedback */
@media (max-width: 767px) {
  .rh-lp-cat-card:active,
  .rh-lp-prod-card:active,
  .rh-lp-cta-primary:active,
  .rh-lp-cta-secondary:active,
  .rh-bottom-nav-item:active {
    transform: scale(0.97) !important;
  }
}

/* ==========================================================================
   V2.3.0 HOMEPAGE FINAL UI CORRECTION:
   1. Button-Free Inspiring Top Banner (`.rh-home-hero-banner`) — Compact on Mobile,
      Clean Teal/Mint/Soft Cyan Gradient, Zero Buttons, Crisp Bangla Typography
   2. Prominent "ড্যাশবোর্ড" Menu Button in Desktop Header & Mobile Hamburger Drawer
   3. Dedicated Separate Dashboard Page Header (`.rh-dash-page-header`)
   ========================================================================== */
.rh-loggedin-home-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rh-home-hero-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #EAF8F5 0%, #FFFFFF 46%, #E2F7F3 80%, #E6F8FC 100%);
  border: 1px solid #C2E7DF;
  border-left: 5px solid #008F7D;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(0, 143, 125, 0.06);
}

.rh-home-banner-glow {
  position: absolute;
  top: -36px;
  right: -36px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 143, 125, 0.12) 0%, rgba(0, 143, 125, 0) 70%);
  pointer-events: none;
}

.rh-home-banner-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.rh-home-banner-helper {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 143, 125, 0.1);
  border: 1px solid rgba(0, 143, 125, 0.22);
  color: #006E60;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 3px 11px;
  border-radius: 999px;
  margin-bottom: 7px;
}

.rh-home-banner-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #26323B;
  line-height: 1.34;
  margin: 0 0 6px 0;
}

.rh-home-banner-desc {
  font-size: 0.82rem;
  color: #3E505B;
  line-height: 1.52;
  margin: 0;
  max-width: 780px;
}

.rh-home-banner-decor {
  display: none;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.rh-home-banner-decor-ring {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: linear-gradient(145deg, #008F7D 0%, #006E60 100%);
  box-shadow: 0 6px 16px rgba(0, 143, 125, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
}

.rh-home-banner-decor-mark {
  color: #FFFFFF;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

@media (min-width: 768px) {
  .rh-home-hero-banner {
    padding: 22px 28px;
    border-radius: 16px;
  }

  .rh-home-banner-helper {
    font-size: 0.8rem;
    padding: 4px 13px;
    margin-bottom: 9px;
  }

  .rh-home-banner-title {
    font-size: 1.42rem;
    margin-bottom: 8px;
  }

  .rh-home-banner-desc {
    font-size: 0.93rem;
    line-height: 1.6;
  }

  .rh-home-banner-decor {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Logged-In Menu Clear "ড্যাশবোর্ড" Button Styling */
.rh-desktop-nav a.rh-nav-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EAF8F5;
  color: #008F7D;
  border: 1px solid #BEE4DC;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.rh-desktop-nav a.rh-nav-dashboard-btn:hover,
.rh-desktop-nav a.rh-nav-dashboard-btn.active {
  background: #008F7D;
  color: #FFFFFF;
  border-color: #008F7D;
}

.rh-drawer-item.rh-drawer-dashboard-btn {
  background: #F2FBF9;
  border: 1px solid #CBECE5;
  color: #006E60;
  font-weight: 700;
  margin-bottom: 4px;
}

.rh-drawer-item.rh-drawer-dashboard-btn.is-active,
.rh-drawer-item.rh-drawer-dashboard-btn:hover {
  background: #008F7D;
  color: #FFFFFF;
  border-color: #008F7D;
}

/* Separate Dashboard Page Header (`/dashboard/`) */
.rh-dash-page-header {
  background: linear-gradient(135deg, #EAF8F5 0%, #FFFFFF 60%, #E3F6F2 100%);
  border: 1px solid #C6E6DF;
  border-left: 4px solid #008F7D;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.rh-dash-page-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  color: #008F7D;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.rh-dash-page-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #26323B;
  margin: 0 0 4px 0;
}

.rh-dash-page-sub {
  font-size: 0.84rem;
  color: #495A63;
  margin: 0;
}

.rh-dash-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 768px) {
  .rh-dash-page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
  }

  .rh-dash-page-title {
    font-size: 1.32rem;
  }
}

/* ==========================================================================
   V2.4.0 PROFESSIONAL RESELLER DASHBOARD (MATCHING REFERENCE IMAGE 20489.PNG)
   - Header with RH Bag Logo, "Resell Haat / Reselling Made Simple", Notification Bell + Badge, Profile Avatar
   - Welcome Banner with Soft Mint Gradient, Personal Greeting & Right Illustration
   - Side-by-Side Wallet Balance & Total Profit Cards
   - 4-Card Order Status Grid (নতুন অর্ডার, প্রসেসিং, ডেলিভারিতে, ডেলিভারি সম্পন্ন)
   - 4-Card Quick Actions Grid (নতুন অর্ডার দিন, আমার অর্ডার দেখুন, ওয়ালেট ও উত্তোলন, রিটার্ন / ক্যানসেল)
   - Recent Orders List with Product Thumbnails, #RH-ID, Date, Status Pill, Amount, Profit & Arrow
   - Desktop Responsive Sidebar Layout (>= 1024px) & 5-Item Mobile Fixed Bottom Navigation
   ========================================================================== */

/* 1. Logged-In Header Brand Lockup, Notification Bell & Profile Dropdown */
.rh-header-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.rh-header-bag-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.rh-header-brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.rh-header-brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0E6E5F;
  letter-spacing: -0.01em;
}

.rh-header-brand-title span {
  color: #008F7D;
}

.rh-header-brand-tagline {
  font-size: 0.67rem;
  font-weight: 500;
  color: #6B7C85;
}

.rh-header-dropdown-wrap {
  position: relative;
}

.rh-notif-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #26323B;
  transition: background-color 0.15s ease;
}

.rh-notif-btn:hover {
  background: #EAF8F5;
}

.rh-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E53935;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  line-height: 1;
}

.rh-avatar-btn {
  border: none;
  cursor: pointer;
  background: #D5F2EC;
  color: #1D3532;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 0.98rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rh-header-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  background: #FFFFFF;
  border: 1px solid #D7ECE6;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(26, 46, 53, 0.14);
  z-index: 1200;
  overflow: hidden;
}

.rh-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid #EBF4F1;
  font-size: 0.86rem;
}

.rh-dropdown-action-link {
  border: none;
  background: none;
  color: #008F7D;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.rh-notif-list {
  max-height: 260px;
  overflow-y: auto;
}

.rh-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid #F2F7F5;
  transition: background-color 0.12s ease;
}

.rh-notif-item:hover {
  background: #F4FBF9;
}

.rh-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #008F7D;
  margin-top: 6px;
  flex-shrink: 0;
}

.rh-notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rh-notif-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #26323B;
  line-height: 1.35;
}

.rh-notif-time {
  font-size: 0.72rem;
  color: #71828C;
}

.rh-dropdown-foot {
  padding: 9px 14px;
  text-align: center;
  background: #F7FCFA;
  font-size: 0.8rem;
  font-weight: 700;
}

.rh-dropdown-foot a {
  color: #008F7D;
  text-decoration: none;
}

.rh-profile-dropdown {
  width: 245px;
}

.rh-profile-dropdown-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #F2FBF8;
  border-bottom: 1px solid #E3F2EE;
}

.rh-profile-dropdown-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #008F7D;
  color: #FFFFFF;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-profile-dropdown-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  line-height: 1.25;
}

.rh-profile-dropdown-meta span {
  font-size: 0.72rem;
  color: #008F7D;
}

.rh-dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #26323B;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.rh-dropdown-menu-item:hover {
  background: #F2FBF8;
  color: #008F7D;
}

.rh-dropdown-menu-item.is-logout {
  color: #D9383A;
}

.rh-dropdown-divider {
  height: 1px;
  background: #EBF2F0;
  margin: 4px 0;
}

/* 2. Dashboard Responsive Layout (Mobile Single Column -> Desktop Sidebar + Main Grid) */
.rh-pro-dash-layout {
  display: block;
  padding-top: 4px;
  padding-bottom: 24px;
}

.rh-pro-dash-sidebar {
  display: none;
}

.rh-pro-dash-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .rh-pro-dash-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding-top: 10px;
  }

  .rh-pro-dash-sidebar {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #DCEEE9;
    border-radius: 16px;
    padding: 16px 12px;
    box-shadow: 0 4px 14px rgba(24, 48, 44, 0.04);
    position: sticky;
    top: 76px;
  }

  .rh-pro-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 14px;
    border-bottom: 1px solid #EBF4F1;
    margin-bottom: 8px;
  }

  .rh-pro-sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #D5F2EC;
    color: #006E60;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .rh-pro-sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .rh-pro-sidebar-user-info strong {
    font-size: 0.9rem;
    color: #26323B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rh-pro-sidebar-user-info span {
    font-size: 0.75rem;
    color: #697A84;
  }

  .rh-pro-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .rh-pro-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #26323B;
    text-decoration: none;
    transition: all 0.15s ease;
  }

  .rh-pro-sidebar-link:hover,
  .rh-pro-sidebar-link.is-active {
    background: #EAF8F5;
    color: #008F7D;
    font-weight: 700;
  }

  .rh-pro-sidebar-link.is-logout {
    color: #D9383A;
  }

  .rh-pro-sidebar-divider {
    height: 1px;
    background: #EBF4F1;
    margin: 6px 0;
  }

  /* Hide mobile bottom navigation on large desktop screens (>= 1024px) */
  .rh-reseller-bottom-nav {
    display: none !important;
  }
}

/* 3. B. Welcome Banner (Matches Reference Image 20489.png) */
.rh-dash-welcome-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, #DDF6F0 0%, #C8EFE6 100%);
  border: 1px solid #BEEADB;
  border-radius: 16px;
  padding: 16px 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 3px 12px rgba(0, 143, 125, 0.06);
}

.rh-dash-welcome-text {
  flex: 1;
  min-width: 0;
  z-index: 1;
}

.rh-dash-welcome-title {
  font-size: 1.24rem;
  font-weight: 800;
  color: #163235;
  line-height: 1.28;
  margin: 0 0 6px 0;
}

.rh-dash-welcome-sub {
  font-size: 0.84rem;
  font-weight: 500;
  color: #365257;
  line-height: 1.45;
  margin: 0;
  max-width: 440px;
}

.rh-dash-welcome-art {
  width: 138px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 1;
}

.rh-dash-welcome-illus {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 10px;
}

.rh-dash-welcome-dots {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rh-dash-dot {
  width: 12px;
  height: 4px;
  border-radius: 99px;
  background: rgba(0, 143, 125, 0.25);
}

.rh-dash-dot.is-active {
  width: 18px;
  background: #008F7D;
}

@media (min-width: 768px) {
  .rh-dash-welcome-banner {
    padding: 20px 26px 24px;
  }

  .rh-dash-welcome-title {
    font-size: 1.48rem;
  }

  .rh-dash-welcome-sub {
    font-size: 0.94rem;
  }

  .rh-dash-welcome-art {
    width: 195px;
  }
}

/* 4. C. Wallet & Profit Summary Cards (Side-by-Side Clickable Cards) */
.rh-dash-wallet-profit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 768px) {
  .rh-dash-wallet-profit-grid {
    gap: 16px;
  }
}

.rh-wp-card {
  background: linear-gradient(135deg, #F3FBF9 0%, #FFFFFF 100%);
  border: 1px solid #DFEFEA;
  border-radius: 14px;
  padding: 12px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(26, 50, 48, 0.04);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.rh-wp-card:hover {
  transform: translateY(-1px);
  border-color: #008F7D;
  box-shadow: 0 6px 16px rgba(0, 143, 125, 0.1);
}

.rh-wp-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-wp-icon-box.is-wallet {
  background: #008F7D;
}

.rh-wp-icon-box.is-profit {
  background: #D4F3EC;
}

.rh-wp-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rh-wp-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #26323B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-wp-amount {
  font-size: 1.05rem;
  font-weight: 800;
  color: #16252B;
  line-height: 1.2;
}

.rh-wp-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #D9F3EC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .rh-wp-card {
    padding: 16px 18px;
    gap: 14px;
  }

  .rh-wp-icon-box {
    width: 54px;
    height: 54px;
  }

  .rh-wp-label {
    font-size: 0.88rem;
  }

  .rh-wp-amount {
    font-size: 1.35rem;
  }
}

/* 5. Shared White Section Card Container ("অর্ডার স্ট্যাটাস", "দ্রুত কাজ করুন", "সাম্প্রতিক অর্ডার") */
.rh-dash-card-section {
  background: #FFFFFF;
  border: 1px solid #E4F0EC;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 3px 12px rgba(28, 49, 46, 0.04);
}

@media (min-width: 768px) {
  .rh-dash-card-section {
    padding: 18px 20px;
  }
}

.rh-dash-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.rh-dash-sec-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rh-dash-sec-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #E6F7F3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-dash-sec-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #1F2D35;
  margin: 0;
}

.rh-dash-see-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #008F7D;
  text-decoration: none;
}

.rh-dash-see-all-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #DCF4EE;
  color: #008F7D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

/* 6. D. Order Status 4-Card Grid */
.rh-dash-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 768px) {
  .rh-dash-status-grid {
    gap: 14px;
  }
}

.rh-status-tile {
  border-radius: 13px;
  padding: 11px 9px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.rh-status-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(26, 46, 53, 0.08);
}

.rh-status-tile.is-new {
  background: #EEF6FF;
  border-color: #DCEBFA;
}

.rh-status-tile.is-processing {
  background: #FFF9EB;
  border-color: #F9EBC8;
}

.rh-status-tile.is-shipped {
  background: #ECFAF5;
  border-color: #D3F2E7;
}

.rh-status-tile.is-delivered {
  background: #F6F1FF;
  border-color: #E7DCFC;
}

.rh-status-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.rh-status-tile-count {
  font-size: 1.22rem;
  font-weight: 800;
  color: #1A2830;
  line-height: 1.15;
  margin-bottom: 2px;
}

.rh-status-tile-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #495A63;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .rh-status-tile {
    padding: 15px 16px;
  }

  .rh-status-tile-count {
    font-size: 1.45rem;
  }

  .rh-status-tile-label {
    font-size: 0.84rem;
  }
}

/* 7. E. Quick Actions 4-Card Grid ("দ্রুত কাজ করুন") */
.rh-dash-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 380px) {
  .rh-dash-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .rh-quick-action-card {
    padding: 8px 4px 6px;
    border-radius: 9px;
  }
  .rh-quick-action-label {
    font-size: 0.65rem;
  }
}

@media (min-width: 768px) {
  .rh-dash-quick-grid {
    gap: 14px;
  }
}

.rh-quick-action-card {
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.rh-quick-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(26, 46, 53, 0.08);
}

.rh-quick-action-card.is-new-order {
  background: #E8F8F3;
  border-color: #CDEEE4;
}

.rh-quick-action-card.is-my-orders {
  background: #EAF4FF;
  border-color: #D4E7FC;
}

.rh-quick-action-card.is-wallet-withdraw {
  background: #FFF7E6;
  border-color: #F7E5BE;
}

.rh-quick-action-card.is-return-cancel {
  background: #FDECEC;
  border-color: #FAD4D4;
}

.rh-qa-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-quick-action-card.is-new-order .rh-qa-icon-badge {
  background: #008F7D;
}

.rh-quick-action-card.is-my-orders .rh-qa-icon-badge {
  background: #2196F3;
}

.rh-quick-action-card.is-wallet-withdraw .rh-qa-icon-badge {
  background: #F59E0B;
}

.rh-quick-action-card.is-return-cancel .rh-qa-icon-badge {
  background: #F87171;
}

.rh-qa-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1F2D35;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .rh-quick-action-card {
    padding: 13px 14px;
    gap: 11px;
  }

  .rh-qa-icon-badge {
    width: 38px;
    height: 38px;
  }

  .rh-qa-label {
    font-size: 0.85rem;
  }
}

/* 8. F. Recent Orders List ("সাম্প্রতিক অর্ডার") */
.rh-dash-recent-list {
  display: flex;
  flex-direction: column;
}

.rh-dash-order-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.3fr) auto auto 24px;
  align-items: center;
  gap: 8px;
  padding: 11px 4px;
  border-bottom: 1px solid #EEF5F3;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.rh-dash-order-row:last-child {
  border-bottom: none;
}

.rh-dash-order-row:hover {
  background: #F8FCFB;
}

.rh-dash-order-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #F2F7F5;
  border: 1px solid #E3EEEA;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-dash-order-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rh-dash-order-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rh-dash-order-num {
  font-size: 0.9rem;
  font-weight: 800;
  color: #1C2B33;
  line-height: 1.25;
}

.rh-dash-order-date {
  font-size: 0.71rem;
  color: #6C7D86;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-dash-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.rh-dash-status-pill.is-shipped {
  background: #E1F8EC;
  color: #0E8A55;
}

.rh-dash-status-pill.is-processing {
  background: #FFF2D6;
  color: #C87A00;
}

.rh-dash-status-pill.is-cancelled {
  background: #FFE6E6;
  color: #D9383A;
}

.rh-dash-status-pill.is-new {
  background: #E5F1FF;
  color: #1565C0;
}

.rh-dash-status-pill.is-delivered {
  background: #EDE7FF;
  color: #6D28D9;
}

.rh-dash-order-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.rh-dash-order-total {
  font-size: 0.88rem;
  font-weight: 800;
  color: #1C2B33;
  line-height: 1.25;
}

.rh-dash-order-profit {
  font-size: 0.72rem;
  color: #5C6F78;
}

.rh-dash-order-profit strong {
  color: #0E8A55;
  font-weight: 700;
}

.rh-dash-order-profit.is-zero strong {
  color: #D9383A;
}

.rh-dash-order-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E1F5EF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 420px) {
  .rh-dash-order-row {
    grid-template-columns: 44px minmax(0, 1fr) auto 22px;
  }

  .rh-dash-order-status-col {
    grid-column: 2 / 3;
    margin-top: 2px;
  }
}

.rh-dash-empty-orders {
  text-align: center;
  padding: 20px 12px;
  color: #5A6B75;
  font-size: 0.88rem;
}

.rh-dash-empty-orders p {
  margin-bottom: 10px;
}

/* Order Filter Pills & Lifecycle Steps on /orders/ */
.rh-order-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rh-order-filter-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: #F2F8F6;
  border: 1px solid #D6E9E3;
  color: #26323B;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.rh-order-filter-pill.is-active,
.rh-order-filter-pill:hover {
  background: #008F7D;
  color: #FFFFFF;
  border-color: #008F7D;
}

.rh-lifecycle-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.rh-lifecycle-step {
  background: #F3F8F6;
  border: 1px solid #DCECE7;
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  opacity: 0.55;
}

.rh-lifecycle-step.is-done {
  background: #EAF8F5;
  border-color: #008F7D;
  opacity: 1;
}

.rh-lifecycle-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #008F7D;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rh-lifecycle-lbl {
  font-size: 0.74rem;
  font-weight: 700;
  color: #26323B;
}

/* Profile Details Grid */
.rh-profile-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.rh-profile-detail-box {
  background: #F5FBF9;
  border: 1px solid #DCEEE8;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rh-profile-detail-box span {
  font-size: 0.75rem;
  color: #5E7079;
}

.rh-profile-detail-box strong {
  font-size: 0.92rem;
  color: #26323B;
}

/* 9. G. Fixed 5-Item Bottom Navigation Active Indicator (Matches 20489.png) */
.rh-reseller-bottom-nav .rh-bottom-nav-item {
  position: relative;
  color: #26323B;
  font-weight: 600;
}

.rh-reseller-bottom-nav .rh-bottom-nav-item.is-active {
  color: #008F7D;
  font-weight: 800;
}

.rh-reseller-bottom-nav .rh-bottom-nav-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #008F7D;
}

/* ==========================================================================
   V2.5.0 STANDALONE SUPER ADMIN & ADMIN PORTAL (`/control-panel/`)
   Brand Colors: Primary #008F7D, Secondary #26323B, Background White & Light Teal
   ========================================================================== */
.rh-cp-standalone-body {
  margin: 0;
  padding: 0;
  background: #F3FAF8;
  color: #26323B;
  font-family: 'Hind Siliguri', -apple-system, BlinkMacSystemFont, sans-serif;
}

.rh-cp-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.rh-cp-alert {
  padding: 12px 16px;
  border-radius: 10px;
  margin: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.rh-cp-alert.is-error {
  background: #FDECE8;
  color: #9E1C1E;
  border-left: 4px solid #D9383A;
}

.rh-cp-alert.is-success {
  background: #EAF8F5;
  color: #006E60;
  border-left: 4px solid #008F7D;
}

.rh-cp-alert.is-warning {
  background: #FFF8E6;
  color: #9C6500;
  border-left: 4px solid #F59E0B;
}

/* Dedicated Control Panel Login & Provisioning Screen */
.rh-cp-auth-wrap {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
}

.rh-cp-auth-card {
  width: 100%;
  max-width: 720px;
  background: #FFFFFF;
  border: 1px solid #D5EBE5;
  border-top: 4px solid #008F7D;
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 10px 28px rgba(38, 50, 59, 0.08);
}

.rh-cp-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #EBF4F1;
}

.rh-cp-auth-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.rh-cp-auth-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #26323B;
  margin: 0;
}

.rh-cp-auth-sub {
  font-size: 0.82rem;
  color: #008F7D;
  font-weight: 700;
  margin: 2px 0 0 0;
}

/* Control Panel Topbar, Sidebar & Main Workspace */
.rh-cp-topbar {
  background: #26323B;
  color: #FFFFFF;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.rh-cp-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rh-cp-topbar-logo {
  width: 34px;
  height: 34px;
  background: #FFFFFF;
  border-radius: 50%;
  padding: 2px;
}

.rh-cp-topbar-brand {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-right: 8px;
}

.rh-cp-role-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: #EAF8F5;
  color: #006E60;
}

.rh-cp-role-pill.is-super {
  background: #008F7D;
  color: #FFFFFF;
}

.rh-cp-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rh-cp-actor-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: #DCECE7;
}

.rh-cp-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .rh-cp-shell {
    grid-template-columns: 240px minmax(0, 1fr);
    padding: 22px;
  }
}

.rh-cp-sidebar {
  background: #FFFFFF;
  border: 1px solid #D9ECE6;
  border-radius: 14px;
  padding: 12px;
  height: fit-content;
}

.rh-cp-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (min-width: 1024px) {
  .rh-cp-nav {
    flex-direction: column;
  }
}

.rh-cp-nav-link {
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #26323B;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.14s ease;
}

.rh-cp-nav-link:hover,
.rh-cp-nav-link.is-active {
  background: #008F7D;
  color: #FFFFFF;
  font-weight: 700;
}

.rh-cp-main {
  min-width: 0;
}

.rh-cp-panel {
  background: #FFFFFF;
  border: 1px solid #DCEEE8;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 3px 12px rgba(38, 50, 59, 0.04);
}

.rh-cp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ECF5F2;
}

.rh-cp-panel-head h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #26323B;
  margin: 0;
}

.rh-cp-muted {
  font-size: 0.8rem;
  color: #62747E;
}

.rh-cp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 12px;
}

.rh-cp-kpi-card {
  background: #F6FCFA;
  border: 1px solid #D9EEE7;
  border-left: 4px solid #008F7D;
  border-radius: 12px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: #26323B;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.rh-cp-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0, 143, 125, 0.1);
}

.rh-cp-kpi-card span {
  font-size: 0.78rem;
  color: #546670;
  font-weight: 600;
}

.rh-cp-kpi-card strong {
  font-size: 1.28rem;
  font-weight: 800;
  color: #1D2C34;
}

.rh-cp-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.rh-cp-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.rh-cp-subcard {
  background: #F7FCFA;
  border: 1px solid #D9EDE6;
  border-radius: 12px;
  padding: 14px;
}

.rh-cp-field {
  margin-bottom: 12px;
}

.rh-cp-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #26323B;
  margin-bottom: 4px;
}

.rh-cp-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #C9E0DA;
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #FFFFFF;
}

.rh-cp-input:focus {
  outline: none;
  border-color: #008F7D;
}

.rh-cp-pw-wrap {
  display: flex;
  gap: 6px;
}

.rh-cp-pw-toggle {
  padding: 0 12px;
  border: 1px solid #C9E0DA;
  background: #F4FBF9;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: #008F7D;
}

.rh-cp-login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  margin-bottom: 14px;
}

.rh-cp-forgot {
  color: #008F7D;
  font-weight: 700;
  text-decoration: none;
}

.rh-cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.rh-cp-btn-primary {
  background: #008F7D;
  color: #FFFFFF;
}

.rh-cp-btn-primary:hover {
  background: #006E60;
}

.rh-cp-btn-outline {
  background: #FFFFFF;
  border-color: #008F7D;
  color: #008F7D;
}

.rh-cp-btn-danger {
  background: #D9383A;
  color: #FFFFFF;
}

.rh-cp-btn-sm {
  padding: 6px 11px;
  font-size: 0.78rem;
}

.rh-cp-btn-block {
  width: 100%;
}

.rh-cp-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.rh-cp-perm-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #F6FBF9;
  border: 1px solid #DCEEE8;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}

.rh-cp-perm-card strong {
  display: block;
  font-size: 0.83rem;
  color: #26323B;
}

.rh-cp-perm-card span {
  display: block;
  font-size: 0.74rem;
  color: #5A6D77;
  font-weight: 400;
}

.rh-cp-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.rh-cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.rh-cp-table th,
.rh-cp-table td {
  padding: 10px 10px;
  border-bottom: 1px solid #EBF4F1;
  text-align: left;
  vertical-align: top;
}

.rh-cp-table th {
  background: #F4FAF8;
  color: #26323B;
  font-weight: 800;
}


/* ==========================================================================
   COMPACT ULTRA-PROFESSIONAL FOOTER STYLING (v2.5.0)
   ========================================================================== */
.rh-footer-compact {
  background: #0F172A !important;
  color: #94A3B8 !important;
  padding: 16px 0 14px !important;
  margin-top: 20px !important;
  border-top: 1px solid #1E293B !important;
  font-size: 0.84rem !important;
}

.rh-footer-compact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.rh-fcompact-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
  .rh-fcompact-top {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

.rh-fcompact-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rh-fcompact-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.rh-fcompact-brand-text {
  font-size: 0.95rem;
  color: #FFFFFF;
}

.rh-fcompact-tagline {
  font-size: 0.76rem;
  color: #64748B;
  display: inline-block;
  margin-left: 4px;
}

@media (max-width: 640px) {
  .rh-fcompact-tagline {
    display: none;
  }
}

.rh-fcompact-hotline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 143, 125, 0.12);
  border: 1px solid rgba(0, 143, 125, 0.3);
  color: #34D399 !important;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s;
}

.rh-fcompact-hotline:hover {
  background: #008F7D;
  color: #FFFFFF !important;
}

.rh-fcompact-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rh-fcompact-links a {
  color: #94A3B8 !important;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: color 0.15s;
}

.rh-fcompact-links a:hover {
  color: #008F7D !important;
}

.rh-fcompact-sep {
  color: #475569;
  font-size: 0.75rem;
}

.rh-fcompact-copy {
  font-size: 0.74rem;
  color: #64748B;
}

/* ==========================================================================
   V2.5.0 COLORFUL SECTIONS, INCOME FLOWCHART & LIVE MENU ANIMATIONS
   ========================================================================== */

/* 1. Header Live Support Indicator & Subnav Animations */
.rh-live-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: rhPulseLive 1.8s infinite;
  margin-right: 4px;
  vertical-align: middle;
}

@keyframes rhPulseLive {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.rh-subnav-item {
  position: relative;
  transition: all 0.2s ease;
  padding: 5px 10px;
  border-radius: 8px;
}

.rh-subnav-item:hover {
  background: #EAF8F5;
  color: #008F7D;
  transform: translateY(-1px);
}

.rh-subnav-item.is-active {
  background: #008F7D;
  color: #FFFFFF !important;
}

.rh-subnav-item.is-active svg {
  color: #FFFFFF !important;
}

/* 2. Distinct Colored Section Backgrounds */
.rh-lp-category-section {
  background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 100%);
  border-top: 1px solid #E0F2FE;
  border-bottom: 1px solid #E2E8F0;
}

.rh-lp-product-section {
  background: #FFFFFF;
}

.rh-lp-how-section {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border-top: 1px solid #FDE68A;
  border-bottom: 1px solid #FDE68A;
}

.rh-lp-income-flow-section {
  background: linear-gradient(135deg, #ECFDF5 0%, #EFF6FF 50%, #FAF5FF 100%);
  border-top: 1.5px solid #A7F3D0;
  border-bottom: 1.5px solid #A7F3D0;
}

.rh-lp-contact-section {
  background: linear-gradient(135deg, #005A4F 0%, #008F7D 50%, #004D43 100%);
  color: #FFFFFF;
}

.rh-lp-contact-section .rh-lp-final-cta-card {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.rh-lp-contact-section .rh-lp-final-cta-title {
  color: #FFFFFF;
}

.rh-lp-contact-section .rh-lp-final-cta-desc {
  color: #E6F7F3;
}

/* 3. Colorful Distinct Category Cards */
.rh-lp-category-grid .rh-lp-cat-card:nth-child(1) { background: #F0FDF9; border-color: #BCE5DC; }
.rh-lp-category-grid .rh-lp-cat-card:nth-child(2) { background: #FFFBEB; border-color: #FDE68A; }
.rh-lp-category-grid .rh-lp-cat-card:nth-child(3) { background: #EFF6FF; border-color: #BFDBFE; }
.rh-lp-category-grid .rh-lp-cat-card:nth-child(4) { background: #FDF2F8; border-color: #FBCFE8; }
.rh-lp-category-grid .rh-lp-cat-card:nth-child(5) { background: #FFF7ED; border-color: #FED7AA; }
.rh-lp-category-grid .rh-lp-cat-card:nth-child(6) { background: #ECFDF5; border-color: #A7F3D0; }
.rh-lp-category-grid .rh-lp-cat-card:nth-child(7) { background: #FAF5FF; border-color: #E9D5FF; }
.rh-lp-category-grid .rh-lp-cat-card:nth-child(8) { background: #EEF2FF; border-color: #C7D2FE; }

/* 4. Income Flowchart Card & Step Nodes */
.rh-income-flowchart-card {
  background: #FFFFFF;
  border: 1.5px solid #008F7D;
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 10px 30px rgba(0, 143, 125, 0.08);
  margin-bottom: 24px;
}

.rh-flowchart-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1E293B;
  text-align: center;
  margin: 0 0 18px;
}

.rh-flowchart-steps-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3px;
  width: 100%;
}

@media (min-width: 900px) {
  .rh-flowchart-steps-grid {
    gap: 8px;
  }
}

.rh-fc-step {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 2px 6px;
  text-align: center;
  position: relative;
  flex: 1;
  min-width: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 900px) {
  .rh-fc-step {
    border-radius: 14px;
    padding: 14px 10px;
  }
}

.rh-fc-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.rh-fc-step-1 { border-top: 3.5px solid #008F7D; }
.rh-fc-step-2 { border-top: 3.5px solid #EA580C; }
.rh-fc-step-3 { border-top: 3.5px solid #7C3AED; }
.rh-fc-step-4 { border-top: 3.5px solid #0284C7; }
.rh-fc-step-5 { border-top: 3.5px solid #059669; }

.rh-fc-step-highlight {
  background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 100%);
  border: 1.5px solid #059669;
}

.rh-fc-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #26323B;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

@media (min-width: 900px) {
  .rh-fc-badge {
    top: -12px;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    border-width: 2px;
  }
}

.rh-fc-step-highlight .rh-fc-badge {
  background: #059669;
}

.rh-fc-icon-box {
  font-size: 1.05rem;
  margin: 3px 0 2px;
}

@media (min-width: 900px) {
  .rh-fc-icon-box {
    font-size: 1.6rem;
    margin: 6px 0 6px;
  }
}

.rh-fc-title {
  font-size: 0.63rem;
  font-weight: 800;
  color: #1E293B;
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 900px) {
  .rh-fc-title {
    font-size: 0.92rem;
    margin: 0 0 4px;
  }
}

.rh-fc-desc {
  display: none;
  font-size: 0.78rem;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

@media (min-width: 900px) {
  .rh-fc-desc {
    display: block;
  }
}

.rh-fc-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #008F7D;
  font-weight: 800;
  font-size: 0.72rem;
  margin: 0 -2px;
}

@media (min-width: 900px) {
  .rh-fc-connector {
    font-size: 1.25rem;
    margin: 0 2px;
  }
}

.rh-fc-arrow-mob {
  display: none !important;
}

.rh-fc-arrow-desk {
  display: block !important;
  animation: rhArrowPush 1.5s infinite;
}

@keyframes rhArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes rhArrowPush {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* 5. Math Example & Projections */
.rh-income-math-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.rh-math-example-card {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.rh-math-card-badge {
  display: inline-block;
  background: #EAF8F5;
  color: #008F7D;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  border: 1px solid #BCE5DC;
}

.rh-math-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #F8FAFC;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px dashed #CBD5E1;
}

.rh-math-calc-col {
  display: flex;
  flex-direction: column;
  text-align: center;
  flex: 1;
}

.rh-math-col-lbl {
  font-size: 0.7rem;
  color: #64748B;
  font-weight: 600;
}

.rh-math-col-val {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 2px;
}

.rh-math-col-val.is-slate { color: #475569; }
.rh-math-col-val.is-teal { color: #008F7D; }
.rh-math-col-val.is-navy { color: #0F172A; }

.rh-math-calc-op {
  font-size: 1.2rem;
  font-weight: 800;
  color: #94A3B8;
}

.rh-math-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  font-size: 0.86rem;
  color: #334155;
  flex-wrap: wrap;
  gap: 6px;
}

.rh-math-pure-profit {
  font-size: 1.15rem;
  color: #008F7D;
  font-weight: 800;
}

/* Monthly Income Projections */
.rh-income-projections-card {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.rh-proj-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #1E293B;
  text-align: center;
  margin: 0 0 16px;
}

.rh-proj-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

@media (min-width: 768px) {
  .rh-proj-grid {
    gap: 14px;
  }
}

.rh-proj-tier {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 3px 8px;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 768px) {
  .rh-proj-tier {
    padding: 16px 14px;
    border-radius: 14px;
  }
}

.rh-proj-tier:hover {
  transform: translateY(-2px);
  border-color: #008F7D;
}

.rh-proj-tier.is-tier-popular {
  background: #F0FDF9;
  border: 2px solid #008F7D;
  box-shadow: 0 6px 20px rgba(0, 143, 125, 0.14);
}

.rh-proj-popular-tag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #008F7D 0%, #005A4F 100%);
  color: #FFFFFF;
  font-size: 0.54rem;
  font-weight: 800;
  padding: 1.5px 5px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 143, 125, 0.35);
  animation: rhPulseTag 2s infinite ease-in-out;
}

@keyframes rhPulseTag {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.04); }
}

@media (min-width: 768px) {
  .rh-proj-popular-tag {
    top: -11px;
    font-size: 0.72rem;
    padding: 3px 10px;
  }
}

.rh-proj-tier-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #475569;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 2px 4px;
  border-radius: 4px;
  margin-bottom: 4px;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .rh-proj-tier-badge {
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
  }
}

.rh-proj-tier.is-tier-popular .rh-proj-tier-badge {
  color: #008F7D;
  border-color: #CCFBF1;
  background: #ECFDF5;
}

.rh-proj-daily {
  font-size: 0.68rem;
  font-weight: 800;
  color: #1E293B;
  line-height: 1.2;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .rh-proj-daily {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }
}

.rh-proj-monthly-orders {
  font-size: 0.58rem;
  color: #64748B;
  margin-bottom: 4px;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .rh-proj-monthly-orders {
    font-size: 0.82rem;
    margin-bottom: 12px;
  }
}

.rh-proj-amount {
  font-size: 0.88rem;
  font-weight: 800;
  color: #008F7D;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .rh-proj-amount {
    font-size: 1.45rem;
  }
}

.rh-proj-amount small {
  font-size: 0.55rem;
  font-weight: 600;
  color: #64748B;
}

@media (min-width: 768px) {
  .rh-proj-amount small {
    font-size: 0.82rem;
  }
}

/* Income CTA Strip */
.rh-income-cta-strip {
  background: #FFFFFF;
  border: 1px solid #A7F3D0;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: center;
}

@media (min-width: 768px) {
  .rh-income-cta-strip {
    flex-direction: row;
    text-align: left;
  }
}

.rh-income-cta-text strong {
  display: block;
  font-size: 0.94rem;
  color: #0F172A;
}

.rh-income-cta-text span {
  font-size: 0.82rem;
  color: #64748B;
}

.rh-income-join-btn {
  background: #008F7D;
  color: #FFFFFF;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 800;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 143, 125, 0.2);
  transition: all 0.15s ease;
}

.rh-income-join-btn:hover {
  background: #007667;
  transform: translateY(-1px);
}

/* ==========================================================================
   V2.5.0 ULTRA-CRISP TYPOGRAPHY, INTERACTIVE FAQ ACCORDION & DIGITAL MOBILE MENU
   ========================================================================== */

/* 1. Super-Crisp Bengali Typography Engine */
body {
  font-family: "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #334155;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;
  color: #0F172A;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.32;
}

.rh-lp-hero-title {
  color: #0F172A !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.rh-lp-hero-desc {
  color: #334155 !important;
  font-size: 0.98rem !important;
  line-height: 1.68 !important;
  font-weight: 500;
}

.rh-lp-section-heading,
.rh-lp-section-center-title {
  color: #0F172A !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
}

.rh-lp-section-center-sub {
  color: #475569 !important;
  font-size: 0.92rem !important;
  line-height: 1.62 !important;
  font-weight: 500;
}

/* 2. Interactive Smooth Animated FAQ Accordion */
.rh-lp-faq-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

.rh-faq-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.rh-faq-card:hover {
  border-color: #008F7D;
  box-shadow: 0 6px 16px rgba(0, 143, 125, 0.08);
  transform: translateY(-1px);
}

.rh-faq-card.is-expanded {
  border-color: #008F7D;
  box-shadow: 0 8px 24px rgba(0, 143, 125, 0.1);
  background: #FFFFFF;
}

.rh-faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease;
}

.rh-faq-question-btn:hover {
  background: #F8FAFC;
}

.rh-faq-card.is-expanded .rh-faq-question-btn {
  background: #F0FDF9;
}

.rh-faq-q-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.rh-faq-q-text {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.4;
  flex: 1;
  letter-spacing: -0.01em;
}

.rh-faq-toggle-arrow {
  color: #008F7D;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.rh-faq-card.is-expanded .rh-faq-toggle-arrow {
  transform: rotate(180deg);
}

.rh-faq-answer-collapse {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.rh-faq-answer-body {
  padding: 0 18px 18px 46px;
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.68;
}

.rh-faq-answer-body p {
  margin: 0;
  color: #334155;
}

@media (max-width: 600px) {
  .rh-faq-question-btn {
    padding: 14px 14px;
    gap: 10px;
  }
  .rh-faq-q-text {
    font-size: 0.88rem;
  }
  .rh-faq-answer-body {
    padding: 0 14px 14px 14px;
    font-size: 0.86rem;
  }
}

/* 3. Ultra-Digital Colorful Mobile Drawer Menu */
.rh-guest-mobile-menu {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 2px solid #DCECE8;
  padding: 14px 16px 18px;
  box-shadow: 0 12px 30px rgba(38, 50, 59, 0.12);
  animation: rhSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rhSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rh-mmenu-items-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}

.rh-mmenu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  text-decoration: none;
  color: #1E293B;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  min-height: 50px;
}

.rh-mmenu-item:active {
  transform: scale(0.98);
}

.rh-mmenu-item.is-teal { border-left: 4px solid #008F7D; }
.rh-mmenu-item.is-amber { border-left: 4px solid #D97706; }
.rh-mmenu-item.is-emerald { border-left: 4px solid #059669; }
.rh-mmenu-item.is-indigo { border-left: 4px solid #4F46E5; }
.rh-mmenu-item.is-rose { border-left: 4px solid #DB2777; }
.rh-mmenu-item.is-sky { border-left: 4px solid #0284C7; }
.rh-mmenu-item.is-violet { border-left: 4px solid #7C3AED; }

.rh-mmenu-ico-box {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: #F1F5F9;
  flex-shrink: 0;
}

.rh-mmenu-item.is-teal .rh-mmenu-ico-box { background: #E6F7F3; }
.rh-mmenu-item.is-amber .rh-mmenu-ico-box { background: #FEF3C7; }
.rh-mmenu-item.is-emerald .rh-mmenu-ico-box { background: #ECFDF5; }
.rh-mmenu-item.is-indigo .rh-mmenu-ico-box { background: #EEF2FF; }
.rh-mmenu-item.is-rose .rh-mmenu-ico-box { background: #FDF2F8; }
.rh-mmenu-item.is-sky .rh-mmenu-ico-box { background: #F0F9FF; }
.rh-mmenu-item.is-violet .rh-mmenu-ico-box { background: #F5F3FF; }

.rh-mmenu-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rh-mmenu-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
}

.rh-mmenu-desc {
  font-size: 0.72rem;
  color: #64748B;
  font-weight: 500;
}

.rh-mmenu-arrow {
  font-size: 1.25rem;
  font-weight: 700;
  color: #94A3B8;
}

.rh-mmenu-auth-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #CBD5E1;
}

.rh-mmenu-btn-reg {
  height: 44px;
  background: #008F7D;
  color: #FFFFFF;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 143, 125, 0.2);
}

.rh-mmenu-btn-login {
  height: 42px;
  background: #FFFFFF;
  color: #008F7D;
  border: 1.5px solid #008F7D;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   COMPACT & CLEAN MOBILE GUEST MENU (Reduced Size, Fast & Minimalist)
   -------------------------------------------------------------------------- */
.rh-guest-mobile-menu {
  background: #FFFFFF !important;
  border-bottom: 2px solid #DCECE8 !important;
  padding: 10px 14px 12px !important;
  box-shadow: 0 8px 24px rgba(38, 50, 59, 0.08) !important;
}

.rh-guest-m-search-box {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.rh-guest-m-search-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #D5EAE5;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #26323B;
  background: #F8FAFC;
  outline: none;
}

.rh-guest-m-search-input:focus {
  border-color: #008F7D;
  background: #FFFFFF;
}

.rh-guest-m-search-submit {
  height: 36px;
  width: 36px;
  background: #008F7D;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.rh-mmenu-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.rh-mmenu-compact-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  color: #1E293B;
  transition: all 0.15s ease;
  min-height: 40px;
}

.rh-mmenu-compact-card:hover,
.rh-mmenu-compact-card.is-active {
  background: #EAF8F5;
  border-color: #008F7D;
  color: #008F7D;
}

.rh-mmenu-c-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.rh-mmenu-c-text {
  white-space: nowrap;
}

.rh-mmenu-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed #E2E8F0;
}

.rh-mmenu-btn-reg {
  height: 36px;
  background: #008F7D;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s ease;
}

.rh-mmenu-btn-reg:hover {
  background: #007667;
}

.rh-mmenu-btn-login {
  height: 36px;
  background: #FFFFFF;
  color: #008F7D;
  border: 1.5px solid #008F7D;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.rh-mmenu-btn-login:hover {
  background: #F0FDF9;
}

/* --------------------------------------------------------------------------
   SEQUENTIAL PROFESSIONAL MOBILE GUEST MENU (Vertical Animated List)
   -------------------------------------------------------------------------- */
.rh-guest-mobile-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 2px solid #DCECE8 !important;
  padding: 12px 14px 16px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
  animation: rhMenuSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: top center;
}

@keyframes rhMenuSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scaleY(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.rh-mmenu-seq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.rh-mmenu-seq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  text-decoration: none;
  color: #0F172A;
  font-size: 0.92rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 44px;
}

.rh-mmenu-seq-item:hover,
.rh-mmenu-seq-item.is-active {
  background: #F8FAFC;
  transform: translateX(4px);
  border-color: #008F7D;
}

/* Distinct Vibrant Colors for each sequential item */
.rh-mmenu-seq-item.is-seq-teal {
  border-left: 4px solid #008F7D;
}
.rh-mmenu-seq-item.is-seq-teal .rh-mmenu-seq-ico {
  background: #E6F7F3;
  color: #008F7D;
}

.rh-mmenu-seq-item.is-seq-emerald {
  border-left: 4px solid #059669;
}
.rh-mmenu-seq-item.is-seq-emerald .rh-mmenu-seq-ico {
  background: #ECFDF5;
  color: #059669;
}

.rh-mmenu-seq-item.is-seq-amber {
  border-left: 4px solid #D97706;
}
.rh-mmenu-seq-item.is-seq-amber .rh-mmenu-seq-ico {
  background: #FEF3C7;
  color: #D97706;
}

.rh-mmenu-seq-item.is-seq-indigo {
  border-left: 4px solid #4F46E5;
}
.rh-mmenu-seq-item.is-seq-indigo .rh-mmenu-seq-ico {
  background: #EEF2FF;
  color: #4F46E5;
}

.rh-mmenu-seq-item.is-seq-sky {
  border-left: 4px solid #0284C7;
}
.rh-mmenu-seq-item.is-seq-sky .rh-mmenu-seq-ico {
  background: #F0F9FF;
  color: #0284C7;
}

.rh-mmenu-seq-item.is-seq-violet {
  border-left: 4px solid #7C3AED;
}
.rh-mmenu-seq-item.is-seq-violet .rh-mmenu-seq-ico {
  background: #F5F3FF;
  color: #7C3AED;
}

.rh-mmenu-seq-ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.rh-mmenu-seq-name {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A;
}

.rh-mmenu-seq-arrow {
  color: #94A3B8;
  font-size: 1.25rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.rh-mmenu-seq-item:hover .rh-mmenu-seq-arrow {
  transform: translateX(3px);
  color: #008F7D;
}

/* Sequential Buttons */
.rh-mmenu-seq-auth {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #CBD5E1;
}

.rh-mmenu-seq-btn-reg {
  height: 40px;
  background: #008F7D;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 143, 125, 0.2);
  transition: all 0.15s ease;
}

.rh-mmenu-seq-btn-reg:hover {
  background: #007667;
}

.rh-mmenu-seq-btn-login {
  height: 40px;
  background: #FFFFFF;
  color: #008F7D;
  border: 1.5px solid #008F7D;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.15s ease;
}

.rh-mmenu-seq-btn-login:hover {
  background: #F0FDF9;
}

/* --------------------------------------------------------------------------
   TOP-RIGHT FLOATING COMPACT MENU (Upper Half of Screen Only - Matches 22016.jpg request)
   - Height is AUTO (stops right after contact card, no blank space, no stretching to bottom)
   - Positioned in upper right (top: 54px; right: 10px; max-width: 255px)
   - Lower half of screen displays website content clearly with soft backdrop
   -------------------------------------------------------------------------- */
.rh-guest-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.rh-guest-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rh-guest-mobile-drawer {
  position: fixed;
  top: 54px;
  right: 10px;
  width: 255px;
  max-width: calc(100vw - 20px);
  height: auto;
  max-height: calc(85vh - 60px);
  background: #FFFFFF;
  border: 1.5px solid #D5EAE5;
  border-radius: 16px;
  z-index: 9999;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  transform-origin: top right;
  transform: scale(0.92) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rh-guest-mobile-drawer.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .rh-guest-drawer-backdrop,
  .rh-guest-mobile-drawer {
    display: none !important;
  }
}

.rh-gdrawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #EBF3F1;
  background: #F8FAFC;
}

.rh-gdrawer-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rh-gdrawer-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.rh-gdrawer-name {
  font-size: 0.84rem;
  color: #1E293B;
  font-weight: 700;
}

.rh-gdrawer-name strong {
  color: #008F7D;
}

.rh-gdrawer-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #64748B;
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rh-gdrawer-close-btn:hover {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
}

.rh-gdrawer-body {
  padding: 8px 10px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rh-gdrawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rh-gdrawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  text-decoration: none;
  color: #0F172A;
  font-size: 0.8rem;
  font-weight: 700;
  min-height: 33px;
  transition: all 0.15s ease;
}

.rh-gdrawer-link:hover,
.rh-gdrawer-link.is-active {
  background: #F0FDF9;
  border-color: #008F7D;
  color: #008F7D;
  transform: translateX(2px);
}

.rh-gdrawer-link.is-link-teal { border-left: 3px solid #008F7D; }
.rh-gdrawer-link.is-link-emerald { border-left: 3px solid #059669; }
.rh-gdrawer-link.is-link-amber { border-left: 3px solid #D97706; }
.rh-gdrawer-link.is-link-indigo { border-left: 3px solid #4F46E5; }
.rh-gdrawer-link.is-link-sky { border-left: 3px solid #0284C7; }
.rh-gdrawer-link.is-link-violet { border-left: 3px solid #7C3AED; }

.rh-gdrawer-ico {
  font-size: 0.85rem;
  line-height: 1;
}

.rh-gdrawer-txt {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-gdrawer-arr {
  color: #94A3B8;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Attached Directly Below Links — Zero Blank Gap! */
.rh-gdrawer-contact-card {
  margin-top: 6px !important;
  padding: 8px 10px !important;
  background: linear-gradient(135deg, #F0FDF9 0%, #FFFFFF 100%) !important;
  border: 1.5px solid #A7F3D0 !important;
  border-radius: 10px !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(0, 143, 125, 0.06) !important;
}

.rh-gdrawer-contact-header {
  font-size: 0.68rem;
  font-weight: 700;
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 2px;
}

.rh-gdrawer-contact-number {
  font-size: 0.96rem;
  font-weight: 800;
  color: #008F7D;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.rh-gdrawer-contact-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.rh-gdrawer-call-btn {
  height: 30px;
  background: #008F7D;
  color: #FFFFFF;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 143, 125, 0.2);
  transition: all 0.15s ease;
}

.rh-gdrawer-call-btn:hover {
  background: #007667;
}

.rh-gdrawer-wa-btn {
  height: 30px;
  background: #25D366;
  color: #FFFFFF;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.2);
  transition: all 0.15s ease;
}

.rh-gdrawer-wa-btn:hover {
  background: #20BD5A;
}

/* --------------------------------------------------------------------------
   PURE DIGITAL HERO BANNER (Zero Image Dependencies — 100% Vector & CSS)
   -------------------------------------------------------------------------- */
.rh-hero-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #BCE5DC;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #008F7D;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 143, 125, 0.06);
}

.rh-gradient-headline {
  background: linear-gradient(135deg, #008F7D 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.rh-hero-micro-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.rh-hmt-item {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0F766E;
  background: rgba(240, 253, 249, 0.85);
  border: 1px solid #CCFBF1;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Digital Hub Card */
.rh-hero-digital-hub-card {
  background: #FFFFFF;
  border: 1.5px solid #A7F3D0;
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 20px 50px rgba(0, 143, 125, 0.12), 0 4px 16px rgba(0, 0, 0, 0.04);
  animation: rhHeroCardFloat 4.5s ease-in-out infinite alternate;
  will-change: transform;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

@keyframes rhHeroCardFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}

.rh-hdh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.rh-hdh-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rh-hdh-logo-chip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #008F7D;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rh-hdh-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.rh-hdh-sub {
  font-size: 0.68rem;
  color: #64748B;
}

.rh-hdh-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #059669;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}

/* KPI Box */
.rh-hdh-kpi-box {
  background: linear-gradient(135deg, #F0FDF9 0%, #FFFFFF 100%);
  border: 1px solid #CCFBF1;
  border-radius: 14px;
  padding: 12px 14px 6px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.rh-hdh-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.rh-hdh-kpi-lbl {
  font-size: 0.72rem;
  color: #475569;
  font-weight: 700;
}

.rh-hdh-growth-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #059669;
  background: #ECFDF5;
  padding: 2px 6px;
  border-radius: 999px;
}

.rh-hdh-kpi-val {
  font-size: 1.28rem;
  font-weight: 800;
  color: #008F7D;
  line-height: 1.2;
}

.rh-hdh-kpi-val small {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
}

.rh-hdh-graph-wrap {
  margin-top: 4px;
  height: 28px;
}

.rh-hdh-trend-svg {
  width: 100%;
  height: 100%;
}

/* Pillars List */
.rh-hdh-pillars-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 10px;
}

.rh-hdh-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  padding: 6px 3px 5px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  transition: transform 0.15s ease;
}

@media (min-width: 768px) {
  .rh-hdh-pillar {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
  }
}

.rh-hdh-pillar:hover {
  transform: translateY(-2px);
}

.rh-hdh-pillar.is-pillar-emerald { border-top: 3px solid #059669; }
.rh-hdh-pillar.is-pillar-amber { border-top: 3px solid #D97706; }
.rh-hdh-pillar.is-pillar-blue { border-top: 3px solid #0284C7; }

@media (min-width: 768px) {
  .rh-hdh-pillar.is-pillar-emerald { border-top: none; border-left: 3.5px solid #059669; }
  .rh-hdh-pillar.is-pillar-amber { border-top: none; border-left: 3.5px solid #D97706; }
  .rh-hdh-pillar.is-pillar-blue { border-top: none; border-left: 3.5px solid #0284C7; }
}

.rh-hdh-pillar-ico {
  font-size: 1rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .rh-hdh-pillar-ico {
    font-size: 1.1rem;
  }
}

.rh-hdh-pillar-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .rh-hdh-pillar-text {
    align-items: flex-start;
  }
}

.rh-hdh-pillar-text strong {
  font-size: 0.68rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .rh-hdh-pillar-text strong {
    font-size: 0.78rem;
  }
}

.rh-hdh-pillar-text span {
  font-size: 0.56rem;
  color: #64748B;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .rh-hdh-pillar-text span {
    font-size: 0.68rem;
  }
}

.rh-hdh-check {
  display: none;
}

@media (min-width: 768px) {
  .rh-hdh-check {
    display: inline-block;
    color: #059669;
    font-weight: 800;
    font-size: 0.8rem;
  }
}

/* Proof Footer */
.rh-hdh-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed #E2E8F0;
}

.rh-hdh-avatars {
  display: flex;
  align-items: center;
}

.rh-hdh-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #FFFFFF;
  margin-left: -5px;
}

.rh-hdh-av:first-child {
  margin-left: 0;
}

.rh-hdh-proof-text {
  font-size: 0.74rem;
  color: #475569;
}

.rh-hdh-proof-text strong {
  color: #008F7D;
}

/* --------------------------------------------------------------------------
   RESPONSIVE UNIFIED HERO BANNER (v2.6.0 Desktop & Mobile Identical)
   -------------------------------------------------------------------------- */
.rh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rh-lp-hero {
  background: linear-gradient(135deg, #EAF8F5 0%, #F5FCFA 50%, #FFFFFF 100%);
  border-bottom: 1px solid #DCECE8;
  padding: 16px 0 20px;
}

@media (min-width: 900px) {
  .rh-lp-hero {
    padding: 24px 0 32px;
  }
}

.rh-hero-banner-wrapper {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 143, 125, 0.12), 0 2px 10px rgba(0, 0, 0, 0.04);
  background: #F0FDF9;
  line-height: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rh-hero-banner-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0, 143, 125, 0.18);
}

.rh-hero-banner-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.rh-hero-banner-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

@media (max-width: 767px) {
  .rh-lp-hero {
    padding: 10px 0 14px;
  }
  .rh-hero-banner-wrapper {
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 143, 125, 0.1);
  }
  .rh-hero-banner-img {
    border-radius: 12px;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   FLAGSHIP PURE CODE ANIMATED HERO BANNER (v2.7.0)
   100% Vector & Code — Zero Image Files — Identical Desktop & Mobile Scaling
   ========================================================================== */

.rh-lp-hero {
  background: linear-gradient(135deg, #042E28 0%, #004D43 50%, #02362F 100%);
  padding: 20px 0 24px;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #00C2A8;
}

@media (min-width: 900px) {
  .rh-lp-hero {
    padding: 36px 0 42px;
  }
}

.rh-flagship-banner {
  position: relative;
  background: rgba(4, 46, 40, 0.75);
  border: 1.5px solid rgba(0, 194, 168, 0.4);
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(0, 143, 125, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

@media (min-width: 900px) {
  .rh-flagship-banner {
    padding: 34px 32px;
    border-radius: 26px;
  }
}

/* Ambient Radial Glow */
.rh-fb-ambient-glow {
  position: absolute;
  top: -30%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 194, 168, 0.25) 0%, rgba(0, 143, 125, 0.08) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: rhAmbientPulse 6s ease-in-out infinite alternate;
}

@keyframes rhAmbientPulse {
  0% { transform: scale(0.9) translate(0, 0); opacity: 0.6; }
  100% { transform: scale(1.15) translate(-20px, 20px); opacity: 0.95; }
}

/* 2-Column Responsive Grid (Always Side-by-Side Parallel on Both Mobile and Desktop!) */
.rh-fb-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 8px;
  width: 100%;
}

@media (min-width: 900px) {
  .rh-fb-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
  }
}

/* Left Content */
.rh-fb-left {
  display: flex;
  flex-direction: column;
}

/* Brand Row */
.rh-fb-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 194, 168, 0.35);
  border-radius: 999px;
  padding: 5px 14px 5px 8px;
  margin-bottom: 12px;
  width: fit-content;
}

.rh-fb-logo-mark {
  width: 28px;
  height: 28px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.rh-fb-brand-text {
  color: #FFFFFF;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
}

.rh-fb-brand-text strong {
  color: #FFFFFF;
  font-weight: 800;
}

.rh-fb-brand-sep {
  color: rgba(255, 255, 255, 0.4);
  margin: 0 2px;
}

.rh-fb-brand-bn {
  color: #FCD34D;
  font-weight: 700;
}

/* National Badge */
.rh-fb-nat-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(90deg, rgba(0, 143, 125, 0.35) 0%, rgba(245, 158, 11, 0.2) 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 14px;
  width: fit-content;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.2);
}

.rh-fb-flag-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: rhLiveDotPulse 1.6s infinite ease-in-out;
}

@keyframes rhLiveDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

.rh-fb-nat-text {
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.rh-fb-medal {
  background: #F59E0B;
  color: #042E28;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.2;
}

/* Headline */
.rh-fb-headline {
  font-size: 1.45rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

@media (min-width: 900px) {
  .rh-fb-headline {
    font-size: 2.25rem;
    line-height: 1.28;
    margin: 0 0 14px;
  }
}

.rh-fb-gradient-txt {
  background: linear-gradient(135deg, #00E5C9 0%, #34D399 50%, #FBBF24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  text-shadow: 0 0 30px rgba(0, 229, 201, 0.4);
}

/* Subtitle */
.rh-fb-subtitle {
  font-size: 0.85rem;
  color: #D1FAE5;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 520px;
}

@media (min-width: 900px) {
  .rh-fb-subtitle {
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0 0 24px;
  }
}

/* Action CTA */
.rh-fb-actions {
  margin-bottom: 18px;
}

.rh-fb-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #008F7D 0%, #00C2A8 50%, #005A4F 100%);
  color: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1.5px solid #FCD34D;
  box-shadow: 0 8px 24px rgba(0, 194, 168, 0.45), 0 0 15px rgba(252, 211, 77, 0.35);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.rh-fb-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 194, 168, 0.6), 0 0 22px rgba(252, 211, 77, 0.5);
  color: #FFFFFF;
}

.rh-fb-cta-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: rhShimmerSlide 3.2s infinite ease-in-out;
}

@keyframes rhShimmerSlide {
  0% { left: -100%; }
  40%, 100% { left: 160%; }
}

.rh-fb-cta-arrow {
  transition: transform 0.2s ease;
}

.rh-fb-cta-btn:hover .rh-fb-cta-arrow {
  transform: translateX(4px);
}

/* Trust Chips */
.rh-fb-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.rh-fb-trust-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(0, 194, 168, 0.3);
  border-radius: 8px;
  padding: 6px 4px;
  color: #ECFDF5;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .rh-fb-trust-chip {
    font-size: 0.78rem;
    padding: 7px 10px;
    gap: 6px;
  }
}

.rh-fb-tchip-ico {
  font-size: 0.82rem;
}

/* Right Stage */
.rh-fb-right {
  position: relative;
  display: flex;
  justify-content: center;
}

.rh-fb-card-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  animation: rhFloatMaster 5s ease-in-out infinite alternate;
}

@keyframes rhFloatMaster {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* Floating Golden Coins */
.rh-fb-coin {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 50%, #B45309 100%);
  border: 2px solid #FFFBEB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #78350F;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
  z-index: 3;
  pointer-events: none;
}

.rh-fb-coin-1 {
  top: -12px;
  right: 18px;
  animation: rhCoinWobble1 3.5s ease-in-out infinite alternate;
}

.rh-fb-coin-2 {
  bottom: 24px;
  left: -10px;
  width: 28px;
  height: 28px;
  font-size: 0.88rem;
  animation: rhCoinWobble2 4s ease-in-out infinite alternate;
}

@keyframes rhCoinWobble1 {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-10px) rotate(14deg); }
}

@keyframes rhCoinWobble2 {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(8px) rotate(-12deg); }
}

/* Hub Card */
.rh-fb-hub-card {
  background: rgba(15, 23, 42, 0.82);
  border: 1.5px solid rgba(0, 194, 168, 0.5);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 143, 125, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 900px) {
  .rh-fb-hub-card {
    padding: 18px 16px;
    border-radius: 22px;
  }
}

/* Hub Header */
.rh-fb-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rh-fb-hub-brand-mini {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rh-fb-hub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.rh-fb-hub-dot.is-green { background: #10B981; }
.rh-fb-hub-dot.is-yellow { background: #F59E0B; }
.rh-fb-hub-dot.is-red { background: #EF4444; }

.rh-fb-hub-title {
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  margin-left: 4px;
}

.rh-fb-hub-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  color: #34D399;
  font-size: 0.65rem;
  font-weight: 800;
}

.rh-fb-live-radar {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px #34D399;
  animation: rhRadarPulse 1.5s infinite;
}

@keyframes rhRadarPulse {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
  100% { transform: scale(0.9); opacity: 1; }
}

/* Verified Alert Pill */
.rh-fb-alert-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.22) 0%, rgba(5, 150, 105, 0.1) 100%);
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 10px;
  animation: rhAlertGlow 2.5s infinite alternate;
}

@keyframes rhAlertGlow {
  0% { box-shadow: 0 0 6px rgba(16, 185, 129, 0.2); }
  100% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.5); }
}

.rh-fb-alert-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10B981;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-fb-alert-info {
  display: flex;
  flex-direction: column;
}

.rh-fb-alert-info strong {
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
}

.rh-fb-alert-info span {
  color: #A7F3D0;
  font-size: 0.60rem;
}

/* Reseller Row */
.rh-fb-reseller-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 8px;
  margin-bottom: 10px;
}

.rh-fb-reseller-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.rh-fb-reseller-av.is-male { background: #008F7D; }
.rh-fb-reseller-av.is-female { background: #D97706; }

.rh-fb-reseller-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rh-fb-rname {
  color: #FFFFFF;
  font-size: 0.70rem;
  font-weight: 800;
  line-height: 1.2;
}

.rh-fb-rtag {
  background: rgba(0, 194, 168, 0.25);
  color: #00E5C9;
  font-size: 0.58rem;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: 4px;
}

.rh-fb-rsub {
  color: #94A3B8;
  font-size: 0.58rem;
}

/* KPI Box */
.rh-fb-kpi-wrap {
  background: linear-gradient(135deg, rgba(0, 143, 125, 0.22) 0%, rgba(2, 44, 34, 0.5) 100%);
  border: 1px solid rgba(0, 194, 168, 0.45);
  border-radius: 12px;
  padding: 10px 10px 4px;
  margin-bottom: 10px;
}

.rh-fb-kpi-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.rh-fb-kpi-lbl {
  color: #A7F3D0;
  font-size: 0.65rem;
  font-weight: 700;
}

.rh-fb-kpi-num {
  color: #34D399;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.5);
}

.rh-fb-kpi-num small {
  color: #CBD5E1;
  font-size: 0.65rem;
  font-weight: 600;
}

.rh-fb-kpi-growth-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(52, 211, 153, 0.2);
  color: #34D399;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.4);
}

/* Live Wave SVG */
.rh-fb-svg-box {
  width: 100%;
  height: 38px;
  overflow: hidden;
}

.rh-fb-wave-svg {
  width: 100%;
  height: 100%;
}

.rh-fb-wave-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: rhDrawWave 4s ease-in-out infinite alternate;
}

@keyframes rhDrawWave {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: 0; }
}

.rh-fb-wave-glow-dot {
  animation: rhGlowDotBlink 2s infinite ease-in-out;
}

@keyframes rhGlowDotBlink {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #00C2A8); }
  50% { transform: scale(1.4); filter: drop-shadow(0 0 10px #34D399); }
}

/* Hub Footer */
.rh-fb-hub-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rh-fb-wallets {
  display: flex;
  gap: 5px;
  flex: 1;
}

.rh-fb-wallet-chip {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rh-fb-w-logo {
  font-weight: 900;
  font-size: 0.68rem;
  line-height: 1;
  margin-bottom: 2px;
}

.rh-fb-w-logo.bkash-c { color: #E2136E; }
.rh-fb-w-logo.nagad-c { color: #F7941D; }

.rh-fb-wallet-chip span:last-child {
  color: #94A3B8;
  font-size: 0.52rem;
  line-height: 1;
}

/* 3D Parcel Representation */
.rh-fb-parcel-box {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 5px 8px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

.rh-fb-pbox-top {
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1;
}

.rh-fb-pbox-seal {
  background: #10B981;
  color: #FFFFFF;
  font-size: 0.52rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  margin-top: 2px;
}

/* ==========================================================================
   MOBILE PARALLEL (সমান্তরাল) ULTRA-REFINED SCALING (v2.7.1)
   Both Columns Parallel in 1 Row — Zero Splitting / Zero Overflow
   ========================================================================== */
@media (max-width: 767px) {
  .rh-lp-hero {
    padding: 8px 0 10px;
  }

  .rh-flagship-banner {
    padding: 8px 6px;
    border-radius: 12px;
    border-width: 1px;
  }

  .rh-fb-grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 6px;
  }

  /* Left Column */
  .rh-fb-brand-row {
    padding: 2px 6px;
    gap: 4px;
    margin-bottom: 3px;
  }

  .rh-fb-logo-mark {
    width: 16px;
    height: 16px;
  }

  .rh-fb-logo-mark svg {
    width: 12px;
    height: 12px;
  }

  .rh-fb-brand-text {
    font-size: 0.58rem;
  }

  .rh-fb-nat-badge {
    padding: 1.5px 5px;
    margin-bottom: 4px;
    gap: 3px;
    border-radius: 4px;
  }

  .rh-fb-flag-dot {
    width: 5px;
    height: 5px;
  }

  .rh-fb-nat-text {
    font-size: 0.50rem;
    line-height: 1.1;
  }

  .rh-fb-medal {
    font-size: 0.44rem;
    padding: 0.5px 3px;
  }

  .rh-fb-headline {
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 3px;
  }

  .rh-fb-subtitle {
    font-size: 0.50rem;
    line-height: 1.25;
    margin: 0 0 5px;
  }

  .rh-fb-actions {
    margin-bottom: 5px;
  }

  .rh-fb-cta-btn {
    padding: 5px 8px;
    font-size: 0.60rem;
    border-radius: 6px;
    gap: 3px;
  }

  .rh-fb-cta-arrow {
    width: 11px;
    height: 11px;
  }

  .rh-fb-trust-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 0;
  }

  .rh-fb-trust-chip {
    font-size: 0.46rem;
    padding: 1.5px 3px;
    gap: 2px;
    border-radius: 3px;
    justify-content: flex-start;
  }

  .rh-fb-tchip-ico {
    font-size: 0.50rem;
  }

  /* Right Column (Floating Hub Card) */
  .rh-fb-card-stage {
    max-width: 100%;
  }

  .rh-fb-hub-card {
    padding: 5px 4px;
    border-radius: 9px;
    border-width: 1px;
  }

  .rh-fb-hub-header {
    margin-bottom: 3px;
    padding-bottom: 2px;
  }

  .rh-fb-hub-dot {
    width: 4px;
    height: 4px;
  }

  .rh-fb-hub-title {
    font-size: 0.52rem;
  }

  .rh-fb-hub-live-pill {
    font-size: 0.45rem;
    padding: 1px 4px;
    gap: 3px;
  }

  .rh-fb-live-radar {
    width: 4px;
    height: 4px;
  }

  .rh-fb-alert-pill {
    padding: 2.5px 4px;
    margin-bottom: 3px;
    gap: 3px;
    border-radius: 5px;
  }

  .rh-fb-alert-check {
    width: 12px;
    height: 12px;
    font-size: 0.48rem;
  }

  .rh-fb-alert-info strong {
    font-size: 0.48rem;
    line-height: 1;
  }

  .rh-fb-alert-info span {
    font-size: 0.40rem;
  }

  .rh-fb-reseller-row {
    padding: 2.5px 3px;
    margin-bottom: 3px;
    gap: 3px;
    border-radius: 5px;
  }

  .rh-fb-reseller-av {
    width: 16px;
    height: 16px;
    font-size: 0.58rem;
  }

  .rh-fb-rname {
    font-size: 0.48rem;
  }

  .rh-fb-rtag {
    font-size: 0.38rem;
    padding: 0 2px;
  }

  .rh-fb-rsub {
    font-size: 0.40rem;
  }

  .rh-fb-kpi-wrap {
    padding: 3px 4px 2px;
    margin-bottom: 3px;
    border-radius: 6px;
  }

  .rh-fb-kpi-lbl {
    font-size: 0.44rem;
  }

  .rh-fb-kpi-num {
    font-size: 0.72rem;
  }

  .rh-fb-kpi-num small {
    font-size: 0.48rem;
  }

  .rh-fb-kpi-growth-badge {
    font-size: 0.42rem;
    padding: 0.5px 3px;
  }

  .rh-fb-kpi-growth-badge svg {
    width: 8px;
    height: 8px;
  }

  .rh-fb-svg-box {
    height: 18px;
  }

  .rh-fb-hub-footer {
    gap: 2px;
  }

  .rh-fb-wallets {
    gap: 2px;
  }

  .rh-fb-wallet-chip {
    padding: 1.5px 2px;
    border-radius: 3px;
  }

  .rh-fb-w-logo {
    font-size: 0.44rem;
    margin-bottom: 0;
  }

  .rh-fb-wallet-chip span:last-child {
    font-size: 0.36rem;
  }

  .rh-fb-parcel-box {
    padding: 1.5px 3px;
    border-radius: 3px;
  }

  .rh-fb-pbox-top {
    font-size: 0.40rem;
  }

  .rh-fb-pbox-seal {
    font-size: 0.34rem;
  }

  .rh-fb-coin {
    width: 14px;
    height: 14px;
    font-size: 0.48rem;
    border-width: 1px;
  }

  .rh-fb-coin-1 {
    top: -5px;
    right: 4px;
  }

  .rh-fb-coin-2 {
    bottom: 4px;
    left: -4px;
    width: 12px;
    height: 12px;
    font-size: 0.42rem;
  }
}

/* ==========================================================================
   CIRCULAR WORKFLOW EARNING CYCLE HERO BANNER (v3.4.0)
   Matches watermarked_img_17168826542929904267.jpg
   100% Pure Code & SVG — Zero Image Dependencies
   Scales with Exact Desktop Fidelity on Mobile (Identical Side-by-Side Parallel View)
   ========================================================================== */

.rh-lp-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF9 50%, #E6F7F3 100%);
  padding: 12px 0 16px;
  position: relative;
  overflow: hidden;
  border-bottom: 1.5px solid #CCFBF1;
}

@media (min-width: 900px) {
  .rh-lp-hero {
    padding: 24px 0 30px;
  }
}

.rh-desktop-banner-scaler {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  height: 400px;
  border-radius: 16px;
  container-type: inline-size;
  box-shadow: 0 16px 40px rgba(0, 143, 125, 0.12), 0 2px 10px rgba(0, 0, 0, 0.03);
}

@media (max-width: 767px) {
  .rh-desktop-banner-scaler {
    border-radius: 12px;
  }
}

.rh-desktop-banner-canvas {
  width: 780px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: scale(calc(100cqw / 780));
}

@media (min-width: 860px) {
  .rh-desktop-banner-scaler {
    height: 400px !important;
  }
  .rh-desktop-banner-canvas {
    transform: scale(1.1) !important;
  }
}

.rh-cycle-hero-banner {
  width: 780px;
  height: 400px;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(135deg, #FFFFFF 0%, #F5FCFA 50%, #ECFDF5 100%);
  border: 1.5px solid #A7F3D0;
  border-radius: 18px;
  padding: 18px 20px 14px 22px;
  overflow: hidden;
}

/* Ambient Subtle Mint & Cyan Glowing Background */
.rh-chb-ambient-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.rh-chb-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.65;
}

.rh-chb-orb-1 {
  top: -20%;
  right: -10%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(0, 194, 168, 0.08) 50%, transparent 70%);
  animation: rhOrbFloat1 8s ease-in-out infinite alternate;
}

.rh-chb-orb-2 {
  bottom: -25%;
  left: -15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 143, 125, 0.18) 0%, transparent 70%);
  animation: rhOrbFloat2 7s ease-in-out infinite alternate;
}

@keyframes rhOrbFloat1 {
  0% { transform: scale(0.9) translate(0, 0); }
  100% { transform: scale(1.15) translate(20px, 15px); }
}

@keyframes rhOrbFloat2 {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.18) translate(-15px, -20px); }
}

/* Sparkle Dots */
.rh-chb-sparkle {
  position: absolute;
  border-radius: 50%;
  background: #10B981;
  opacity: 0.5;
  filter: drop-shadow(0 0 5px #10B981);
}

.rh-chb-sparkle.sp-1 { top: 20%; left: 16%; width: 5px; height: 5px; animation: rhSpDrift 5s infinite; }
.rh-chb-sparkle.sp-2 { top: 70%; left: 45%; width: 7px; height: 7px; background: #F59E0B; animation: rhSpDrift 6s infinite reverse; }
.rh-chb-sparkle.sp-3 { top: 15%; right: 26%; width: 5px; height: 5px; animation: rhSpDrift 4s infinite; }
.rh-chb-sparkle.sp-4 { bottom: 15%; right: 10%; width: 6px; height: 6px; background: #00C2A8; animation: rhSpDrift 7s infinite reverse; }

@keyframes rhSpDrift {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
  50% { transform: translateY(-12px) scale(1.3); opacity: 0.8; }
}

/* 2-Column Exact Desktop Grid */
.rh-chb-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
}

/* Left Column */
.rh-chb-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Brand Badge */
.rh-chb-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  width: fit-content;
}

.rh-chb-brand-title {
  font-size: 1.65rem;
  font-weight: 900;
  color: #042E28;
  letter-spacing: -0.5px;
  line-height: 1;
}

.rh-chb-verified-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10B981;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.45);
  animation: rhTickShine 3s infinite ease-in-out;
}

@keyframes rhTickShine {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #10B981); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px #34D399); }
}

/* Main Headline */
.rh-chb-headline {
  font-size: 2.15rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.22;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
}

.rh-chb-headline-teal {
  color: #008F7D;
  display: inline-block;
}

/* Subtitle */
.rh-chb-subtitle {
  font-size: 0.92rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.45;
  margin: 0 0 16px;
  max-width: 410px;
}

/* Highlighted Action Button */
.rh-chb-cta-wrap {
  margin-bottom: 16px;
}

.rh-chb-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #00A894 0%, #008F7D 50%, #005F53 100%);
  color: #FFFFFF !important;
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration: none;
  padding: 11px 22px 11px 24px;
  border-radius: 999px;
  border: 2.5px solid #FCD34D;
  box-shadow: 0 10px 28px rgba(0, 143, 125, 0.45), 0 0 18px rgba(252, 211, 77, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: rhButton3DPulseCycle 2.6s infinite ease-in-out;
}

@keyframes rhButton3DPulseCycle {
  0%, 100% {
    box-shadow: 0 10px 26px rgba(0, 143, 125, 0.45), 0 0 16px rgba(252, 211, 77, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 14px 36px rgba(0, 143, 125, 0.65), 0 0 26px rgba(252, 211, 77, 0.65);
    transform: scale(1.025);
  }
}

.rh-chb-cta-btn:hover {
  transform: translateY(-3px) scale(1.035);
  box-shadow: 0 16px 42px rgba(0, 143, 125, 0.7), 0 0 30px rgba(252, 211, 77, 0.75);
}

.rh-chb-btn-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: rhShimmerSweepCycle 3s infinite ease-in-out;
}

@keyframes rhShimmerSweepCycle {
  0% { left: -100%; }
  35%, 100% { left: 180%; }
}

.rh-chb-cta-txt {
  letter-spacing: 0.2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.rh-chb-cta-arrow {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.rh-chb-cta-btn:hover .rh-chb-cta-arrow {
  transform: translateX(4px);
}

/* 3 Large Trust Chips in 1 Horizontal Line */
.rh-chb-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.rh-chb-tchip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  border: 1px solid #CCFBF1;
  border-radius: 999px;
  padding: 5px 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}

.rh-chb-tico {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.70rem;
  font-weight: 900;
  flex-shrink: 0;
}

.rh-chb-tico.is-emerald { background: #ECFDF5; color: #059669; }
.rh-chb-tico.is-teal { background: #CCFBF1; color: #0F766E; }
.rh-chb-tico.is-pink { background: #FCE7F3; color: #DB2777; }

.rh-chb-ttxt {
  font-size: 0.68rem;
  font-weight: 800;
  color: #1E293B;
}

/* ==========================================================================
   RIGHT COLUMN: 100% PURE CODE 3D CIRCULAR EARNING CYCLE ("আর্নিং চক্র")
   ========================================================================== */
.rh-chb-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rh-chb-cycle-stage {
  position: relative;
  width: 340px;
  height: 350px;
  animation: rhCycleFloat 5s ease-in-out infinite alternate;
}

@keyframes rhCycleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}

/* SVG Circuit Ring */
.rh-chb-ring-svg {
  position: absolute;
  top: 5px;
  left: 0;
  width: 340px;
  height: 340px;
  pointer-events: none;
  z-index: 1;
}

.rh-chb-rotating-ring {
  transform-origin: 170px 170px;
  animation: rhRingSpin 24s linear infinite;
}

@keyframes rhRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Center Core (Glowing Shield + Golden Coins + Title) */
.rh-chb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 40%, #E6F7F2 85%, #CCFBF1 100%);
  border: 2px solid #5EEAD4;
  box-shadow: 0 8px 30px rgba(0, 143, 125, 0.25), inset 0 2px 6px rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.rh-chb-core-shield {
  width: 44px;
  height: 48px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  clip-path: polygon(50% 0%, 100% 20%, 100% 75%, 50% 100%, 0% 75%, 0% 20%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
  animation: rhShieldPulse 2.5s infinite ease-in-out;
  margin-bottom: 3px;
}

@keyframes rhShieldPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #10B981); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 8px #34D399); }
}

.rh-chb-shield-check {
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.rh-chb-core-title {
  font-size: 0.85rem;
  font-weight: 900;
  color: #042E28;
  letter-spacing: -0.2px;
}

/* Floating Golden Coins in Core */
.rh-chb-coin-center {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 60%, #D97706 100%);
  border: 1.5px solid #FFFBEB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #78350F;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45);
  pointer-events: none;
}

.rh-chb-coin-center.coin-c1 {
  top: 18px;
  left: 10px;
  width: 22px;
  height: 22px;
  font-size: 0.72rem;
  animation: rhCoinWobble1 3.5s ease-in-out infinite alternate;
}

.rh-chb-coin-center.coin-c2 {
  bottom: 22px;
  left: 12px;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  animation: rhCoinWobble2 4s ease-in-out infinite alternate;
}

.rh-chb-coin-center.coin-c3 {
  top: 26px;
  right: 12px;
  width: 20px;
  height: 20px;
  font-size: 0.65rem;
  animation: rhCoinWobble1 4.5s ease-in-out infinite alternate reverse;
}

/* 6 Workflow Cycle Nodes (Clean, Legible, High-Contrast) */
.rh-chb-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 4;
  transition: transform 0.2s ease;
}

.rh-chb-node:hover {
  transform: scale(1.08);
}

.rh-chb-node-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #5EEAD4;
  box-shadow: 0 6px 18px rgba(0, 143, 125, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.rh-chb-node-icon.is-green { border-color: #10B981; }
.rh-chb-node-icon.is-blue { border-color: #0284C7; }
.rh-chb-node-icon.is-amber { border-color: #F59E0B; }
.rh-chb-node-icon.is-teal { border-color: #008F7D; }
.rh-chb-node-icon.is-emerald { border-color: #059669; }
.rh-chb-node-icon.is-gold { border-color: #D97706; }

.rh-chb-node-txt {
  font-size: 0.68rem;
  font-weight: 800;
  color: #0F172A;
  background: rgba(255, 255, 255, 0.95);
  padding: 1.5px 7px;
  border-radius: 999px;
  border: 1px solid #CCFBF1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}

/* Node Placements Clockwise */
/* Node 1: পণ্য নির্বাচন (Top Center) */
.rh-chb-node.node-1 {
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}

/* Node 2: মার্কেটিং (Top Right) */
.rh-chb-node.node-2 {
  top: 60px;
  right: -5px;
}

/* Node 3: অর্ডার সংগ্রহ (Bottom Right) */
.rh-chb-node.node-3 {
  bottom: 50px;
  right: -5px;
}

/* Node 4: রিসেলহাটে সাবমিট (Bottom Center) */
.rh-chb-node.node-4 {
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

/* Node 5: লাভ জেনারেট (Bottom Left) */
.rh-chb-node.node-5 {
  bottom: 50px;
  left: -10px;
}

/* Node 6: টাকা উইথড্র বিকাশ/নগদে (Top Left) */
.rh-chb-node.node-6 {
  top: 60px;
  left: -18px;
}


/* ==========================================================================
   RESELLER DASHBOARD 16:9 RESPONSIVE IMAGE BANNER (v3.5.0)
   Ensures 100% identical display on both mobile and desktop screens.
   ========================================================================== */
.rh-home-hero-banner-wrap {
  width: 100%;
  margin: 0 0 16px 0;
  padding: 0;
  display: block;
}

.rh-home-banner-image-container {
  width: 100%;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 143, 125, 0.12);
  background: #FFFFFF;
  line-height: 0;
}

.rh-home-banner-responsive-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (max-width: 767px) {
  .rh-home-hero-banner-wrap {
    margin-bottom: 12px;
  }
  .rh-home-banner-image-container {
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 143, 125, 0.08);
  }
  .rh-home-banner-responsive-img {
    border-radius: 12px;
  }
}


/* ==========================================================================
   RESELLER DASHBOARD ULTRA-MODERN 3D UI (v3.5.2)
   Matches watermarked_img_4702614653654194543.jpg with exact 3D squircle
   badges, vibrant multi-tone gradients, glossy highlights & smooth shadows.
   ========================================================================== */

/* 1. Quick Connect Support Bar */
.rh-connect-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .rh-connect-strip {
    gap: 8px;
  }
}

.rh-connect-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(215, 234, 230, 0.85) !important;
  border-radius: 16px !important;
  padding: 12px 6px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-align: center !important;
  cursor: pointer !important;
  color: #1E293B !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 143, 125, 0.04) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.rh-connect-card:hover,
.rh-connect-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: #008F7D !important;
  box-shadow: 0 8px 24px rgba(0, 143, 125, 0.14) !important;
}

.rh-connect-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.2s ease !important;
}

.rh-connect-card:hover .rh-connect-icon {
  transform: scale(1.06) !important;
}

/* Connect Icons Rich Gradients */
.rh-connect-teal {
  background: linear-gradient(135deg, #10B981 0%, #008F7D 50%, #006D5F 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 143, 125, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.rh-connect-fb {
  background: linear-gradient(135deg, #3B82F6 0%, #1877F2 50%, #1D4ED8 100%) !important;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.rh-connect-yt {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 50%, #B91C1C 100%) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.rh-connect-tg {
  background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 50%, #0284C7 100%) !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.rh-connect-label {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}

.rh-connect-sub {
  font-size: 0.68rem !important;
  color: #64748B !important;
  font-weight: 600 !important;
}

.rh-connect-soon-badge {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  margin-top: 1px !important;
}

/* 2. Section Title with Emerald Accent Bar */
.rh-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  margin-top: 10px !important;
}

.rh-section-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: -0.01em !important;
}

.rh-section-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 4px !important;
  height: 18px !important;
  background: #008F7D !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
}

/* 3. Product Shortcuts Grid (4 Columns x 2 Rows) */
.rh-pro-category-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 480px) {
  .rh-pro-category-grid {
    gap: 8px !important;
  }
}

.rh-pro-cat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-radius: 16px !important;
  padding: 12px 4px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  color: #0F172A !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.rh-pro-cat-card:hover,
.rh-pro-cat-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: #008F7D !important;
  box-shadow: 0 8px 24px rgba(0, 143, 125, 0.14) !important;
  color: #008F7D !important;
}

/* Icon Container Squircle with 3D Gloss */
.rh-pro-cat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  transition: transform 0.2s ease !important;
}

.rh-pro-cat-card:hover .rh-pro-cat-icon {
  transform: scale(1.08) rotate(2deg) !important;
}

/* Individual 3D Gradient Squircle Colors matching watermarked_img_4702614653654194543.jpg */

/* 1. সব প্রোডাক্ট (Vibrant 3D Emerald) */
.rh-pro-category-grid .rh-pro-cat-card:nth-child(1) .rh-pro-cat-icon {
  background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(16, 185, 129, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* 2. নতুন প্রোডাক্ট (Gleaming 3D Gold Star) */
.rh-pro-category-grid .rh-pro-cat-card:nth-child(2) .rh-pro-cat-icon {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(245, 158, 11, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* 3. ট্রেন্ডিং প্রোডাক্ট (Neon Cyan/Teal Rising Graph) */
.rh-pro-category-grid .rh-pro-cat-card:nth-child(3) .rh-pro-cat-icon {
  background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 50%, #0D9488 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(20, 184, 166, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* 4. সার্চ প্রোডাক্ট (Sapphire Royal Blue Search Lens) */
.rh-pro-category-grid .rh-pro-cat-card:nth-child(4) .rh-pro-cat-icon {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(59, 130, 246, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* 5. টপ সেলিং (Coral-Red Flame & Growth Bars) */
.rh-pro-category-grid .rh-pro-cat-card:nth-child(5) .rh-pro-cat-icon {
  background: linear-gradient(135deg, #FB7185 0%, #F43F5E 50%, #E11D48 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(244, 63, 94, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* 6. কাস্টমাইজড প্রিন্ট (Violet Digital Creative Pen) */
.rh-pro-category-grid .rh-pro-cat-card:nth-child(6) .rh-pro-cat-icon {
  background: linear-gradient(135deg, #C084FC 0%, #A855F7 50%, #7E22CE 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(168, 85, 247, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* 7. সেলস গাইডলাইন (Indigo Professional Handbook) */
.rh-pro-category-grid .rh-pro-cat-card:nth-child(7) .rh-pro-cat-icon {
  background: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #4338CA 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(99, 102, 241, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* 8. লার্নিং ভিডিও (Cinematic Rose-Pink Player) */
.rh-pro-category-grid .rh-pro-cat-card:nth-child(8) .rh-pro-cat-icon {
  background: linear-gradient(135deg, #F472B6 0%, #EC4899 50%, #BE185D 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(236, 72, 153, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* Card Labels */
.rh-pro-cat-label {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
  margin-top: 1px !important;
}


/* ==========================================================================
   ALL PRODUCTS CATALOG ULTRA-MODERN LUXURY UI (v3.6.0)
   Matches watermarked_img_3322294508439749505.jpg
   ========================================================================== */

/* 1. Page Header & Title Block */
.rh-sa-page-header-v360 {
  margin-bottom: 20px;
}

.rh-sa-title-block-v360 {
  margin-bottom: 14px;
}

.rh-sa-ribbon-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.rh-sa-ribbon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #EAF8F5;
  border-radius: 50%;
  color: #008F7D;
  box-shadow: 0 2px 6px rgba(0, 143, 125, 0.15);
}

.rh-sa-heading {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

.rh-sa-wholesale-pill {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.rh-sa-subheading {
  font-size: 0.82rem !important;
  color: #64748B !important;
  margin: 4px 0 0 0 !important;
  font-weight: 600 !important;
}

.rh-sa-sub-highlight {
  color: #008F7D !important;
  font-weight: 700 !important;
}

/* 2. Floating Pill Luxury Search Bar */
.rh-sa-search-form-v360 {
  background: #FFFFFF !important;
  border: 1.5px solid #008F7D !important;
  border-radius: 999px !important;
  padding: 4px 4px 4px 16px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 6px 20px rgba(0, 143, 125, 0.10) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.rh-sa-search-form-v360:focus-within {
  box-shadow: 0 8px 26px rgba(0, 143, 125, 0.20) !important;
}

.rh-sa-search-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
  color: #0F172A !important;
  background: transparent !important;
  flex: 1 !important;
  padding: 8px 6px !important;
}

.rh-sa-search-btn-v360 {
  background: linear-gradient(135deg, #10B981 0%, #008F7D 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0, 143, 125, 0.3) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.rh-sa-search-btn-v360:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(0, 143, 125, 0.4) !important;
}

/* 3. Quick Action Filter Strip */
.rh-sa-quick-filter-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.rh-sa-qfilter-chip {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}

.rh-sa-qfilter-chip:hover {
  border-color: #008F7D;
  background: #EAF8F5;
  color: #008F7D;
  transform: translateY(-1px);
}

/* 4. Subcategory Cards Luxury Elevation & Distinct Icons */
.rh-sa-section-box {
  border-radius: 20px !important;
  padding: 16px 12px 14px !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
}

.rh-sa-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (max-width: 480px) {
  .rh-sa-grid-4 {
    gap: 8px !important;
  }
}

.rh-sa-card.rh-sa-subcard {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 10px 4px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.rh-sa-card.rh-sa-subcard:hover {
  transform: translateY(-3px) !important;
  border-color: #008F7D !important;
  box-shadow: 0 8px 22px rgba(0, 143, 125, 0.14) !important;
}

.rh-sa-subcard-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: #F8FAFC !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

.rh-sa-card.rh-sa-subcard:hover .rh-sa-subcard-icon {
  transform: scale(1.1) !important;
  background: #EAF8F5 !important;
}

.rh-sa-card-title {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.rh-sa-pill {
  display: inline-block !important;
  background: #EAF8F5 !important;
  color: #008F7D !important;
  border: 1px solid #BCE5DC !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
}


/* ==========================================================================
   ENHANCED LUXURY SECTION BOXES (v3.6.1)
   ========================================================================== */
.rh-sa-section-box.rh-sec-accent-blue {
  background: linear-gradient(135deg, #EFF8FF 0%, #E0F2FE 100%) !important;
  border: 1px solid #BAE6FD !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08) !important;
}

.rh-sa-section-box.rh-sec-accent-rose {
  background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%) !important;
  border: 1px solid #FECDD3 !important;
  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.08) !important;
}

.rh-sa-section-box.rh-sec-accent-teal {
  background: linear-gradient(135deg, #F0FDF4 0%, #E6F7F2 100%) !important;
  border: 1px solid #A7F3D0 !important;
  box-shadow: 0 8px 24px rgba(0, 143, 125, 0.08) !important;
}

.rh-sa-section-box.rh-sec-accent-amber {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  border: 1px solid #FDE68A !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.08) !important;
}

.rh-sa-section-box.rh-sec-accent-warm {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%) !important;
  border: 1px solid #FED7AA !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.08) !important;
}

.rh-sa-section-box.rh-sec-accent-lavender {
  background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%) !important;
  border: 1px solid #E9D5FF !important;
  box-shadow: 0 8px 24px rgba(126, 34, 206, 0.08) !important;
}

.rh-sa-section-box.rh-sec-accent-coral {
  background: linear-gradient(135deg, #FFF1F2 0%, #FCE7F3 100%) !important;
  border: 1px solid #FBCFE8 !important;
  box-shadow: 0 8px 24px rgba(219, 39, 119, 0.08) !important;
}

.rh-sa-section-box.rh-sec-accent-mint {
  background: linear-gradient(135deg, #F0FDF9 0%, #CCFBF1 100%) !important;
  border: 1px solid #99F6E4 !important;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.08) !important;
}


/* ==========================================================================
   CLEAN & PROFESSIONAL "সব প্রোডাক্ট" PAGE HEADER (v3.6.2)
   Prevents edge clipping, adds comfortable padding and elegant title framing
   without adding unnecessary complexity.
   ========================================================================== */
.rh-catalog-v160-wrap {
  padding: 0 4px;
}

.rh-sa-page-header-v360 {
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 18px !important;
  padding: 16px 14px 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.rh-sa-title-block-v360 {
  margin-bottom: 12px !important;
}

.rh-sa-ribbon-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.rh-sa-heading {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.rh-sa-wholesale-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
}

.rh-sa-subheading {
  font-size: 0.80rem !important;
  color: #64748B !important;
  margin: 3px 0 0 0 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.rh-sa-sub-highlight {
  color: #008F7D !important;
  font-weight: 700 !important;
}

.rh-sa-search-form-v360 {
  background: #F8FAFC !important;
  border: 1.5px solid #008F7D !important;
  border-radius: 999px !important;
  padding: 3px 3px 3px 14px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 2px 8px rgba(0, 143, 125, 0.08) !important;
}


/* ==========================================================================
   ULTRA-COMPACT ZERO-GAP MICRO-HEADER (v3.6.3)
   Matches watermarked_img_8512490631541379429.jpg with zero wasted space.
   ========================================================================== */
.rh-sa-micro-header {
  width: 100% !important;
  margin: 4px 0 8px 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

.rh-sa-micro-pill {
  width: 100% !important;
  max-width: 100% !important;
  height: 42px !important;
  background: linear-gradient(135deg, #F0FAF7 0%, #FFFFFF 100%) !important;
  border: 1.5px solid #A7F3D0 !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 143, 125, 0.08) !important;
}

.rh-sa-micro-tag-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
}

.rh-sa-micro-title {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  margin: 0 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}

.rh-sa-micro-divider {
  color: #CBD5E1 !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.rh-sa-micro-sub {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #008F7D !important;
  line-height: 1 !important;
}

/* Zero unnecessary gaps between header and sections */
.rh-sa-sections-stack {
  margin-top: 6px !important;
}


/* ==========================================================================
   LUXURY DEEP EMERALD FOOTER & 3D SUPPORT CARDS (v3.7.0)
   Matches watermarked_img_16125612767397430270.jpg
   ========================================================================== */

/* 1. Support & FAQ 3D Cards */
.rh-pro-support-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 480px) {
  .rh-pro-support-grid {
    gap: 8px !important;
  }
}

.rh-pro-support-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
  text-align: left !important;
}

.rh-pro-support-card:hover {
  transform: translateY(-2px) !important;
  border-color: #008F7D !important;
  box-shadow: 0 8px 24px rgba(0, 143, 125, 0.12) !important;
}

.rh-supcard-icon-wrap {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.rh-supcard-faq .rh-supcard-icon-wrap {
  background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%) !important;
  color: #FFFFFF !important;
}

.rh-supcard-call .rh-supcard-icon-wrap {
  background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 50%, #0284C7 100%) !important;
  color: #FFFFFF !important;
}

.rh-supcard-3d-ico {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.rh-supcard-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.rh-supcard-title {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
}

.rh-supcard-subtitle {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #008F7D !important;
  line-height: 1.2 !important;
}

/* 2. Deep Midnight Emerald Footer Container */
.rh-footer-emerald-v370 {
  background: linear-gradient(180deg, #023830 0%, #01241F 100%) !important;
  border-top: 2px solid #00F5D4 !important;
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  padding: 20px 0 28px 0 !important;
  margin-top: 16px !important;
  color: #FFFFFF !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
}

.rh-femerald-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
}

/* Row 1: Brand & Hotline Capsule */
.rh-femerald-row1 {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.rh-femerald-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.rh-femerald-logo {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

.rh-femerald-brand-name {
  font-size: 1.15rem !important;
  letter-spacing: -0.01em !important;
}

.rh-femerald-teal-txt {
  color: #00F5D4 !important;
  font-weight: 900 !important;
}

.rh-femerald-white-txt {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.rh-femerald-hotline-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}

.rh-femerald-hotline-capsule {
  background: #FFFFFF !important;
  border: 1.5px solid #00F5D4 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 245, 212, 0.25) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.rh-femerald-hotline-capsule:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 245, 212, 0.4) !important;
}

.rh-femerald-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  background: #10B981 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 8px #10B981 !important;
  animation: rhPulseDot 1.5s infinite ease-in-out !important;
}

@keyframes rhPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.rh-femerald-phone-ico {
  font-size: 0.9rem !important;
  line-height: 1 !important;
}

.rh-femerald-phone-num {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #023830 !important;
  letter-spacing: 0.02em !important;
}

.rh-femerald-tap-hint {
  font-size: 0.62rem !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
}

/* Row 2: Four Translucent Frosted Pill Links */
.rh-femerald-nav-pills {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

.rh-femerald-pill-link {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  color: #F1F5F9 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
}

.rh-femerald-pill-link:hover {
  background: rgba(0, 245, 212, 0.15) !important;
  border-color: #00F5D4 !important;
  color: #00F5D4 !important;
  transform: translateY(-1px) !important;
}

/* Row 3: Payment Partners */
.rh-femerald-trust-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.rh-femerald-trust-label {
  font-size: 0.68rem !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.rh-femerald-trust-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.rh-femerald-badge {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.rh-fbadge-bkash {
  color: #E2136E !important;
  border-left: 3px solid #E2136E !important;
}

.rh-fbadge-nagad {
  color: #F7941D !important;
  border-left: 3px solid #F7941D !important;
}

.rh-fbadge-rocket {
  color: #8C3494 !important;
  border-left: 3px solid #8C3494 !important;
}

.rh-fbadge-cod {
  color: #008F7D !important;
  border-left: 3px solid #008F7D !important;
}

/* Row 4: Copyright */
.rh-femerald-copy {
  font-size: 0.72rem !important;
  color: #94A3B8 !important;
  margin-top: 2px !important;
}


/* ==========================================================================
   ULTRA-SLIM DEEP EMERALD FOOTER (v3.7.1)
   Matches watermarked_img_8754574282833414817.jpg with crystal-clear logo,
   zero payment badge clutter, single-line links & slim vertical footprint.
   ========================================================================== */
.rh-footer-slim-v371 {
  background: linear-gradient(180deg, #023830 0%, #01241F 100%) !important;
  border-top: 2px solid #00F5D4 !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  padding: 14px 0 18px 0 !important;
  margin-top: 14px !important;
  color: #FFFFFF !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12) !important;
}

.rh-fslim-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 0 4px !important;
}

/* Row 1: Sharp Logo & Hotline Capsule */
.rh-fslim-row1 {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.rh-fslim-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.rh-fslim-logo-bag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(0, 245, 212, 0.12) !important;
  border: 1px solid rgba(0, 245, 212, 0.35) !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 6px rgba(0, 245, 212, 0.15) !important;
}

.rh-fslim-brand-name {
  font-size: 1.15rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

.rh-fslim-teal {
  color: #00F5D4 !important;
  font-weight: 900 !important;
}

.rh-fslim-white {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.rh-fslim-hotline-capsule {
  background: #FFFFFF !important;
  border: 1.5px solid #00F5D4 !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(0, 245, 212, 0.25) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.rh-fslim-hotline-capsule:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(0, 245, 212, 0.4) !important;
}

.rh-fslim-phone-num {
  font-size: 0.90rem !important;
  font-weight: 900 !important;
  color: #023830 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
}

/* Row 2: Four Essential Links in Single Clean Horizontal Line */
.rh-fslim-links-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
}

.rh-fslim-link {
  color: #E2E8F0 !important;
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  white-space: nowrap !important;
}

.rh-fslim-link:hover {
  color: #00F5D4 !important;
}

.rh-fslim-sep {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.75rem !important;
}

/* Row 3: Minimalist Centered Copyright */
.rh-fslim-copyright {
  font-size: 0.70rem !important;
  color: #94A3B8 !important;
  margin-top: 2px !important;
  letter-spacing: 0.01em !important;
}


/* ==========================================================================
   HOMEPAGE GUEST CATEGORY CARDS & SVG FALLBACK (v3.8.0)
   ========================================================================== */
.rh-lp-cat-svg-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.rh-lp-cat-card:hover .rh-lp-cat-svg-icon {
  transform: scale(1.1);
}

.rh-lp-cat-icon {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

.rh-lp-cat-card {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  padding: 10px 4px 8px !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.rh-lp-cat-card:hover {
  transform: translateY(-2px) !important;
  border-color: #008F7D !important;
  box-shadow: 0 6px 18px rgba(0, 143, 125, 0.12) !important;
}


/* ==========================================================================
   RESELLHAAT v4.1.0 — MODERN FINTECH WALLET UI (Desktop-Matching Side-by-Side Mobile Layout)
   ========================================================================== */

.rh-wallet-wrapper {
  max-width: 900px;
  margin: 0 auto 30px;
  padding: 0 clamp(8px, 2.5vw, 16px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hind Siliguri", sans-serif;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.rh-wallet-wrapper *,
.rh-wallet-wrapper *::before,
.rh-wallet-wrapper *::after {
  box-sizing: border-box !important;
}

/* 1. Top Hero Banner (Dark Emerald #005A4E to #008F7D gradient) */
.rh-wallet-hero-banner {
  background: linear-gradient(135deg, #005A4E 0%, #008F7D 100%);
  border-radius: clamp(14px, 3.5vw, 20px);
  padding: clamp(14px, 3.2vw, 24px) clamp(12px, 3vw, 24px) clamp(12px, 2.8vw, 20px);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 90, 78, 0.16);
  margin-bottom: clamp(10px, 2.5vw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.rh-wallet-hero-banner::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Side-by-side 2-column layout on all screens down to 360px */
.rh-wallet-hero-content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative;
  z-index: 2;
  gap: clamp(8px, 2.5vw, 16px) !important;
}

.rh-wallet-hero-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.rh-wallet-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3px clamp(6px, 1.8vw, 10px) !important;
  border-radius: 50px;
  font-size: clamp(0.62rem, 1.8vw, 0.76rem) !important;
  font-weight: 600;
  color: #A7F3D0;
  margin-bottom: clamp(4px, 1.2vw, 8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap !important;
}

.rh-wallet-hero-badge svg {
  width: clamp(11px, 2.5vw, 14px) !important;
  height: clamp(11px, 2.5vw, 14px) !important;
  flex-shrink: 0;
}

.rh-wallet-hero-title {
  font-size: clamp(1.15rem, 4vw, 1.65rem) !important;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 clamp(2px, 0.8vw, 6px) 0 !important;
  line-height: 1.22;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-wallet-hero-sub {
  font-size: clamp(0.72rem, 2.2vw, 0.92rem) !important;
  color: #E6F7F2;
  margin: 0;
  line-height: 1.35;
  opacity: 0.95;
}

.rh-wallet-hero-visual {
  flex: 0 0 auto !important;
  width: clamp(72px, 20vw, 130px) !important;
  height: clamp(62px, 17vw, 110px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rh-wallet-3d-svg {
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
  transition: transform 0.4s ease;
}

.rh-wallet-hero-banner:hover .rh-wallet-3d-svg {
  transform: translateY(-3px) scale(1.02);
}

/* Floating Animations for Coins */
@keyframes rhCoinFloat1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}
@keyframes rhCoinFloat2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-5deg); }
}
@keyframes rhCoinFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.rh-coin-float-1 { animation: rhCoinFloat1 3s ease-in-out infinite; transform-origin: center; }
.rh-coin-float-2 { animation: rhCoinFloat2 3.6s ease-in-out infinite 0.5s; transform-origin: center; }
.rh-coin-float-3 { animation: rhCoinFloat3 2.8s ease-in-out infinite 1s; transform-origin: center; }

/* 2. Primary Available Balance Card (Side-by-Side 2-Column on all screens down to 360px) */
.rh-wallet-balance-card {
  background: #FFFFFF;
  border-radius: clamp(12px, 3vw, 18px);
  padding: clamp(10px, 2.5vw, 18px) clamp(10px, 2.8vw, 22px);
  border: 1px solid rgba(0, 143, 125, 0.16);
  box-shadow: 0 4px 16px rgba(0, 90, 78, 0.06);
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: clamp(10px, 2.5vw, 16px);
  gap: clamp(6px, 2vw, 16px) !important;
  box-sizing: border-box;
  width: 100% !important;
}

.rh-wbc-left {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: clamp(6px, 2vw, 16px) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

.rh-wbc-icon-wrap {
  width: clamp(34px, 8.5vw, 52px) !important;
  height: clamp(34px, 8.5vw, 52px) !important;
  border-radius: clamp(8px, 2vw, 14px) !important;
  background: linear-gradient(135deg, #E6F7F4 0%, #D0F0EB 100%);
  color: #008F7D;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 143, 125, 0.12);
  border: 1px solid rgba(0, 143, 125, 0.2);
}

.rh-wbc-icon-wrap svg {
  width: clamp(17px, 4.2vw, 28px) !important;
  height: clamp(17px, 4.2vw, 28px) !important;
  flex-shrink: 0;
}

.rh-wbc-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.rh-wbc-label {
  font-size: clamp(0.62rem, 1.8vw, 0.82rem) !important;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-wbc-amount-row {
  display: flex !important;
  align-items: center !important;
  gap: clamp(4px, 1.2vw, 10px) !important;
  min-width: 0 !important;
}

.rh-wbc-amount {
  font-size: clamp(1.05rem, 3.8vw, 1.65rem) !important;
  font-weight: 800;
  color: #008F7D;
  line-height: 1.15;
  letter-spacing: -0.4px;
  white-space: nowrap !important;
}

.rh-wbc-eye-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px !important;
  color: #94A3B8;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50%;
  transition: color 0.2s, background-color 0.2s;
  flex-shrink: 0 !important;
}

.rh-wbc-eye-btn svg {
  width: clamp(15px, 3.4vw, 20px) !important;
  height: clamp(15px, 3.4vw, 20px) !important;
}

.rh-wbc-eye-btn:hover {
  color: #008F7D;
  background-color: #F1F5F9;
}

.rh-wbc-right {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
}

.rh-wbc-withdraw-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(3px, 1vw, 8px) !important;
  background: linear-gradient(135deg, #008F7D 0%, #005A4E 100%);
  color: #FFFFFF !important;
  text-decoration: none !important;
  padding: clamp(7px, 1.8vw, 12px) clamp(10px, 2.4vw, 22px) !important;
  border-radius: 50px;
  font-size: clamp(0.72rem, 2.2vw, 0.95rem) !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 143, 125, 0.32);
  transition: all 0.25s ease;
  white-space: nowrap !important;
  width: auto !important;
}

.rh-wbc-withdraw-btn svg {
  width: clamp(12px, 2.8vw, 18px) !important;
  height: clamp(12px, 2.8vw, 18px) !important;
  flex-shrink: 0;
}

.rh-wbc-withdraw-btn:hover {
  background: linear-gradient(135deg, #00A692 0%, #006E60 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 143, 125, 0.42);
  color: #FFFFFF !important;
}

/* 3. 3-Column Metrics Strip (STRICTLY IN ONE ROW WITH 3 COLUMNS ON ALL SCREENS DOWN TO 360px) */
.rh-wallet-metrics-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(4px, 1.5vw, 12px) !important;
  margin-bottom: clamp(10px, 2.5vw, 16px);
  width: 100% !important;
  box-sizing: border-box;
}

.rh-metric-box {
  border-radius: clamp(10px, 2.4vw, 16px);
  padding: clamp(8px, 2vw, 14px) clamp(5px, 1.5vw, 14px) clamp(7px, 1.8vw, 12px);
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(4px, 1.2vw, 10px) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  min-width: 0 !important;
  box-sizing: border-box;
}

.rh-metric-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* Purple (মোট অর্জিত প্রফিট) */
.rh-metric-purple {
  background: #FAF5FF;
  border: 1px solid #E9D8FD;
}
.rh-metric-purple .rh-metric-icon-wrap {
  background: #F3E8FF;
  color: #7E22CE;
}
.rh-metric-purple .rh-metric-amount {
  color: #7E22CE;
}

/* Amber (পেন্ডিং প্রফিট) */
.rh-metric-amber {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
}
.rh-metric-amber .rh-metric-icon-wrap {
  background: #FEF3C7;
  color: #D97706;
}
.rh-metric-amber .rh-metric-amount {
  color: #D97706;
}

/* Blue (মোট উত্তোলন) */
.rh-metric-blue {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}
.rh-metric-blue .rh-metric-icon-wrap {
  background: #DBEAFE;
  color: #1D4ED8;
}
.rh-metric-blue .rh-metric-amount {
  color: #1D4ED8;
}

.rh-metric-icon-wrap {
  width: clamp(24px, 6vw, 36px) !important;
  height: clamp(24px, 6vw, 36px) !important;
  border-radius: clamp(6px, 1.5vw, 10px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.rh-metric-icon-wrap svg {
  width: clamp(13px, 3.2vw, 20px) !important;
  height: clamp(13px, 3.2vw, 20px) !important;
}

.rh-metric-text-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.rh-metric-title {
  font-size: clamp(0.58rem, 1.8vw, 0.78rem) !important;
  font-weight: 600;
  color: #64748B;
  line-height: 1.25;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-metric-amount {
  font-size: clamp(0.76rem, 2.5vw, 1.15rem) !important;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.3px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4. 4-Column Tool Cards Grid (STRICTLY IN ONE ROW WITH 4 COLUMNS ON ALL SCREENS DOWN TO 360px) */
.rh-wallet-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(4px, 1.4vw, 12px) !important;
  margin-bottom: clamp(12px, 3vw, 20px);
  width: 100% !important;
  box-sizing: border-box;
}

.rh-tool-card {
  background: #FFFFFF;
  border-radius: clamp(10px, 2.4vw, 16px);
  padding: clamp(9px, 2.2vw, 16px) clamp(3px, 1vw, 8px) clamp(8px, 2vw, 14px);
  text-align: center;
  border: 1px solid #E2E8F0;
  text-decoration: none !important;
  color: #1E293B !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, 1.2vw, 8px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
  min-width: 0 !important;
  box-sizing: border-box;
}

.rh-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: #CBD5E1;
}

.rh-tool-icon-circle {
  width: clamp(28px, 7.5vw, 44px) !important;
  height: clamp(28px, 7.5vw, 44px) !important;
  border-radius: clamp(8px, 2vw, 12px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.25s ease;
  flex-shrink: 0 !important;
}

.rh-tool-icon-circle svg {
  width: clamp(14px, 3.6vw, 22px) !important;
  height: clamp(14px, 3.6vw, 22px) !important;
}

.rh-tool-card:hover .rh-tool-icon-circle {
  transform: scale(1.08);
}

.rh-tool-green .rh-tool-icon-circle { background: #ECFDF5; color: #059669; }
.rh-tool-blue .rh-tool-icon-circle { background: #EFF6FF; color: #2563EB; }
.rh-tool-teal .rh-tool-icon-circle { background: #E6FFFA; color: #0D9488; }
.rh-tool-indigo .rh-tool-icon-circle { background: #EEF2FF; color: #4F46E5; }

.rh-tool-label {
  font-size: clamp(0.56rem, 1.8vw, 0.8rem) !important;
  font-weight: 700;
  color: #334155;
  line-height: 1.18;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 5. Recent Transactions List Card (Compact Horizontal Layout like Desktop Table) */
.rh-wallet-transactions-card {
  background: #FFFFFF;
  border-radius: clamp(12px, 3vw, 18px);
  padding: clamp(12px, 3vw, 20px) clamp(10px, 2.5vw, 22px);
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  margin-bottom: 20px;
  box-sizing: border-box;
  width: 100% !important;
}

.rh-wtx-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: clamp(10px, 2.5vw, 16px);
  padding-bottom: clamp(8px, 2vw, 12px);
  border-bottom: 1px solid #F1F5F9;
}

.rh-wtx-title {
  font-size: clamp(0.88rem, 2.8vw, 1.12rem) !important;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  display: flex !important;
  align-items: center !important;
  gap: 6px;
}

.rh-wtx-title svg {
  width: clamp(15px, 3.4vw, 20px) !important;
  height: clamp(15px, 3.4vw, 20px) !important;
  flex-shrink: 0;
}

.rh-wtx-view-all {
  font-size: clamp(0.72rem, 2.2vw, 0.86rem) !important;
  font-weight: 600;
  color: #008F7D;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  transition: color 0.2s, transform 0.2s;
  white-space: nowrap;
}

.rh-wtx-view-all:hover {
  color: #006E60;
  transform: translateX(2px);
}

.rh-wtx-list {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(6px, 1.8vw, 12px) !important;
}

.rh-wtx-item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: clamp(7px, 1.8vw, 12px) clamp(8px, 2vw, 14px) !important;
  background: #F8FAFC;
  border-radius: clamp(9px, 2.2vw, 14px);
  border: 1px solid #F1F5F9;
  transition: background-color 0.2s, transform 0.2s;
  gap: clamp(6px, 1.8vw, 14px) !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.rh-wtx-item:hover {
  background: #FFFFFF;
  border-color: #E2E8F0;
  transform: translateX(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.rh-wtx-left {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: clamp(6px, 1.8vw, 12px) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.rh-wtx-icon-circle {
  width: clamp(26px, 6.8vw, 40px) !important;
  height: clamp(26px, 6.8vw, 40px) !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.rh-wtx-icon-circle svg {
  width: clamp(13px, 3.4vw, 22px) !important;
  height: clamp(13px, 3.4vw, 22px) !important;
}

.rh-wtx-credit .rh-wtx-icon-circle {
  background: #ECFDF5;
  color: #059669;
}

.rh-wtx-debit .rh-wtx-icon-circle {
  background: #FEF2F2;
  color: #DC2626;
}

.rh-wtx-details {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.rh-wtx-item-title {
  font-size: clamp(0.72rem, 2.2vw, 0.92rem) !important;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 1px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-wtx-item-note {
  font-size: clamp(0.62rem, 1.8vw, 0.78rem) !important;
  color: #64748B;
  margin-bottom: 1px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-wtx-item-time {
  font-size: clamp(0.58rem, 1.6vw, 0.72rem) !important;
  color: #94A3B8;
  white-space: nowrap !important;
}

.rh-wtx-right {
  text-align: right !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.rh-wtx-item-amount {
  font-size: clamp(0.78rem, 2.6vw, 1.05rem) !important;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap !important;
}

.rh-text-credit {
  color: #059669;
}

.rh-text-debit {
  color: #DC2626;
}

.rh-wtx-balance-after {
  font-size: clamp(0.58rem, 1.6vw, 0.72rem) !important;
  color: #94A3B8;
  margin-top: 2px;
  white-space: nowrap !important;
}

.rh-wtx-empty {
  text-align: center;
  padding: 36px 20px;
  color: #64748B;
}

.rh-wtx-empty-icon {
  margin-bottom: 12px;
}

.rh-wtx-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  margin: 0 0 6px 0;
}

.rh-wtx-empty-sub {
  font-size: 0.85rem;
  color: #94A3B8;
  margin: 0;
}


/* ==========================================================================
   RESELLHAAT v4.2.0 — REDESIGNED ORDERS PAGE (EXACT REFERENCE 22378.png)
   Strict Mobile-First & Desktop Parity: 
   - 4-Metric Badges Strip in 1 row (4 columns)
   - 2 Action Buttons in 1 row (side-by-side)
   - Order Cards in 3-column horizontal grid (Thumb, Info, Financial & Action)
   - Zero Responsive Stacking / Breakage down to 360px
   ========================================================================== */

.rh-orders-page-shell {
  width: 100%;
  box-sizing: border-box;
}

.rh-orders-page-wrapper {
  max-width: 900px;
  margin: 0 auto 30px;
  padding: clamp(8px, 2.5vw, 16px);
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  font-family: 'Hind Siliguri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.rh-orders-page-wrapper *,
.rh-orders-page-wrapper *::before,
.rh-orders-page-wrapper *::after {
  box-sizing: border-box !important;
}

/* 1. HERO BANNER: Deep Teal Gradient with Glow & 3D Delivery Art */
.rh-ord-hero-banner {
  background: linear-gradient(135deg, #004D40 0%, #00695C 45%, #00897B 100%);
  border-radius: clamp(14px, 3.5vw, 18px);
  padding: clamp(14px, 3.2vw, 22px) clamp(14px, 3.2vw, 24px);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 77, 64, 0.35);
  margin-bottom: clamp(10px, 2.5vw, 16px);
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
}

.rh-ord-hero-banner::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -20px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.22) 0%, rgba(0, 77, 64, 0) 70%);
  pointer-events: none;
}

.rh-ord-hero-text {
  flex: 1 1 auto;
  min-width: 0;
  z-index: 2;
}

.rh-ord-hero-title {
  color: #FFFFFF !important;
  font-size: clamp(1.22rem, 4vw, 1.65rem) !important;
  font-weight: 800 !important;
  margin: 0 0 5px 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px;
}

.rh-ord-hero-sub {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(0.74rem, 2.3vw, 0.88rem) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.rh-ord-hero-art-col {
  flex: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rh-ord-hero-art {
  width: clamp(78px, 20vw, 115px) !important;
  height: auto !important;
  display: block;
}

/* 2. 4-METRIC BADGES STRIP: STRICTLY 1 ROW (4 COLUMNS) EVEN ON MOBILE */
.rh-ord-metrics-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(4px, 1.4vw, 8px) !important;
  margin-bottom: clamp(10px, 2.5vw, 14px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.rh-ord-metric-badge {
  border-radius: 12px;
  padding: clamp(7px, 2vw, 10px) 2px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.rh-ord-metric-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.rh-ord-metric-badge.metric-total {
  background: #E0F7F4 !important;
  border: 1px solid #B2DFDB !important;
  color: #00796B !important;
}

.rh-ord-metric-badge.metric-shipped {
  background: #E3F2FD !important;
  border: 1px solid #BBDEFB !important;
  color: #1565C0 !important;
}

.rh-ord-metric-badge.metric-delivered {
  background: #E8F5E9 !important;
  border: 1px solid #C8E6C9 !important;
  color: #2E7D32 !important;
}

.rh-ord-metric-badge.metric-return {
  background: #FFEBEE !important;
  border: 1px solid #FFCDD2 !important;
  color: #C62828 !important;
}

.rh-ord-metric-ico {
  width: clamp(16px, 4.5vw, 22px);
  height: clamp(16px, 4.5vw, 22px);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rh-ord-metric-ico svg {
  width: 100%;
  height: 100%;
}

.rh-ord-metric-label {
  font-size: clamp(0.58rem, 1.8vw, 0.74rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
}

.rh-ord-metric-count {
  font-size: clamp(0.82rem, 2.6vw, 1.05rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* 3. 2 ACTION BUTTONS: STRICTLY SIDE BY SIDE IN 1 ROW */
.rh-ord-actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(8px, 2vw, 12px) !important;
  margin-bottom: clamp(12px, 2.5vw, 16px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.rh-ord-btn-primary {
  background: #00796B !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: clamp(0.76rem, 2.5vw, 0.92rem) !important;
  border-radius: 10px !important;
  padding: clamp(10px, 2.6vw, 12px) 6px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: 0 3px 8px rgba(0, 121, 107, 0.22) !important;
  border: none !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

.rh-ord-btn-primary:hover {
  background: #00695C !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.rh-ord-btn-secondary {
  background: #FFFFFF !important;
  border: 1.5px solid #00796B !important;
  color: #00796B !important;
  font-weight: 700 !important;
  font-size: clamp(0.74rem, 2.4vw, 0.90rem) !important;
  border-radius: 10px !important;
  padding: clamp(10px, 2.6vw, 12px) 6px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  cursor: pointer;
}

.rh-ord-btn-secondary:hover {
  background: #EAF8F5 !important;
  color: #00695C !important;
  transform: translateY(-1px);
}

/* 4. FILTER TABS BAR: Horizontal Scrolling / Flex Row */
.rh-ord-tabs-bar {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 2px 2px 12px 2px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  margin-bottom: 6px !important;
  width: 100% !important;
}

.rh-ord-tabs-bar::-webkit-scrollbar {
  display: none !important;
}

.rh-ord-tab-pill {
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: clamp(0.74rem, 2.4vw, 0.85rem) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #CFD8DC !important;
  color: #455A64 !important;
}

.rh-ord-tab-pill:hover {
  border-color: #00897B !important;
  color: #00897B !important;
}

.rh-ord-tab-pill.is-active {
  background: #004D40 !important;
  color: #FFFFFF !important;
  border-color: #004D40 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 77, 64, 0.25) !important;
}

/* 5. ORDER CARDS LIST: Rounded White Card with Shadow & Left Border Accent */
.rh-ord-cards-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

.rh-ord-card {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  padding: clamp(10px, 2.6vw, 14px) clamp(10px, 2.6vw, 14px) !important;
  border: 1px solid #ECEFF1 !important;
  position: relative !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.rh-ord-card:hover {
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Left Border Accents */
.rh-ord-card.accent-blue {
  border-left: 4.5px solid #1E88E5 !important;
}

.rh-ord-card.accent-purple {
  border-left: 4.5px solid #7E57C2 !important;
}

.rh-ord-card.accent-green {
  border-left: 4.5px solid #00897B !important;
}

.rh-ord-card.accent-dynamic {
  border-left: 4.5px solid var(--card-accent, #00897B) !important;
}

/* 3-Column Internal Grid inside Card */
.rh-ord-card-grid {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: clamp(8px, 2vw, 14px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Column 1: Thumbnail */
.rh-ord-thumb-col {
  width: clamp(52px, 14vw, 68px) !important;
  height: clamp(52px, 14vw, 68px) !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Column 2: Middle Order Info */
.rh-ord-info-col {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
}

.rh-ord-id-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.rh-ord-id {
  font-weight: 800 !important;
  font-size: clamp(0.86rem, 2.7vw, 1.02rem) !important;
  color: #1E293B !important;
  line-height: 1.2 !important;
}

.rh-ord-copy-btn {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 5px !important;
  padding: 2px 5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748B !important;
  font-size: 11px !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.rh-ord-copy-btn:hover {
  background: #E2E8F0 !important;
  color: #00796B !important;
}

.rh-ord-copy-btn.copied {
  background: #D1FAE5 !important;
  color: #059669 !important;
  border-color: #A7F3D0 !important;
}

.rh-ord-date {
  color: #64748B !important;
  font-size: clamp(0.66rem, 2vw, 0.76rem) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.rh-ord-status-pill {
  align-self: flex-start !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: clamp(0.64rem, 2vw, 0.74rem) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  margin-top: 2px !important;
}

.rh-ord-status-pill.status-shipped {
  background: #E3F2FD !important;
  color: #1565C0 !important;
  border: 1px solid #BBDEFB !important;
}

.rh-ord-status-pill.status-delivered {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
  border: 1px solid #C8E6C9 !important;
}

.rh-ord-status-pill.status-new {
  background: #FFF7ED !important;
  color: #C2410C !important;
  border: 1px solid #FFEDD5 !important;
}

.rh-ord-status-pill.status-return {
  background: #FFEBEE !important;
  color: #C62828 !important;
  border: 1px solid #FFCDD2 !important;
}

/* Column 3: Right Financial & Action */
.rh-ord-right-col {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right !important;
  min-width: max-content !important;
}

.rh-ord-tot-label {
  font-size: clamp(0.60rem, 1.8vw, 0.70rem) !important;
  color: #64748B !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  line-height: 1 !important;
}

.rh-ord-tot-val {
  font-size: clamp(0.88rem, 2.9vw, 1.12rem) !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
  margin: 1px 0 !important;
}

.rh-ord-profit-pill {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
  border: 1px solid #C8E6C9 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: clamp(0.62rem, 1.9vw, 0.72rem) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.rh-ord-chevron-btn {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #E0F2F1 !important;
  color: #00796B !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  margin-top: 4px !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.rh-ord-chevron-btn:hover {
  background: #00796B !important;
  color: #FFFFFF !important;
  transform: translateX(2px);
}

/* Empty filter state */
.rh-ord-empty-state {
  background: #FFFFFF !important;
  border: 1px dashed #CBD5E1 !important;
  border-radius: 12px !important;
  padding: 24px 16px !important;
  text-align: center !important;
  color: #64748B !important;
  font-size: 0.88rem !important;
}

/* Active bottom navigation pill for Order item */
.rh-bottom-nav-item.is-active {
  background: #004D40 !important;
  color: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 6px 14px !important;
  box-shadow: 0 3px 8px rgba(0, 77, 64, 0.25) !important;
}

.rh-bottom-nav-item.is-active svg {
  stroke: #FFFFFF !important;
}

.rh-bottom-nav-item.is-active span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Header search button styling */
.rh-header-search-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #26323B;
  transition: background 0.2s ease;
  text-decoration: none;
}

.rh-header-search-icon-btn:hover {
  background: #EAF8F5;
  color: #008F7D;
}


/* ==========================================================================
   RESELLHAAT v4.5.5 — PIXEL-PERFECT ACCOUNT DASHBOARD (MATCHING 22385.png)
   1. Reseller Hero Banner (Curved gradient #0b5e42 to #064e3b, Golden Trophy Wreath SVG)
   2. Metrics Strip: 4 Side-by-Side Cards (Mint, Blue, Green, Pink)
   3. 8 Action Cards Grid: 4x2 Cards with right chevron & modal hooks
   4. Floating In-Page Modals: Blur backdrop, smooth modalFadeIn, interactive AJAX
   5. Promotional Banner: Deep Emerald gradient with 5 checkmarks & 3D SVGs
   6. Mobile-to-Desktop Parity: Fluid clamp(), zero overflow, uniform buttons
   ========================================================================== */

/* Keyframe Animations */
@keyframes badgeShimmer {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    filter: drop-shadow(0 6px 16px rgba(255, 215, 0, 0.35));
  }
  50% {
    transform: translateY(-5px) rotate(-1.5deg);
    filter: drop-shadow(0 12px 24px rgba(255, 215, 0, 0.65));
  }
}

@keyframes floatAppPhone {
  0%, 100% {
    transform: translateY(0px);
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4));
  }
  50% {
    transform: translateY(-8px);
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55));
  }
}

@keyframes modalFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(14px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Page Container & Wrapper */
.rh-account-page-main {
  background: #F8FAFC !important;
  min-height: calc(100vh - 140px);
  padding: 24px 0 90px 0 !important;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}

.rh-account-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  width: 100%;
}

.rh-acct-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Hind Siliguri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1E293B;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   1. RESELLER HERO BANNER (Curved gradient #0b5e42 to #064e3b)
   -------------------------------------------------------------------------- */
.rh-acct-hero {
  background: linear-gradient(135deg, #0b5e42 0%, #08533b 50%, #064e3b 100%);
  border-radius: 20px;
  padding: clamp(16px, 3.5vw, 26px) clamp(16px, 4vw, 32px);
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  box-shadow: 0 10px 25px rgba(6, 78, 59, 0.22);
  box-sizing: border-box;
  width: 100%;
}

.rh-acct-hero-bg-accent {
  position: absolute;
  right: -50px;
  top: -50px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.16) 0%, rgba(11, 94, 66, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.rh-acct-hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 24px);
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
}

/* Avatar Column */
.rh-acct-hero-avatar-col {
  flex-shrink: 0;
}

.rh-acct-avatar-wrap {
  position: relative;
  display: inline-block;
}

.rh-acct-avatar {
  width: clamp(68px, 12vw, 86px);
  height: clamp(68px, 12vw, 86px);
  border-radius: 50%;
  border: 3.5px solid #FFFFFF;
  background: linear-gradient(135deg, #008F7D 0%, #004D40 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  box-sizing: border-box;
}

.rh-acct-avatar-initial {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
}

.rh-acct-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rh-acct-camera-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(26px, 5vw, 30px);
  height: clamp(26px, 5vw, 30px);
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #064E3B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
  padding: 0;
  outline: none;
}

.rh-acct-camera-btn:hover {
  transform: scale(1.12);
  background: #E6F4EA;
}

/* User Details Column */
.rh-acct-hero-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rh-acct-hero-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rh-acct-reseller-name {
  margin: 0;
  font-size: clamp(1.18rem, 3vw, 1.48rem);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.rh-acct-approved-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.22);
  border: 1.2px solid #10B981;
  color: #A7F3D0;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: clamp(0.72rem, 1.8vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.rh-acct-hero-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(0.82rem, 2vw, 0.94rem);
  color: #E2E8F0;
  flex-wrap: wrap;
}

.rh-acct-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rh-acct-meta-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.9rem;
}

.rh-acct-copy-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.rh-acct-copy-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}

.rh-acct-copy-btn.is-copied {
  background: #10B981;
  border-color: #10B981;
}

/* Right Golden Reseller Trophy Badge */
.rh-acct-hero-badge-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rh-acct-gold-seal-wrap {
  width: clamp(68px, 12vw, 92px);
  height: clamp(68px, 12vw, 92px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badgeShimmer 3.5s ease-in-out infinite;
  box-sizing: border-box;
}

.rh-acct-gold-seal-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   2. 4-METRIC BADGES STRIP (4 side-by-side cards, zero overflow)
   -------------------------------------------------------------------------- */
.rh-acct-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.8vw, 14px);
  width: 100%;
  box-sizing: border-box;
}

.rh-metric-badge {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 12px);
  padding: clamp(10px, 2vw, 14px) clamp(8px, 2vw, 16px);
  border-radius: clamp(10px, 2vw, 14px);
  border: 1.5px solid transparent;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  min-width: 0;
}

.rh-metric-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.rh-metric-icon-wrap {
  width: clamp(34px, 5vw, 44px);
  height: clamp(34px, 5vw, 44px);
  border-radius: clamp(8px, 1.5vw, 11px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-metric-icon-wrap svg {
  width: clamp(16px, 3vw, 20px);
  height: clamp(16px, 3vw, 20px);
}

.rh-metric-text-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rh-metric-label {
  font-size: clamp(0.72rem, 1.8vw, 0.84rem);
  font-weight: 600;
  color: #475569;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rh-metric-val {
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 2px;
}

/* Card 1: Mint background (#e6fbf5), মোট অর্ডার */
.rh-metric-badge.is-mint {
  background: #e6fbf5;
  border-color: #b3f2df;
}
.rh-metric-badge.is-mint .rh-metric-icon-wrap {
  background: #cbf5e9;
}
.rh-metric-badge.is-mint .rh-metric-val {
  color: #00796B;
}

/* Card 2: Light blue background (#eaf4ff), ডেলিভারিতে */
.rh-metric-badge.is-blue {
  background: #eaf4ff;
  border-color: #c9e2fe;
}
.rh-metric-badge.is-blue .rh-metric-icon-wrap {
  background: #d4e8fe;
}
.rh-metric-badge.is-blue .rh-metric-val {
  color: #1967D2;
}

/* Card 3: Light emerald background (#eafaf1), সম্পন্ন */
.rh-metric-badge.is-green {
  background: #eafaf1;
  border-color: #c3eed6;
}
.rh-metric-badge.is-green .rh-metric-icon-wrap {
  background: #c3eed6;
}
.rh-metric-badge.is-green .rh-metric-val {
  color: #137333;
}

/* Card 4: Light peach/rose background (#fef0f0), রিটার্ন */
.rh-metric-badge.is-pink {
  background: #fef0f0;
  border-color: #fdd2d2;
}
.rh-metric-badge.is-pink .rh-metric-icon-wrap {
  background: #fdd2d2;
}
.rh-metric-badge.is-pink .rh-metric-val {
  color: #C5221F;
}

/* --------------------------------------------------------------------------
   3. 8 ACTION CARDS GRID (Uniform 16px radius, #ffffff, chevron, modal triggers)
   -------------------------------------------------------------------------- */
.rh-acct-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 14px);
  width: 100%;
  box-sizing: border-box;
}

.rh-acct-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, 2vw, 16px) clamp(12px, 2vw, 18px);
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.rh-acct-action-card:hover {
  border-color: #0b5e42;
  box-shadow: 0 8px 20px rgba(11, 94, 66, 0.12);
  transform: translateY(-2px);
}

.rh-acct-action-card:active {
  transform: scale(0.98);
}

.rh-card-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.8vw, 12px);
  min-width: 0;
}

.rh-card-icon-pill {
  width: clamp(34px, 5vw, 40px);
  height: clamp(34px, 5vw, 40px);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rh-card-icon-pill svg {
  width: clamp(16px, 3vw, 20px);
  height: clamp(16px, 3vw, 20px);
}

.rh-card-icon-pill.is-pill-teal {
  background: #E6F7F5;
}
.rh-card-icon-pill.is-pill-amber {
  background: #E6FBF5; /* Mint circular icon with lock */
}
.rh-card-icon-pill.is-pill-pink {
  background: #FCE7F3;
}
.rh-card-icon-pill.is-pill-blue {
  background: #E0F2FE; /* Teal circular icon with bank pillar */
}
.rh-card-icon-pill.is-pill-slate {
  background: #E6FBF5; /* Mint circular icon with gear */
}
.rh-card-icon-pill.is-pill-emerald {
  background: #E6F7F5; /* Cyan circular icon with headset */
}
.rh-card-icon-pill.is-pill-purple {
  background: #E0F2FE; /* Teal circular icon with open book */
}
.rh-card-icon-pill.is-pill-orange {
  background: #EFF6FF; /* Light blue circular icon with bell */
}

/* Mini Brand Badges on Card 3 (bKash pink pill + Nagad orange pill) */
.rh-mini-brand-logos {
  display: flex;
  align-items: center;
  gap: 3px;
}

.rh-mini-brand {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2.5px 5px;
  border-radius: 5px;
  line-height: 1;
  color: #FFFFFF;
}

.rh-mini-brand.is-bkash {
  background: #D12053;
}
.rh-mini-brand.is-nagad {
  background: #F26522;
}

.rh-card-title {
  font-size: clamp(0.82rem, 1.9vw, 0.94rem);
  font-weight: 700;
  color: #1E293B;
  line-height: 1.3;
}

.rh-card-arrow {
  font-size: 1.45rem;
  color: #94A3B8;
  font-weight: 400;
  transition: transform 0.2s ease, color 0.2s ease;
  margin-left: 6px;
  line-height: 1;
}

.rh-acct-action-card:hover .rh-card-arrow {
  color: #0b5e42;
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. PROMOTIONAL / FEATURE BANNER (Deep Emerald #044e36 to #023323)
   -------------------------------------------------------------------------- */
.rh-acct-promo-banner {
  background: linear-gradient(135deg, #044e36 0%, #033d2b 50%, #023323 100%);
  border-radius: 20px;
  padding: clamp(20px, 3.5vw, 30px) clamp(18px, 4vw, 34px);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(4, 78, 54, 0.25);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.rh-acct-promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3.5vw, 32px);
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
}

.rh-acct-promo-left {
  flex: 1;
  max-width: 600px;
}

.rh-acct-promo-title {
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 16px 0;
  line-height: 1.35;
}

.rh-promo-title-highlight {
  color: #FCD34D;
  display: block;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  margin-bottom: 4px;
}

.rh-acct-promo-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rh-promo-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.86rem, 1.9vw, 0.98rem);
  font-weight: 600;
  color: #E2E8F0;
}

.rh-check-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FCD34D;
  color: #713F12;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(252, 211, 77, 0.4);
}

.rh-acct-promo-right {
  flex-shrink: 0;
  width: clamp(240px, 35vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rh-acct-3d-visual-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatAppPhone 4.5s ease-in-out infinite;
}

.rh-promo-banner-svg {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}

/* --------------------------------------------------------------------------
   5. FLOATING IN-PAGE MODAL POPUPS (Smooth modalFadeIn, Zero Reload)
   -------------------------------------------------------------------------- */
.rh-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(3, 20, 17, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.rh-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.rh-modal-card {
  background: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.32);
  padding: clamp(18px, 3.5vw, 24px);
  position: relative;
  box-sizing: border-box;
}

.rh-modal-card-lg {
  max-width: 620px;
}

.rh-modal-overlay.is-open .rh-modal-card {
  animation: modalFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.rh-modal-open {
  overflow: hidden;
}

/* Modal Header */
.rh-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
}

.rh-mod-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rh-mod-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.rh-mod-icon.is-teal { background: #E6F7F5; color: #00796B; }
.rh-mod-icon.is-amber { background: #E6FBF5; color: #00796B; }
.rh-mod-icon.is-pink { background: #FCE7F3; color: #DB2777; }
.rh-mod-icon.is-blue { background: #EFF6FF; color: #2563EB; }
.rh-mod-icon.is-slate { background: #E6FBF5; color: #00796B; }
.rh-mod-icon.is-emerald { background: #E6F7F5; color: #00796B; }
.rh-mod-icon.is-purple { background: #EFF6FF; color: #0284C7; }
.rh-mod-icon.is-orange { background: #EFF6FF; color: #2563EB; }

.rh-mod-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
}

.rh-mod-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.82rem;
  color: #64748B;
}

.rh-modal-close {
  background: #F1F5F9;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #64748B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.rh-modal-close:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: scale(1.08);
}

/* Modal Form Controls */
.rh-form-group {
  margin-bottom: 14px;
}

.rh-form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.rh-req {
  color: #EF4444;
  margin-left: 2px;
}

.rh-form-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid #CBD5E1;
  font-size: 0.94rem;
  font-family: inherit;
  color: #0F172A;
  background: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.rh-form-input:focus {
  border-color: #0b5e42;
  box-shadow: 0 0 0 3.5px rgba(11, 94, 66, 0.15);
  outline: none;
}

.rh-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Password Toggle Field */
.rh-pwd-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rh-pwd-input-wrap .rh-form-input {
  padding-right: 42px;
}

.rh-pwd-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  line-height: 1;
}

.rh-pwd-rules {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: #64748B;
  margin-bottom: 14px;
}

/* Avatar Upload Preview */
.rh-avatar-upload-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.rh-avatar-preview-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #008F7D;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 800;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.rh-btn-upload-avatar {
  display: inline-block;
  padding: 8px 14px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rh-btn-upload-avatar:hover {
  background: #008F7D;
  color: #FFFFFF;
  border-color: #008F7D;
}

.rh-field-tip {
  display: block;
  font-size: 0.78rem;
  color: #64748B;
  margin-top: 4px;
}

/* Payment Tab Pills */
.rh-payment-pill-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.rh-payment-tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid #CBD5E1;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.2s ease;
}

.rh-payment-tab-item input {
  display: none;
}

.rh-pay-tab-badge {
  font-size: 0.68rem;
  padding: 2px 5px;
  border-radius: 4px;
  color: #FFFFFF;
  font-weight: 800;
}
.rh-pay-tab-badge.is-bkash { background: #D12053; }
.rh-pay-tab-badge.is-nagad { background: #F26522; }
.rh-pay-tab-badge.is-rocket { background: #8C1D7D; }

.rh-payment-tab-item.is-selected {
  border-color: #008F7D;
  background: #E6F7F5;
  color: #004D40;
}

/* Radio Group */
.rh-radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rh-radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rh-radio-pill:hover {
  border-color: #008F7D;
}

/* Setting Rows & Switches */
.rh-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F1F5F9;
  gap: 16px;
}

.rh-setting-info strong {
  display: block;
  font-size: 0.92rem;
  color: #1E293B;
}

.rh-setting-info p {
  margin: 3px 0 0 0;
  font-size: 0.78rem;
  color: #64748B;
}

.rh-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.rh-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rh-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #CBD5E1;
  transition: 0.24s;
  border-radius: 24px;
}

.rh-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.24s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.rh-switch input:checked + .rh-slider {
  background-color: #0b5e42;
}

.rh-switch input:checked + .rh-slider:before {
  transform: translateX(20px);
}

.rh-lang-pills {
  display: flex;
  gap: 6px;
}

.rh-lang-pill {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s ease;
}

.rh-lang-pill input { display: none; }
.rh-lang-pill.is-active {
  background: #0b5e42;
  color: #FFFFFF;
  border-color: #0b5e42;
}

/* Support Modal CTA Grid */
.rh-support-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.rh-supp-cta-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.rh-supp-cta-btn.is-whatsapp {
  background: #E8F8F0;
  border: 1px solid #A7F3D0;
  color: #065F46;
}
.rh-supp-cta-btn.is-whatsapp:hover {
  background: #D1FAE5;
  transform: translateY(-2px);
}

.rh-supp-cta-btn.is-call {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}
.rh-supp-cta-btn.is-call:hover {
  background: #DBEAFE;
  transform: translateY(-2px);
}

.rh-cta-ico {
  font-size: 1.5rem;
}

.rh-cta-text strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.2;
}

.rh-cta-text span {
  font-size: 0.78rem;
  opacity: 0.85;
}

.rh-supp-hours-badge {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: #92400E;
  margin-bottom: 16px;
}

.rh-ticket-heading {
  margin: 16px 0 10px 0;
  font-size: 0.96rem;
  color: #0F172A;
  font-weight: 800;
}

/* Guide Steps & FAQ */
.rh-guide-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rh-guide-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rh-guide-step-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.rh-step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0b5e42;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}

.rh-step-content strong {
  display: block;
  font-size: 0.92rem;
  color: #0F172A;
}

.rh-step-content p {
  margin: 3px 0 0 0;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.4;
}

.rh-faq-mini-heading {
  margin: 12px 0 8px 0;
  font-size: 0.95rem;
  color: #0F172A;
  font-weight: 800;
}

.rh-mini-accordion {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.rh-mini-accordion summary {
  font-weight: 700;
  color: #1E293B;
  cursor: pointer;
  outline: none;
}

.rh-mini-accordion p {
  margin: 6px 0 0 0;
  color: #475569;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Modal Footer Buttons */
.rh-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
}

.rh-btn-cancel {
  background: #F1F5F9;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.rh-btn-cancel:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.rh-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.rh-btn-submit.is-teal { background: #0b5e42; }
.rh-btn-submit.is-amber { background: #0b5e42; }
.rh-btn-submit.is-pink { background: #0b5e42; }
.rh-btn-submit.is-blue { background: #0b5e42; }
.rh-btn-submit.is-slate { background: #0b5e42; }
.rh-btn-submit.is-emerald { background: #0b5e42; }
.rh-btn-submit.is-purple { background: #0b5e42; }
.rh-btn-submit.is-orange { background: #0b5e42; }

.rh-btn-submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.rh-btn-submit.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.rh-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid #FFFFFF;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rhSpin 0.7s linear infinite;
}

.rh-btn-submit.is-loading .rh-btn-spinner {
  display: inline-block;
}

@keyframes rhSpin {
  to { transform: rotate(360deg); }
}

/* Toast Notification */
.rh-account-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: #064E3B;
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  font-weight: 700;
  z-index: 1000000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.rh-account-toast.is-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.rh-account-toast.is-error {
  background: #B91C1C;
}

/* --------------------------------------------------------------------------
   6. MOBILE-TO-DESKTOP PARITY & RESPONSIVE DESIGN (Matching 22385.png)
   User Requirement: "কম্পিউটারের স্ক্রিনে যেমন দেখাবে ঠিক একইভাবে মোবাইল স্ক্রিনে দেখাবে..."
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .rh-acct-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .rh-acct-hero-content {
    flex-wrap: wrap;
    position: relative;
    padding-right: 0;
  }
  .rh-acct-hero-badge-col {
    position: static;
  }
  .rh-acct-promo-inner {
    flex-direction: column;
    text-align: left;
    gap: 20px;
  }
  .rh-acct-promo-right {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  .rh-acct-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .rh-acct-hero {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .rh-acct-hero-content {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar info"
      "badge badge";
    gap: 12px;
  }
  .rh-acct-hero-avatar-col {
    grid-area: avatar;
  }
  .rh-acct-hero-info-col {
    grid-area: info;
  }
  .rh-acct-hero-badge-col {
    grid-area: badge;
    justify-content: flex-start;
    padding-top: 4px;
  }
  .rh-acct-gold-seal-wrap {
    width: 60px;
    height: 60px;
  }

  /* 4 Metric Badges in 1 Row (Zero vertical stack!) */
  .rh-acct-metrics-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .rh-metric-badge {
    padding: 8px 4px;
    flex-direction: column;
    text-align: center;
    gap: 3px;
    border-radius: 10px;
  }
  .rh-metric-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }
  .rh-metric-icon-wrap svg {
    width: 14px;
    height: 14px;
  }
  .rh-metric-label {
    font-size: 0.68rem;
  }
  .rh-metric-val {
    font-size: 0.96rem;
  }

  /* 8 Cards: Balanced 2 Columns */
  .rh-acct-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .rh-acct-action-card {
    padding: 10px 8px;
    border-radius: 12px;
  }
  .rh-card-title {
    font-size: 0.8rem;
  }
  .rh-card-icon-pill {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .rh-card-icon-pill svg {
    width: 15px;
    height: 15px;
  }
  .rh-card-arrow {
    font-size: 1.15rem;
  }

  /* Support Grid in Modal */
  .rh-support-cta-grid {
    grid-template-columns: 1fr;
  }
  .rh-form-grid-2 {
    grid-template-columns: 1fr;
  }
}