/* ==========================================================================
   GOWRI SHANKARI CLINIC - GLOBAL STYLES & DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* --- Root Design Tokens (Exact colors from gowrishankari.netlify.app) --- */
:root {
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Color Palette - OKLCH matching gowrishankari.netlify.app */
    --brand: oklch(52% 0.16 254);
    /* Deep Ocean Blue / Teal */
    --brand-foreground: oklch(99% 0 0);
    --primary: oklch(52% 0.16 254);
    /* Primary Brand Blue */
    --primary-foreground: oklch(99% 0 0);
    --primary-dark: oklch(42% 0.16 254);
    --primary-light: oklch(62% 0.16 210);
    --accent-green: oklch(72% 0.19 145);
    /* Emerald Green Badge */
    --secondary: oklch(72% 0.19 145);
    --secondary-foreground: oklch(99% 0 0);
    --background: oklch(99.5% 0.003 240);
    /* Soft Ice White Page Background */
    --card: #ffffff;
    /* Surface Background */
    --dark: oklch(18% 0.03 250);
    /* Deep Slate Text */
    --text: oklch(18% 0.03 250);
    /* Body Text */
    --muted: oklch(50% 0.03 250);
    /* Subtitle & Muted Text */
    --muted-bg: oklch(96% 0.01 240);
    --accent: oklch(95% 0.03 200);
    /* Soft Mint-Blue Highlight Tint */
    --accent-foreground: oklch(22% 0.05 254);
    --border: oklch(92% 0.01 240);
    /* Soft Slate Border */
    --input: oklch(92% 0.01 240);
    --ring: oklch(52% 0.16 254);

    /* Functional Colors */
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --whatsapp: oklch(70% 0.19 150);

    /* Gradients matching reference website */
    --gradient-brand: linear-gradient(135deg, oklch(52% 0.16 254), oklch(62% 0.16 210));
    --gradient-hero: linear-gradient(135deg, oklch(96% 0.04 240), oklch(97% 0.05 155));
    --gradient-whatsapp: linear-gradient(135deg, oklch(70% 0.19 150), oklch(60% 0.19 150));

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.4);

    /* Shadows & Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 0.9rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    --shadow-soft: 0 10px 30px -12px oklch(52% 0.16 254 / 0.25);
    --shadow-card: 0 4px 20px -8px oklch(52% 0.16 254 / 0.15);
    --shadow-lg: 0 20px 40px -10px oklch(52% 0.16 254 / 0.3);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
}

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

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

body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    color: var(--dark);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

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

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

/* --- Container & Layout --- */
.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.main-content {
    flex: 1 0 auto;
}

/* --- Shared Sticky Header --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    background-color: rgba(244, 248, 247, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(210, 229, 225, 0.5);
    transition: all var(--transition-normal);
}

.site-header.scrolled {
    box-shadow: 0 4px 20px rgba(15, 118, 110, 0.08);
    background-color: rgba(255, 255, 255, 0.95);
}

.header-container {
    display: flex;
    height: 4rem;
    align-items: center;
    justify-content: space-between;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.logo-img {
    height: 2.5rem;
    width: 2.5rem;
    object-fit: contain;
}

.logo-text {
    line-height: 1.1;
}

.logo-title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -0.01em;
}

.logo-subtitle {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-green);
}

/* Header Nav Links */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(21, 44, 40, 0.8);
    transition: all var(--transition-fast);
}

.nav-link:hover {
    background-color: var(--accent);
    color: var(--brand);
}

.nav-link.active {
    background-color: var(--accent);
    color: var(--brand);
    font-weight: 700;
}

/* Navigation Dropdown Menu */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-icon {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    transition: transform var(--transition-fast);
}

.nav-dropdown:hover .nav-dropdown-icon {
    transform: rotate(180deg);
}

