/* v314G — mobile/tablet-only public UI polish. No desktop rules outside mobile breakpoints. */
@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body:not([class*="admin"]) {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:not([class*="admin"]) img,
  body:not([class*="admin"]) video,
  body:not([class*="admin"]) canvas,
  body:not([class*="admin"]) svg {
    max-width: 100%;
  }

  body:not([class*="admin"]) .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:not([class*="admin"]) .topbar .container.nav {
    min-height: 68px !important;
    padding: 12px 14px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body:not([class*="admin"]) .brand.brand-logo {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body:not([class*="admin"]) .brand.brand-logo img {
    width: auto !important;
    height: 36px !important;
    max-width: min(230px, 58vw) !important;
    object-fit: contain !important;
  }

  body:not([class*="admin"]) .topbar .mobile-only,
  body:not([class*="admin"]) .topbar .btn.mobile-only {
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 9px 13px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  body:not([class*="admin"]) .hero,
  body:not([class*="admin"]) .page-hero {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  body:not([class*="admin"]) .section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  body:not([class*="admin"]) .hero-grid,
  body:not([class*="admin"]) .grid.two,
  body:not([class*="admin"]) .grid.three,
  body:not([class*="admin"]) .grid.four,
  body:not([class*="admin"]) .footer-grid,
  body:not([class*="admin"]) .footer-grid-3,
  body:not([class*="admin"]) .urgent-hero-grid,
  body:not([class*="admin"]) .fees-hero-grid,
  body:not([class*="admin"]) .addon-hero-grid,
  body:not([class*="admin"]) .visa-info-hero-grid,
  body:not([class*="admin"]) .visa-checker-hero-grid,
  body:not([class*="admin"]) .fees-example-grid,
  body:not([class*="admin"]) .trust-grid,
  body:not([class*="admin"]) .trust-process-grid,
  body:not([class*="admin"]) .trust-compare-grid,
  body:not([class*="admin"]) .trust-journey-grid,
  body:not([class*="admin"]) .faq-category-grid {
    grid-template-columns: 1fr !important;
  }

  body:not([class*="admin"]) h1,
  body:not([class*="admin"]) .hero h1,
  body:not([class*="admin"]) .page-hero h1 {
    font-size: clamp(30px, 8.5vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
  }

  body:not([class*="admin"]) h2,
  body:not([class*="admin"]) .section h2 {
    font-size: clamp(24px, 6.6vw, 30px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.035em !important;
  }

  body:not([class*="admin"]) p,
  body:not([class*="admin"]) li,
  body:not([class*="admin"]) .muted {
    overflow-wrap: anywhere;
  }

  body:not([class*="admin"]) .card,
  body:not([class*="admin"]) .step,
  body:not([class*="admin"]) .trust-card,
  body:not([class*="admin"]) .info-block,
  body:not([class*="admin"]) .fee-card,
  body:not([class*="admin"]) .faq-item,
  body:not([class*="admin"]) .lp-card,
  body:not([class*="admin"]) .lp-box {
    border-radius: 20px !important;
    padding: 18px !important;
  }

  body:not([class*="admin"]) .btn,
  body:not([class*="admin"]) button,
  body:not([class*="admin"]) input,
  body:not([class*="admin"]) select,
  body:not([class*="admin"]) textarea {
    font-size: 16px !important;
  }

  body:not([class*="admin"]) .btn,
  body:not([class*="admin"]) button.btn {
    min-height: 46px !important;
    padding: 11px 16px !important;
  }

  body:not([class*="admin"]) input,
  body:not([class*="admin"]) select,
  body:not([class*="admin"]) textarea {
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  body:not([class*="admin"]) .hero-actions,
  body:not([class*="admin"]) .actions,
  body:not([class*="admin"]) .section-kicker-row,
  body:not([class*="admin"]) .addon-inline-action-v303G {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body:not([class*="admin"]) .section-side-cta,
  body:not([class*="admin"]) .hero-actions .btn,
  body:not([class*="admin"]) .actions .btn,
  body:not([class*="admin"]) .addon-inline-action-v303G .btn {
    width: 100% !important;
  }

  .home-page .home-conversion-hero-grid-v295G {
    grid-template-columns: 1fr !important;
    grid-template-areas: "copy" "side" !important;
    gap: 18px !important;
  }

  .home-page .home-hero-copy-v295G,
  .home-page .home-hero-side-stack-v295G,
  .home-page .home-fee-preview-card-v295G {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .home-page .home-hero-subcopy,
  .home-page .home-hero-copy-v295G .notice {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }

  .home-page .trust-signal-bar,
  .home-page .home-trust-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .home-page .home-fee-preview-card .compact-fee-head,
  .home-page .compact-fee-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .home-page .fee-badge {
    justify-self: start !important;
  }

  .home-page .home-visa-checker-compact-card-v296G,
  .home-page .visa-checker-form,
  .home-page .home-visa-checker-box-v296G,
  .home-page .home-route-grid {
    grid-template-columns: 1fr !important;
  }

  .home-page .home-image-panel img,
  .home-page .home-addon-image img,
  body:not([class*="admin"]) .urgent-visual-card img,
  body:not([class*="admin"]) .addon-service-media img {
    height: auto !important;
    min-height: 0 !important;
    max-height: 260px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 18px !important;
  }

  .home-page .hero-plane-stage-v295G {
    display: none !important;
  }

  .fees-table,
  .urgent-table,
  body:not([class*="admin"]) table {
    min-width: 680px;
  }

  .urgent-table-wrap,
  .fees-table-wrap,
  body:not([class*="admin"]) .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .addon-service-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .addon-service-media {
    min-height: 0 !important;
  }

  .addon-service-content {
    padding: 18px !important;
  }

  .addon-service-content h3 {
    font-size: clamp(23px, 6.8vw, 29px) !important;
  }

  .addon-detail-grid,
  .addon-booking-grid-v303G,
  .addon-option-grid-v303G,
  .addon-booking-form-grid-v303G,
  .addon-booking-option-grid-v303G,
  .visa-info-index-grid,
  .date-parts,
  .upload-grid,
  .compact-fee-fields,
  .compact-fee-bottom {
    grid-template-columns: 1fr !important;
  }

  .order-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .order-summary {
    position: static !important;
    order: -1 !important;
  }

  .step-header,
  .compact-steps {
    overflow: visible !important;
  }

  .step-pill {
    min-width: 0 !important;
  }

  .upload-card,
  .upload-grid .upload-card {
    min-height: 210px !important;
  }

  .summary-row,
  .addon-booking-row-v303G {
    display: block !important;
  }

  .summary-row strong,
  .addon-booking-row-v303G strong {
    display: block !important;
    text-align: left !important;
    margin-top: 3px !important;
  }

  .payment-summary-page .summary-row,
  .payment-summary .summary-row {
    gap: 6px !important;
  }

  .faq-page .faq-search-panel {
    margin-bottom: 16px !important;
  }

  .faq-page .faq-page-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin: 16px 0 20px !important;
  }

  .faq-page .faq-page-switcher button,
  .faq-page .faq-page-btn {
    width: 100% !important;
    min-height: 44px !important;
  }

  .vge-visa-popup-v298G,
  .addon-booking-modal-v303G {
    padding: 10px !important;
    place-items: end center !important;
  }

  .vge-visa-popup-card-v298G,
  .addon-booking-dialog-v303G {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 16px 16px !important;
    overflow-x: hidden !important;
  }

  .vge-visa-popup-head-v298G,
  .vge-visa-popup-body-v298G,
  .addon-booking-head-v303G,
  .addon-booking-body-v303G {
    padding: 16px !important;
  }

  .vge-visa-popup-body-v298G .result-grid,
  .vge-visa-popup-body-v298G .hero-actions,
  .addon-booking-actions-v303G,
  .addon-booking-confirm-actions-v303G {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .vge-chatbot-root {
    right: 10px !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10020 !important;
  }

  .vge-chatbot-root.is-open {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
  }

  .vge-chatbot-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: min(620px, calc(100dvh - 24px - env(safe-area-inset-bottom, 0px))) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px !important;
  }

  .vge-chatbot-root.is-open .vge-chatbot-launcher {
    display: none !important;
  }

  .vge-chatbot-messages {
    min-height: 160px !important;
    max-height: none !important;
  }

  .vge-chatbot-quick {
    max-height: 132px !important;
    overflow-y: auto !important;
  }

  body:not([class*="admin"]) .whatsapp-float {
    right: 10px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  body.ads-landing .lp-sticky {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  body.ads-landing .whatsapp-float {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.ads-landing .vge-chatbot-root {
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 480px) {
  body:not([class*="admin"]) .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body:not([class*="admin"]) .brand.brand-logo img {
    height: 33px !important;
    max-width: 54vw !important;
  }

  body:not([class*="admin"]) .topbar .mobile-only,
  body:not([class*="admin"]) .topbar .btn.mobile-only {
    min-height: 36px !important;
    padding: 8px 11px !important;
    font-size: 12px !important;
  }

  body:not([class*="admin"]) .hero,
  body:not([class*="admin"]) .page-hero {
    padding-top: 28px !important;
    padding-bottom: 30px !important;
  }

  body:not([class*="admin"]) .section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  body:not([class*="admin"]) .card,
  body:not([class*="admin"]) .step,
  body:not([class*="admin"]) .trust-card,
  body:not([class*="admin"]) .info-block,
  body:not([class*="admin"]) .fee-card,
  body:not([class*="admin"]) .faq-item,
  body:not([class*="admin"]) .lp-card,
  body:not([class*="admin"]) .lp-box {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .faq-page .faq-page-switcher {
    grid-template-columns: 1fr !important;
  }

  .vge-chatbot-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px)) !important;
  }

  .vge-chatbot-quick,
  .vge-chatbot-root.is-compact-layout .vge-chatbot-quick {
    grid-template-columns: 1fr !important;
    max-height: 150px !important;
  }

  .whatsapp-float .whatsapp-text {
    display: none !important;
  }

  body:not([class*="admin"]) .whatsapp-float {
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}