/* ==========================================================================
   JANKALYAN MEDICAL - CLEAN HEALTHCARE GREEN & PURE WHITE DESIGN SYSTEM
   Sangola's 24x7 Certified Community Pharmacy & Healthcare Hub
   ========================================================================== */

:root {
    /* Clean Healthcare Green & Pure White Palette */
    --primary: #16a34a;          /* Rich Healthcare Green */
    --primary-dark: #15803d;     /* Deep Clinical Forest Green */
    --primary-darker: #14532d;   /* Rich Deep Pine */
    --primary-light: #22c55e;    /* Bright Fresh Green */
    --primary-subtle: #f0fdf4;   /* Fresh Crisp Mint-White Canvas */
    --primary-tint: #dcfce7;     /* Light Green Badge Tint */

    /* Secondary Clinical Accents */
    --accent-emerald: #059669;   /* Certified Emerald Green */
    --accent-emerald-light: #10b981;
    --accent-emerald-subtle: #ecfdf5;
    --accent-amber: #d97706;
    --whatsapp: #25D366;         /* WhatsApp Green */
    --whatsapp-dark: #1ea952;
    --danger: #ef4444;

    /* Architectural Deep Green & Clean Neutrals */
    --navy-deep: #064e3b;        /* Deep Forest Medical Green */
    --navy-card: #065f46;
    --bg-page: #f8fafc;          /* Pure Crisp Canvas */
    --bg-card: #ffffff;
    --bg-alt: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    
    --text-heading: #091322;     /* Slate 950 */
    --text-body: #334155;        /* Slate 700 */
    --text-muted: #64748b;       /* Slate 500 */
    --text-light: #94a3b8;       /* Slate 400 */

    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Elevation Shadows */
    --shadow-xs: 0 1px 2px rgba(9, 19, 34, 0.04);
    --shadow-sm: 0 1px 3px rgba(9, 19, 34, 0.06), 0 1px 2px rgba(9, 19, 34, 0.04);
    --shadow-md: 0 4px 8px -1px rgba(9, 19, 34, 0.08), 0 2px 4px -2px rgba(9, 19, 34, 0.04);
    --shadow-lg: 0 12px 24px -4px rgba(9, 19, 34, 0.10), 0 4px 8px -2px rgba(9, 19, 34, 0.04);
    --shadow-xl: 0 20px 32px -6px rgba(9, 19, 34, 0.14), 0 8px 12px -4px rgba(9, 19, 34, 0.05);
    --shadow-blue: 0 8px 22px -4px rgba(22, 163, 74, 0.32);
    --shadow-teal: 0 8px 22px -4px rgba(22, 163, 74, 0.32);
    --shadow-green: 0 8px 22px -4px rgba(22, 163, 74, 0.32);
    --shadow-float: 0 25px 50px -12px rgba(9, 19, 34, 0.25);

    /* Transitions */
    --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-page);
    color: var(--text-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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;
}

.w-full {
    width: 100%;
}

.mt-2 {
    margin-top: 8px;
}

/* Section Containers */
.section-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 52px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-subtle);
    color: var(--primary-dark);
    border: 1px solid var(--primary-tint);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.825rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.35rem;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 14px;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ==========================================================================
   TOP ANNOUNCEMENT BAR (DEEP MEDICAL GREEN)
   ========================================================================== */

.top-bar {
    background: var(--navy-deep);
    color: #cbd5e1;
    font-size: 0.82rem;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1001;
}

.top-bar-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    background-color: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.live-clock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 600;
    color: #86efac;
}

.top-bar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
}

.top-bar-location {
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.top-bar-location i {
    color: var(--primary-light);
    font-size: 0.85rem;
}

.top-link {
    color: #e2e8f0;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.top-link:hover {
    color: #ffffff;
}

.top-wa {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(74, 222, 128, 0.28);
}

.top-wa:hover {
    color: #ffffff;
    background: rgba(74, 222, 128, 0.25);
}

/* ==========================================================================
   CLEAN GREEN & WHITE MAIN NAVIGATION BAR
   ========================================================================== */

header.main-header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    z-index: 1000;
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.nav-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 11px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Brand Logo Lockup */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: var(--transition-fast);
}

.logo:hover .logo-icon {
    transform: scale(1.04) rotate(-3deg);
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.42);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.brand-accent {
    color: var(--primary);
}

.brand-tagline {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-top: 1px;
}

/* Desktop Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    background: #f1f5f9;
    padding: 4px 6px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-body);
    padding: 7px 15px;
    border-radius: var(--radius-full);
    display: inline-block;
    position: relative;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-link:hover {
    color: var(--primary-dark);
    background-color: #ffffff;
}

.nav-link.active {
    color: #ffffff;
    background-color: var(--primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
}

/* Action Controls */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-ai-header {
    background: #ffffff;
    color: var(--primary-dark);
    border: 1.5px solid var(--primary-tint);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
}

.ai-spark-icon {
    width: 24px;
    height: 24px;
    background: var(--primary-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 0.8rem;
    box-shadow: 0 0 0 2px var(--primary-tint);
}

.btn-ai-header:hover {
    background: var(--primary-subtle);
    border-color: var(--primary);
    color: var(--primary-darker);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(22, 163, 74, 0.32);
}

.btn-order-header {
    background: var(--whatsapp);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
    box-shadow: 0 3px 12px rgba(37, 211, 102, 0.3);
}

.btn-order-header i {
    font-size: 1.05rem;
}

.btn-order-header:hover {
    background: var(--whatsapp-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
}

/* Minimalist 2-Bar Mobile Toggle */
.mobile-toggle {
    display: none;
    background: #ffffff;
    border: 1.5px solid var(--border);
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-xs);
    -webkit-tap-highlight-color: transparent;
}

.mobile-toggle .bar {
    width: 22px;
    height: 2.2px;
    background: var(--text-heading);
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
    transform-origin: center;
}

.mobile-toggle:hover {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

.mobile-toggle:hover .bar {
    background: var(--primary);
}

.mobile-toggle.active {
    background: var(--primary-subtle);
    border-color: var(--primary);
}

.mobile-toggle.active .bar-1 {
    transform: translateY(4.1px) rotate(45deg);
    background: var(--primary-dark);
}

.mobile-toggle.active .bar-2 {
    transform: translateY(-4.1px) rotate(-45deg);
    background: var(--primary-dark);
}

/* ==========================================================================
   GREEN & WHITE CLINICAL MOBILE DRAWER
   ========================================================================== */

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -380px;
    width: min(350px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    box-shadow: -12px 0 40px rgba(6, 78, 59, 0.22);
    z-index: 1070;
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

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

/* Drawer Brand Header Card (Deep Green) */
.drawer-header-card {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    color: #ffffff;
    padding: 22px 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.drawer-brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
}

.drawer-brand-sub {
    font-size: 0.65rem;
    font-weight: 800;
    color: #86efac;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.drawer-brand-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.drawer-brand-name span {
    color: #4ade80;
}

.drawer-close-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    transition: var(--transition-fast);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.drawer-close-btn:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: transparent;
    transform: rotate(90deg);
}

/* 24x7 Live Status Bar */
.drawer-live-bar {
    background: #ecfdf5;
    color: #065f46;
    border-bottom: 1px solid #d1fae5;
    padding: 8px 18px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Quick Action Hub Stack */
.drawer-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.drawer-action-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #ffffff;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    text-align: left;
}

.tile-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.drawer-action-tile.call-tile .tile-icon-circle {
    background: var(--primary-subtle);
    color: var(--primary);
    border: 1px solid var(--primary-tint);
}

.drawer-action-tile.wa-tile .tile-icon-circle {
    background: #f0fdf4;
    color: var(--whatsapp);
    border: 1px solid #bbf7d0;
}

.drawer-action-tile.ai-tile .tile-icon-circle {
    background: #f0fdf4;
    color: var(--primary-dark);
    border: 1px solid var(--primary-tint);
}

.tile-info {
    display: flex;
    flex-direction: column;
}

.tile-info strong {
    font-size: 0.85rem;
    color: var(--text-heading);
    font-weight: 700;
    line-height: 1.2;
}

.tile-info small {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 1px;
}

.drawer-action-tile:hover, .drawer-action-tile:active {
    transform: translateX(3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary);
}

/* Numbered Editorial Navigation Directory */
.drawer-nav-sections {
    padding: 12px 14px;
    flex: 1;
}

.drawer-section-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
    margin: 8px 6px 10px;
}

.drawer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    transition: var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent;
}

.drawer-num {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-subtle);
    padding: 2px 7px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--primary-tint);
    flex-shrink: 0;
}

.drawer-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.drawer-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.2;
}

.drawer-item-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}

.drawer-arrow {
    font-size: 0.85rem;
    color: var(--text-light);
    transition: var(--transition-fast);
}

.drawer-item:hover, .drawer-item.active {
    background: var(--primary-subtle);
    border-color: var(--primary-tint);
}

.drawer-item:hover .drawer-item-title, .drawer-item.active .drawer-item-title {
    color: var(--primary-dark);
}

.drawer-item:hover .drawer-arrow, .drawer-item.active .drawer-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