.nav-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border);
    padding: 0.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: var(--dark);
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item.active {
    background-color: var(--accent);
    color: var(--brand);
    font-weight: 600;
    padding-left: 1.25rem;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cart-icon-btn {
    position: relative;
    padding: 0.5rem;
    border-radius: var(--radius-full);
    color: var(--dark);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.cart-icon-btn:hover {
    background-color: var(--accent);
    color: var(--brand);
}

.cart-badge {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    background-color: var(--accent-green);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
}

.btn-header-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--gradient-brand);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-soft);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-header-book:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.mobile-menu-btn {
    display: none;
    padding: 0.5rem;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--dark);
    cursor: pointer;
}

.mobile-menu-btn:hover {
    background-color: var(--accent);
}

/* Mobile Nav Modal Drawer */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background-color: #ffffff;
    z-index: 51;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    transition: right var(--transition-normal);
}

.mobile-nav-drawer.active {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.mobile-nav-link {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
}

.mobile-nav-link.active,
.mobile-nav-link:hover {
    background-color: var(--accent);
    color: var(--brand);
    font-weight: 700;
}

/* --- Shared Footer --- */
.site-footer {
    background-color: var(--dark);
    color: rgba(255, 255, 255, 0.8);
    padding-top: 4rem;
    padding-bottom: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-logo-img {
    height: 2.75rem;
    width: 2.75rem;
    object-fit: contain;
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 0.25rem;
}

.footer-logo-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
}

.footer-logo-sub {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-green);
}

.footer-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 320px;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-heading {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 0;
    margin-left: 0;
}

.footer-links a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: var(--accent-green);
    transform: translateX(3px);
    display: inline-block;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Glassmorphism utility */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

/* Section Header Shared */
.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    background-color: var(--accent);
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
}

.section-subtitle {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--muted);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Page Header Banner Styles --- */
.page-header-hero {
    background: var(--gradient-hero);
    padding: 4rem 0 3rem;
    text-align: center;
}

