/* public/css/mobile-ios.css
   Dedicated mobile stylesheet for iOS-native appearance and fluid dynamics.
   Automatically scoped via link media="screen and (max-width: 768px)".
*/

:root {
  --mobile-page-padding: var(--space-md) !important; /* 16px page padding on mobile to align with header icons */
}

/* 1. Global iOS Aesthetics, GPU Acceleration & Kinetic Scrolling */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent !important;
  box-sizing: border-box !important;
}

/* Active tap feedback base transition (spring bounce back on release) */
a,
button,
[role="button"],
.cs-sheet-card,
.cs-card,
.sl-card,
.msg-filter-btn,
.dropdown-item,
.message-thread,
.favourite-btn,
.modal-favourite-btn,
.pf-facts__link,
.pp-link,
.tm-action-btn,
.dash-tile {
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.24s ease !important;
}

/* Active tap feedback state (quick shrink on press) */
a:active,
button:active,
[role="button"]:active,
.cs-sheet-card:active,
.cs-card:active,
.sl-card:active,
.msg-filter-btn:active,
.dropdown-item:active,
.message-thread:active,
.favourite-btn:active,
.modal-favourite-btn:active,
.pf-facts__link:active,
.pp-link:active {
  opacity: 0.7 !important;
  transform: scale(0.96) !important;
  transition: opacity 0.08s ease-out, transform 0.08s ease-out !important;
}

/* Kinetic momentum scrolling on all scrollable views */
html,
body,
.chat-shell,
.cs-conversation,
.messages-layout,
.messages-sidebar,
.messages-list,
.message-thread,
.conversation-messages,
.modal-content,
.cs-drawer,
.sl-grid,
.profile-page,
.contact-page,
.help-content,
.admin-help__card,
.dash-preview__card {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
}

/* Force GPU composite layers rendering on sticky and floating elements */
.mobile-header,
.cs-input,
.conversation-header,
.conversation-input-area,
.modal-close,
.modal-favourite-btn,
.favourite-btn,
.btn--cta,
#modalActions {
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* Enforce perfect circular pills, tags and chips */
.badge,
.tag,
.pill,
.chip,
.clinic-badge,
.modal-badge,
.practitioner-badge,
.gal-thumb,
.dash-premium-boost-banner,
.mark-all-read-btn,
.msg-filter-btn,
.eq-chip,
.gal-thumb {
  border-radius: 9999px !important;
}

/* 2. Layout Height, Viewports & Footer De-cluttering */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Completely remove the redundant bottom navigation footer */
.mobile-bottom-nav,
#mobileBottomNav {
  display: none !important;
}

