/*
 * Site-wide mobile containment layer.
 * Every rule is intentionally scoped to phone widths so desktop/web view is unchanged.
 */
@media (max-width:768px) {
  html,
  body {
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:clip;
  }

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

  #main,
  #main > *,
  .temple-header,
  .temple-footer {
    max-width:100%;
    min-width:0;
  }

  #main {
    width:100%;
    overflow-x:clip;
  }

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

  audio {
    max-width:100%;
  }

  input,
  select,
  textarea,
  button {
    max-width:100%;
    font-size:16px;
  }

  h1,
  h2,
  h3,
  p,
  a,
  span,
  strong,
  small,
  dt,
  dd,
  label {
    overflow-wrap:anywhere;
  }

  pre,
  code {
    max-width:100%;
    overflow-x:auto;
    white-space:pre-wrap;
  }

  table {
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .auth-container,
  .auth-section {
    box-sizing:border-box;
    width:calc(100% - 24px);
    max-width:400px;
    margin:28px auto;
    padding:22px 18px;
  }

  .modal {
    box-sizing:border-box;
    padding:8px;
  }

  .modal-content {
    box-sizing:border-box;
    width:100%;
    max-width:440px;
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px);
    margin:0 auto;
    overflow-y:auto;
  }

  .profile-container {
    display:block;
    width:100%;
    min-height:0;
    padding:24px 12px;
  }

  .profile-sidebar {
    position:relative;
    width:100%;
    max-height:none;
    padding:28px 18px;
  }

  .subscriptions {
    width:100%;
    min-height:0;
    padding:16px 0;
  }

  .service-boxes,
  .subscription-cards {
    display:grid;
    grid-template-columns:1fr;
    width:min(100% - 24px,520px);
    margin-inline:auto;
  }

  .service,
  .card,
  .profile-card {
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    margin-inline:0;
  }

  .temple-header__inner {
    max-width:100%;
    min-width:0;
  }

  .temple-brand,
  .temple-brand > span:last-child {
    min-width:0;
  }

  .temple-mobile-menu:not([hidden]) {
    box-sizing:border-box;
    max-height:calc(100dvh - 76px);
    overflow-y:auto;
  }

  .temple-toast,
  .family-toast,
  .reflection-toast {
    right:12px;
    bottom:12px;
    left:12px;
    width:auto;
    max-width:none;
  }

  /* All popup shells use the phone viewport as their hard outer boundary. */
  .devotional-modal,
  .prayer-time-modal,
  .payment-preparation,
  .prayer-reflection-modal,
  .ritual-priority-modal,
  .contact-success,
  .offering-details-modal,
  .offering-extension-modal,
  .family-prayer-modal {
    box-sizing:border-box;
    padding:8px;
    overflow:hidden;
  }

  .devotional-modal__panel,
  .prayer-time-modal__dialog,
  .payment-preparation__content,
  .prayer-reflection-dialog,
  .ritual-priority-modal__dialog,
  .contact-success > section,
  .offering-details-modal > section,
  .offering-extension-modal > section,
  .family-prayer-modal__content {
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px);
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
  }

  .devotional-modal__panel::-webkit-scrollbar,
  .prayer-time-modal__dialog::-webkit-scrollbar,
  .payment-preparation__content::-webkit-scrollbar,
  .prayer-reflection-dialog::-webkit-scrollbar,
  .ritual-priority-modal__dialog::-webkit-scrollbar,
  .contact-success > section::-webkit-scrollbar,
  .offering-details-modal > section::-webkit-scrollbar,
  .offering-extension-modal > section::-webkit-scrollbar,
  .family-prayer-modal__content::-webkit-scrollbar,
  .family-drawer__content::-webkit-scrollbar {
    display:none;
  }

  .devotional-modal__panel,
  .prayer-time-modal__dialog,
  .payment-preparation__content,
  .prayer-reflection-dialog,
  .ritual-priority-modal__dialog {
    padding:26px 16px 18px;
    border-radius:16px;
  }

  .contact-success > section,
  .offering-details-modal > section,
  .offering-extension-modal > section,
  .family-prayer-modal__content {
    padding:24px 16px 18px;
    border-radius:15px;
  }

  .family-drawer {
    box-sizing:border-box;
    padding:8px;
    overflow:hidden;
  }

  .family-drawer__content {
    position:relative;
    inset:auto;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    height:auto;
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px);
    margin:0;
    padding:25px 15px 18px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:15px;
    scrollbar-width:none;
  }

  .family-drawer__heading {
    padding-inline:28px;
  }

  .family-drawer h2,
  .family-prayer-modal h2 {
    font-size:clamp(1.55rem,8vw,2rem);
  }

  .family-photo-upload,
  .family-form-grid,
  .family-prayer-members,
  .family-prayer-categories,
  .family-sankalpa-members {
    grid-template-columns:1fr;
  }

  .family-form-actions,
  .offering-extension-modal__actions {
    display:grid;
    grid-template-columns:1fr;
  }

  .family-form-actions > *,
  .offering-extension-modal__actions > * {
    width:100%;
  }

  .offering-popup-finance,
  .offering-period-card__dates,
  .offering-period-card__extension-grid {
    grid-template-columns:1fr;
  }

  .offering-history li,
  .family-detail-list div {
    display:grid;
    gap:.25rem;
  }

  .offering-history li strong,
  .family-detail-list dd {
    text-align:left;
  }

  .dakshina-custom,
  .modal-balance,
  .offering-total {
    flex-wrap:wrap;
  }

  .reflection-actions > * {
    flex:1 1 130px;
  }

  .devotional-plan {
    grid-template-columns:minmax(0,1fr) auto;
  }

  .contact-success__reference strong {
    font-size:1.25rem;
  }

  .verification-card {
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
  }

  .otp-boxes {
    width:100%;
    gap:clamp(3px,1.4vw,8px);
  }

  .otp-boxes input {
    flex:1 1 0;
    width:auto;
    min-width:0;
    max-width:44px;
  }
}

@media (max-width:420px) {
  .temple-tools > .language-switcher {
    display:none;
  }

  .temple-header__inner {
    gap:10px;
  }

  .temple-brand b {
    font-size:.92rem;
    letter-spacing:.07em;
  }

  .devotional-plan {
    grid-template-columns:1fr;
  }

  .devotional-plan em {
    grid-column:1;
  }

  .minute-stepper {
    gap:8px;
  }
}