.page-header-title {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--dark);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.page-header-subtitle {
    font-size: 1.125rem;
    color: var(--muted);
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

/* --- Hero Section Classes --- */
.hero-section {
    background: var(--gradient-hero);
    padding: 4rem 0 5rem;
    position: relative;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-badge-tag {
    font-size: 0.8rem;
    padding: 0.4rem 0.85rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.hero-badge-star {
    color: #f59e0b;
    margin-right: 0.35rem;
}

.hero-heading {
    font-size: 3.25rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.hero-highlight {
    color: var(--brand);
}

.hero-subtext {
    font-size: 1.125rem;
    color: var(--muted);
    margin-bottom: 2rem;
    max-width: 520px;
    line-height: 1.6;
    text-align: left;
    margin-left: 0;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.btn-icon-spacing {
    margin-right: 0.5rem;
}

.btn-whatsapp-icon {
    margin-right: 0.5rem;
    font-size: 1.15rem;
}

.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    max-width: 440px;
}

.hero-stat-card {
    padding: 0.85rem;
    text-align: center;
    border-radius: var(--radius-lg);
}

.hero-stat-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand);
}

.hero-stat-label {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 600;
}

.hero-visual-box {
    position: relative;
}

.hero-blur-bg {
    position: absolute;
    inset: -1.5rem;
    background: var(--gradient-brand);
    opacity: 0.15;
    filter: blur(30px);
    border-radius: var(--radius-xl);
}

.hero-visual-card {
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    text-align: center;
    position: relative;
}

.hero-logo-img {
    height: 5rem;
    width: 5rem;
    margin: 0 auto 1rem;
    object-fit: contain;
}

.hero-main-img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    max-height: 380px;
}

/* --- General Layout Helper Classes --- */
.section-pad {
    padding: 5rem 0;
}

.section-pad-sm {
    padding: 4rem 0 2rem;
}

.section-hero-bg {
    background: var(--gradient-hero);
    padding: 5rem 0;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.text-center-wrapper {
    text-align: center;
    margin-top: 2.5rem;
}

.flex-between-end {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.view-all-link {
    font-weight: 700;
    color: var(--brand);
}

/* --- Contact & Location CTA Section --- */
.cta-banner-glass {
    padding: 3rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.cta-banner-title {
    font-size: 2.25rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.cta-banner-desc {
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.info-list-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.info-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.info-list-icon {
    color: var(--brand);
    font-size: 1.15rem;
    width: 20px;
    text-align: center;
}

.flex-gap-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.map-iframe-container {
    height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.map-iframe {
    border: 0;
    width: 100%;
    height: 100%;
}

/* --- Footer Spacing Helpers --- */
.footer-hours-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* --- Drawer & Header Utility Classes --- */
.cart-badge-hidden {
    display: none;
}

.icon-header-cart {
    font-size: 1.2rem;
}

.icon-header-menu {
    font-size: 1.25rem;
}

.icon-close-md {
    font-size: 1.25rem;
}

.cart-drawer-subtotal-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--dark);
}

.cart-drawer-btn-row {
    display: flex;
    gap: 0.75rem;
}

/* --- Form & Search Utilities --- */
.search-box-rel {
    position: relative;
    max-width: 540px;
    margin: 2rem auto 0;
}

.search-input-pill {
    padding-left: 2.75rem;
    height: 3rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-soft);
}

.search-icon-pos {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1.1rem;
}

/* --- Card Utilities --- */
.card-padded-center {
    padding: 1.5rem;
    text-align: center;
}

.card-padded-lg {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.card-icon-margin {
    margin: 0 auto 1rem;
}

.card-title-sm {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.card-subtitle-muted {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.card-title-md {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.card-desc-muted {
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.card-list-bullets {
    list-style: none;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text);
}

.mt-auto {
    margin-top: auto;
}

.banner-glass-cta {
    padding: 3rem;
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--border);
}

.banner-cta-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 0.75rem;
}

.banner-cta-subtitle {
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.flex-center-gap {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Prescription Page Utilities --- */
.upload-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
    text-align: center;
    background-color: var(--surface);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.upload-icon-style {
    font-size: 3rem;
    color: var(--brand);
    margin-bottom: 1rem;
}

.upload-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.upload-hint {
    color: var(--muted);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.file-preview-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-top: 1.5rem;
}

.file-preview-icon {
    font-size: 2rem;
    color: var(--brand);
}

/* --- Product Details Utilities --- */
.product-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
}

.product-img-box {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    background-color: var(--surface);
    padding: 3rem;
    text-align: center;
}

.product-img-icon {
    font-size: 8rem;
    color: var(--brand);
}

.zoom-hint-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-full);
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    box-shadow: var(--shadow-soft);
}

.product-thumb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.product-thumb-card {
    height: 70px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--surface);
}

.product-thumb-card.active {
    border-color: var(--brand);
}

.product-thumb-icon {
    font-size: 1.5rem;
    color: var(--brand);
}

/* --- Thumbnail Button & Image Styling --- */
.thumb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thumb-btn:hover {
    border-color: var(--brand);
    background: var(--gradient-hero);
}

.thumb-btn.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    background: #ffffff;
}

.thumb-img {
    width: 100%;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.thumb-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--dark);
    text-align: center;
}

/* --- Empty Cart State --- */
.empty-cart-container {
    display: none;
    text-align: center;
    padding: 4rem 1rem;
}

.empty-cart-icon {
    font-size: 3.5rem;
    color: var(--muted);
    margin: 0 auto 1.25rem;
    display: block;
    opacity: 0.5;
}

.empty-cart-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.empty-cart-desc {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.drawer-empty-icon {
    font-size: 2.75rem;
    color: var(--muted);
    opacity: 0.5;
    margin: 0 auto 1rem;
    display: block;
}

/* --- Auth Page Utilities --- */
.auth-container {
    max-width: 440px;
    margin: 4rem auto;
    padding: 2.5rem;
    border-radius: var(--radius-xl);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo-img {
    height: 4rem;
    width: 4rem;
    margin: 0 auto 1rem;
    object-fit: contain;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark);
}

.auth-subtitle {
    color: var(--muted);
    font-size: 0.9375rem;
    margin-top: 0.25rem;
}

/* --- Store & Medicine Card Helpers --- */
.rating-star-icon {
    color: #f59e0b;
    margin-right: 0.2rem;
}

.rating-count-text {
    color: var(--muted);
}

.card-qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.15rem 0.4rem;
    background: #fff;
}

.btn-qty-action {
    background: none;
    border: none;
    color: var(--dark);
    font-weight: 700;
    cursor: pointer;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: background 0.15s ease;
}

.btn-qty-action:hover {
    background: var(--gradient-hero);
    color: var(--brand);
}

.card-qty-num {
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0 0.25rem;
}

.card-action-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
}

.card-action-flex .card-qty-control {
    flex: 1;
    min-width: 85px;
}

.card-action-flex .add-to-cart-btn {
    flex: 1.4;
    white-space: nowrap;
    padding: 0.45rem 0.5rem;
    font-size: 0.8rem;
}

.store-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.store-category-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sort-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sort-label-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.sort-select-pill {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    width: auto;
    border-radius: var(--radius-full);
}

/* --- Product Detail Extra Helpers --- */
.breadcrumb-bar {
    background: var(--gradient-hero);
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}

.breadcrumb-list {
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-active {
    color: var(--dark);
    font-weight: 600;
}

.product-gallery-card {
    padding: 3.5rem 2rem;
    background: var(--gradient-hero);
    text-align: center;
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
}

.badge-discount-pos {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    z-index: 2;
}

.badge-rx-pos {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    z-index: 2;
}

.zoom-wrap-box {
    margin: 1.5rem 0;
    display: inline-block;
}

.zoom-img-transition {
    transition: transform 0.25s ease-out;
    transform-origin: center center;
}

.zoom-main-icon {
    font-size: 5rem;
    color: var(--brand);
}

.product-title-brand {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand);
    margin-bottom: 0.25rem;
}

.product-main-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.product-spec-text {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.product-rating-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.product-price-box {
    padding: 1.25rem;
    background-color: var(--accent);
    border-radius: var(--radius-lg);
    margin-bottom: 1.75rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.product-price-big {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--brand);
}

.product-mrp-cut {
    font-size: 1.125rem;
    color: var(--muted);
    text-decoration: line-through;
}

.product-save-tag {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--accent-green);
}

.product-action-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
}

