/* DHEERGAYUSH — global responsive layout (mobile + desktop) */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  overflow-y: auto;
  overscroll-behavior-y: auto;
}

/* ── Scroll hierarchy: inner regions scroll first, then page ── */
.dg-scroll-region,
.form-container,
.dg-form-panel,
.auth-form,
.login-card,
.card#loginCard,
#adminLoginContainer,
#custom-prejoin,
#paymentFormContainer,
.modal-content,
.reports-modal-content,
.diagnosis-modal-content,
.modal-body,
.prescription-modal .modal-content,
.checkout-grid .dg-form-panel,
#orderPaymentForm.dg-form-panel,
.dg-form-scroll {
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
  scroll-padding-bottom: max(20px, env(safe-area-inset-bottom));
  scroll-padding-top: 8px;
}

.dg-scroll-region {
  position: relative;
}

.dg-scroll-region.dg-scroll-has-more::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98) 20%,
    rgba(255, 255, 255, 0.72) 55%,
    transparent
  );
}

.dg-scroll-region.dg-scroll-at-bottom::after,
.dg-scroll-region:not(.dg-scroll-is-scrollable)::after {
  opacity: 0;
  visibility: hidden;
}

.dg-scroll-region.dg-scroll-has-more::before {
  content: 'Scroll for more';
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(60, 60, 60, 0.72);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(242, 103, 39, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dg-scroll-region.dg-scroll-at-bottom::before,
.dg-scroll-region:not(.dg-scroll-is-scrollable)::before {
  content: none;
}

@media (max-width: 768px) {
  .dg-scroll-region.dg-scroll-has-more::before {
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

.dg-page {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── Shared containers ── */
.container,
.dg-legal-wrap,
.admin-container,
.form-container,
.dg-form-panel {
  width: 100%;
  max-width: 100%;
}

.form-container,
.dg-form-panel {
  margin-left: auto;
  margin-right: auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Scrollable forms when fields/sections exceed the viewport */
.form-container,
.dg-form-panel,
.auth-form,
#custom-prejoin,
#paymentFormContainer,
.checkout-grid .dg-form-panel {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

#regdocsec .auth-section {
  width: 100%;
  max-height: none;
}

#regdocsec .auth-form.active,
#regdocsec .auth-form[style*='block'] {
  max-height: calc(100dvh - 180px);
}

@media (max-width: 768px) {
  #regdocsec .auth-form {
    max-height: calc(100dvh - max(140px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  }

  body.dg-page {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
  }

  .telemedicine .container {
    overflow-x: hidden;
  }
}

/* ── Telemedicine platform ── */
#doctorsSection,
#paymentSection,
#regdocsec,
.registration-section {
  width: 100% !important;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.telemedicine .header h1,
.header h1 {
  font-size: clamp(1.75rem, 5vw, 3rem) !important;
}

.telemedicine .header p,
.header p {
  font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  width: 100%;
}

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

.filter-section {
  position: relative;
}

.filter-dropdown {
  max-width: min(360px, calc(100vw - 32px));
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-apply-btn,
.filter-clear-btn {
  flex: 1 1 auto;
  min-width: 120px;
}

.selected-doctor-card {
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

@media (min-width: 640px) {
  .selected-doctor-card {
    flex-wrap: nowrap;
    text-align: left;
  }
}

/* ── Auth / landing cards ── */
.card,
.login-card {
  width: min(450px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  padding: clamp(20px, 4vw, 40px) !important;
}

body.patient-portal .patient-portal-shell > .card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body.patient-portal:not(.dashboard-view) .patient-portal-shell {
  min-height: min(560px, calc(100dvh - 140px));
}

@media (max-width: 768px) {
  body.auth-page:has(#loginCard.visible),
  body.auth-page.auth-login-view {
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  body.auth-page:has(#loginCard.visible) .card,
  body.auth-page:has(#loginCard.visible) .card#loginCard {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  body.auth-page:not(.patient-portal),
  body.login-page {
    align-items: flex-start !important;
    padding: 16px 0 32px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.patient-portal {
    align-items: center !important;
    justify-content: center !important;
    padding: max(72px, calc(56px + env(safe-area-inset-top))) 16px max(24px, env(safe-area-inset-bottom)) !important;
  }

  body.patient-portal.dashboard-view {
    justify-content: flex-start !important;
  }

  body.patient-portal .patient-portal-shell > .card {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  body.auth-page:has(#loginCard.visible) {
    align-items: center !important;
    overflow-y: hidden !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  .card:not(#loginCard) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 16px auto !important;
  }
}

/* ── Payment form ── */
body.dg-page .form-container {
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  margin: 16px auto !important;
}

.doctor-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── Stores ── */
.dg-nav-inner .cart-btn-nav {
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .dg-nav-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .dg-nav-inner .logo {
    flex: 1 1 auto;
    min-width: 0;
  }

  .dg-nav-inner .dg-nav-toggle {
    order: 2;
    margin-left: auto;
  }

  .dg-nav-inner .cart-btn-nav {
    order: 3;
    margin-left: 0;
  }

  .dg-nav-inner .dg-nav-links {
    order: 4;
    width: 100%;
  }
}

nav.navbar:not(#navbar) .nav-links .get-started-btn,
nav.navbar:not(#navbar) .nav-links .stores-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  nav.navbar:not(#navbar) .nav-links .get-started-btn,
  nav.navbar:not(#navbar) .nav-links .stores-btn {
    width: 100%;
    margin-top: 6px;
  }

  nav.navbar:not(#navbar) .nav-links li + li {
    margin-top: 2px;
  }
}

.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

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

.search-bar-row,
.amazon-search {
  flex-wrap: wrap;
}

.filters-sidebar {
  width: 100%;
}

/* ── CMEs / Library layouts ── */
.yt-layout,
.library-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 12px 24px;
}

@media (min-width: 992px) {
  .yt-layout {
    grid-template-columns: 280px 1fr;
    padding: 0 20px 32px;
  }
}

.page-hero {
  padding: 24px 16px !important;
}

.page-hero h1 {
  font-size: clamp(1.5rem, 5vw, 2.4rem) !important;
}

.toolbar,
.search-bar,
.trust-banner {
  padding-left: 12px;
  padding-right: 12px;
}

.category-scroll,
.stores-strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Doctor dashboard ── */
.doctor1-header,
header.doctor-header {
  padding: 72px 16px 20px !important;
}

.logout-button {
  top: max(12px, env(safe-area-inset-top)) !important;
  right: 12px !important;
  padding: 10px 16px !important;
  font-size: 0.82rem !important;
}

.dg-doctor-status-bar {
  justify-content: center;
}

/* ── Admin ── */
@media (max-width: 768px) {
  .admin-container {
    padding: 12px;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .tab-navigation {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tab-btn {
    flex: 1 1 calc(50% - 8px);
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .data-table-wrapper,
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Video call UI ── */
.dg-vcall-doctor-dock,
#prescription-btn,
#reports-btn,
#diagnosis-btn,
#browse-store-btn,
#view-prescription-btn,
#download-written-btn,
#cart-btn-floating {
  margin-left: 0 !important;
}

body.vcall-in-call .dg-vcall-doctor-dock,
body.vcall-in-call .dg-patient-rx-actions {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 768px) {
  .video-container,
  .call-container,
  #remote-video,
  #local-video,
  #dg-agora-remote {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
  }

  body.vcall-in-call .dg-agora-local,
  body.vcall-in-call #dg-agora-local {
    top: max(52px, calc(8px + env(safe-area-inset-top, 0px))) !important;
    bottom: auto !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: min(120px, 28vw) !important;
    height: min(90px, 21vw) !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 14 !important;
  }

  body.vcall-in-call .dg-vcall-doctor-dock,
  body.vcall-in-call .dg-patient-rx-actions {
    bottom: max(96px, calc(84px + env(safe-area-inset-bottom, 0px))) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 896px) and (orientation: landscape) {
  body.vcall-in-call .dg-agora-local,
  body.vcall-in-call #dg-agora-local {
    width: min(100px, 20vw) !important;
    height: min(75px, 15vw) !important;
  }

  body.vcall-in-call .dg-vcall-doctor-dock,
  body.vcall-in-call .dg-patient-rx-actions {
    top: max(48px, calc(36px + env(safe-area-inset-top, 0px))) !important;
    bottom: auto !important;
  }
}

/* ── Modals & overlays ── */
.modal-overlay,
.dg-legal-overlay,
.dg-doctor-modal,
.dg-ring-overlay {
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.modal-card,
.dg-legal-modal,
.dg-doctor-modal-card,
.dg-ring-card {
  width: 100%;
  max-width: min(640px, calc(100vw - 24px));
  margin: 12px auto;
}

/* ── Legal content ── */
@media (max-width: 768px) {
  .dg-legal-wrap {
    padding: 24px 12px 40px;
  }

  .dg-legal-card {
    padding: 24px 18px;
  }
}

/* ── Mobile nav: dg-navbar ── */
.dg-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(242, 103, 39, 0.35);
  border-radius: 10px;
  background: #fff;
  color: #3c3c3c;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.1rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.dg-nav-toggle i {
  pointer-events: none;
}

@media (max-width: 992px) {
  .dg-nav-inner {
    position: relative;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .dg-nav-inner .logo img {
    height: 44px !important;
    max-width: min(180px, 42vw);
  }

  .dg-nav-toggle {
    display: inline-flex;
  }

  .dg-nav-links {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(242, 103, 39, 0.15);
    z-index: 1100;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }

  .dg-nav-links.open {
    display: flex !important;
  }

  .dg-nav-links li {
    width: 100%;
  }

  .dg-nav-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .dg-nav-links .dg-btn-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ── Mobile nav: legacy .navbar (CMEs, Library, etc.) ── */
nav.navbar:not(#navbar) .nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(242, 103, 39, 0.35);
  border-radius: 10px;
  background: #fff;
  color: #3c3c3c;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.1rem;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 992px) {
  nav.navbar:not(#navbar) .nav-container {
    position: relative;
    flex-wrap: nowrap;
  }

  nav.navbar:not(#navbar) .nav-toggle {
    display: inline-flex;
  }

  nav.navbar:not(#navbar) .logo img {
    max-height: 44px;
    width: auto;
    max-width: min(180px, 42vw);
  }

  nav.navbar:not(#navbar) .nav-links {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(242, 103, 39, 0.15);
    z-index: 1100;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    list-style: none;
    gap: 0;
  }

  nav.navbar:not(#navbar) .nav-links.open {
    display: flex !important;
  }

  nav.navbar:not(#navbar) .nav-links li {
    width: 100%;
  }

  nav.navbar:not(#navbar) .nav-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
  }

  nav.navbar:not(#navbar) .get-started-btn,
  nav.navbar:not(#navbar) .stores-btn {
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .dg-navbar,
  nav.navbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary,
  .doctor-card-actions .btn {
    width: 100%;
  }
}