/* ============================================================
   MOBILE-FIRST RESPONSIVE DESIGN
   Native App Feel for Rainbow Shield Community
   ============================================================ */

/* ============================================================
   HAMBURGER MENU BUTTON
   ============================================================ */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

[data-theme="dark"] .hamburger-btn {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

.hamburger-btn:hover {
  background: #f3f4f6;
  border-color: #7c3aed;
  color: #7c3aed;
}

[data-theme="dark"] .hamburger-btn:hover {
  background: #111827;
  border-color: #8b5cf6;
  color: #8b5cf6;
}

/* ============================================================
   MOBILE SEARCH OVERLAY
   ============================================================ */
.mobile-search-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

[data-theme="dark"] .mobile-search-btn {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

.mobile-search-btn:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}

.mobile-search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  padding: 12px;
  align-items: flex-start;
  justify-content: center;
}

.mobile-search-overlay.active {
  display: flex;
}

.mobile-search-container {
  width: 100%;
  max-width: 560px;
  margin-top: 8px;
  background: #ffffff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: slideDown 0.25s ease;
}

[data-theme="dark"] .mobile-search-container {
  background: #1f2937;
}

.mobile-search-container .premium-searchbar {
  animation: none;
}

.mobile-search-container .premium-searchbar::before {
  display: none;
}

.mobile-search-container .search-dropdown {
  position: static;
  max-height: 60vh;
  overflow-y: auto;
  border: none;
  box-shadow: none;
  margin-top: 8px;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LEFT SIDEBAR OVERLAY (Mobile)
   ============================================================ */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ============================================================
   RIGHT SIDEBAR SLIDE-IN PANEL — Glowing toggle tab
   ============================================================ */
.right-panel-toggle {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 140;
  width: 34px;
  height: 76px;
  border-radius: 14px 0 0 14px;
  border: 1.5px solid rgba(124, 58, 237, 0.45);
  border-right: none;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  color: #7c3aed;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow:
    -3px 0 18px rgba(124, 58, 237, 0.12),
    inset 0 0 8px rgba(124, 58, 237, 0.06);
  transition: all 0.25s ease;
  animation: rightToggleGlow 2.8s ease-in-out infinite;
}

/* Glowing outline animation */
@keyframes rightToggleGlow {
  0%, 100% {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow:
      -3px 0 18px rgba(124, 58, 237, 0.1),
      inset 0 0 8px rgba(124, 58, 237, 0.04);
  }
  50% {
    border-color: rgba(124, 58, 237, 0.7);
    box-shadow:
      -3px 0 24px rgba(124, 58, 237, 0.25),
      0 0 12px rgba(139, 92, 246, 0.2),
      inset 0 0 10px rgba(124, 58, 237, 0.08);
  }
}

[data-theme="dark"] .right-panel-toggle {
  background: linear-gradient(135deg, #1e1b3a 0%, #2d1b4e 100%);
  border-color: rgba(139, 92, 246, 0.45);
  color: #8b5cf6;
  box-shadow:
    -3px 0 18px rgba(139, 92, 246, 0.15),
    inset 0 0 8px rgba(139, 92, 246, 0.06);
  animation: rightToggleGlowDark 2.8s ease-in-out infinite;
}

@keyframes rightToggleGlowDark {
  0%, 100% {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow:
      -3px 0 18px rgba(139, 92, 246, 0.12),
      inset 0 0 8px rgba(139, 92, 246, 0.05);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.75);
    box-shadow:
      -3px 0 24px rgba(139, 92, 246, 0.3),
      0 0 14px rgba(167, 139, 250, 0.25),
      inset 0 0 10px rgba(139, 92, 246, 0.1);
  }
}

/* Small chevron hint label */
.right-panel-toggle::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: rgba(124, 58, 237, 0.3);
  animation: toggleBarPulse 2.8s ease-in-out infinite;
}

@keyframes toggleBarPulse {
  0%, 100% { opacity: 0.4; height: 18px; }
  50% { opacity: 0.8; height: 24px; }
}

[data-theme="dark"] .right-panel-toggle::after {
  background: rgba(167, 139, 250, 0.35);
}