/* Drawer Store Details Card */
.drawer-store-card {
    margin: 10px 14px 14px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.drawer-store-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.drawer-store-badge {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 5px;
}

.drawer-timing-tag {
    background: rgba(16, 185, 129, 0.16);
    color: #059669;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.drawer-address-text {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 6px;
}

.drawer-proprietor-row {
    font-size: 0.76rem;
    color: var(--text-body);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.drawer-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.drawer-sub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    transition: var(--transition-fast);
}

.drawer-sub-btn.maps-btn {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text-heading);
}

.drawer-sub-btn.maps-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.drawer-sub-btn.call-btn {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.28);
}

.drawer-sub-btn.call-btn:hover {
    background: var(--primary-dark);
}

/* Drawer Developer Credits */
.drawer-credits {
    padding: 12px 16px 20px;
    text-align: center;
    border-top: 1px solid var(--border);
    background: #ffffff;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.drawer-credits strong {
    color: var(--text-heading);
}

.drawer-version {
    font-size: 0.68rem;
    color: var(--text-light);
    margin-top: 3px;
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 78, 59, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1065;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   BUTTONS & COMMON UI
   ========================================================================== */

.btn-primary {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 13px 28px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-fast);
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.3);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px -4px rgba(22, 163, 74, 0.4);
}

.btn-secondary {
    background: #064e3b;
    color: #ffffff;
    border: none;
    padding: 13px 26px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
    background: #065f46;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: var(--bg-card);
    color: var(--text-heading);
    border: 1.5px solid var(--border-strong);
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.98rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-subtle);
    transform: translateY(-2px);
}

.btn-outline-sm {
    background: var(--bg-card);
    color: var(--text-body);
    border: 1px solid var(--border);
    padding: 10px 18px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.btn-outline-sm:hover {
    border-color: var(--border-strong);
    background: var(--bg-alt);
}

/* ==========================================================================
   HERO SECTION (GREEN & PURE WHITE CANVAS)
   ========================================================================== */

.hero {
    padding: 60px 0 70px;
    background: radial-gradient(circle at 85% 20%, rgba(220, 252, 231, 0.7) 0%, rgba(248, 250, 252, 0) 50%),
                radial-gradient(circle at 10% 80%, rgba(209, 250, 229, 0.5) 0%, rgba(248, 250, 252, 0) 50%);
    position: relative;
    border-bottom: 1px solid var(--border);
}

.hero-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 50px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--primary-tint);
    box-shadow: var(--shadow-sm);
    color: var(--primary-dark);
    padding: 6px 18px;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-badge i {
    color: var(--primary);
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 3.25rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.18;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}

.gradient-text {
    color: var(--primary);
    position: relative;
    display: inline-block;
}

.hero-desc {
    font-size: 1.125rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 580px;
}

.hero-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.cat-pill {
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-heading);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: var(--transition-fast);
}

.cat-pill i {
    color: var(--primary);
}

.cat-pill:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.1;
}

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

.stat-divider {
    width: 1px;
    height: 36px;
    background: var(--border);
}

/* Hero Media */
.hero-media {
    position: relative;
}

.hero-card-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: visible;
}

.hero-main-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 6px solid #ffffff;
}

.floating-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    animation: floatSlow 4s ease-in-out infinite;
}

.badge-top {
    top: 24px;
    left: -20px;
}

.badge-bottom {
    bottom: 24px;
    right: -15px;
    animation-delay: 2s;
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.badge-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.badge-icon.green {
    background: #ecfdf5;
    color: #059669;
}

.badge-icon.blue {
    background: #f0fdf4;
    color: #16a34a;
}

.floating-badge strong {
    display: block;
    font-size: 0.92rem;
    color: var(--text-heading);
    line-height: 1.2;
}

.floating-badge small {
    font-size: 0.775rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ==========================================================================
   TRUST PILLARS STRIP
   ========================================================================== */

.trust-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 24px 0;
}

.trust-bar-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
}

.trust-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--primary-subtle);
    color: var(--primary);
    border: 1px solid var(--primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.trust-item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.2;
}

.trust-item p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ==========================================================================
   SERVICES & MEDICINE CATALOG
   ========================================================================== */

.services-section {
    padding: 90px 0;
    background: var(--bg-page);
}

.category-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 45px;
}

.tab-btn {
    background: #ffffff;
    color: var(--text-body);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.tab-btn:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 28px;
}

.service-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    position: relative;
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.card-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
}

.service-icon-box {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 22px;
}

.service-icon-box.teal { background: #f0fdf4; color: #16a34a; }
.service-icon-box.blue { background: #f0fdf4; color: #15803d; }
.service-icon-box.green { background: #f0fdf4; color: #16a34a; }
.service-icon-box.emerald { background: #ecfdf5; color: #059669; }
.service-icon-box.purple { background: #f0fdf4; color: #166534; }
.service-icon-box.orange { background: #fff7ed; color: #ea580c; }

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 12px;
    line-height: 1.3;
}

.service-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.service-list {
    list-style: none;
    margin-bottom: 24px;
    margin-top: auto;
}

.service-list li {
    font-size: 0.88rem;
    color: var(--text-body);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-list li i {
    color: var(--primary);
    font-size: 0.8rem;
}

.card-action-btn {
    background: var(--primary-subtle);
    color: var(--primary-dark);
    border: 1px solid var(--primary-tint);
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.card-action-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* ==========================================================================
   AI SPOTLIGHT BANNER
   ========================================================================== */

.ai-banner-section {
    padding: 40px 0 90px;
}

.ai-banner-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.ai-banner-card {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border-radius: var(--radius-xl);
    padding: 60px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ai-banner-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.ai-banner-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.22);
    color: #86efac;
    border: 1px solid rgba(134, 239, 172, 0.35);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.825rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.ai-banner-text h2 {
    font-family: var(--font-heading);
    font-size: 2.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.ai-banner-text p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 26px;
}

.ai-capabilities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.ai-cap-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #f1f5f9;
}

.ai-cap-item i {
    color: #4ade80;
    font-size: 1.1rem;
    width: 24px;
}

.ai-prompt-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}

.chip-label {
    font-size: 0.825rem;
    color: #94a3b8;
    font-weight: 600;
}

.ai-chip {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ai-chip:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: translateY(-1px);
}

.ai-launch-btn {
    font-size: 1.05rem;
    padding: 14px 32px;
}

/* AI Preview Box */
.ai-chat-preview-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 20px;
    color: var(--text-body);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.preview-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.preview-header strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-heading);
}

.preview-header small {
    font-size: 0.775rem;
    color: #059669;
    font-weight: 600;
}

.preview-bubble {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 12px;
    max-width: 90%;
}

.preview-bubble.bot {
    background: var(--bg-alt);
    color: var(--text-heading);
    border-bottom-left-radius: 4px;
}

.preview-bubble.user {
    background: var(--primary);
    color: #ffffff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.preview-input-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 16px;
}

.preview-input-bar button {
    background: var(--primary);
    color: #ffffff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* ==========================================================================
   MEDICINE AVAILABILITY & ORDER SECTION
   ========================================================================== */

.availability-section {
    padding: 90px 0;
    background: #ffffff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.availability-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 50px;
    align-items: center;
}

.avail-info-col h2 {
    font-family: var(--font-heading);
    font-size: 2.35rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.25;
    margin-bottom: 18px;
}

.avail-info-col p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 30px;
}

.order-perks {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
}

.perk-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.perk-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.perk-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 3px;
}

.perk-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

.direct-phone-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-alt);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.direct-phone-box i {
    font-size: 1.6rem;
    color: var(--primary);
}

.direct-phone-box span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.direct-phone-box a {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-heading);
}

.direct-phone-box a:hover {
    color: var(--primary);
}

/* Order Form */
.form-card {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 38px 34px;
    box-shadow: var(--shadow-lg);
}

.form-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.form-header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.form-header h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-heading);
}

.form-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-group {
    margin-bottom: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 7px;
}

.form-group label i {
    color: var(--primary);
    margin-right: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-heading);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.btn-whatsapp-submit {
    width: 100%;
    background: var(--whatsapp);
    color: #ffffff;
    border: none;
    padding: 15px;
    border-radius: var(--radius-full);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-fast);
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.28);
    margin-top: 10px;
}

.btn-whatsapp-submit:hover {
    background: var(--whatsapp-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(37, 211, 102, 0.38);
}

.form-disclaimer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 14px;
}

.form-disclaimer i {
    color: #16a34a;
}

/* ==========================================================================
   BMI CALCULATOR SECTION
   ========================================================================== */

.bmi-section {
    padding: 90px 0;
    background: var(--bg-page);
}

.bmi-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
    align-items: stretch;
}

.bmi-calc-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.bmi-card-header {
    margin-bottom: 28px;
}

.bmi-card-header h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 10px 0;
}

.bmi-card-header p {
    color: var(--text-muted);
    font-size: 0.98rem;
}

.bmi-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.bmi-input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.bmi-input-group label i {
    color: var(--primary);
}

.input-with-unit {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-unit input {
    width: 100%;
    padding: 13px 50px 13px 16px;
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-heading);
    outline: none;
    transition: var(--transition-fast);
}

