/**
 * Public site — mobile layer for menus, tables, and forms (< 768px)
 * Loaded after custom.css / select-field.css. Desktop styles unchanged.
 */

@media (max-width: 767.98px) {
  :root {
    --mob-pad: 14px;
    --mob-tap: 46px;
    --mob-radius: 14px;
    --mob-emerald: #0c4f3e;
    --mob-gold: #c4a35a;
    --mob-ink: #14202b;
    --mob-cream: #fffdf8;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(12, 79, 62, 0.12);
  }

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

  /* ── Menus / header sheet ── */
  .site-header .navbar-collapse {
    border-radius: 22px !important;
    background: linear-gradient(180deg, #fff 0%, #fffdf8 100%) !important;
    border: 1px solid rgba(196, 163, 90, 0.28) !important;
    box-shadow: 0 18px 40px rgba(20, 32, 43, 0.12) !important;
  }

  .site-header .navbar-nav .nav-link {
    min-height: 52px;
    align-items: center;
    font-size: 1.02rem;
    font-weight: 700;
    border-radius: 16px;
  }

  .site-header .navbar-nav .nav-link.active {
    border-radius: 999px !important;
    background: linear-gradient(135deg, #d4b06a 0%, #c4a35a 55%, #b8923a 100%) !important;
    color: #fff !important;
  }

  .site-header .navbar-toggler {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #0c4f3e;
  }

  .site-header .dropdown-menu {
    width: min(280px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    border-radius: 16px;
    padding: 6px;
    background: var(--mob-cream);
  }

  .site-header .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .site-header .dropdown-item:hover,
  .site-header .dropdown-item:focus {
    background: #f6f1e6;
    color: var(--mob-emerald);
  }

  .notify-menu {
    width: min(360px, calc(100vw - 20px)) !important;
  }

  /* ── Tables ── */
  .page-content .table-responsive,
  .site-scroll .table-responsive,
  .booking-dash .table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .page-content table,
  .site-scroll table {
    min-width: 560px;
  }

  .page-content .table th,
  .page-content .table td {
    white-space: nowrap;
    font-size: 0.85rem;
  }

  /* ── Forms — shared ── */
  .page-content form,
  .contact-page form,
  .passenger-form,
  .signin-panel form,
  .custom-umrah-modal form {
    width: 100%;
    max-width: 100%;
  }

  .page-content .form-control:not([type="file"]),
  .page-content .form-select,
  .page-content textarea.form-control,
  .contact-page .form-control:not([type="file"]),
  .contact-page .form-select,
  .signin-panel .form-control:not([type="file"]),
  .custom-umrah-modal .form-control:not([type="file"]),
  .custom-umrah-modal .form-select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--mob-tap) !important;
    font-size: 16px !important; /* prevent iOS zoom */
    border-radius: 12px !important;
  }

  /* File uploads — clean single-layer control on every form */
  .page-content input[type="file"],
  .page-content input[type="file"].form-control,
  .page-content input[type="file"].form-control-lg,
  .passenger-form input[type="file"],
  .contact-page input[type="file"],
  .custom-umrah-modal input[type="file"],
  .signin-panel input[type="file"],
  form input[type="file"].form-control {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e1e7e1 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #6d746c !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 46px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .page-content input[type="file"]:hover,
  .passenger-form input[type="file"]:hover,
  form input[type="file"].form-control:hover {
    border-color: #c4a35a !important;
    background: #fffdf8 !important;
  }

  .page-content input[type="file"]:focus,
  .page-content input[type="file"]:focus-visible,
  .passenger-form input[type="file"]:focus,
  .passenger-form input[type="file"]:focus-visible,
  form input[type="file"].form-control:focus {
    outline: none !important;
    border-color: #0c4f3e !important;
    box-shadow: 0 0 0 3px rgba(12, 79, 62, 0.12) !important;
    background: #fff !important;
  }

  .page-content input[type="file"]::file-selector-button,
  .page-content input[type="file"]::-webkit-file-upload-button,
  .passenger-form input[type="file"]::file-selector-button,
  .passenger-form input[type="file"]::-webkit-file-upload-button,
  .contact-page input[type="file"]::file-selector-button,
  .contact-page input[type="file"]::-webkit-file-upload-button,
  .custom-umrah-modal input[type="file"]::file-selector-button,
  .custom-umrah-modal input[type="file"]::-webkit-file-upload-button,
  form input[type="file"].form-control::file-selector-button,
  form input[type="file"].form-control::-webkit-file-upload-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    height: 48px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-right: 1px solid #d5e3da !important;
    border-radius: 0 !important;
    background: #e7f2eb !important;
    color: #0c4f3e !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    line-height: 48px !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  .page-content input[type="file"]:hover::file-selector-button,
  .page-content input[type="file"]:hover::-webkit-file-upload-button,
  .passenger-form input[type="file"]:hover::file-selector-button,
  .passenger-form input[type="file"]:hover::-webkit-file-upload-button,
  form input[type="file"].form-control:hover::file-selector-button,
  form input[type="file"].form-control:hover::-webkit-file-upload-button {
    background: #0c4f3e !important;
    color: #fff !important;
    border-right-color: #0c4f3e !important;
  }

  .page-content textarea.form-control,
  .contact-page textarea.form-control {
    min-height: 120px !important;
    height: auto !important;
    line-height: 1.45 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .page-content .form-label,
  .contact-page .form-label,
  .custom-umrah-modal .form-label {
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
  }

  .page-content .btn,
  .contact-page .btn,
  .signin-panel .btn,
  .custom-umrah-continue {
    min-height: 50px;
    font-size: 1rem;
    border-radius: 999px;
  }

  .page-content .input-group {
    flex-wrap: wrap;
  }

  .page-content .input-group > .form-control,
  .page-content .input-group > .form-select {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Selects / nationality menus */
  .nation-trigger,
  .app-select,
  select.form-select.app-select {
    width: 100% !important;
    min-height: var(--mob-tap) !important;
    font-size: 16px !important;
  }

  .nation-menu {
    max-height: min(55vh, 320px);
    width: 100%;
    border-radius: 0 0 14px 14px;
    background: var(--mob-cream);
  }

  .nation-option {
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
  }

  .nation-search {
    min-height: 42px;
    font-size: 16px !important;
  }

  /* Phone / WhatsApp field — no overflow past card */
  .phone-field {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .phone-field-flag {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: var(--mob-tap) !important;
    height: var(--mob-tap) !important;
    white-space: nowrap;
  }

  .phone-field .form-control,
  .phone-field input[type="tel"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: var(--mob-tap) !important;
    font-size: 16px !important;
  }

  /* Date picker */
  .bs-date-input,
  input.bs-date-input {
    min-height: var(--mob-tap) !important;
    font-size: 16px !important;
  }

  .bs-date-popup {
    max-width: calc(100vw - 24px);
  }

  /* Contact page */
  .contact-page .contact-form {
    padding: 1.15rem 1rem 1.1rem;
    border-radius: var(--mob-radius);
  }

  .contact-page .contact-info {
    margin-bottom: 1rem;
  }

  /* Custom Umrah / visa modals */
  .custom-umrah-modal .modal-body {
    grid-template-columns: 1fr;
    padding: 14px 14px 6px;
    gap: 12px;
  }

  .custom-umrah-modal .modal-header,
  .custom-umrah-modal .modal-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .modal-dialog {
    margin: 0.6rem auto;
    max-width: calc(100% - 1.2rem);
  }

  /* Sign-in / auth */
  .signin-stage {
    padding: 0.85rem 0 1.1rem;
  }

  .signin-panel {
    width: 100%;
    max-width: none;
  }

  /* Booking form — force stack (desktop grid must not win) */
  .passenger-form .passenger-fields,
  .passenger-form .contact-panel,
  .passenger-form .form-panel__grid,
  .passenger-form .form-panel__grid--2,
  .passenger-form .form-panel__airports,
  .passenger-form .form-panel__dates {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .passenger-form .passenger-fields .name-field,
  .passenger-form .passenger-fields .detail-field,
  .passenger-form .passenger-fields .address-field,
  .passenger-form .passenger-fields .doc-field,
  .passenger-form .passenger-fields > *,
  .passenger-form .form-panel__full,
  .passenger-form .contact-panel > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }


  /* Track / booking dash */
  .track-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .track-panel {
    padding: 0.95rem 0.9rem;
  }

  .track-panel dl {
    grid-template-columns: 1fr;
  }

  .page-content .container,
  .page-content.container {
    padding-left: var(--mob-pad);
    padding-right: var(--mob-pad);
  }

  .page-content:has(.passenger-form) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Footer safe area */
  .site-footer {
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
  }

  /* Home / services flyer cards — full image so contact/WhatsApp strip is readable */
  .home-service-card__img,
  .service-view-img,
  .home-voyage-card__img,
  .voyages-page .voyage-img-container img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    width: 100% !important;
    background: #f4f7f5;
  }

  .home-voyage-card__media,
  .voyages-page .voyage-img-container {
    height: auto !important;
  }

  .home-service-card__actions .btn,
  .home-service-card__footer .btn,
  .service-view-actions .btn,
  .home-voyage-card__btn,
  .home-voyage-card__actions .btn,
  .voyages-page__cta {
    width: 100% !important;
    min-height: 50px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .home-service-card__footer {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.65rem;
  }

  .home-voyage-card__actions {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .site-header .navbar-collapse {
    padding: 0.35rem;
  }

  .contact-page .contact-form {
    padding: 1rem 0.85rem 0.95rem;
  }

  .modal-dialog {
    margin: 0.4rem;
    max-width: calc(100% - 0.8rem);
  }
}