.qty-control-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--input);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: #fff;
}

.btn-qty-flat {
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0;
}

.qty-val-display {
    font-weight: 700;
    width: 2.5rem;
    text-align: center;
}

.flex-grow-btn {
    flex: 1;
}

.trust-checks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}

.tab-title-active {
    border-radius: 0;
    border-bottom: 3px solid var(--brand);
    color: var(--brand);
    font-weight: 700;
    background: none;
    padding-left: 0;
}

.tabs-border-row {
    border-bottom: 2px solid var(--border);
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.zoom-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.zoom-modal-box {
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: 3rem 2.5rem;
    max-width: 600px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-lg);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.close-zoom-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: var(--accent);
    border: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
}

.modal-zoom-wrap {
    margin: 2rem 0;
    transform: scale(1.6);
    transform-origin: center center;
}

.modal-zoom-icon {
    font-size: 4rem;
    color: var(--brand);
}

.modal-zoom-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 0.35rem;
}

/* --- Step List Helpers --- */
.step-item-row {
    display: flex;
    gap: 1rem;
}

.step-num-badge {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.step-num-green {
    background: var(--accent-green);
}

.notice-box-glass {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--muted);
    border: 1px solid var(--border);
}

/* --- Checkout & Cart Helpers --- */
.checkout-radio-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--background);
}