/* Reclaim vertical page height spent on footer spacing */
.app-container {
  min-height: 100dvh !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.main-content {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.chat-shell {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100dvh !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  overflow: hidden !important;
  transform: none !important;
  will-change: auto !important;
}

.contact-page {
  min-height: calc(100dvh - var(--mobile-header, 56px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.messages-page {
  min-height: 100dvh !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* 3. Spacing & Layout Alignment (Single Source of Truth) */
/* Unified width and alignment rules for all views (Single Source of Truth) */
.profile-page,
.contact-page,
.messages-layout,
#messagesPage .page-header,
.messages-sidebar.conv-open + .conversation-view,
.about-page,
.faqs-page,
.pricing-page,
.help-page,
.roi-page,
.why-join-page,
.blog-page,
.privacy-page,
.terms-page,
.disclaimer-page,
.how-it-works-page,
.profile-content,
#myReviewsPage .page-header,
.notfound-card,
.shortlist-page,
.admin-content {
  max-width: var(--mobile-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Page inner content paddings matching 1:1 */
.profile-page,
.contact-page,
.messages-layout,
#messagesPage .page-header,
.about-page,
.faqs-page,
.pricing-page,
.help-page,
.roi-page,
.why-join-page,
.blog-page,
.privacy-page,
.terms-page,
.disclaimer-page,
.how-it-works-page,
.profile-content,
#myReviewsPage .page-header,
.notfound-card,
.shortlist-page,
.admin-content {
  padding: 0 var(--mobile-page-padding) !important;
}

/* Enquiries page is viewport-locked and needs padding: 0 */
body[data-page="enquiries"] .admin-content {
  padding: 0 !important;
}

/* Page-section wrapper padding resets */
#contactPage.page-section,
#messagesPage.page-section {
  padding: 0 !important;
}

.messages-layout {
  border: none !important;
  border-radius: 0 !important;
  height: var(--visual-viewport-height, 100dvh) !important;
}

.messages-sidebar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-right: none !important;
}

.messages-sidebar.conv-open + .conversation-view {
  padding: 0 !important;
  left: 50% !important;
  transform: translate3d(-50%, 0, 0) !important;
  right: auto !important;
  top: 0 !important;
  height: var(--visual-viewport-height, 100dvh) !important;
}

.conversation-view,
.conversation-messages,
.conversation-input-area,
.conv-input-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

.conversation-messages {
  padding: 16px !important;
}

.conv-message {
  max-width: 90% !important;
}

/* 4. Dropdowns & Alignments (iOS custom chevrons) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
.pf-input,
.authm__input {
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

select,
textarea {
  line-height: normal !important;
  box-sizing: border-box !important;
}

select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px !important;
  padding-right: 40px !important;
}

/* Perfect alignment for circular action button sizing */
.conv-send-btn,
.send-btn,
.cs-send,
.favourite-btn,
.modal-favourite-btn,
.cs-mic {
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  aspect-ratio: 1/1 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Prevent empty-state chatbot transform from creating containing block for absolute legal text */
.chat-shell.is-empty .cs-input {
  transform: none !important;
  will-change: auto !important;
}

/* Perfect circular geometry for all avatars on mobile */
.conversation-avatar,
.typing-avatar,
.eq-list__avatar,
.conv-msg-avatar,
.rv-item__avatar,
.sb-account__head-avatar,
.tm-item__avatar {
  border-radius: 50% !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.conversation-avatar {
  width: 40px !important;
  height: 40px !important;
}

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

.eq-list__avatar {
  width: 36px !important;
  height: 36px !important;
}

.eq-list__avatar--lg {
  width: 48px !important;
  height: 48px !important;
}

.conv-msg-avatar {
  width: 32px !important;
  height: 32px !important;
}

.rv-item__avatar {
  width: 36px !important;
  height: 36px !important;
}

.sb-account__head-avatar {
  width: 36px !important;
  height: 36px !important;
}

.tm-item__avatar {
  width: 40px !important;
  height: 40px !important;
}

/* 5. Unified Page Headings & Typography Reset */
h1, h2, .pp-name, .sl-title, .inner-page-header h1 {
  font-family: var(--font-display) !important;
  text-align: center !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: -0.01em !important;
}

/* 6. Surgical UI/UX Layout fixes */
.cs-sheet-card.has-badge,
.cs-card.has-badge {
  padding-top: 38px !important;
}

.cs-sheet-card.has-badge .clinic-badge.spotlight,
.cs-card.has-badge .clinic-badge.spotlight {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 10 !important;
  margin: 0 !important;
}

/* 6. Phase 14 Native UX Polish */

/* Center mobile header title exactly like iOS native navigation bar */
.mobile-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  padding: 0 var(--space-md) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
  will-change: transform !important;
  transform: translate3d(0, 0, 0) !important;
}

.mobile-header-title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--text, #1c1c1e) !important;
  text-align: center !important;
  flex-grow: 1 !important;
  margin: 0 !important;
}

/* Centred brand wordmark (home + marketing). Sits in the same centre slot as
   the title, between the 44px menu button and the 44px spacer, so it stays
   optically centred. Minimalist height; the wordmark's own ratio sets width. */
.mobile-header .mobile-header__brand {
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  text-decoration: none !important;
  min-width: 0 !important;
}
.mobile-header .mobile-header__wordmark {
  height: 18px !important;
  width: auto !important;
  display: block !important;
}

/* Center elements perfectly by ensuring left and right children are exactly 44x44px */
.mobile-header .mobile-menu-btn,
.mobile-header .hdr-icon-btn,
.mobile-header .mobile-header-spacer {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary, #6f6f6a) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
}

.mobile-header .mobile-menu-btn {
  margin-left: -13px !important;
}

.mobile-header .hdr-icon-btn,
.mobile-header .mobile-header-spacer {
  margin-right: -12px !important;
}

.mobile-header .mobile-menu-btn:active,
.mobile-header .hdr-icon-btn:active {
  background: rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="dark"] .mobile-header .mobile-menu-btn:active,
html[data-theme="dark"] .mobile-header .hdr-icon-btn:active,
[data-theme="dark"] .mobile-header .mobile-menu-btn:active,
[data-theme="dark"] .mobile-header .hdr-icon-btn:active {
  background: rgba(255, 255, 255, 0.1) !important;
}

.mobile-logo {
  display: none !important;
}

/* Patient homepage chat-shell top spacing to offset fixed mobile header */
#chatShell,
#regShell {
  padding-top: 56px !important;
}


/* Drawer close button and bottom links */
.cs-drawer__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--color-divider, var(--border-light, rgba(var(--ink, 0), 0.06))) !important;
}

.cs-drawer__close {
  background: none !important;
  border: none !important;
  color: var(--text-secondary, #8e8e93) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  margin: -8px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}

.cs-drawer__close:active {
  background: rgba(0, 0, 0, 0.05) !important;
}

.cs-drawer__nav {
  padding: 8px 20px !important;
}

.cs-drawer__link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--color-divider, var(--border-light, rgba(var(--ink, 0), 0.06))) !important;
  color: var(--text, #1c1c1e) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: var(--weight-medium, 500) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.cs-drawer__link:last-child {
  border-bottom: none !important;
}

.cs-drawer__link:active {
  background: transparent !important;
  opacity: 0.7 !important;
}

.cs-drawer__link.is-active {
  background: transparent !important;
  color: var(--primary, #26786A) !important;
}

.cs-drawer__link:focus,
.cs-drawer__link:focus-visible,
.cs-drawer__link.is-active:focus,
.cs-drawer__link.is-active:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.cs-drawer__foot {
  padding: 16px 20px !important;
  margin-top: auto !important;
}

.cs-drawer__bottom-links {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

.cs-drawer__bottom-link {
  display: flex !important;
  align-items: center !important;
  padding: 12px 0 !important;
  font-size: 14px !important;
  font-weight: var(--weight-medium, 500) !important;
  color: var(--text, #1c1c1e) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--color-divider, var(--border-light, rgba(var(--ink, 0), 0.06))) !important;
  background: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: left !important;
  width: 100% !important;
  cursor: pointer !important;
}

.cs-drawer__bottom-link:last-child {
  border-bottom: none !important;
}

.cs-drawer__bottom-link:active {
  background: none !important;
  opacity: 0.7 !important;
}

.cs-drawer__bottom-signout {
  color: var(--color-danger-strong, #dc2626) !important;
}

/* Perfect Circles Send Button Geometry Locks */
.conv-send-btn,
.send-btn,
.cs-send,
#sendBtnMobile,
#convSendBtn,
#sendBtn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1/1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Microphone Symmetry (Handled by unified chat input styles) */

/* Input Text Centering globally on mobile viewports */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
.pf-input,
.authm__input,
.pp-input {
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

select,
textarea {
  line-height: normal !important;
  box-sizing: border-box !important;
}

/* Pill Padding overrides for inbox filter pills and mark-all-read button */
.mark-all-read-btn,
.msg-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  height: 36px !important;
  min-height: 36px !important;
  min-width: auto !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

/* Contact Page Flattening */
.contact-page {
  background: var(--page-bg) !important;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(100dvh - var(--mobile-header, 56px)) !important;
  display: flex !important;
  flex-direction: column !important;
}

.contact-content {
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.contact-form-success {
  background: transparent !important;
  border: none !important;
  padding: 24px 0 !important;
  box-shadow: none !important;
}

/* Shortlist Card Redesign & Inset Swipe BG */
.shortlist-page {
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
}

.sl-card {
  border: 1px solid var(--border-light, #e0ddd8) !important;
  background: var(--surface, #ffffff) !important;
  border-radius: var(--radius-xl, 16px) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  padding: 0 !important;
}

body[data-theme="dark"] .sl-card {
  background: #2c2c2e !important;
}

.sl-card__swipe-wrapper {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-xl, 16px) !important;
  background: var(--surface, #ffffff) !important;
  width: 100% !important;
  height: 100% !important;
}

body[data-theme="dark"] .sl-card__swipe-wrapper {
  background: #2c2c2e !important;
}

.sl-card__photo {
  width: 100% !important;
  height: 200px !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

.sl-card__body {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sl-card__name {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text, #1c1c1e) !important;
}

.sl-card__meta {
  font-size: 14px !important;
  color: var(--text-secondary, #8e8e93) !important;
  margin: 0 !important;
}

.sl-card__rating {
  font-size: 14px !important;
  margin: 4px 0 0 0 !important;
}

.sl-note {
  margin-top: 12px !important;
  border-radius: var(--radius-md, 8px) !important;
  border: 1px solid var(--border-light, #e0ddd8) !important;
  background: var(--bg-warm, #faf9f6) !important;
}

.sl-card__actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 16px !important;
  width: 100% !important;
}

.sl-card__actions button,
.sl-card__actions .sl-link {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-lg, 12px) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.sl-card__actions button[data-act="enquire"] {
  background: var(--primary, #26786A) !important;
  color: var(--text-inverse, #ffffff) !important;
  border: none !important;
}

.sl-card__actions button[data-act="enquire"]:active {
  background: var(--primary-dark, #206357) !important;
}

.sl-card__actions .sl-link {
  background: var(--bg-warm, #faf9f6) !important;
  color: var(--text, #1c1c1e) !important;
  border: 1px solid var(--border-light, #e0ddd8) !important;
  text-decoration: none !important;
}

.sl-card__actions .sl-link:active {
  background: rgba(0, 0, 0, 0.05) !important;
}

.sl-card__saved {
  margin: 4px 0 0 0 !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  font-size: 12px !important;
  color: var(--text-faint, #b5ad9f) !important;
}

.sl-card__swipe-bg {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  bottom: 1px !important;
  width: 100px !important;
  background: #dc2626 !important;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0 !important;
}

/* Scoped overrides to remove redundant duplicate titles on mobile viewports.
   These pages still show their title in the mobile header, so hiding the body
   title avoids duplication. (Legal pages show the wordmark in the header now,
   so their .legal-header h1 stays VISIBLE — deliberately not listed here.) */
.shortlist-page .sl-head,
.profile-page .pp-head,
#messagesPage .page-header-row > div:first-child,
#myReviewsPage .page-header,
.inner-page-header .section-label {
  display: none !important;
}

#messagesPage .mark-all-read-btn {
  margin-top: 0 !important;
  align-self: flex-end !important;
}

/* 1:1 Contact Form matching Profile Page styling on mobile */
.contact-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  margin-bottom: 40px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.contact-form .form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

.contact-form .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
}

.contact-form .form-group label {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin-bottom: 0 !important;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  font-family: inherit !important;
  font-size: 16px !important;
  padding: var(--space-sm) 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  outline: none !important;
  color: var(--text) !important;
  transition: border-color 0.15s !important;
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.contact-form input[type="text"]::placeholder,
.contact-form input[type="email"]::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-faint) !important;
}

/* Captcha overrides */
.contact-form .captcha-group {
  gap: 12px !important;
}

.contact-form .captcha-container {
  margin-top: 8px !important;
  gap: var(--space-md) !important;
}

.contact-form .captcha-container input {
  border-bottom: 1px solid var(--border) !important;
  text-align: center !important;
  max-width: 100px !important;
}

.contact-form .contact-locked-input {
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: not-allowed !important;
}

/* Align active conversation input area padding on mobile viewports */
.messages-sidebar.conv-open + .conversation-view .conversation-input-area {
  padding: 8px var(--space-md) !important;
}

/* Enquiries/Messages Layout, Width & Scroll Polish */
html:has(#messagesPage),
body:has(#messagesPage) {
  overflow: hidden !important;
  height: 100dvh !important;
  position: fixed !important;
  width: 100% !important;
}

#messagesPage {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100dvh - var(--mobile-header, 56px)) !important;
  overflow: hidden !important;
  background: var(--page-bg) !important;
}

#messagesPage .page-header {
  flex-shrink: 0 !important;
  margin-bottom: var(--space-md) !important;
  padding: var(--space-md) var(--space-lg) 0 !important;
  background: var(--page-bg) !important;
}

.messages-layout {
  flex: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--page-bg) !important;
}

.messages-sidebar {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--page-bg) !important;
}

.messages-list {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: var(--page-bg) !important;
  padding-bottom: var(--space-xl) !important;
}

.messages-search {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-sizing: border-box !important;
  box-shadow: var(--shadow-sm) !important;
}

.messages-filter {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--page-bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

.message-thread {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--page-bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

.message-thread.active {
  background: var(--primary-subtle) !important;
}

.message-thread.unread {
  background: rgba(45, 139, 122, 0.04) !important;
}

.messages-sidebar.conv-open + .conversation-view {
  background: var(--surface) !important;
}

/* Conversation Header Overhaul */
.mobile-header,
.messages-sidebar.conv-open + .conversation-view .conversation-header {
  height: 56px !important;
  padding: 0 var(--space-md) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
}

.messages-sidebar.conv-open + .conversation-view .conversation-header {
  gap: var(--space-sm) !important;
}

.back-to-list,
.conv-action-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
}

.back-to-list {
  margin-left: -20px !important; /* Visually aligns arrow tip (x=9 in 24px viewbox, maps to 7.5px inset) to 16px margin */
}

.conv-action-btn {
  margin-right: -13px !important; /* Visually aligns right edge of SVG icon (centered in 44px button) to 16px margin */
}

.back-to-list:active,
.conv-action-btn:active {
  background: transparent !important;
  opacity: 0.7 !important;
}

.conversation-clinic-info {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-sm) !important;
  flex: 1 !important;
  min-width: 0 !important;
  margin-left: -12px !important;
}

.conversation-clinic-details {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#convClinicName {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.conversation-status {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
}

.conversation-status .status-dot {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-top: -2px !important;
  margin-right: 4px !important;
}

.conversation-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-right: -8px !important;
}

/* Unified Chat Inputs (Homepage & Conversation View) */
.cs-input__wrap,
.conv-input-wrapper {
  display: flex !important;
  align-items: flex-end !important;
  padding: 6px !important;
  border-radius: 28px !important;
  gap: var(--space-xs, 8px) !important;
  box-sizing: border-box !important;
}

.cs-input__wrap {
  background: #fff !important;
}

.conv-input-wrapper {
  background: var(--bg-warm) !important;
}

.cs-textarea,
.conv-input {
  padding: 12px 4px !important;
  font-size: 16px !important;
  line-height: 20px !important;
  min-height: 20px !important;
  background: transparent !important;
  color: var(--text) !important;
  box-sizing: border-box !important;
}

.cs-mic,
.conv-attach-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.2s !important;
}

.cs-mic:active,
.conv-attach-btn:active {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* 7. Cookie preferences manage modal bottom sheet */
.cb-modal {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
}

.cb-modal__panel {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: var(--mobile-radius-sheet) var(--mobile-radius-sheet) 0 0 !important;
  margin-bottom: 0 !important;
  margin-top: auto !important;
  max-height: 92vh !important;
  max-height: 92dvh !important;
  overflow-y: auto !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12) !important;
  animation: slideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1) !important;
  padding: var(--mobile-page-padding) !important;
  padding-bottom: calc(var(--space-2xl) + var(--mobile-safe-bottom)) !important;
}

.cb-modal__close {
  position: absolute !important;
  top: 18px !important;
  right: 2px !important; /* Visual right edge of "X" close icon aligned at 16px margin */
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: var(--mobile-radius-circle) !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--text-secondary, #6f6f6a) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cb-modal__close:active {
  background: rgba(0, 0, 0, 0.05) !important;
  opacity: 0.7 !important;
}

/* Typographic & Form Control Line-height updates */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
select,
textarea,
.pf-input,
.authm__input,
.pp-input {
  line-height: var(--mobile-lh-normal) !important;
}

h1, h2, .pp-name, .sl-title, .inner-page-header h1 {
  line-height: var(--mobile-lh-tight) !important;
}

/* Removed keyboard-open layout overrides to keep homepage layout elements static and rely on native viewport scroll */

/* Ensure the auth modal overlays follow visual viewport height dynamically to stay above simulated keyboard */
.authm {
  position: fixed !important;
  top: var(--visual-viewport-offset-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: var(--visual-viewport-height, 100dvh) !important;
  padding: 0 !important;
  align-items: flex-end !important;
  justify-content: center !important;
  display: flex !important;
  overflow: hidden !important;
}

.authm[hidden] {
  display: none !important;
}

.authm__title {
  text-align: left !important;
  font-family: var(--font-body) !important;
}

/* Scroll lock when chat shell is present */
html.html--chat-page,
body.body--chat-page {
  overflow: hidden !important;
  height: 100dvh !important;
  position: fixed !important;
  width: 100% !important;
}

/* Clinic registration header flow */
body:has(#regShell.keyboard-open) .mobile-header {
  display: none !important;
}
body:has(#regShell) .mobile-header {
  /* Inherit position: fixed !important; from general mobile-header style */
}
body:has(#regShell.is-empty) .mobile-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}

/* Native overscroll isolation for sheet and list containers to prevent layout viewport bounces */
.cs-conversation,
.cs-sheet__list,
.cs-drawer,
.reg-candidates,
.cb-modal__panel {
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}



/* Align chat bubbles to the bottom of the scroll area to prevent new chat messages from going under the header */
.chat-shell:not(.is-empty) .cs-conversation {
  display: flex !important;
  flex-direction: column !important;
}
.chat-shell:not(.is-empty) .cs-conversation > :first-child {
  margin-top: auto !important;
}

/* Clinic Admin Mobile Viewport Overrides (<= 768px) */
body[data-design="dash"] .admin-sidebar {
  display: none !important;
}

body[data-design="dash"] .admin-shell {
  display: block !important;
  width: 100% !important;
  min-height: 100dvh !important;
}

body[data-design="dash"] .admin-main {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  padding-top: 56px !important;
}

body[data-design="dash"] .admin-header {
  display: none !important;
}

body[data-design="dash"] .mobile-header {
  display: flex !important;
}

body[data-design="dash"] .admin-content {
  padding: 16px var(--mobile-page-padding) var(--space-xl) !important;
}

/* Grab handle for bottom sheets on mobile */
.sheet-grab-handle {
  width: 36px !important;
  height: 5px !important;
  background: var(--border-medium, rgba(0, 0, 0, 0.15)) !important;
  border-radius: 2.5px !important;
  margin: 10px auto 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
}


/* Places candidate card slide-up stagger */
.reg-candidate {
  animation: reg-candidate-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes reg-candidate-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Enquiries GPU-Accelerated 200vw sliding transition on Mobile */
body[data-page="enquiries"] {
  overflow-x: hidden !important;
}
body[data-page="enquiries"] .admin-shell,
body[data-page="enquiries"] .admin-main,
body[data-page="enquiries"] .admin-content {
  overflow-x: hidden !important;
}
body[data-page="enquiries"] .eq-shell {
  display: flex !important;
  width: 200vw !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
  overflow: hidden !important;
  min-height: calc(100dvh - 56px) !important;
  height: calc(100dvh - 56px) !important;
}
body[data-page="enquiries"] .eq-shell[data-has-selection="true"] {
  transform: translate3d(-100vw, 0, 0) !important;
}
body[data-page="enquiries"] .eq-list-pane,
body[data-page="enquiries"] .eq-detail-pane {
  display: flex !important;
  width: 100vw !important;
  max-width: 100vw !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Enquiries Swipe to Action */
.eq-list__item {
  position: relative !important;
  overflow: hidden !important;
}
.eq-list__swipe-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.eq-list__swipe-actions {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  z-index: 1 !important;
}
.eq-swipe-action {
  height: 100% !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.eq-swipe-action--read {
  background: #007aff !important; /* iOS blue */
}
.eq-swipe-action--archive {
  background: #ff9500 !important; /* iOS orange */
}
.eq-list__link {
  position: relative !important;
  z-index: 2 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Team Page Vertical Contact Cards on Mobile (<= 768px) */
.tm-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--space-sm) !important;
  padding: var(--space-md) !important;
  position: relative !important;
}
.tm-item__avatar {
  align-self: center !important;
  margin-bottom: var(--space-xs) !important;
}
.tm-item__meta {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.tm-item__role {
  width: 100% !important;
  margin-top: var(--space-xs) !important;
}
.tm-item__role select {
  width: 100% !important;
  text-align: center !important;
  text-align-last: center !important;
}
.tm-item__status {
  margin-top: var(--space-xs) !important;
  align-self: center !important;
}
.tm-menu {
  position: absolute !important;
  top: var(--space-md) !important;
  right: var(--space-md) !important;
}

/* ==========================================================================
   Clinic Admin Dashboard Grid Collapses on Mobile (<= 768px via media attribute on link)
   ========================================================================== */
body[data-page="dashboard"] .dash-hero,
body[data-page="dashboard"] .dash-grid-mid,
body[data-page="dashboard"] .dash-grid-intel,
body[data-page="dashboard"] .dash-grid-bottom {
  grid-template-columns: 1fr !important;
}

body[data-page="dashboard"] .dash-card--ring,
body[data-page="dashboard"] .dash-card--wide,
body[data-page="dashboard"] .dash-grid-intel > :last-child {
  grid-column: auto !important;
}

/* Adaptive Dark-Theme Glassmorphic Mobile Header & Conversation Header */
html[data-theme="dark"] .mobile-header,
[data-theme="dark"] .mobile-header,
html[data-theme="dark"] .messages-sidebar.conv-open + .conversation-view .conversation-header,
[data-theme="dark"] .messages-sidebar.conv-open + .conversation-view .conversation-header {
  background: rgba(28, 28, 30, 0.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .mobile-header-title,
[data-theme="dark"] .mobile-header-title {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .mobile-header button,
[data-theme="dark"] .mobile-header button,
html[data-theme="dark"] .conversation-header button,
[data-theme="dark"] .conversation-header button {
  color: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="dark"] .mobile-header button:active,
[data-theme="dark"] .mobile-header button:active,
html[data-theme="dark"] .conversation-header button:active,
[data-theme="dark"] .conversation-header button:active {
  color: #FFFFFF !important;
}

/* Unified Mobile Drawer System (Fixed & Context-Insulated) */
.cs-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100vw !important;
  z-index: 99999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.22s ease, visibility 0.22s !important;
}

.cs-drawer.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cs-drawer__backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100vw !important;
  background: rgba(0, 0, 0, 0.35) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  opacity: 1 !important;
  transition: opacity 0.22s ease !important;
}

.cs-drawer.hidden .cs-drawer__backdrop {
  opacity: 0 !important;
}

.cs-drawer__panel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: min(320px, 84vw) !important;
  background: var(--page-bg, #fdfbf8) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(0) !important;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1) !important;
  z-index: 100000 !important;
  box-sizing: border-box !important;
}

.cs-drawer.hidden .cs-drawer__panel {
  transform: translateX(-100%) !important;
}

/* Apple HIG Touch Target Correctness Overrides */
.pf-icon-btn,
.pf-tlist__edit-btn,
.pf-tlist__remove-btn,
.pf-tlist__remove-form {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}

.pf-photo-tile__btn--sm {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}

/* Enquiries Page Viewport-Locked Gutter Fix (prevent cascade override from dashboard rule) */
body[data-design="dash"][data-page="enquiries"] .admin-content {
  padding: 0 !important;
}

/* Dashboard Trend Chart X-Axis Mobile Compression to prevent grid horizontal overflow */
@media (max-width: 768px) {
  .dash-line__x span {
    display: none !important;
  }
  .dash-line__x span:nth-child(3n+1) {
    display: inline-block !important;
  }
}

/* Pixel-Perfect Alignments for All Close and Action Buttons (Single Source of Truth) */

/* Clara Chat Mobile Overlay Header & Close Button */
.mobile-chat-header {
  padding: var(--space-md) !important; /* Standardize horizontal padding to 16px */
}
.mobile-chat-header .mobile-chat-close {
  margin-right: -8px !important; /* Visual right edge of "X" close icon aligned at 16px margin */
}

/* Clinic Detail Modal Close Button */
.modal-close {
  right: 2px !important; /* Visual right edge of "X" close icon aligned at 16px margin */
}

/* Passwordless Auth Modal Close Button */
.authm__x {
  right: 14px !important; /* Visual right edge of "X" close icon aligned at modal's 22px margin */
}

/* Centering the Mobile Header to Align with Content Card on Tablets/Wider Mobile Viewports */
body:has(.profile-page) .mobile-header,
body:has(.contact-page) .mobile-header,
body:has(.about-page) .mobile-header,
body:has(.faqs-page) .mobile-header,
body:has(.pricing-page) .mobile-header,
body:has(.help-page) .mobile-header,
body:has(.roi-page) .mobile-header,
body:has(.why-join-page) .mobile-header,
body:has(.blog-page) .mobile-header,
body:has(.privacy-page) .mobile-header,
body:has(.terms-page) .mobile-header,
body:has(.disclaimer-page) .mobile-header,
body:has(.how-it-works-page) .mobile-header,
body:has(.shortlist-page) .mobile-header,
body:has(#myReviewsPage) .mobile-header,
body:has(.admin-content) .mobile-header {
  max-width: var(--mobile-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}