.right-panel-toggle:hover {
  width: 40px;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.8);
  animation: none;
  box-shadow:
    -4px 0 20px rgba(124, 58, 237, 0.25),
    0 0 16px rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .right-panel-toggle:hover {
  background: linear-gradient(135deg, #2d1b4e 0%, #3b1e6d 100%);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.8);
  animation: none;
}

.right-panel-toggle svg {
  transition: transform 0.3s ease;
}

.right-panel-toggle.panel-open svg {
  transform: rotate(180deg);
}

.right-panel-toggle.panel-open {
  animation: none;
}

.right-panel-toggle.panel-open::after {
  animation: none;
  opacity: 0;
}

.right-panel-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 145;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.right-panel-overlay.active {
  display: block;
  opacity: 1;
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================================ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
}

[data-theme="dark"] .mobile-bottom-nav {
  background: #111827;
  border-top-color: #1f2937;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.4);
}

.bottom-nav-items {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px 4px;
  text-decoration: none;
  color: #6b7280;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  transition: all 0.2s ease;
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .bottom-nav-item {
  color: #9ca3af;
}

.bottom-nav-item.active {
  color: #7c3aed;
}

[data-theme="dark"] .bottom-nav-item.active {
  color: #8b5cf6;
}

.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: #7c3aed;
  border-radius: 0 0 4px 4px;
}

[data-theme="dark"] .bottom-nav-item.active::before {
  background: #8b5cf6;
}

.bottom-nav-item:active {
  transform: scale(0.92);
  background: rgba(124, 58, 237, 0.06);
}

.bottom-nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 76px;
  text-align: center;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---------- TABLET (1024px and below) ---------- */
@media (max-width: 1024px) {

  /* Prevent horizontal scroll on mobile */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Global containment for all main areas */
  .main-grid,
  .main-content-wrapper,
  .feed-main,
  .feed-card,
  .feed-container,
  .post-item,
  .post-header,
  .post-author {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Show hamburger and search icon */
  .hamburger-btn {
    display: flex;
  }

  .mobile-search-btn {
    display: flex;
  }

  /* Hide desktop search section */
  .search-section {
    display: none !important;
  }

  /* ---- SINGLE-ROW HEADER — never wrap ---- */
  .premium-header {
    overflow: visible !important;
  }

  .topbar-wrap {
    padding: 8px 12px;
    gap: 10px;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  /* Brand section: logo right next to hamburger, no gap
     !important needed to override page-specific CSS (profile.css, etc.) */
  .brand-section {
    min-width: unset !important;
    max-width: 160px !important;
    padding-left: 0 !important;
    gap: 4px !important;
    flex-shrink: 0;
  }

  /* Always hide brand text on tablet/mobile */
  .brand-info {
    display: none !important;
  }

  /* Bigger, more visible logo */
  .logo-wrapper {
    padding: 2px 4px;
    margin-left: -2px;
  }

  .brand-logo {
    height: 40px;
  }

  /* Header actions: compact, single row
     !important needed to override page-specific CSS (profile.css, etc.) */
  .header-actions,
  .topbar-wrap .header-actions {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 1 !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    padding-right: 0 !important;
  }

  /* Show theme toggle on mobile — compact */
  .header-actions .theme-toggle-btn {
    display: flex !important;
  }

  /* Live Support — icon only */
  .doctor-help-btn span {
    display: none;
  }

  .doctor-help-btn {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    min-width: unset !important;
    justify-content: center;
    border-radius: 10px !important;
  }

  .doctor-help-btn .glare-effect {
    display: none;
  }

  /* Profile dropdown — always avatar only on mobile/tablet */
  .profile-header-info {
    display: none !important;
  }

  .profile-chevron {
    display: none !important;
  }

  .profile-header-box {
    padding: 0 !important;
    gap: 0 !important;
  }

  .profile-header-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  /* All header icon buttons same size */
  .header-actions .create-post-btn,
  .header-actions .doctor-help-btn,
  .header-actions .notification-btn,
  .header-actions .theme-toggle-btn,
  .header-actions .mobile-search-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

  .header-actions .create-post-btn svg,
  .header-actions .doctor-help-btn svg,
  .header-actions .notification-btn svg,
  .header-actions .theme-toggle-btn svg,
  .header-actions .mobile-search-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Left sidebar - slide from left */
  .sidebar-left {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    max-height: 100vh !important;
    z-index: 160;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    padding-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }

  [data-theme="dark"] .sidebar-left {
    background: #111827;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }

  .sidebar-left.mobile-open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    /* Show when sidebar is open */
  }

  /* Main grid - single column */
  .main-grid {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
    margin: 12px auto 80px !important;
    gap: 12px;
  }

  /* Main content wrapper */
  .main-content-wrapper,
  .main-content-wrapper.two-column,
  .main-content-wrapper:has(> main.feed-main):has(> aside.sidebar-right) {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Feed full width — NO separate scroll context on mobile.
     Let the feed flow naturally in the page so the whole page scrolls uniformly. */
  .feed-main {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .feed-card {
    border-radius: 12px;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .feed-container {
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Create Post in feed — compact with text visible */
  .feed-main .create-post-btn,
  .feed-header .create-post-btn {
    padding: 8px 14px !important;
    min-width: unset !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    gap: 6px !important;
    height: auto !important;
    width: auto !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
    animation: none !important;
  }

  .feed-main .create-post-btn .create-post-text,
  .feed-header .create-post-btn .create-post-text {
    display: inline-block !important;
    height: 16px !important;
    line-height: 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  .feed-main .create-post-btn .create-post-text .text-item,
  .feed-header .create-post-btn .create-post-text .text-item {
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  .feed-main .create-post-btn .create-post-icon,
  .feed-header .create-post-btn .create-post-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .feed-main .create-post-btn .create-post-icon svg,
  .feed-header .create-post-btn .create-post-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .feed-main .create-post-btn::before,
  .feed-header .create-post-btn::before {
    display: none !important;
  }

  /* Feed header — contain width but don't clip content */
  .feed-header {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Right sidebar - slide-in panel */
  .sidebar-right {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: 75vw;
    max-width: 75vw;
    max-height: 100vh !important;
    z-index: 150;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    padding: 16px;
    padding-top: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }

  [data-theme="dark"] .sidebar-right {
    background: #111827;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
  }

  .sidebar-right.mobile-open {
    transform: translateX(0);
  }

  /* Right panel toggle — visible and attractive */
  .right-panel-toggle {
    display: flex;
    width: 32px !important;
    height: 80px !important;
    opacity: 1 !important;
    border-radius: 14px 0 0 14px !important;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: -3px 0 16px rgba(124, 58, 237, 0.35) !important;
    transition: width 0.2s ease, box-shadow 0.2s ease;
  }

  .right-panel-toggle::after {
    background: rgba(255, 255, 255, 0.4) !important;
    display: block !important;
  }

  .right-panel-toggle svg {
    color: white !important;
    width: 14px !important;
    height: 14px !important;
  }

  .right-panel-toggle:hover,
  .right-panel-toggle:active {
    width: 38px !important;
    box-shadow: -4px 0 24px rgba(124, 58, 237, 0.5) !important;
  }

  [data-theme="dark"] .right-panel-toggle {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
    box-shadow: -3px 0 16px rgba(139, 92, 246, 0.4) !important;
  }

  /* Bottom nav visible */
  .mobile-bottom-nav {
    display: block;
  }

  /* Right panel close button */
  .right-panel-close {
    display: flex;
  }

  /* Notification dropdown — fixed to avoid clipping */
  .notification-menu {
    position: fixed !important;
    top: 56px !important;
    right: 8px !important;
    left: auto !important;
    width: 360px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    z-index: 9999 !important;
  }

  /* Profile menu — fixed to avoid clipping */
  .profile-menu {
    position: fixed !important;
    top: 56px !important;
    right: 8px !important;
    left: auto !important;
    width: 240px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    z-index: 9999 !important;
  }
}

/* ---------- MOBILE LARGE (768px and below) ---------- */
@media (max-width: 768px) {

  /* Consistent header spacing */
  .topbar-wrap {
    padding: 6px 10px;
    gap: 8px;
  }

  /* Constrain brand section further on mobile */
  .brand-section {
    max-width: 140px !important;
  }

  /* Logo still prominent */
  .brand-logo {
    height: 38px;
  }

  .logo-wrapper {
    padding: 2px 3px;
  }

  /* Hide Live Support btn — already available in bottom nav bar */
  .header-actions .doctor-help-btn {
    display: none !important;
  }

  /* Slightly smaller header buttons */
  .header-actions .create-post-btn,
  .header-actions .notification-btn,
  .header-actions .theme-toggle-btn,
  .header-actions .mobile-search-btn,
  .hamburger-btn {
    width: 32px;
    height: 32px;
  }

  .header-actions .create-post-btn svg {
    width: 15px;
    height: 15px;
  }

  /* Sidebar — still wide enough for text */
  .sidebar-left {
    width: 300px;
  }

  .sidebar-right {
    width: 75vw;
    max-width: 75vw;
  }

  /* Right panel toggle — visible on mobile */
  .right-panel-toggle {
    width: 28px !important;
    height: 72px !important;
    border-radius: 12px 0 0 12px !important;
  }

  .right-panel-toggle:active {
    width: 34px !important;
  }

  /* Feed adjustments — no negative margins, contained */
  .feed-card {
    border-radius: 0;
    margin: 0 !important;
    padding-left: 8px;
    padding-right: 8px;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Create Post — compact with text on mobile ≤768px */
  .feed-main .create-post-btn,
  .feed-header .create-post-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }

  .feed-main .create-post-btn .create-post-text,
  .feed-header .create-post-btn .create-post-text {
    display: inline-block !important;
    height: 15px !important;
    line-height: 15px !important;
    font-size: 11px !important;
  }

  .feed-main .create-post-btn .create-post-text .text-item,
  .feed-header .create-post-btn .create-post-text .text-item {
    font-size: 11px !important;
  }

  .feed-main .create-post-btn .create-post-icon,
  .feed-header .create-post-btn .create-post-icon {
    width: 13px !important;
    height: 13px !important;
  }

  .feed-main .create-post-btn .create-post-icon svg,
  .feed-header .create-post-btn .create-post-icon svg {
    width: 13px !important;
    height: 13px !important;
  }

  .main-grid {
    padding: 0 !important;
    margin-top: 8px !important;
  }

  /* Post cards */
  .post-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Notification dropdown full width */
  .notification-menu {
    position: fixed !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 12px !important;
  }

  /* Profile menu — fixed position to avoid any parent clipping */
  .profile-menu {
    position: fixed !important;
    top: 56px !important;
    right: 8px !important;
    left: auto !important;
    width: 240px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    z-index: 9999 !important;
  }

  /* Feed header */
  .feed-header {
    padding: 12px;
  }

  .feed-title {
    font-size: 16px;
  }

  /* Carousel */
  .carousel-container {
    border-radius: 12px;
  }
}

/* ---------- MOBILE SMALL (480px and below) ---------- */
@media (max-width: 480px) {

  .topbar-wrap {
    padding: 5px 8px;
    gap: 6px;
  }

  /* Even smaller brand section on very small phones */
  .brand-section {
    max-width: 120px !important;
  }

  /* Compact header buttons */
  .hamburger-btn,
  .mobile-search-btn,
  .header-actions .create-post-btn,
  .header-actions .notification-btn,
  .header-actions .theme-toggle-btn {
    width: 30px;
    height: 30px;
  }

  .header-actions .create-post-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Tighter gaps between header actions */
  .header-actions,
  .topbar-wrap .header-actions {
    gap: 2px !important;
    margin-right: 2px !important;
  }

  .profile-header-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  /* Profile icon — ensure minimum touch target */
  .profile-header-box {
    min-width: 34px !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Profile menu on very small phones */
  .profile-menu {
    position: fixed !important;
    top: 50px !important;
    right: 4px !important;
    width: 220px !important;
  }

  /* Logo still decent size even on small phones */
  .brand-logo {
    height: 34px;
    object-fit: contain;
  }

  .sidebar-left {
    width: 280px;
  }

  .sidebar-right {
    width: 75vw;
    max-width: 80vw;
  }

  /* Bottom nav smaller labels */
  .bottom-nav-label {
    font-size: 9px;
  }

  .bottom-nav-item {
    flex: 1;
    min-width: 0;
    padding: 5px 1px 3px;
  }

  .bottom-nav-icon {
    width: 22px;
    height: 22px;
  }

  .bottom-nav-icon svg {
    width: 20px;
    height: 20px;
  }

  /* Feed */
  .feed-header {
    padding: 10px 12px;
  }

  /* Feed Create Post — even more compact at ≤480px */
  .feed-main .create-post-btn,
  .feed-header .create-post-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }

  .feed-main .create-post-btn .create-post-text,
  .feed-header .create-post-btn .create-post-text {
    display: inline-block !important;
    height: 14px !important;
    line-height: 14px !important;
    font-size: 10px !important;
  }

  .feed-main .create-post-btn .create-post-text .text-item,
  .feed-header .create-post-btn .create-post-text .text-item {
    font-size: 10px !important;
  }

  .feed-main .create-post-btn .create-post-icon,
  .feed-header .create-post-btn .create-post-icon {
    width: 12px !important;
    height: 12px !important;
  }

  .feed-main .create-post-btn .create-post-icon svg,
  .feed-header .create-post-btn .create-post-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Right panel toggle — almost invisible on small phones */
  .right-panel-toggle {
    width: 24px !important;
    height: 60px !important;
  }
}

/* ============================================================
   RIGHT PANEL CLOSE BUTTON (inside right sidebar)
   ============================================================ */
.right-panel-close {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="dark"] .right-panel-close {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

.right-panel-close:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}

/* ============================================================
   SIDEBAR MOBILE HEADER (Logo + Close)
   ============================================================ */
.sidebar-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  flex-shrink: 0;
}

[data-theme="dark"] .sidebar-mobile-header {
  background: #1f2937;
  border-bottom-color: #374151;
}

.sidebar-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.sidebar-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  max-width: 180px;
}

.sidebar-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

[data-theme="dark"] .sidebar-close-btn {
  background: #111827;
  border-color: #374151;
  color: #9ca3af;
}

.sidebar-close-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

[data-theme="dark"] .sidebar-close-btn:hover {
  background: #7f1d1d;
  border-color: #ef4444;
  color: #fca5a5;
}

@media (max-width: 1024px) {
  .sidebar-mobile-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* Sidebar card scrolls below the sticky header */
  .sidebar-left .sidebar-card {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide the "Navigation" section title on mobile since we have the logo header */
  .sidebar-left .sidebar-section-title:first-of-type {
    display: none;
  }
}

/* ============================================================
   BODY PADDING FOR BOTTOM NAV
   ============================================================ */
@media (max-width: 1024px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   SMOOTH TRANSITIONS & NATIVE FEEL
   ============================================================ */
* {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1024px) {
  /* Prevent body scroll when sidebars are open */
  body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* Smooth scroll for feed */
  .feed-container {
    scroll-behavior: smooth;
  }

  /* Widget cards in right panel */
  .widget-card {
    margin-bottom: 12px;
  }

  /* Carousel in sidebar-right */
  .carousel-sidebar {
    border-radius: 12px;
    overflow: hidden;
  }

  /* Hide right panel toggle when panel is open */
  .right-panel-toggle.panel-open {
    opacity: 0;
    pointer-events: none;
  }
}

/* ============================================================
   FEED POST CARD — FULL RESPONSIVE (Tablet ≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Post card padding & containment */
  .post-item {
    padding: 16px;
    border-radius: 14px;
    overflow: visible !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Post header — keep single line */
  .post-header {
    gap: 10px;
    margin-bottom: 10px;
  }

  .post-author {
    gap: 10px;
  }

  /* Smaller avatar on tablet */
  .post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border-width: 2px;
  }

  /* Author name */
  .post-author-name {
    font-size: 15px;
    gap: 6px;
  }

  .post-author-name-section {
    gap: 4px;
  }

  /* Author top row (name + date + follow + menu) */
  .post-author-top {
    gap: 8px;
  }

  .post-author-info {
    gap: 6px;
  }

  /* Post content text */
  .post-content {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 10px 0;
  }

  /* Post stats */
  .post-stats {
    gap: 6px;
  }
}

/* ============================================================
   FEED POST CARD — MOBILE (≤ 768px)

   ROW 1: [Avatar] [Name ····· Badge] [● date]
   ROW 2:                       [Follow] [⋮]

   post-header wraps. Author=100% width → row 1.
   Actions auto-wrap → row 2, right-aligned.
   Inside author-info, name+badge on line 1, time on line 2.
   ============================================================ */
@media (max-width: 768px) {

  .post-item {
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }

  /* ── HEADER: wrap so actions go to row 2 ── */
  .post-header {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    margin-bottom: 8px !important;
  }

  /* ── AUTHOR: full width = row 1 ── */
  .post-author {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .post-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  /* ── AUTHOR INFO: takes remaining space ── */
  .post-author-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  /* ── AUTHOR TOP: two rows stacked ── */
  .post-author-top {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 8px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .post-author-name-section {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Name + badge: allow wrapping so badge goes to next line if needed */
  .post-author-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    line-height: 1.4 !important;
  }

  .post-badge {
    font-size: 8px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .post-badge svg {
    width: 10px !important;
    height: 10px !important;
  }

  /* Time: inline after name-section, plain text */
  .post-time {
    font-size: 11px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--muted, #9ca3af) !important;
  }

  .post-author-stats {
    display: flex !important;
    gap: 10px !important;
  }

  /* ── ACTIONS: row 2, pushed right ── */
  .post-actions-header {
    display: flex !important;
    margin-left: auto !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .follow-btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .post-more-btn {
    width: 28px !important;
    height: 28px !important;
  }

  .post-content {
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0;
    word-break: break-word;
  }

  .post-attachments {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 8px 0;
  }

  .reaction-buttons {
    gap: 4px;
  }

  .reaction-btn {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 6px;
    gap: 3px;
  }

  .reaction-btn svg {
    width: 14px;
    height: 14px;
  }

  .reaction-text {
    font-size: 11px;
  }

  .reaction-count-inline {
    font-size: 10px;
    margin-left: 2px;
    padding: 1px 4px;
  }

  /* Discussion / Share row */
  .reaction-counts {
    gap: 8px;
    font-size: 10px;
  }

  /* ---- COMMENT / REPLY INPUT AREA ---- */
  .comment-input-box {
    gap: 8px;
    margin-bottom: 10px;
  }

  .comment-input-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  /* Reply input row — stack attachment icons below input on small screens */
  .comment-input-row,
  .reply-input-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  .comment-input-row input,
  .reply-input-row input {
    font-size: 12px;
    padding: 8px 10px;
    min-width: 0;
    flex: 1;
  }

  /* Attachment action buttons (image, pdf, video, link) */
  .comment-attachment-actions,
  .reply-attachment-actions {
    gap: 2px;
  }

  .comment-attachment-actions button,
  .reply-attachment-actions button {
    width: 30px;
    height: 30px;
    padding: 0;
    flex-shrink: 0;
  }

  .comment-attachment-actions button svg,
  .reply-attachment-actions button svg {
    width: 15px;
    height: 15px;
  }

  /* Submit (Reply) button */
  .comment-submit-btn,
  .reply-submit-btn {
    padding: 6px 12px;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Comment items */
  .comment-item {
    gap: 8px;
  }

  .comment-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }

  .comment-author {
    font-size: 13px;
  }

  .comment-text {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .comment-meta {
    font-size: 11px;
    gap: 8px;
  }

  /* Comment list & thread replies: scrollable on mobile */
  .comment-list {
    max-height: 450px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    padding-right: 4px;
  }

  .comment-replies {
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    scroll-behavior: smooth;
    padding-right: 4px;
  }

  .comment-list::-webkit-scrollbar,
  .comment-replies::-webkit-scrollbar {
    width: 4px;
  }
  .comment-list::-webkit-scrollbar-track,
  .comment-replies::-webkit-scrollbar-track {
    background: transparent;
  }
  .comment-list::-webkit-scrollbar-thumb,
  .comment-replies::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 4px;
  }

  /* Post hover — disable on mobile (causes sticky hover on touch) */
  .post-item:hover {
    transform: none;
  }
}

/* ============================================================
   HEADER — VERY SMALL MOBILE (≤ 420px)
   ============================================================ */
@media (max-width: 420px) {
  .brand-section {
    max-width: 100px !important;
  }

  .brand-logo {
    height: 30px !important;
  }

  .hamburger-btn,
  .mobile-search-btn,
  .header-actions .create-post-btn,
  .header-actions .notification-btn,
  .header-actions .theme-toggle-btn {
    width: 28px !important;
    height: 28px !important;
  }

  .header-actions .theme-toggle-btn svg,
  .header-actions .create-post-btn svg,
  .header-actions .notification-btn svg,
  .header-actions .mobile-search-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Feed Create Post — smallest at ≤420px */
  .feed-main .create-post-btn,
  .feed-header .create-post-btn {
    padding: 4px 8px !important;
    font-size: 9px !important;
    gap: 3px !important;
    border-radius: 7px !important;
  }

  .feed-main .create-post-btn .create-post-text,
  .feed-header .create-post-btn .create-post-text {
    display: inline-block !important;
    height: 13px !important;
    line-height: 13px !important;
    font-size: 9px !important;
  }

  .feed-main .create-post-btn .create-post-text .text-item,
  .feed-header .create-post-btn .create-post-text .text-item {
    font-size: 9px !important;
  }

  .feed-main .create-post-btn .create-post-icon,
  .feed-header .create-post-btn .create-post-icon {
    width: 11px !important;
    height: 11px !important;
  }

  .feed-main .create-post-btn .create-post-icon svg,
  .feed-header .create-post-btn .create-post-icon svg {
    width: 11px !important;
    height: 11px !important;
  }

  .profile-header-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .header-actions,
  .topbar-wrap .header-actions {
    gap: 1px !important;
    margin-right: 1px !important;
  }

  .topbar-wrap {
    padding: 4px 6px !important;
    gap: 4px !important;
  }
}

/* ============================================================
   FEED POST CARD — VERY SMALL MOBILE (≤ 420px)
   ============================================================ */
@media (max-width: 420px) {
  .post-item {
    padding: 12px 8px;
    border-radius: 10px;
    overflow: visible !important;
  }

  .post-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  .post-author {
    gap: 8px !important;
  }

  .post-author-name {
    font-size: 13px !important;
    gap: 4px !important;
  }

  .post-badge {
    font-size: 7px !important;
    padding: 2px 4px !important;
  }

  .post-time {
    font-size: 9px !important;
  }

  .follow-btn {
    padding: 3px 8px !important;
    font-size: 10px !important;
  }

  .post-more-btn {
    width: 26px !important;
    height: 26px !important;
  }

  /* Reaction buttons — grid layout for very small screens */
  .reaction-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .reaction-btn {
    padding: 4px 6px;
    font-size: 10.5px;
    justify-content: center;
  }

  .reaction-text {
    font-size: 10.5px;
  }

  .reaction-count-inline {
    font-size: 9px;
  }

  /* Comment input — fully stacked */
  .comment-input-row,
  .reply-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .comment-input-row input,
  .reply-input-row input {
    width: 100%;
  }

  /* Attachment actions + submit in one row */
  .comment-attachment-actions,
  .reply-attachment-actions {
    display: flex;
    align-items: center;
  }

  .comment-submit-btn,
  .reply-submit-btn {
    margin-left: auto;
  }

  /* Post content */
  .post-content {
    font-size: 12.5px;
    line-height: 1.45;
  }

  /* Post date inline */
  .post-date {
    font-size: 10px;
  }

  /* Comment list & thread replies: smaller max-height on tiny screens */
  .comment-list {
    max-height: 350px !important;
  }
  .comment-replies {
    max-height: 250px !important;
  }
}

/* ============================================================
   COMPOSER MODAL RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .composer-modal-content {
    width: 95vw !important;
    max-width: none !important;
    margin: 12px !important;
    border-radius: 16px !important;
    max-height: 85vh !important;
  }

  .composer-textarea {
    min-height: 100px !important;
    font-size: 14px;
  }

  .composer-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  .composer-action-btn {
    width: 34px;
    height: 34px;
  }
}

/* ============================================================
   WIDGET & CAROUSEL RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .widget-card {
    border-radius: 12px;
  }

  .carousel-container {
    border-radius: 12px;
  }

  .slide-content h3 {
    font-size: 16px;
  }

  .slide-content p {
    font-size: 12px;
  }
}

/* ============================================================
   SEARCH DROPDOWN RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .search-dropdown {
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    max-height: 50vh !important;
    border-radius: 12px !important;
    z-index: 9999 !important;
  }
}

/* ============================================================
   ATTACHMENT POPUP RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .attachment-popup {
    max-width: 95vw;
    max-height: 80vh;
  }
}

/* ============================================================
   ALL MODALS & POPUPS — UNIVERSAL MOBILE RESPONSIVE
   Covers: Service Detail, Vendor Detail, Wizard Modal,
           Engagement Modal, Share Popup, Report Popup,
           Composer Modal, Link Dialog, Attachment Popup,
           Checkout Modal, Vendor Quick Profile
   ============================================================ */

/* ---- TABLET (≤ 1024px) ---- */
@media (max-width: 1024px) {

  /* ===== SERVICE DETAIL MODAL (View Detail popup) ===== */
  .service-detail-modal {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  .service-detail-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Wrapper padding */
  .sd-wrapper {
    padding: 20px 16px !important;
  }

  /* Main 2-column grid → single column stack */
  .sd-main-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Trust cards 3-column → 3 still on tablet */
  .sd-trust-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  /* Trust card items compact */
  .sd-trust-card {
    padding: 14px !important;
    min-height: 90px !important;
    gap: 8px !important;
  }

  /* FAQs / Value points 2-column → stack */
  .sd-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Carousel stays square on tablet (same as desktop) */
  .sd-carousel {
    aspect-ratio: 1 / 1 !important;
  }

  /* Title smaller */
  .sd-title {
    font-size: 24px !important;
  }

  /* Shield price */
  .sd-shield-price {
    font-size: 32px !important;
  }

  /* Pricing row */
  .sd-pricing {
    padding: 20px !important;
  }

  .sd-pricing-row {
    gap: 16px !important;
  }

  /* Close button always accessible */
  .service-detail-close {
    top: 8px !important;
    right: 8px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    background: rgba(0,0,0,.55) !important;
    color: #fff !important;
    z-index: 100 !important;
    position: fixed !important;
    border: 1px solid rgba(255,255,255,.3) !important;
  }

  /* ===== VENDOR DETAIL MODAL ===== */
  .vendor-detail-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .vendor-detail-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .vendor-detail-close {
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
  }

  /* ===== WIZARD MODAL (Appointment, Live Session) ===== */
  .wizard-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .wizard-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 95vh !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .wizard-header {
    padding: 16px 20px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--panel) !important;
  }

  .wizard-body,
  .wizard-content {
    padding: 16px !important;
  }

  .wizard-footer {
    padding: 12px 16px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--panel) !important;
  }

  .wizard-modal.doctor-info-modal {
    max-height: 90vh !important;
  }

  .wizard-modal.cancel-modal {
    max-height: 70vh !important;
    border-radius: 16px !important;
  }

  .wizard-modal.history-modal {
    max-height: 90vh !important;
  }

  /* ===== ENGAGEMENT MODALS ===== */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .modal-content.participation-modal {
    max-height: 90vh !important;
  }

  .modal-header {
    padding: 14px 16px !important;
  }

  .modal-header h2 {
    font-size: 16px !important;
  }

  .modal-body {
    padding: 16px !important;
  }

  .modal-close {
    width: 32px !important;
    height: 32px !important;
  }

  /* ===== SHARE POPUP ===== */
  .share-popup-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .share-popup {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 80vh !important;
  }

  /* ===== REPORT POPUP ===== */
  .report-popup-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .report-popup {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
  }

  /* ===== LINK DIALOG ===== */
  .link-dialog-overlay {
    padding: 12px !important;
  }

  .link-dialog {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
  }

  /* ===== COMPOSER MODAL ===== */
  .composer-modal-content {
    width: 95vw !important;
    max-width: none !important;
    border-radius: 16px !important;
    max-height: 90vh !important;
  }
}

/* ---- MOBILE (≤ 768px) — compact ---- */
@media (max-width: 768px) {

  /* ===== SERVICE DETAIL MODAL ===== */
  .sd-wrapper {
    padding: 14px 10px !important;
  }

  .sd-main-grid {
    gap: 14px !important;
  }

  /* Trust cards → 2 columns on phone */
  .sd-trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .sd-trust-card {
    padding: 10px !important;
    min-height: 74px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  /* Trust card icon smaller */
  .sd-trust-card div[style*="width: 36px"] {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }

  /* Trust card label */
  .sd-trust-card div[style*="text-transform: uppercase"] {
    font-size: 9px !important;
    letter-spacing: 0.3px !important;
  }

  /* Trust card number */
  .sd-trust-card div[style*="font-size: 28px"],
  .sd-trust-card div[style*="font-size: 17px"] {
    font-size: 18px !important;
  }

  /* Carousel stays square on mobile (same as desktop) */
  .sd-carousel {
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
  }

  /* Title on phone */
  .sd-title {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }

  /* Shield price */
  .sd-shield-price {
    font-size: 26px !important;
  }

  /* Pricing section */
  .sd-pricing {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .sd-pricing-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Stats grid */
  .sd-stats-grid {
    gap: 10px !important;
  }

  .sd-stats-grid > div {
    padding: 14px !important;
  }

  /* Action buttons */
  .sd-actions {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .sd-actions button {
    font-size: 14px !important;
    padding: 12px 16px !important;
  }

  /* Right column sections */
  .sd-right-col > div {
    margin-bottom: 20px !important;
  }

  /* Close button on mobile */
  .service-detail-close {
    top: 6px !important;
    right: 6px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }

  /* Vendor detail — slide-up sheet */
  .vendor-detail-content {
    max-height: 88vh !important;
  }

  /* ===== WIZARD MODAL ===== */
  .wizard-header {
    padding: 12px 16px !important;
  }

  .wizard-header h2,
  .wizard-header h3 {
    font-size: 16px !important;
  }

  .wizard-close-btn {
    width: 30px !important;
    height: 30px !important;
  }

  .wizard-body,
  .wizard-content {
    padding: 12px !important;
  }

  /* ===== ENGAGEMENT MODAL ===== */
  .modal-header h2 {
    font-size: 15px !important;
  }

  .modal-body {
    padding: 12px !important;
  }

  /* ===== ATTACHMENT POPUP ===== */
  .attachment-popup-overlay {
    padding: 0 !important;
  }

  .attachment-popup {
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  /* ===== COMPOSER ===== */
  .composer-modal-content {
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ---- VERY SMALL (≤ 420px) ---- */
@media (max-width: 420px) {

  .sd-wrapper {
    padding: 10px 6px !important;
  }

  .sd-title {
    font-size: 18px !important;
  }

  .sd-shield-price {
    font-size: 22px !important;
  }

  /* Trust cards single column */
  .sd-trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .sd-trust-card {
    padding: 8px !important;
    min-height: 64px !important;
  }

  /* FAQ / value sections */
  .sd-faq-grid > div {
    padding: 10px !important;
  }

  /* Stats grid */
  .sd-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Actions stack */
  .sd-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .sd-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Wizard — full-screen */
  .wizard-modal {
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* Engagement modal — full-screen */
  .modal-content {
    max-height: 100vh !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Checkout success order grid */
  .sd-order-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================
   WIZARD STEP PROGRESS — MOBILE OPTIMISATIONS
   ============================================================ */
@media (max-width: 768px) {
  .wizard-progress {
    gap: 2px !important;
  }

  .wizard-step-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  .wizard-step-label {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .wizard-step-line {
    margin: 0 2px !important;
  }

  .wizard-step {
    gap: 4px !important;
    min-width: 44px !important;
  }

  .wizard-step-header h2 {
    font-size: 18px !important;
  }

  .wizard-step-header p {
    font-size: 13px !important;
  }

  .wizard-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .wizard-actions .btn {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .wizard-step-label {
    display: none !important;
  }

  .wizard-step-circle {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
}


/* ============================================================
   ANALYTICS & PROFILE PAGE — COMPREHENSIVE RESPONSIVE
   Covers: profile-container, insights-grid, charts-grid,
           engagement-stats, summary-card, chart-container,
           profile-header-section, section titles
   ============================================================ */

/* ---- TABLET (≤ 1024px) ---- */
@media (max-width: 1024px) {

  /* Profile container — moderate padding */
  .profile-container {
    padding: 24px 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Analytics header — slightly compact */
  .profile-header-section {
    padding: 20px !important;
    margin-bottom: 16px !important;
  }

  .profile-header-content {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* Section titles */
  .section-title {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }

  .section-subtitle {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Insights — 2 columns on tablet */
  .insights-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .insight-summary-card {
    padding: 20px !important;
    gap: 14px !important;
  }

  .summary-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }

  .summary-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .summary-label {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
  }

  .summary-value {
    font-size: 28px !important;
  }

  /* Charts — 2 columns on tablet, contained */
  .charts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .chart-card {
    padding: 20px !important;
    overflow: hidden !important;
  }

  .chart-header {
    margin-bottom: 14px !important;
  }

  .chart-title {
    font-size: 16px !important;
  }

  .chart-subtitle {
    font-size: 12px !important;
  }

  /* Chart canvas container — prevent overflow */
  .chart-container {
    height: 260px !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .chart-container canvas {
    max-width: 100% !important;
  }

  /* Engagement summary */
  .summary-card {
    padding: 24px !important;
  }

  .summary-card-title {
    font-size: 20px !important;
  }

  .summary-card-subtitle {
    font-size: 13px !important;
  }

  .engagement-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  .engagement-stat {
    padding: 16px !important;
    gap: 12px !important;
    border-radius: 14px !important;
  }

  .stat-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
  }

  .stat-value {
    font-size: 24px !important;
  }

  .stat-label {
    font-size: 12px !important;
  }
}

/* ---- SMALL TABLET / LARGE PHONE (≤ 768px) ---- */
@media (max-width: 768px) {

  .profile-container {
    padding: 16px 12px !important;
    padding-bottom: 80px !important; /* space for bottom nav */
  }

  /* Analytics header — stack on mobile */
  .profile-header-section {
    padding: 16px !important;
    margin-bottom: 14px !important;
  }

  /* Analytics header — stack on mobile */
  .analytics-header-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .analytics-header-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
  }

  .analytics-header-icon svg {
    width: 26px !important;
    height: 26px !important;
  }

  .profile-name {
    font-size: 22px !important;
    margin: 0 !important;
  }

  .analytics-header-desc {
    font-size: 13px !important;
    margin: 4px 0 0 0 !important;
  }

  /* Section titles */
  .section-title {
    font-size: 20px !important;
  }

  .section-subtitle {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  /* Insights — single column on mobile */
  .insights-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .insight-summary-card {
    padding: 16px !important;
    gap: 14px !important;
    flex-direction: row !important;
  }

  .summary-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  .summary-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .summary-label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  .summary-value {
    font-size: 26px !important;
  }

  /* Charts — single column, full width */
  .charts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .chart-card {
    padding: 16px !important;
    overflow: hidden !important;
  }

  .chart-header {
    margin-bottom: 12px !important;
  }

  .chart-title {
    font-size: 15px !important;
  }

  .chart-subtitle {
    font-size: 11px !important;
  }

  .chart-container {
    height: 220px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Engagement summary */
  .summary-card {
    padding: 20px !important;
  }

  .summary-card-header {
    margin-bottom: 16px !important;
  }

  .summary-card-title {
    font-size: 18px !important;
  }

  .summary-card-subtitle {
    font-size: 12px !important;
  }

  .engagement-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .engagement-stat {
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }

  .stat-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .stat-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .stat-value {
    font-size: 22px !important;
  }

  .stat-label {
    font-size: 11px !important;
  }

  /* Profile settings page responsive */
  .profile-settings-section .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .settings-card-compact {
    padding: 14px !important;
  }
}

/* ---- MOBILE SMALL (≤ 480px) ---- */
@media (max-width: 480px) {

  .profile-container {
    padding: 12px 8px !important;
    padding-bottom: 76px !important;
  }

  .profile-header-section {
    padding: 14px 12px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .analytics-header-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .analytics-header-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .profile-name {
    font-size: 20px !important;
  }

  .analytics-header-desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Section titles */
  .section-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .section-subtitle {
    font-size: 12px !important;
    margin-bottom: 14px !important;
  }

  /* Insights */
  .insights-grid {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .insight-summary-card {
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }

  .insight-summary-card:hover {
    transform: none !important;
  }

  .summary-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }

  .summary-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .summary-label {
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 3px !important;
  }

  .summary-value {
    font-size: 22px !important;
  }

  /* Charts */
  .charts-grid {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .chart-card {
    padding: 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .chart-header {
    margin-bottom: 10px !important;
  }

  .chart-title {
    font-size: 14px !important;
  }

  .chart-subtitle {
    font-size: 10px !important;
  }

  .chart-container {
    height: 200px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Engagement summary */
  .summary-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .summary-card-header {
    margin-bottom: 14px !important;
  }

  .summary-card-title {
    font-size: 16px !important;
  }

  .summary-card-subtitle {
    font-size: 11px !important;
  }

  .engagement-stats {
    gap: 8px !important;
  }

  .engagement-stat {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  .engagement-stat:hover {
    transform: none !important;
  }

  .stat-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  .stat-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .stat-value {
    font-size: 20px !important;
  }

  .stat-label {
    font-size: 10px !important;
  }

  /* Card styling */
  .card {
    border-radius: 12px !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* ---- VERY SMALL (≤ 380px — iPhone SE, Galaxy S mini) ---- */
@media (max-width: 380px) {

  .profile-container {
    padding: 8px 6px !important;
    padding-bottom: 72px !important;
  }

  .profile-header-section {
    padding: 12px 10px !important;
    margin-bottom: 10px !important;
  }

  .analytics-header-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .analytics-header-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .profile-name {
    font-size: 18px !important;
  }

  .analytics-header-desc {
    font-size: 11px !important;
  }

  /* Section titles */
  .section-title {
    font-size: 16px !important;
  }

  .section-subtitle {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }

  /* Insights — compact horizontal layout */
  .insights-grid {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .insight-summary-card {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  .summary-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }

  .summary-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .summary-label {
    font-size: 9px !important;
  }

  .summary-value {
    font-size: 20px !important;
  }

  /* Charts — super compact */
  .charts-grid {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .chart-card {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .chart-header {
    margin-bottom: 8px !important;
  }

  .chart-title {
    font-size: 13px !important;
  }

  .chart-subtitle {
    font-size: 9px !important;
  }

  .chart-container {
    height: 170px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Engagement summary */
  .summary-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .summary-card-title {
    font-size: 14px !important;
  }

  .summary-card-subtitle {
    font-size: 10px !important;
  }

  .engagement-stats {
    gap: 6px !important;
  }

  .engagement-stat {
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  .stat-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
  }

  .stat-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .stat-value {
    font-size: 18px !important;
  }

  .stat-label {
    font-size: 9px !important;
  }
}

/* ============================================================
   COLLAPSIBLE FILTERS — MOBILE
   On mobile, filter sections collapse behind a toggle button.
   Desktop: completely hidden toggle, normal filter display.
   ============================================================ */

/* Toggle button & mobile-only buttons: hidden on desktop */
.mobile-filter-toggle,
.mobile-my-sessions {
  display: none;
}

@media (max-width: 768px) {
  /* Show toggle button on mobile */
  .mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid #7c3aed;
    background: #f5f3ff;
    color: #7c3aed;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
  }

  [data-theme="dark"] .mobile-filter-toggle {
    background: #2d1b4e;
    border-color: #8b5cf6;
    color: #8b5cf6;
  }

  .mobile-filter-toggle:hover {
    background: #ede9fe;
    border-color: #6d28d9;
  }

  .mobile-filter-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .mobile-filter-toggle svg.chevron {
    transition: transform 0.3s ease;
  }

  .mobile-filter-toggle.active {
    background: #7c3aed;
    color: white;
    border-color: #7c3aed;
  }

  [data-theme="dark"] .mobile-filter-toggle.active {
    background: #7c3aed;
    color: white;
  }

  .mobile-filter-toggle.active svg.chevron {
    transform: rotate(180deg);
  }

  /* Collapsible content: hidden by default on mobile */
  .mobile-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
    opacity: 0;
  }

  .mobile-collapsible.expanded {
    max-height: 2000px;
    opacity: 1;
  }

  /* Page headers with filter toggle */
  .page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 12px 0 !important;
  }

  .page-header h1 {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }

  .page-header p {
    font-size: 12px !important;
  }

  /* ── ASSOCIATED OFFERINGS: collapse filter card ── */
  .search-filters-card .filter-chips {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
  }

  .search-filters-card .filter-chips.expanded {
    max-height: 500px;
    opacity: 1;
  }

  /* ── LIVE SESSIONS: collapse category filter ── */
  .filters-section-wrapper .category-filter-card {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .filters-section-wrapper .filters-header {
    display: none !important;
  }

  /* Mobile "My Sessions" button: visible on mobile, hidden on desktop */
  .mobile-my-sessions {
    display: inline-flex !important;
  }

  .mobile-my-sessions span {
    display: none;
  }

  .mobile-my-sessions {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    min-width: unset !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }

  .filters-section-wrapper .category-filter-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
    padding: 0 !important;
  }

  .filters-section-wrapper .category-filter-list.expanded {
    max-height: 600px;
    opacity: 1;
    padding: 12px !important;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-top: 8px;
  }

  [data-theme="dark"] .filters-section-wrapper .category-filter-list.expanded {
    background: #1f2937;
    border-color: #374151;
  }

  /* ── APPOINTMENTS: collapse category filter ── */
  .top-action-bar .category-filter-card {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .top-action-bar .desktop-filter-header {
    display: none !important;
  }

  .top-action-bar .category-filter-header {
    display: none !important;
  }

  .top-action-bar .category-filter-buttons {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
  }

  .top-action-bar .category-filter-buttons.expanded {
    max-height: 800px;
    opacity: 1;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-top: 8px;
  }

  [data-theme="dark"] .top-action-bar .category-filter-buttons.expanded {
    background: #1f2937;
    border-color: #374151;
  }

  /* Hide the "My Appointments" button text on small phones */
  .my-appointments-btn span {
    display: none;
  }

  .my-appointments-btn {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    min-width: unset !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }

  /* ── BLOG: hide sidebar entirely on mobile — content moved via JS to inline panel ── */
  .blogs-sidebar {
    display: none !important;
  }

  /* ── BLOG: mobile Authors & Tags inline panel (below header, above blog cards) ── */
  .blog-mobile-authors-panel {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
    padding: 0 !important;
    margin: 0 !important;
  }

  .blog-mobile-authors-panel.expanded {
    max-height: 2000px;
    opacity: 1;
    padding: 12px !important;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  [data-theme="dark"] .blog-mobile-authors-panel.expanded {
    background: #1f2937;
    border-color: #374151;
  }

  /* Blog categories filter: zero-height when collapsed */
  .categories-filter-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .categories-filter-container.expanded {
    max-height: 600px;
    opacity: 1;
    padding: 12px !important;
    margin-bottom: 8px !important;
    background: #ffffff;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px;
  }

  [data-theme="dark"] .categories-filter-container.expanded {
    background: #1f2937;
    border-color: #374151 !important;
  }
}