.checkout-radio-input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--brand);
}

.cart-item-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}

.cart-item-img-box {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-md);
    background: var(--gradient-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--brand);
    flex-shrink: 0;
}

.cart-summary-card {
    padding: 1.75rem;
    border-radius: var(--radius-xl);
    position: sticky;
    top: 5rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--muted);
}

.summary-row-bold {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--dark);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.accent-link {
    color: var(--brand);
    font-weight: 700;
}

/* --- Checkout Summary Helpers --- */
.checkout-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    max-height: 240px;
    overflow-y: auto;
}

.checkout-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border);
}

/* --- Form Checkbox & Auth Card Helpers --- */
.checkbox-label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--text);
}

.checkbox-input-style {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand);
}

.auth-card-footer {
    text-align: center;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--muted);
}

/* --- Navigation Dropdown Menu --- */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-icon {
    font-size: 0.7rem;
    margin-left: 0.35rem;
    transition: transform var(--transition-normal);
}

.nav-dropdown:hover .nav-dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1000;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background: var(--gradient-hero);
    color: var(--brand);
    padding-left: 1.5rem;
}

.mobile-dropdown-links {
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.mobile-dropdown-item {
    font-size: 0.85rem;
    color: var(--muted);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
}

.mobile-dropdown-item:hover {
    color: var(--brand);
    background: var(--gradient-hero);
}

/* --- User Avatar Dropdown --- */
.custom-modern-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-user-avatar-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-user-avatar-link:hover .nav-user-avatar {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.modern-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    list-style: none;
    z-index: 1050;
}

.dropdown-header-container {
    padding: 0.75rem 1.25rem 0.5rem;
}

.dropdown-user-info {
    display: flex;
    flex-direction: column;
}

.dropdown-user-info .user-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark);
}

.dropdown-user-info .user-email {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.modern-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: all 0.15s ease;
}

.modern-dropdown-menu .dropdown-item:hover {
    background: var(--gradient-hero);
    color: var(--brand);
    padding-left: 1.5rem;
}

.modern-dropdown-menu .dropdown-item.text-danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

.nav-user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--dark);
    font-size: 1.1rem;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-user-icon:hover {
    color: var(--brand);
    background: var(--gradient-hero);
}

/* --- User Profile Dropdown Component --- */
.user-profile-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-user-avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1050;
}

.user-profile-dropdown:hover .user-dropdown-menu,
.user-profile-dropdown.active .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header {
    padding: 0.75rem 1.25rem 0.5rem;
}

.user-dropdown-header .user-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark);
}

.user-dropdown-header .user-email {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 0.4rem 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: all 0.15s ease;
}

.user-dropdown-item i {
    font-size: 0.95rem;
    color: var(--brand);
    width: 1.25rem;
    text-align: center;
}

.user-dropdown-item:hover {
    background: var(--gradient-hero);
    color: var(--brand);
    padding-left: 1.5rem;
}

.user-dropdown-item.text-danger i {
    color: #ef4444;
}

.user-dropdown-item.text-danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* --- Cart Drawer External Item Styling --- */
.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark);
}

.cart-item-meta {
    font-size: 0.78rem;
    color: var(--muted);
}

.cart-item-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
}

.cart-item-price {
    font-weight: 700;
    color: var(--brand);
}

.cart-item-qty-wrap {
    transform: scale(0.85);
    transform-origin: right center;
}

.cart-item-icon {
    font-size: 1.5rem;
    color: var(--brand);
}

.cart-item-remove-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

.cart-item-remove-btn:hover {
    color: #dc2626;
}

/* --- Social Share Component Styling --- */
.share-icon-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.5rem 0.875rem;
    background: var(--muted-bg);
    border-radius: var(--radius-md);
    width: fit-content;
}

.share-icon {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.share-icon-box #social-links {
    display: inline-block;
}

