/* SOLEX ARGO Passenger Portal - responsive/mobile layer
   Keeps the existing desktop design while allowing every page to reflow cleanly. */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
select, input, textarea, button { max-width: 100%; }

/* Booking/search page */
@media (max-width: 900px) {
  .main-content { padding-left: 15px !important; padding-right: 15px !important; }
  .booking-card { max-width: 100% !important; }
  .form-grid { grid-template-columns: 1fr !important; width: 100%; }
  .form-grid > * { min-width: 0; width: 100%; }
  .status-box { width: 100%; min-width: 0; }
  .book-btn { width: min(260px, 100%) !important; min-height: 52px; margin-left: auto !important; margin-right: auto !important; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .header { height: 64px !important; padding: 0 16px !important; }
  .header img { height: 36px !important; max-width: 190px; }
  .main-content { padding: 90px 10px 70px !important; }
  .booking-card { padding: 20px 14px !important; border-width: 2px !important; border-radius: 18px !important; }
  .form-grid { gap: 15px !important; margin-bottom: 15px !important; }
  .input-group label { font-size: .78rem !important; }
  .input-group select, .input-group input { min-height: 50px; padding: 12px 13px !important; font-size: .9rem !important; }
  .status-box { padding: 16px !important; margin-top: 4px !important; }
  .status-box h3 { font-size: .9rem !important; line-height: 1.25; }
  .ticket-options label { gap: 10px; padding: 11px 10px !important; font-size: .92rem; }
  .ticket-options label > div { min-width: 0; }
  .fare-display { white-space: nowrap; }
  .passenger-group { gap: 12px; align-items: center; }
  .passenger-group label { min-width: 0; line-height: 1.25; }
  .passenger-group input { width: 88px !important; flex: 0 0 88px; }
  .book-btn { width: min(240px, 100%) !important; padding: 12px 18px !important; font-size: .88rem !important; min-height: 50px; }
  .return-link { position: static !important; align-self: flex-start; margin: 18px 4px 0; }

  /* General cards/forms */
  .info-grid, .trip-info-grid { grid-template-columns: 1fr !important; }
  .btn-row { flex-direction: column !important; }
  .btn-row > * { width: 100% !important; }
  .booking-card, .payment-card, .profile-card, .form-card, .info-card, .success-container, .login-card, .register-card { width: 100% !important; max-width: 100% !important; }
  .payment-card, .profile-card, .form-card, .info-card { padding: 20px !important; }
  .ticket-body { padding: 18px !important; }
  .ticket-top-banner, .ticket-footer-section, .passenger-banner { flex-direction: column !important; align-items: flex-start !important; gap: 12px; }
  .ticket-footer-section { padding: 18px !important; }
  .qr-box { align-self: center; }
  .print-btn, .resend-btn { width: 100% !important; }
  .modal-overlay { padding: 12px !important; }
  .cancel-modal { padding: 20px !important; max-height: 90vh; overflow-y: auto; }

  /* Long filenames/ID proof controls */
  .proof-upload-wrap, .proof-upload-wrap * { min-width: 0; max-width: 100%; }
  .proof-upload-wrap input[type="file"] { width: 100% !important; font-size: .75rem !important; overflow: hidden; }
  .proof-upload-wrap input[type="file"]::file-selector-button { max-width: 48%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .upload-label-text { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

  /* Navigation/account controls */
  .nav-right { gap: 7px !important; }
  .nav-btn { padding: .5rem .8rem !important; font-size: .72rem !important; }
  .nav-btn span { display: none; }
  .dropdown-content { max-width: calc(100vw - 24px); }

  /* Generic grids used by profile/contact/payment pages */
  .contact-grid, .routes-grid, .fleet-grid { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .form-group { min-width: 0; }
  .form-control, .form-input, .form-textarea { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 380px) {
  .header img { height: 32px !important; max-width: 165px; }
  .main-content { padding-left: 8px !important; padding-right: 8px !important; }
  .booking-card { padding: 16px 11px !important; }
  .ticket-options label { font-size: .84rem !important; }
  .passenger-group { font-size: .82rem !important; }
  .passenger-group input { width: 78px !important; flex-basis: 78px; }
}


/* V13 professional responsive baseline */
html { font-size: 16px; }
body { line-height: 1.55; }
h1,h2,h3,h4,h5,h6 { line-height:1.15; letter-spacing:-.02em; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
@media(max-width:600px){
  body { overflow-x:hidden; }
  .header { padding-left:14px!important; padding-right:14px!important; }
  .nav-right { gap:7px!important; }
  .nav-btn { padding:.55rem .75rem!important; font-size:.74rem!important; }
  .hero { padding-left:14px!important; padding-right:14px!important; }
  .hero .circle-logo { width:min(68vw,300px)!important; height:min(68vw,300px)!important; margin-top:-20px!important; }
  .ferry-grid,.fleet-grid,.routes-grid,.cards-grid { grid-template-columns:1fr!important; }
  .ferry-card { width:100%; }
  input,select,textarea,button { min-height:44px; }
}