.input-with-unit input:focus {
    border-color: var(--primary);
    background: #ffffff;
}

.unit-badge {
    position: absolute;
    right: 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.bmi-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* BMI Result Card */
.bmi-result-box {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 24px;
    animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.result-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    display: block;
}

.result-score {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1;
}

.status-pill {
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.95rem;
}

.status-pill.under { background: #fef3c7; color: #b45309; }
.status-pill.normal { background: #d1fae5; color: #047857; }
.status-pill.over { background: #ffedd5; color: #c2410c; }
.status-pill.obese { background: #fee2e2; color: #b91c1c; }

/* Visual Meter */
.bmi-meter {
    position: relative;
    margin-bottom: 10px;
}

.meter-bar {
    height: 14px;
    border-radius: var(--radius-full);
    display: flex;
    overflow: hidden;
}

.meter-segment {
    height: 100%;
}

.meter-segment.under { width: 22%; background: #fbbf24; }
.meter-segment.normal { width: 32%; background: #10b981; }
.meter-segment.over { width: 26%; background: #f97316; }
.meter-segment.obese { width: 20%; background: #ef4444; }

.meter-marker {
    position: absolute;
    top: -4px;
    width: 6px;
    height: 22px;
    background: #0f172a;
    border: 2px solid #ffffff;
    border-radius: 3px;
    transform: translateX(-50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 16px;
}

.result-details {
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
    color: var(--text-body);
}

/* BMI Guide */
.bmi-guide-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px 30px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.bmi-guide-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.bmi-guide-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.guide-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
}

.guide-row {
    display: grid;
    grid-template-columns: 85px 120px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.guide-row.under { background: #fefce8; }
.guide-row.normal { background: #f0fdf4; }
.guide-row.over { background: #fff7ed; }
.guide-row.obese { background: #fef2f2; }

.guide-range { font-weight: 700; }
.guide-label { font-weight: 700; }
.guide-desc { color: var(--text-muted); font-size: 0.78rem; }

.pharmacy-health-tip {
    margin-top: auto;
    display: flex;
    gap: 14px;
    background: var(--primary-subtle);
    border: 1px solid var(--primary-tint);
    padding: 16px;
    border-radius: var(--radius-md);
}

.pharmacy-health-tip i {
    color: var(--primary);
    font-size: 1.3rem;
    margin-top: 2px;
}

.pharmacy-health-tip strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.pharmacy-health-tip p {
    font-size: 0.825rem;
    color: var(--text-body);
    margin-bottom: 0;
}

/* ==========================================================================
   GALLERY SECTION
   ========================================================================== */

.gallery-section {
    padding: 90px 0;
    background: #ffffff;
    border-top: 1px solid var(--border);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
}

.gallery-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #ffffff;
    border: 1px solid var(--border);
}

.gallery-img-wrapper {
    position: relative;
    height: 260px;
    overflow: hidden;
    cursor: pointer;
}

.gallery-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.1) 60%);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: #ffffff;
    transition: var(--transition-normal);
}

.gallery-overlay i {
    font-size: 1.5rem;
    color: var(--primary-light);
    margin-bottom: 8px;
}

.gallery-overlay span {
    font-weight: 700;
    font-size: 0.95rem;
}

.gallery-card:hover .gallery-img-wrapper img {
    transform: scale(1.08);
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

/* ==========================================================================
   WHY CHOOSE US / TRUST GRID
   ========================================================================== */

.why-us-section {
    padding: 90px 0;
    background: var(--bg-page);
    border-top: 1px solid var(--border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

.why-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.why-icon-box {
    width: 58px;
    height: 58px;
    border-radius: var(--radius-md);
    background: var(--primary-subtle);
    color: var(--primary);
    border: 1px solid var(--primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 22px;
}

.why-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.why-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: #0f172a;
    color: #cbd5e1;
    border-top: 1px solid #1e293b;
}

.footer-top {
    padding: 80px 0 60px;
}

.footer-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
    gap: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
}

.footer-logo i {
    color: var(--primary-light);
}

.footer-desc {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 20px;
}

.owner-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.825rem;
    color: #e2e8f0;
    margin-bottom: 22px;
}

.owner-pill i {
    color: var(--primary-light);
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.social-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition-fast);
}

.social-btn:hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
}

.social-btn.whatsapp:hover { background: var(--whatsapp); }

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    font-size: 0.92rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.footer-links a i {
    font-size: 0.75rem;
    color: var(--primary-light);
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.f-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
}

.f-contact-item i {
    color: var(--primary-light);
    font-size: 1.1rem;
    margin-top: 3px;
}

.f-contact-item strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.85rem;
}

.f-contact-item p {
    color: #94a3b8;
    line-height: 1.4;
}

.f-contact-item a {
    color: #94a3b8;
}

.f-contact-item a:hover {
    color: var(--primary-light);
}

.map-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 18px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 14px;
    margin-bottom: 22px;
    transition: var(--transition-fast);
}

.map-action-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.dev-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 14px;
}

.dev-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.dev-header i {
    color: var(--primary-light);
    font-size: 1.2rem;
}

.dev-header small {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
}

.dev-header strong {
    font-size: 0.9rem;
    color: #ffffff;
}

.dev-links {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-links a {
    color: var(--primary-light);
}

.dev-links a:hover {
    text-decoration: underline;
}

.footer-bottom {
    background: #064e3b;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.825rem;
    color: #94a3b8;
}

.bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.med-disclaimer {
    max-width: 600px;
    font-size: 0.75rem;
    color: #cbd5e1;
}

/* ==========================================================================
   AI PHARMACIST CHATBOT & FLOATING TRIGGER
   ========================================================================== */

.chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 78, 59, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chat-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.floating-ai-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    padding: 10px 18px 10px 12px;
    border-radius: var(--radius-full);
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    z-index: 1030;
    transition: var(--transition-normal);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.floating-ai-trigger:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 35px rgba(22, 163, 74, 0.5);
}

.floating-ai-trigger:active {
    transform: translateY(-1px) scale(0.98);
}

.ai-trigger-icon {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.ai-trigger-label {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.online-indicator {
    width: 8px;
    height: 8px;
    background: #34d399;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ffffff;
}

/* Chatbot Container */
.chatbot-container {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 390px;
    height: 580px;
    max-height: calc(100vh - 110px);
    background: #ffffff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    border: 1px solid var(--border);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1060;
    animation: chatPopup 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chatPopup {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-header {
    background: linear-gradient(135deg, var(--primary-dark), #064e3b);
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-avatar {
    width: 38px;
    height: 38px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.chat-header-info h4 {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
}

.chat-online-tag {
    font-size: 0.725rem;
    color: #34d399;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pulse-dot-sm {
    width: 6px;
    height: 6px;
    background: #34d399;
    border-radius: 50%;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-action-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.chat-action-icon:hover {
    background: rgba(255, 255, 255, 0.28);
}

.chat-action-icon:active {
    transform: scale(0.92);
}

.chat-quick-bar {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.chat-quick-bar::-webkit-scrollbar {
    display: none;
}

.chat-quick-bar button {
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.chat-quick-bar button:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.chat-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

.chat-msg {
    display: flex;
    gap: 10px;
    max-width: 90%;
}

.chat-msg.bot {
    align-self: flex-start;
}

.chat-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-subtle);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    border: 1px solid var(--primary-tint);
}

.chat-msg.user .msg-avatar {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.msg-content {
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-heading);
    box-shadow: var(--shadow-sm);
    word-break: break-word;
}

.chat-msg.user .msg-content {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.msg-content p {
    margin-bottom: 6px;
}

.msg-content p:last-child {
    margin-bottom: 0;
}

.msg-content ul {
    margin-left: 18px;
    margin-bottom: 6px;
}

.msg-content li {
    margin-bottom: 4px;
}

.chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    width: fit-content;
}

.chat-typing-indicator span {
    width: 7px;
    height: 7px;
    background: var(--primary);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite;
}

.chat-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

.chat-footer {
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-form-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    padding: 4px 6px 4px 14px;
    transition: var(--transition-fast);
}

.chat-form-inner:focus-within {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

.chat-form-inner input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 1rem; /* 16px prevents iOS zoom */
    color: var(--text-heading);
    padding: 6px 0;
}

.chat-form-inner button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--transition-fast);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.chat-form-inner button:hover {
    background: var(--primary-dark);
}

.chat-form-inner button:active {
    transform: scale(0.92);
}

/* ==========================================================================
   MOBILE BOTTOM APP NAVIGATION BAR
   ========================================================================== */

.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
    z-index: 1040;
    align-items: center;
    justify-content: space-around;
    padding: 0 6px;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item i {
    font-size: 1.18rem;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

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

.bottom-nav-item.active i {
    transform: scale(1.1);
    color: var(--primary);
}

.bottom-nav-center-btn {
    position: relative;
    top: -16px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: 3.5px solid #ffffff;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    gap: 1px;
}

.bottom-nav-center-btn i {
    font-size: 1.2rem;
    color: #ffffff;
}

.bottom-nav-center-btn span {
    font-size: 0.62rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.bottom-nav-center-btn:active {
    transform: scale(0.92);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS & MOBILE OPTIMIZATION
   ========================================================================== */

/* Universal Overflow Prevention */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 1024px) {
    .nav-menu {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-desc {
        margin: 0 auto 30px;
    }

    .hero-categories {
        justify-content: center;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-media {
        max-width: 560px;
        margin: 0 auto;
    }

    .ai-banner-grid {
        grid-template-columns: 1fr;
    }

    .availability-grid {
        grid-template-columns: 1fr;
    }

    .bmi-grid {
        grid-template-columns: 1fr;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: 68px;
    }

    /* Enable Mobile Bottom Bar */
    .mobile-bottom-bar {
        display: flex;
    }

    /* Hide floating trigger to prevent UI overlap with bottom bar */
    .floating-ai-trigger {
        display: none !important;
    }

    /* Top Bar Mobile Optimization */
    .top-bar-container {
        padding: 0 14px;
        justify-content: center;
    }

    .top-bar-left {
        justify-content: center;
        width: 100%;
        gap: 10px;
        flex-wrap: wrap;
    }

    .top-bar-location {
        display: none;
    }

    .top-bar-divider {
        display: none;
    }

    .top-bar-right {
        display: none;
    }

    /* Main Navigation Mobile Header */
    header.main-header {
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .nav-container {
        padding: 10px 14px;
        gap: 8px;
    }

    .logo {
        gap: 10px;
    }

    .logo-icon {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }

    .brand-title {
        font-size: 1.12rem;
        line-height: 1.1;
    }

    .brand-tagline {
        font-size: 0.65rem;
    }

    .header-actions {
        gap: 6px;
    }

    .ai-btn-text {
        display: none;
    }

    .btn-ai-header {
        padding: 8px 10px;
    }

    .btn-order-header span {
        display: none;
    }

    .btn-order-header {
        padding: 8px 11px;
    }

    .mobile-toggle {
        width: 38px;
        height: 38px;
        padding: 8px;
    }

    .mobile-toggle .bar {
        width: 19px;
    }

    /* Hero Section Mobile */
    .hero-section {
        padding: 32px 0 44px;
    }

    .hero-title {
        font-size: clamp(1.85rem, 6vw, 2.5rem);
    }

    .hero-desc {
        font-size: 0.95rem;
    }

    .hero-categories {
        gap: 8px;
    }

    .cat-pill {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-cta-group .btn-primary,
    .hero-cta-group .btn-secondary,
    .hero-cta-group .btn-outline {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 16px 12px;
    }

    .stat-divider {
        display: none;
    }

    .stat-number {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.72rem;
    }

    /* Floating Badges on Hero */
    .floating-badge {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .floating-badge.badge-top {
        top: 10px;
        left: 10px;
    }

    .floating-badge.badge-bottom {
        bottom: 10px;
        right: 10px;
    }

    /* Trust Bar Grid */
    .trust-bar-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 14px;
    }

    .trust-item {
        padding: 8px;
    }

    .trust-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .trust-item h4 {
        font-size: 0.88rem;
    }

    .trust-item p {
        font-size: 0.75rem;
    }

    /* Medicine Categories */
    .category-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
    }

    .category-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
        flex-shrink: 0;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 22px 18px;
    }

    /* AI Banner */
    .ai-banner-card {
        padding: 28px 18px;
    }

    .ai-banner-content h2 {
        font-size: 1.6rem;
    }

    /* Availability Form */
    .form-row {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 22px 18px;
    }

    /* BMI Section */
    .bmi-calc-card {
        padding: 24px 18px;
    }

    .bmi-input-grid {
        grid-template-columns: 1fr;
    }

    .bmi-actions {
        flex-direction: column;
    }

    .bmi-actions button {
        width: 100%;
        justify-content: center;
    }

    .guide-row {
        grid-template-columns: 75px 95px 1fr;
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    /* Gallery Grid */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Why Us / Trust */
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* MOBILE NATIVE BOTTOM-SHEET CHATBOT MODAL */
    .chatbot-container {
        position: fixed;
        bottom: 64px;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(88vh - 64px);
        max-height: calc(90vh - 64px);
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
        z-index: 1060;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .guide-row {
        grid-template-columns: 65px 1fr;
    }

    .guide-desc {
        display: none;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .stat-item {
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
    }

    .stat-item:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   ADMIN LOGIN & CUSTOMER MANAGEMENT PORTAL STYLES (SUPABASE DATABASE)
   ========================================================================== */

/* 1. Header Action Button */
.btn-admin-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    color: #0f172a;
    border: 1.5px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-admin-header i {
    color: var(--primary);
    font-size: 0.95rem;
}

.btn-admin-header:hover {
    background: var(--primary-subtle);
    border-color: var(--primary);
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.drawer-action-tile.admin-tile .tile-icon-circle {
    background: #f0fdf4;
    color: var(--primary);
}

/* Cloud sync badge on medicine form */
.cloud-sync-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    line-height: 1.4;
    margin-bottom: 16px;
}

.cloud-sync-badge i {
    font-size: 1.1rem;
    color: var(--primary);
    flex-shrink: 0;
}

/* 2. Admin Login Modal */
.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    z-index: 1070;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

.admin-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.admin-login-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    width: 92%;
    max-width: 440px;
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-login-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.admin-login-card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    border: 1px solid #e2e8f0;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    padding: 32px 28px 24px;
    position: relative;
}

.admin-login-header {
    text-align: center;
    margin-bottom: 20px;
}

.admin-shield-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    background: #f0fdf4;
    border: 2px solid #bbf7d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.8rem;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
}

.admin-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    margin-bottom: 8px;
}

.admin-login-header h3 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.admin-login-header p {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.4;
}

.login-quick-creds {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-quick-creds:hover {
    background: #f0fdf4;
    border-color: #86efac;
}

.creds-hint-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.login-quick-creds:hover .creds-hint-icon {
    background: var(--primary);
    color: #ffffff;
}

.creds-hint-text {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    color: #334155;
}

.creds-hint-text small {
    color: #059669;
    font-weight: 600;
    font-size: 0.72rem;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    padding-right: 42px;
}

.btn-toggle-pwd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    font-size: 0.95rem;
}

.btn-toggle-pwd:hover {
    color: #334155;
}

.login-options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.82rem;
    color: #64748b;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.login-alert-box {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-alert-box.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.login-alert-box.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.login-card-footer {
    text-align: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* 3. FULLSCREEN ADMIN PORTAL DASHBOARD */
.admin-portal-modal {
    position: fixed;
    inset: 0;
    background: #f8fafc;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    overflow: hidden;
}

.admin-portal-modal.active {
    opacity: 1;
    visibility: visible;
}

.portal-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

.portal-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.portal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.portal-logo-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.portal-brand-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--primary-dark);
    text-transform: uppercase;
}

.portal-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.portal-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.db-status-pill:hover {
    background: #dcfce7;
}

.db-status-pill.local-mode {
    background: #fefce8;
    border-color: #fde047;
    color: #854d0e;
}

.admin-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: #334155;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
}

.btn-portal-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-portal-outline:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.portal-close-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portal-close-icon-btn:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* Portal Body Scroll Area */
.portal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 40px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* KPI Cards Grid */
.portal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.total-kpi .kpi-icon-wrap { background: #f0fdf4; color: #16a34a; }
.pending-kpi .kpi-icon-wrap { background: #fffbeb; color: #d97706; }
.processing-kpi .kpi-icon-wrap { background: #eff6ff; color: #2563eb; }
.dispensed-kpi .kpi-icon-wrap { background: #ecfdf5; color: #059669; }

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.kpi-value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin: 2px 0;
    line-height: 1.2;
}

.kpi-sub {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Portal Toolbar */
.portal-toolbar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
}

.toolbar-search-wrap {
    position: relative;
    flex: 1;
    min-width: 280px;
    max-width: 440px;
}

.toolbar-search-wrap i.fa-magnifying-glass {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
}

.toolbar-search-wrap input {
    width: 100%;
    padding: 10px 38px 10px 38px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    color: #0f172a;
    transition: all 0.2s ease;
}

.toolbar-search-wrap input:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.85rem;
}

.status-filter-pills {
    display: flex;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: var(--radius-md);
}

.filter-pill {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.filter-pill.active {
    background: #ffffff;
    color: var(--primary-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-add-customer {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.btn-add-customer:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.btn-portal-secondary {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-portal-secondary:hover {
    background: #ffffff;
    border-color: #94a3b8;
    color: #0f172a;
}

/* Customer Table Section */
.portal-table-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 380px;
    position: relative;
}

.clinical-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.clinical-table thead {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.clinical-table th {
    padding: 14px 18px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
}

.clinical-table td {
    padding: 16px 18px;
    font-size: 0.86rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.clinical-table tbody tr:hover {
    background: #fafafa;
}

.patient-info-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.patient-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.patient-meta-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.92rem;
}

.patient-age-badge {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-xs);
    margin-left: 6px;
}

.contact-links-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.btn-contact-quick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-contact-quick.call {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.btn-contact-quick.wa {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.btn-contact-quick:hover {
    transform: translateY(-1px);
}

.doctor-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.doctor-badge-tag i {
    color: var(--primary);
}

.medicine-request-pill {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}

.table-notes-preview {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.3;
    max-width: 260px;
}

/* Status Dropdown Selector inside Table */
.status-select-badge {
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.status-select-badge.status-pending,
.status-select-badge.status-under-review,
.status-select-badge.status-under_review {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.status-select-badge.status-processing,
.status-select-badge.status-active {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.status-select-badge.status-dispensed,
.status-select-badge.status-verified {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.status-select-badge.status-cancelled,
.status-select-badge.status-archived {
    background: #f8fafc;
    color: #64748b;
    border-color: #cbd5e1;
}

/* Table Row Actions */
.row-actions-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.btn-row-action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.btn-row-action.wa-notify {
    color: #059669;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.btn-row-action.wa-notify:hover {
    background: #059669;
    color: #ffffff;
}

.btn-row-action.edit:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.btn-row-action.delete:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Empty & Loading States */
.portal-loading-state, .portal-empty-state {
    padding: 60px 20px;
    text-align: center;
}

.spinner-medical {
    width: 44px;
    height: 44px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

.portal-empty-state .empty-icon {
    font-size: 2.8rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.portal-empty-state h4 {
    font-size: 1.1rem;
    color: #334155;
    margin-bottom: 6px;
}

.portal-empty-state p {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 18px;
}

.portal-info-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.78rem;
    color: #64748b;
}

.p-info-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.p-info-left i {
    color: var(--primary);
}

.btn-text-action {
    background: none;
    border: none;
    color: #059669;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-text-action:hover {
    text-decoration: underline;
}

/* 4. CRUD Form Modal */
.admin-crud-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    width: 95%;
    max-width: 960px;
    z-index: 1095;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-crud-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.admin-crud-card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    border: 1px solid #e2e8f0;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    padding: 32px 36px;
    max-height: 92vh;
    overflow-y: auto;
}

.crud-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.crud-header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.crud-header-icon.supabase-icon {
    background: #ecfdf5;
    color: #059669;
}

.crud-header-icon.danger-icon {
    background: #fef2f2;
    color: #dc2626;
}

.delete-target-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 14px;
    margin: 16px 0;
}

.delete-target-preview .target-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.delete-target-preview .target-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    font-size: 0.82rem;
    color: #475569;
}

.delete-target-preview .target-details span strong {
    color: #1e293b;
}

.btn-danger {
    background: #dc2626;
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.crud-header h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.crud-header p {
    font-size: 0.84rem;
    color: #64748b;
}

.crud-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

/* 5. Supabase Schema Modal */
.schema-status-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 18px;
    font-size: 0.85rem;
    color: #166534;
}

.schema-status-icon {
    font-size: 1.2rem;
    color: var(--primary);
    margin-top: 2px;
}

.schema-code-section {
    background: #0f172a;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 18px;
}

.code-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #1e293b;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
}

.btn-copy-code {
    background: #334155;
    color: #f8fafc;
    border: none;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease;
}

.btn-copy-code:hover {
    background: var(--primary);
}

.sql-code-block {
    margin: 0;
    padding: 14px;
    color: #38bdf8;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
}

.schema-steps {
    font-size: 0.84rem;
    color: #475569;
    margin-bottom: 20px;
}

.schema-steps h4 {
    font-size: 0.88rem;
    color: #0f172a;
    margin-bottom: 8px;
}

.schema-steps ol {
    padding-left: 20px;
    line-height: 1.6;
}

.schema-steps code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    color: #0f172a;
    font-size: 0.78rem;
}

.schema-modal-footer {
    display: flex;
    justify-content: flex-end;
}

/* 6. Order Success Modal */
.order-success-header {
    text-align: center;
    margin-bottom: 18px;
}

.success-checkmark-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0fdf4;
    border: 2px solid #86efac;
    color: #16a34a;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.order-summary-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 18px;
    font-size: 0.84rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item strong {
    color: #0f172a;
}

.order-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Print Styles */
@media print {
    body * {
        visibility: hidden;
    }
    #admin-portal-modal, #admin-portal-modal * {
        visibility: visible;
    }
    #admin-portal-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff;
    }
    .portal-header, .portal-kpi-grid, .portal-toolbar, .portal-info-footer, .row-actions-group, .btn-contact-quick {
        display: none !important;
    }
    .clinical-table th, .clinical-table td {
        border: 1px solid #000;
        padding: 8px;
    }
}

/* Responsive adjustments for admin portal */
@media (max-width: 1024px) {
    .portal-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .portal-wrapper {
        height: 100vh;
        height: 100dvh;
    }

    .portal-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid #e2e8f0;
        background: #ffffff;
    }

    .portal-header-left {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .portal-logo-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .portal-title {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    .portal-tagline {
        display: none !important;
    }

    .portal-header-right {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .portal-header-right::-webkit-scrollbar {
        display: none;
    }

    .db-status-pill, .admin-user-pill, .btn-portal-outline {
        padding: 5px 10px;
        font-size: 0.74rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .portal-close-icon-btn {
        margin-left: auto;
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .portal-body {
        padding: 12px 10px 30px;
    }

    .portal-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 14px;
    }

    .kpi-card {
        padding: 12px;
        gap: 10px;
    }

    .kpi-icon-wrap {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .kpi-value {
        font-size: 1.35rem;
    }

    .kpi-label {
        font-size: 0.7rem;
    }

    .kpi-sub {
        display: none;
    }

    .portal-toolbar {
        padding: 12px;
        margin-bottom: 14px;
        gap: 12px;
    }

    .toolbar-search-wrap {
        min-width: 100%;
        max-width: 100%;
    }

    .toolbar-search-wrap input {
        font-size: 0.84rem;
        padding: 9px 34px 9px 34px;
    }

    .toolbar-filter-group {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .status-filter-pills {
        display: inline-flex;
        width: max-content;
        gap: 4px;
    }

    .filter-pill {
        padding: 5px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .toolbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .btn-add-customer {
        grid-column: 1 / -1;
        justify-content: center;
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .btn-portal-secondary {
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    /* Mobile Responsive Card-based layout for Table */
    .table-responsive {
        border: none;
        overflow: visible;
    }

    .clinical-table thead {
        display: none;
    }

    .clinical-table, 
    .clinical-table tbody, 
    .clinical-table tr, 
    .clinical-table td {
        display: block;
        width: 100%;
    }

    .clinical-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .clinical-table tr {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: var(--radius-lg);
        padding: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        position: relative;
    }

    .clinical-table td {
        padding: 6px 0;
        border-bottom: none;
        font-size: 0.84rem;
    }

    .clinical-table td:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #e2e8f0;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .patient-info-cell {
        gap: 10px;
    }

    .patient-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.82rem;
    }

    .table-notes-preview {
        max-width: 100%;
    }

    .status-select-badge {
        width: 100%;
        margin-top: 4px;
        text-align: center;
    }

    .row-actions-group {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
    }

    .btn-row-action {
        width: 100%;
        height: 36px;
        font-size: 0.95rem;
    }

    .portal-info-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 12px 14px;
    }

    .p-info-left {
        flex-direction: column;
        gap: 4px;
    }

    /* CRUD Form Mobile adjustments */
    .admin-crud-modal {
        width: 96%;
        max-height: 94vh;
    }

    .admin-crud-card {
        padding: 16px;
        max-height: 92vh;
    }

    .crud-header {
        gap: 10px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .crud-header-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .crud-header h3 {
        font-size: 1.1rem;
    }

    .crud-header p {
        font-size: 0.78rem;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .crud-actions-row {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .crud-actions-row button {
        width: 100%;
        justify-content: center;
    }

    .btn-admin-header span {
        display: none;
    }
    .btn-admin-header {
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .portal-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .kpi-card {
        padding: 10px 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .kpi-icon-wrap {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

    .kpi-value {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   CUSTOMER & MEDICINE REQUIREMENT FORM SECTION STYLING
   ========================================================================== */

.form-section-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    margin-bottom: 12px;
    margin-top: 4px;
}

.section-divider-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #166534;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.section-divider-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #15803d;
    background: #ffffff;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid #86efac;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.patient-gender-tag {
    display: inline-block;
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    margin-left: 4px;
    font-weight: 600;
}

.patient-gender-tag.Male {
    background: #eff6ff;
    color: #1d4ed8;
}

.patient-gender-tag.Female {
    background: #fdf2f8;
    color: #db2777;
}

.medicine-badge-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.med-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #dcfce7;
    width: fit-content;
}

.med-strength-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.prescription-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.prescription-tag.rx-yes {
    background: #dcfce7;
    color: #166534;
}

.prescription-tag.rx-no {
    background: #fef3c7;
    color: #92400e;
}

/* ==========================================================================
   FOOTER ADMIN PORTAL ACCESS STYLES (Single Slot Indicator)
   ========================================================================== */

.footer-admin-link-li {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Above Footer Admin Trigger Bar */
.above-footer-admin-strip {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 12px 0;
}

.above-footer-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btn-above-footer-admin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-above-footer-admin i {
    font-size: 0.78rem;
    color: #16a34a;
    transition: color 0.2s ease;
}

.btn-above-footer-admin:hover {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.btn-above-footer-admin:hover i {
    color: #38bdf8;
}

.btn-above-footer-admin:active {
    transform: translateY(0);
}

.footer-admin-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.1);
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    transition: all 0.25s ease;
    font-size: 0.82rem;
    font-weight: 600;
}

.footer-admin-link-btn i {
    font-size: 0.78rem;
}

.footer-admin-link-btn:hover {
    background: rgba(56, 189, 248, 0.22);
    transform: translateX(4px);
    color: #ffffff !important;
}

.slot-pill-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
    background: #10b981;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.slot-pill-tag.locked {
    background: #64748b;
}

.btn-footer-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-footer-admin-badge i {
    font-size: 0.75rem;
    color: #38bdf8;
}

.btn-footer-admin-badge:hover {
    background: #0f172a;
    color: #38bdf8;
    border-color: #38bdf8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.badge-slot-count {
    background: #059669;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9999px;
}

.badge-slot-count.locked {
    background: #475569;
}

/* ==========================================================================
   SINGLE-SLOT AUTHENTICATION MODAL & TAB SYSTEM
   ========================================================================== */

.admin-slot-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.admin-slot-banner.locked {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.slot-banner-icon {
    font-size: 1.2rem;
    color: #059669;
    margin-top: 2px;
    flex-shrink: 0;
}

.admin-slot-banner.locked .slot-banner-icon {
    color: #475569;
}

.slot-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.slot-banner-text strong {
    font-size: 0.84rem;
    color: #065f46;
}

.admin-slot-banner.locked .slot-banner-text strong {
    color: #334155;
}

.slot-banner-text span {
    font-size: 0.76rem;
    color: #047857;
    line-height: 1.4;
}

.admin-slot-banner.locked .slot-banner-text span {
    color: #64748b;
}

.auth-tabs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 18px;
}

.auth-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.tab-badge-sm {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9999px;
    background: #10b981;
    color: #ffffff;
}

.auth-tab-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.single-slot-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.78rem;
    color: #92400e;
    line-height: 1.45;
    margin-bottom: 14px;
}

.single-slot-notice i {
    font-size: 0.95rem;
    color: #d97706;
    margin-top: 1px;
}

.slot-badge-micro {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 9999px;
    background: #059669;
    color: #ffffff;
    margin-left: 4px;
}

/* ==========================================================================
   BOOKING DETAIL MODAL & CLINICAL SLIP
   ========================================================================== */

.booking-detail-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.slip-header-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slip-id-tag {
    font-size: 1.1rem;
    font-weight: 800;
    color: #065f46;
}

.slip-date-text {
    font-size: 0.78rem;
    color: #047857;
}

.detail-section-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
}

.detail-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 6px;
}

.detail-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-item-label {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
}

.detail-item-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.detail-med-highlight {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
}

.detail-med-name {
    font-size: 1rem;
    font-weight: 800;
    color: #1d4ed8;
}

.detail-med-meta {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    color: #3b82f6;
    margin-top: 4px;
}

/* ==========================================================================
   ADMIN PROFILE MODAL
   ========================================================================== */

.admin-profile-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.profile-card-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #059669;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.profile-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-details h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.profile-details span {
    font-size: 0.8rem;
    color: #64748b;
}

.profile-slot-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #065f46;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 9999px;
    width: fit-content;
    margin-top: 4px;
}

/* ==========================================================================
   ENHANCED RESPONSIVE SYSTEM (DESKTOP, LAPTOP, TABLET & MOBILE)
   ========================================================================== */

/* Laptop & Desktop Screens (1024px and up) */
@media (min-width: 1024px) {
    .portal-wrapper {
        max-width: 1380px;
        margin: 0 auto;
    }
    
    .portal-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .table-responsive {
        max-height: 560px;
        overflow-y: auto;
    }

    /* Big Screen Customer Registration & Edit Modal Window */
    .admin-crud-modal {
        max-width: 1000px;
        width: 85%;
    }

    .admin-crud-card {
        padding: 36px 44px;
    }

    .admin-crud-modal .form-section-divider {
        margin: 20px 0 16px;
        padding-bottom: 8px;
    }

    .admin-crud-modal .section-divider-title {
        font-size: 1rem;
    }

    .admin-crud-modal label {
        font-size: 0.88rem;
        margin-bottom: 6px;
    }

    .admin-crud-modal input,
    .admin-crud-modal select,
    .admin-crud-modal textarea {
        font-size: 0.95rem;
        padding: 12px 16px;
        border-radius: 10px;
    }

    .admin-crud-modal .form-row {
        display: flex;
        gap: 18px;
        margin-bottom: 16px;
    }

    .admin-crud-modal .crud-actions-row {
        margin-top: 28px;
        padding-top: 20px;
        gap: 16px;
    }

    .admin-crud-modal .crud-actions-row button {
        padding: 12px 28px;
        font-size: 0.95rem;
    }

    /* Big Screen Booking Details Modal */
    #booking-detail-modal {
        max-width: 860px;
        width: 80%;
    }

    #booking-detail-modal .admin-crud-card {
        padding: 32px 38px;
    }

    #admin-profile-modal {
        max-width: 680px;
    }
}

/* Tablet Screens (up to 992px) */
@media (max-width: 992px) {
    .portal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .portal-header-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .portal-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Mobile Devices (up to 768px) */
@media (max-width: 768px) {
    .admin-login-modal {
        width: 94%;
        max-width: 480px;
    }

    .auth-tabs-row {
        grid-template-columns: 1fr 1fr;
    }

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

    .slip-header-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bottom-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .above-footer-inner {
        justify-content: center;
    }

    .footer-bottom-right {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .btn-footer-admin-badge {
        width: auto;
        max-width: 200px;
        justify-content: center;
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

/* Extra Small Mobile Devices (up to 480px) */
@media (max-width: 480px) {
    .admin-login-card,
    .admin-crud-card {
        padding: 16px 14px;
    }

    .auth-tab-btn {
        font-size: 0.78rem;
        padding: 8px 6px;
        gap: 4px;
    }

    .portal-brand-tag {
        font-size: 0.65rem;
    }

    .portal-title {
        font-size: 1.15rem;
    }

    .portal-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .kpi-card {
        padding: 10px 8px;
    }

    .kpi-value {
        font-size: 1.2rem;
    }

    .row-actions-group {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   MULTIPLE MEDICINE ITEMS (Tablets, Syrups, Drops, Injections) STYLES
   ========================================================================== */

.dynamic-meds-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.med-item-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.med-item-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.med-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
}

.med-item-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.med-item-title i {
    color: var(--primary);
    font-size: 0.95rem;
}

.med-type-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.med-type-tag.type-syrup {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.med-type-tag.type-tablet {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.med-type-tag.type-capsule {
    background: #f5f3ff;
    color: #5b21b6;
    border-color: #ddd6fe;
}

.med-type-tag.type-drops {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.btn-remove-med {
    background: transparent;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.btn-remove-med:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
    transform: scale(1.05);
}

/* Add Medicine Actions Bar */
.add-medicine-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    margin-bottom: 12px;
}

.btn-add-medicine-item {
    background: #ffffff;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-add-medicine-item:hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

.quick-add-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.quick-add-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    margin-right: 2px;
}

.btn-quick-add-type {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.btn-quick-add-type i {
    color: var(--primary);
    font-size: 0.78rem;
}

.btn-quick-add-type:hover {
    background: #f8fafc;
    border-color: var(--primary);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

/* Compact Table Display for Multiple Medicines */
.badge-multi-meds {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
    margin-bottom: 4px;
}

.meds-compact-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    max-width: 290px;
}

.med-compact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    line-height: 1.25;
}

.med-type-mini-icon {
    font-size: 0.8rem;
    color: var(--primary);
    flex-shrink: 0;
}

.med-compact-name {
    color: #1e293b;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.med-type-mini-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #475569;
    flex-shrink: 0;
}

.med-qty-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    flex-shrink: 0;
}

/* Itemized Medicines Table in Booking Detail Slip */
.slip-meds-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 14px 0;
}

.slip-meds-card-header {
    background: #f1f5f9;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}

.slip-meds-card-header span i {
    color: var(--primary);
    margin-right: 6px;
}

.slip-med-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.84rem;
}

.slip-med-row-item:last-child {
    border-bottom: none;
}

.slip-med-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slip-med-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ecfdf5;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.slip-med-details strong {
    color: #0f172a;
    display: block;
    font-size: 0.88rem;
}

.slip-med-details span {
    color: #64748b;
    font-size: 0.76rem;
}

.slip-med-meta {
    text-align: right;
}

@media (max-width: 640px) {
    .add-medicine-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-add-medicine-item {
        justify-content: center;
        width: 100%;
    }

    .quick-add-pills {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   ADMIN PORTAL TAB NAVIGATION & SUBHEADER
   ========================================================================== */
.portal-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    gap: 16px;
    flex-wrap: wrap;
}

.portal-tabs-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 10px;
}

.portal-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.portal-nav-tab:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.portal-nav-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.portal-nav-tab.active#tabStockManagementBtn {
    color: #0284c7;
}

.portal-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}

.portal-nav-tab.active .portal-tab-badge {
    background: #0284c7;
    color: #ffffff;
}

.portal-tab-badge.badge-stock {
    background: #e0f2fe;
    color: #0369a1;
}

.portal-nav-tab.active #tabStockCount {
    background: #0284c7;
    color: #ffffff;
}

.portal-active-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

/* ==========================================================================
   MEDICINE STOCK MANAGEMENT & PHARMACY INVENTORY STYLES
   ========================================================================== */

/* Stock Quick Presets Box */
.stock-quick-presets-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.stock-quick-presets-box .preset-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #166534;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
}

.btn-preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid #86efac;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #15803d;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-preset-chip:hover {
    background: #15803d;
    color: #ffffff;
    border-color: #15803d;
}

/* Medicine Stock Table */
.stock-table {
    width: 100%;
    border-collapse: collapse;
}

.stock-table th {
    background: #f8fafc;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.stock-table td {
    padding: 12px 14px;
    font-size: 0.86rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.stock-table tr:hover td {
    background: #f8fafc;
}

.stock-row.row-out-of-stock td {
    background: #fffcfc;
}

/* Medicine & Salt Cell */
.stock-med-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 170px;
}

.stock-med-name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stock-med-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.92rem;
}

.rx-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.stock-generic-sub {
    font-size: 0.76rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stock-generic-sub i {
    color: #0284c7;
    font-size: 0.72rem;
}

.stock-notes-sub {
    font-size: 0.72rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Category & Manufacturer Cell */
.stock-mfr-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
}

.stock-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    width: fit-content;
}

.stock-mfr-name {
    font-size: 0.78rem;
    color: #475569;
}

/* Batch & Expiry Cell */
.stock-batch-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 140px;
}

.stock-batch-code {
    font-family: monospace;
    font-weight: 700;
    font-size: 0.85rem;
    color: #0f172a;
    background: #f8fafc;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    width: fit-content;
}

.stock-expiry-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stock-expiry-date {
    font-size: 0.75rem;
    color: #64748b;
}

.stock-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    width: fit-content;
}

.stock-badge-tag.safe {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.stock-badge-tag.expiring {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.stock-badge-tag.expired {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

/* In-Stock Quantity Cell */
.stock-qty-cell {
    min-width: 110px;
}

.stock-qty-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 8px;
    min-width: 80px;
}

.stock-qty-badge .qty-num {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.stock-qty-badge .qty-unit {
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 2px;
}

/* Min Alert Cell */
.stock-min-cell {
    font-size: 0.82rem;
    color: #334155;
    min-width: 110px;
}

.min-level-text {
    font-weight: 700;
}

/* Price Cell */
.stock-price-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    min-width: 105px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.price-lbl {
    color: #64748b;
}

.price-val {
    font-weight: 600;
    color: #1e293b;
}

.mrp-val {
    text-decoration: line-through;
    color: #94a3b8;
}

/* Shelf Rack Badge */
.stock-rack-cell {
    min-width: 110px;
}

.rack-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #334155;
}

.rack-badge i {
    color: #0284c7;
}

/* Health Pills */
.stock-health-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.stock-health-pill.ok {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.stock-health-pill.low {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.stock-health-pill.out {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.stock-health-pill.expiring {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #ffedd5;
}

/* Action Buttons */
.stock-actions-group {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.btn-stock-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.btn-stock-action.btn-adjust {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.btn-stock-action.btn-adjust:hover {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}

.btn-stock-action.btn-edit {
    background: #f8fafc;
    color: #475569;
    border-color: #cbd5e1;
}

.btn-stock-action.btn-edit:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.btn-stock-action.btn-delete {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-stock-action.btn-delete:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

/* Quick Adjust Modal */
.stock-adjust-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.adjust-overview-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adjust-resulting-preview {
    font-size: 1.15rem;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid #a7f3d0;
    background: #ecfdf5;
    color: #059669;
    text-align: center;
}

/* ==========================================================================
   ENHANCED EASY & ATTRACTIVE STOCK MANAGEMENT UI (HERO, CARDS, STEPPERS)
   ========================================================================== */

/* Stock Hub Header */
.stock-hub-header {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 65%, #047857 100%);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 4px 14px rgba(6, 78, 59, 0.18);
}

.stock-hub-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #d1fae5;
    margin-bottom: 8px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #34d399;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

.stock-sync-indicator {
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #a7f3d0;
    margin-left: 6px;
}

.stock-hub-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.stock-hub-desc {
    font-size: 0.88rem;
    color: #a7f3d0;
    margin: 0;
    max-width: 620px;
    line-height: 1.45;
}

.stock-hub-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-stock-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    color: #065f46;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.btn-stock-hero-primary:hover {
    background: #ecfdf5;
    color: #047857;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-stock-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-stock-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #ffffff;
}

/* Smart Urgent Alert Banner */
.stock-smart-alert {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-icon-side {
    font-size: 1.35rem;
    color: #d97706;
    flex-shrink: 0;
}

.alert-message-side {
    font-size: 0.88rem;
    color: #92400e;
    flex: 1;
    line-height: 1.4;
}

.alert-actions-side {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-alert-action {
    padding: 6px 12px;
    background: #d97706;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-alert-action:hover {
    background: #b45309;
}

.btn-alert-dismiss {
    background: transparent;
    border: none;
    color: #b45309;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}

.btn-alert-dismiss:hover {
    background: rgba(217, 119, 6, 0.15);
}

/* Clickable Stock KPI Cards */
.stock-kpi-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 1.5px solid transparent;
}

.stock-kpi-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.stock-kpi-clickable.active {
    border-color: #059669 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12) !important;
}

.kpi-tag-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.kpi-filter-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
}

.kpi-filter-tag.safe {
    background: #dcfce7;
    color: #166534;
}

.kpi-filter-tag.warn {
    background: #ffedd5;
    color: #c2410c;
}

.kpi-filter-tag.danger {
    background: #fee2e2;
    color: #b91c1c;
}

.kpi-filter-tag.amber {
    background: #fef3c7;
    color: #b45309;
}

/* Stock Toolbar Layout */
.stock-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 18px;
}

.stock-search-sort-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    flex-wrap: wrap;
}

.stock-search-box {
    flex: 1;
    min-width: 260px;
}

.stock-sort-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stock-sort-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

.stock-filter-dropdown {
    padding: 7px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #1e293b;
    background: #ffffff;
    font-weight: 500;
    cursor: pointer;
}

.stock-filter-dropdown:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

/* View Mode Switcher: Cards Grid vs Data Table */
.stock-view-toggle-group {
    display: inline-flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    gap: 3px;
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.view-toggle-btn.active {
    background: #ffffff;
    color: #065f46;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stock-filter-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.stock-secondary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   CARDS GRID VIEW (EASY, VISUAL PHARMACY STOCK TILES)
   ========================================================================== */

.stock-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.stock-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
}

.stock-card:hover {
    border-color: #059669;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.stock-card.status-out {
    border-color: #fca5a5;
    background: #fffcfc;
}

.stock-card.status-low {
    border-color: #fed7aa;
    background: #fffdfb;
}

/* Card Header */
.stock-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.stock-card-title-group {
    flex: 1;
}

.stock-card-med-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 3px 0;
}

.stock-card-generic {
    font-size: 0.78rem;
    color: #0369a1;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.stock-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.stock-card-mfr-batch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #64748b;
    padding: 4px 0;
    border-bottom: 1px dashed #f1f5f9;
}

/* Visual Stock Progress Bar */
.stock-level-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stock-level-bar-track {
    width: 100%;
    height: 7px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.stock-level-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.stock-level-bar-fill.safe {
    background: linear-gradient(90deg, #10b981, #059669);
}

.stock-level-bar-fill.low {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.stock-level-bar-fill.out {
    background: #ef4444;
}

.stock-level-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.74rem;
    color: #64748b;
}

/* Interactive Stepper Container */
.stock-stepper-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stepper-left-actions {
    display: flex;
    gap: 6px;
}

.stepper-center-info {
    text-align: center;
    flex: 1;
}

.stepper-big-qty {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.stepper-big-qty.text-out {
    color: #dc2626;
}

.stepper-big-qty.text-low {
    color: #ea580c;
}

.stepper-big-qty.text-safe {
    color: #059669;
}

.stepper-unit-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

.stepper-right-actions {
    display: flex;
    gap: 6px;
}

.btn-stepper {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-stepper:hover:not(:disabled) {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
    transform: scale(1.05);
}

.btn-stepper.minus:hover:not(:disabled) {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.btn-stepper:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-stepper-box-10 {
    padding: 0 8px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid #a7f3d0;
    background: #ecfdf5;
    color: #059669;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-stepper-box-10:hover {
    background: #059669;
    color: #ffffff;
}

/* Card Pricing & Margin Bar */
.stock-card-price-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 0.78rem;
    border: 1px solid #f1f5f9;
}

.price-item-selling {
    font-size: 0.95rem;
    font-weight: 800;
    color: #059669;
}

.price-item-mrp {
    font-size: 0.75rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.price-item-margin {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Card Footer */
.stock-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}

.card-footer-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Table Inline Stepper */
.table-stepper-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 3px 6px;
    border-radius: 8px;
}

.btn-table-step {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}

.btn-table-step:hover:not(:disabled) {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

.btn-table-step.minus:hover:not(:disabled) {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.table-step-qty {
    font-weight: 800;
    font-size: 0.95rem;
    min-width: 32px;
    text-align: center;
}

/* Modal Enhancements: Popular Medicine Presets */
.stock-preset-medicine-box {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.stock-preset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: #065f46;
    font-size: 0.84rem;
}

.stock-preset-header small {
    color: #047857;
    font-size: 0.75rem;
}

.stock-preset-chips-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.btn-med-preset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1.5px solid #86efac;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #065f46;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-med-preset:hover {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.25);
}

/* Quick Expiry Helper Buttons */
.quick-expiry-btns {
    display: inline-flex;
    gap: 4px;
}

.btn-quick-exp {
    padding: 1px 7px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.12s ease;
}

.btn-quick-exp:hover {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

/* Margin Calculator Box */
.stock-margin-calculator-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.margin-calc-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #166534;
}

.margin-calc-icon {
    font-size: 0.95rem;
    color: #059669;
}

/* Quick Adjust Quantity Chips */
.quick-adjust-chips-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}

.adjust-chips-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.adjust-chips-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-adjust-chip {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.btn-adjust-chip.plus {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.btn-adjust-chip.plus:hover {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

.btn-adjust-chip.minus {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-adjust-chip.minus:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

/* ==========================================================================
   PATIENT CARDS GRID & CLINICAL RECORD ITEM STYLES
   ========================================================================== */

.patient-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
}

.patient-card-item {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
}

.patient-card-item:hover {
    border-color: #2563eb;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08);
    transform: translateY(-2px);
}

.patient-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.patient-avatar-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.patient-avatar-box .patient-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

.patient-card-name {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-card-meta {
    font-size: 0.72rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.patient-demographics-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.patient-location-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    color: #334155;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-card-meds-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}

.card-meds-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.patient-card-meds-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-med-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 4px 8px;
    border-radius: 6px;
}

.card-med-name {
    font-weight: 700;
    color: #0f172a;
    flex: 1;
}

.card-med-strength {
    font-size: 0.72rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
}

.card-med-qty {
    font-size: 0.72rem;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #a7f3d0;
}

.patient-card-doctor-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.76rem;
}

.card-doctor-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #047857;
    font-weight: 600;
}

.card-pharmacist-note {
    font-size: 0.73rem;
    color: #64748b;
    background: #f8fafc;
    border-left: 3px solid #3b82f6;
    padding: 4px 8px;
    border-radius: 0 6px 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
    flex-wrap: wrap;
}

.card-fast-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-card-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.btn-card-action.call {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.btn-card-action.call:hover {
    background: #2563eb;
    color: #ffffff;
}

.btn-card-action.wa {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.btn-card-action.wa:hover {
    background: #059669;
    color: #ffffff;
}

.btn-card-action.slip {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}

.btn-card-action.slip:hover {
    background: #7c3aed;
    color: #ffffff;
}

.card-manage-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-card-icon.edit:hover {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #bae6fd;
}

.btn-card-icon.delete:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Quick Patient Preset Chips in Modal */
.customer-preset-chips-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #eef2ff;
    border: 1.5px solid #c7d2fe;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.customer-preset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #3730a3;
    font-weight: 700;
}

.customer-preset-chips-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
}

.btn-customer-preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1.5px solid #818cf8;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #3730a3;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-customer-preset-chip:hover {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    transform: translateY(-1px);
}

/* Fast stock medicine chips in customer modal */
.fast-stock-chips-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 12px;
}

.btn-fast-stock-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.12s ease;
}

.btn-fast-stock-chip:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* ==========================================================================
   COMPREHENSIVE MULTI-DEVICE RESPONSIVENESS (MOBILE, TABLET, LAPTOP, PC)
   ========================================================================== */

/* 1. Large Monitors & Desktops (1440px and wider) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .patient-cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .stock-cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .portal-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .portal-wrapper {
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* 2. Laptops & Standard Desktops (1024px to 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .patient-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .stock-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .portal-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
}

/* 3. Tablets & Small Laptops (769px to 1023px) */
@media (min-width: 769px) and (max-width: 1023px) {
    .patient-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .stock-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .portal-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .portal-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .portal-header-right {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }

    .stock-toolbar-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .stock-toolbar-right {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .customer-toolbar-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-toolbar-right {
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

/* 4. Mobile & Small Tablets (Max-width 768px) */
@media (max-width: 768px) {
    /* Prevent horizontal page shaking on mobile */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Admin Login Modal Mobile */
    .admin-login-modal {
        width: calc(100% - 24px);
        max-width: 440px;
        margin: 12px auto;
        padding: 0;
    }

    .admin-login-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .admin-login-header h3 {
        font-size: 1.2rem;
    }

    .admin-login-header p {
        font-size: 0.8rem;
    }

    .auth-tabs-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .auth-tab-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    /* Admin Portal Modal Mobile */
    .admin-portal-modal {
        padding: 0;
    }

    .portal-wrapper {
        border-radius: 0;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .portal-header {
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .portal-header-left {
        gap: 8px;
    }

    .portal-logo-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .portal-brand-tag {
        font-size: 0.65rem;
    }

    .portal-title {
        font-size: 1.15rem;
    }

    .portal-header-right {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .admin-user-pill,
    .db-status-pill {
        padding: 4px 8px;
        font-size: 0.72rem;
    }

    .btn-portal-outline {
        padding: 4px 8px;
        font-size: 0.72rem;
    }

    /* Subheader Tabs */
    .portal-nav-bar {
        padding: 8px 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .portal-tabs-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .portal-nav-tab {
        padding: 8px 10px;
        font-size: 0.8rem;
        justify-content: center;
    }

    .portal-tab-extra {
        display: none;
    }

    /* Section Body */
    .portal-body {
        padding: 12px;
    }

    /* KPI Grid on Mobile */
    .portal-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }

    .kpi-card {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .kpi-value {
        font-size: 1.3rem;
    }

    .kpi-label {
        font-size: 0.72rem;
    }

    /* Toolbars on Mobile */
    .customer-toolbar-wrap,
    .stock-toolbar-wrap {
        padding: 10px 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .customer-search-box,
    .stock-search-box {
        width: 100%;
        min-width: 100%;
    }

    .customer-toolbar-right,
    .stock-toolbar-right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
    }

    .customer-sort-select,
    .stock-filter-select,
    .stock-sort-select {
        flex: 1;
        min-width: 130px;
        font-size: 0.78rem;
    }

    .btn-portal-primary {
        width: 100%;
        justify-content: center;
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    /* Cards Grid on Mobile */
    .patient-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .patient-card-item {
        padding: 12px;
    }

    .patient-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .card-fast-contact {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .btn-card-action {
        justify-content: center;
        padding: 6px 4px;
        font-size: 0.72rem;
    }

    .card-manage-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .btn-card-icon {
        width: 100%;
        height: 32px;
    }

    /* Stock Cards on Mobile */
    .stock-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stock-card {
        padding: 12px;
    }

    .stock-stepper-box {
        padding: 8px 10px;
    }

    .btn-stepper {
        width: 32px;
        height: 32px;
    }

    .stepper-big-qty {
        font-size: 1.25rem;
    }

    .stock-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .stock-card-footer .row-actions-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    /* Table Horizontal Scroll on Mobile */
    .portal-table-container {
        border-radius: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .portal-table {
        min-width: 680px;
    }

    /* Modals on Mobile */
    .admin-crud-modal,
    .booking-detail-modal,
    .stock-crud-modal,
    .supabase-schema-modal,
    .admin-profile-modal {
        width: calc(100% - 20px);
        max-width: 100%;
        margin: 10px auto;
        max-height: 92vh;
        max-height: 92dvh;
    }

    .admin-crud-card,
    .booking-detail-card,
    .stock-crud-card {
        padding: 14px 12px;
    }

    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .form-row .form-group {
        width: 100%;
    }

    .crud-footer-btns {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .crud-footer-btns button {
        width: 100%;
        justify-content: center;
    }

    /* Storefront Mobile Adjustments */
    .hero-buttons-group {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .hero-btn {
        width: 100%;
        justify-content: center;
    }

    .booking-card-main {
        padding: 16px 12px;
    }
}

/* 5. Extra Small Devices (320px to 375px) */
@media (max-width: 375px) {
    .portal-title {
        font-size: 1rem;
    }

    .kpi-value {
        font-size: 1.15rem;
    }

    .btn-card-action {
        font-size: 0.68rem;
        padding: 5px 2px;
    }

    .card-med-chip {
        font-size: 0.74rem;
    }

    .auth-tab-btn {
        font-size: 0.74rem;
        padding: 6px 4px;
    }

    .admin-slot-banner {
        padding: 8px 10px;
    }

    .slot-banner-text strong {
        font-size: 0.78rem;
    }

    .slot-banner-text span {
        font-size: 0.68rem;
    }
}