.share-icon-box #social-links ul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.share-icon-box #social-links ul li {
    display: inline-flex;
}

.share-icon-box #social-links ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: #ffffff;
    color: var(--brand);
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    text-decoration: none;
}

.share-icon-box #social-links ul li a:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
    background: var(--brand);
    color: #ffffff;
}

/* Brand Hover Overrides */
.share-icon-box #social-links ul li a[href*="facebook"]:hover {
    background: #1877f2;
    color: #ffffff;
}

.share-icon-box #social-links ul li a[href*="wa.me"]:hover,
.share-icon-box #social-links ul li a[href*="whatsapp"]:hover {
    background: #25d366;
    color: #ffffff;
}

.share-icon-box #social-links ul li a[href*="twitter"]:hover,
.share-icon-box #social-links ul li a[href*="x.com"]:hover {
    background: #1da1f2;
    color: #ffffff;
}

.share-icon-box #social-links ul li a[href*="linkedin"]:hover {
    background: #0a66c2;
    color: #ffffff;
}

/* --- WhatsApp Order Button --- */
.btn-whatsapp {
    background: var(--whatsapp, #25d366);
    color: #ffffff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-whatsapp:hover {
    background: #20ba5a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

/* ==========================================================================
   Cart Page Layout & Alignment Styles
   ========================================================================== */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 992px) {
    .cart-layout.grid-2-1 {
        grid-template-columns: 1fr 380px;
    }
}

.card-padded-center {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: var(--radius-xl, 16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border, #e5e7eb);
}

.flex-between-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.border-bottom-pad {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.border-top-pad {
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e5e7eb);
}

/* Cart Page Items List */
.cart-item-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 0;
}

.cart-item-row:last-child {
    border-bottom: none !important;
}

.cart-item-img-box {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-lg, 12px);
    background: var(--muted-bg, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border, #e2e8f0);
}

.cart-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.cart-item-price-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cart-item-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand, #0f766e);
}

/* Quantity Control Box */
.card-qty-control {
    display: inline-flex;
    align-items: center;
    background: var(--muted-bg, #f1f5f9);
    border-radius: var(--radius-full, 9999px);
    padding: 2px 6px;
    border: 1px solid var(--border, #cbd5e1);
}

.btn-qty-action {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: var(--dark, #0f172a);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.15s ease;
}

.btn-qty-action:hover {
    background: var(--brand, #0f766e);
    color: #ffffff;
}

.card-qty-count {
    padding: 0 0.6rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dark, #0f172a);
    min-width: 24px;
    text-align: center;
}

.text-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.cart-item-remove-btn {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm, 6px);
    transition: all 0.15s ease;
}

.cart-item-remove-btn:hover {
    color: #dc2626;
    background: #fee2e2;
}

/* Order Summary */
.cart-summary-card {
    background: #ffffff;
    border-radius: var(--radius-xl, 16px);
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border, #e5e7eb);
    position: sticky;
    top: 5.5rem;
}

.flex-column-gap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--muted, #64748b);
}

.summary-row-bold {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--dark, #0f172a);
}

/* Utilities */
.mt-025 {
    margin-top: 0.25rem;
}

.mt-05 {
    margin-top: 0.5rem;
}

.mb-05 {
    margin-bottom: 0.5rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.pt-05 {
    padding-top: 0.5rem;
}

.font-bold {
    font-weight: 700;
}

.font-sm {
    font-size: 0.875rem;
}

.font-xs-bold {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--dark, #0f172a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.font-xs-muted {
    font-size: 0.78rem;
    color: var(--muted, #64748b);
}

.flex-align-gap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shadow-lg-btn {
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.3);
}

.remove-file-btn {
    color: #ef4444;
    border-color: #fca5a5;
}

.remove-file-btn:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

/* ==========================================================================
   Form Validation Error Messages Styling
   ========================================================================== */
.invalid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.35rem;
    font-size: 0.8125rem !important;
    /* Small font size */
    color: #dc2626 !important;
    /* Deep red color */
    font-weight: 600;
}

.text-danger {
    color: #dc2626 !important;
}

.font-xs {
    font-size: 0.8125rem !important;
}

.form-input.is-invalid,
.is-invalid {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

/* ==========================================================================
   Dashboard Grid Layout (Left Sidebar + Right Content Display)
   ========================================================================== */
.dashboard-wrapper .row,
.account-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.dashboard-wrapper .row>[class*="col-"],
.account-row>[class*="col-"] {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 992px) {

    .dashboard-wrapper .row>.col-lg-3,
    .dashboard-wrapper .row>.col-md-4 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }

    .dashboard-wrapper .row>.col-lg-9,
    .dashboard-wrapper .row>.col-md-8 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .dashboard-wrapper .row>.col-lg-3,
    .dashboard-wrapper .row>.col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }

    .dashboard-wrapper .row>.col-lg-9,
    .dashboard-wrapper .row>.col-md-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
        width: 66.666667% !important;
    }
}

/* ==========================================================================
   Order Management Controls (Search & Filter Pills)
   ========================================================================== */
.modern-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 2;
}

.search-input-wrapper .search-field {
    padding-left: 2.25rem;
    padding-right: 0.85rem;
    height: 38px;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    font-size: 0.85rem;
    background: #f8fafc;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    width: 180px;
}

.search-input-wrapper .search-field:focus {
    background: #ffffff;
    border-color: var(--brand, #0f766e);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.filter-pills {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    gap: 2px;
}

.btn-filter {
    border: none;
    background: transparent;
    padding: 0.35rem 0.85rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: #64748b;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.btn-filter:hover {
    color: #0f172a;
}

.btn-filter.active {
    background: #ffffff;
    color: var(--brand, #0f766e);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

/* ==========================================================================
   Modern Settings & Profile Form Card Styles
   ========================================================================== */
.modern-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.modern-card-header {
    padding: 1.25rem 1.75rem;
    background: #ffffff;
    border-bottom: 1px solid var(--border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modern-card-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin: 0;
}

.header-icon-box {
    width: 42px;
    height: 42px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.modern-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--dark, #0f172a);
    margin-bottom: 0.4rem;
}

.modern-input,
input.form-control.modern-input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    padding: 0.65rem 1rem;
    font-size: 0.92rem;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #0f172a;
    box-shadow: none;
}

.modern-input:focus,
input.form-control.modern-input:focus {
    border-color: var(--brand, #0f766e) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
    outline: none;
}

.readonly-input,
input.form-control.readonly-input {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed;
    border-color: #e2e8f0 !important;
}

/* Modern Stats Grid */
.modern-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.modern-stat-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.modern-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.modern-stat-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.stat-theme-blue .modern-stat-icon-wrapper {
    background: #eff6ff;
    color: #2563eb;
}

.stat-theme-green .modern-stat-icon-wrapper {
    background: #ecfdf5;
    color: #059669;
}

.modern-stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.modern-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

/* ==========================================================================
   Account Navigation Left Sidebar Styles
   ========================================================================== */
#adminSidebar {
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    padding: 0.5rem !important;
}

#adminSidebar .list-group-item {
    border: none !important;
    border-radius: 10px !important;
    margin-bottom: 0.25rem !important;
    padding: 0.85rem 1.15rem !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

#adminSidebar .list-group-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

#adminSidebar .list-group-item.active {
    background-color: var(--brand, #0f766e) !important;
    color: #ffffff !important;
}

#adminSidebar .list-group-item.text-danger {
    color: #dc2626 !important;
}

#adminSidebar .list-group-item.text-danger:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* ==========================================================================
   Checkout Page Left & Right Display Grid
   ========================================================================== */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .checkout-grid {
        grid-template-columns: 1fr 360px !important;
        gap: 2rem !important;
        align-items: start !important;
    }

    .checkout-right-col {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100px !important;
        z-index: 10 !important;
    }
}

/* ==========================================================================
   Contact Us & Custom Form CSS Layout Rules
   ========================================================================== */
.section-pad {
    padding: 3rem 0;
}

.why-us-grid.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.contact-grid.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

@media (max-width: 991px) {
    .why-us-grid.grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid.grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .why-us-grid.grid-4 {
        grid-template-columns: 1fr;
    }
}

.card-padded-lg {
    padding: 2rem;
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.card-padded-center {
    padding: 1.75rem 1.25rem;
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.card-title-sm {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin-bottom: 0.5rem;
}

.card-desc-muted {
    font-size: 0.9rem;
    color: var(--muted, #64748b);
    margin-bottom: 1rem;
}

.feature-icon-wrapper {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #e0f2fe;
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.card-icon-margin-auto {
    margin: 0 auto 1rem auto;
}

.icon-bg-whatsapp {
    background-color: #dcfce7 !important;
    color: #25D366 !important;
}

.btn-whatsapp {
    background-color: #25D366 !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

.btn-whatsapp:hover {
    background-color: #1eb954 !important;
    color: #ffffff !important;
}

.badge-green {
    background-color: #10b981;
    color: #ffffff;
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.map-iframe-container {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
}

.map-iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
}

.flex-column-gap {
    display: flex;
    flex-direction: column;
}

.flex-grow-btn {
    flex: 1;
}

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

.text-center-wrapper {
    text-align: center;
    margin-top: 2rem;
    width: 100%;
    grid-column: 1 / -1;
}

/* --- Pagination Component Styles --- */
.text-center-wrapper nav,
.text-center-wrapper .pagination,
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem auto 0 auto;
    flex-wrap: wrap;
    width: 100%;
}

.pagination .page-item,
.pagination li {
    list-style: none;
    margin: 0;
}

.pagination .page-link,
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.85rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark, #0f172a);
    background-color: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    text-decoration: none;
    transition: all var(--transition-fast, 0.15s ease);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.pagination .page-link:hover,
.pagination a:hover {
    background-color: var(--accent, #e0f2fe);
    color: var(--brand, #0284c7);
    border-color: var(--brand, #0284c7);
}

.pagination .page-item.active .page-link,
.pagination .page-item.active a,
.pagination .active .page-link,
.pagination .active a,
.pagination .active span,
.pagination span[aria-current="page"] {
    background: var(--gradient-brand, linear-gradient(135deg, #0284c7, #0369a1)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

.pagination .page-item.disabled .page-link,
.pagination .disabled a,
.pagination .disabled span {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--muted-bg, #f8fafc);
    border-color: var(--border, #e2e8f0);
    color: var(--muted, #64748b);
}

/* Fallback Tailwind SVG Pagination Styles */
nav[role="navigation"] svg {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
}

nav[role="navigation"] .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

nav[role="navigation"] span.relative,
nav[role="navigation"] a.relative {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.85rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark, #0f172a);
    background-color: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    text-decoration: none;
}

nav[role="navigation"] a.relative:hover {
    background-color: var(--accent, #e0f2fe);
    color: var(--brand, #0284c7);
}

/* --- Products Slider Carousel Styles --- */
.bg-light-soft {
    background-color: var(--light-bg, #f8fafc);
    border-radius: var(--radius-lg, 16px);
}

.section-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.slider-controls {
    display: flex;
    gap: 0.5rem;
}

.btn-icon-round {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
}

.btn-icon-round:hover {
    background-color: var(--brand, #0284c7);
    color: #ffffff;
    border-color: var(--brand, #0284c7);
}

.products-carousel-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.5rem 0.25rem 1.5rem 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.products-carousel-track::-webkit-scrollbar {
    display: none;
}

.slider-card {
    flex: 0 0 270px;
    max-width: 270px;
}