/* ================================================================
   ParcelJi — Mobile Responsive CSS
   Loaded after stylesheet.css on all public pages
   ================================================================ */

/* ========== TABLETS (max-width: 991px) ========== */
@media (max-width: 991px) {

    /* Hero section */
    .hero-content {
        min-height: auto !important;
    }

    /* Hero heading */
    .hero-wrap .col-lg-7 h1 {
        font-size: 1.8rem !important;
    }

    /* Stats bar numbers */
    section > .container > .row.text-center h2[style*="2.5rem"] {
        font-size: 1.8rem !important;
    }

    /* Section padding reduction */
    section[style*="padding:70px"] {
        padding: 40px 0 !important;
    }

    /* Page header */
    .pj-page-header {
        padding: 50px 0 40px !important;
    }
    .pj-page-header h1 {
        font-size: 1.8rem !important;
    }

    /* CTA section — stack buttons */
    .pj-cta-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .pj-cta-buttons .btn {
        width: 100% !important;
    }

    /* Footer columns */
    #footer .col-lg-3,
    #footer .col-lg {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Station page sidebar */
    .station-info-card {
        margin-bottom: 15px !important;
    }
}

/* ========== SMALL TABLETS / LARGE PHONES (max-width: 767px) ========== */
@media (max-width: 767px) {

    /* ---- GLOBAL ---- */
    body {
        font-size: 14px;
    }

    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    h1, .text-10, .text-9 {
        font-size: 1.5rem !important;
    }

    h2, .text-7, .text-8 {
        font-size: 1.3rem !important;
    }

    h3, .text-5, .text-6 {
        font-size: 1.1rem !important;
    }

    /* ---- TOP BAR ---- */
    .pj-topbar .d-flex {
        font-size: 11px !important;
    }

    /* ---- HEADER ---- */
    #header .logo img {
        max-width: 120px !important;
    }

    #header .logo span {
        display: none !important;
    }

    /* ---- HERO SECTION ---- */
    .hero-content {
        min-height: auto !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .hero-wrap .bg-white {
        padding: 16px !important;
    }

    .hero-wrap .bg-white h2 {
        font-size: 1.2rem !important;
    }

    /* Hero right side */
    .hero-wrap .col-lg-7 h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    .hero-wrap .col-lg-7 p {
        font-size: 0.85rem !important;
    }

    /* Stats row */
    .hero-wrap .fw-700[style*="font-size:1.5rem"] {
        font-size: 1.2rem !important;
    }

    /* ---- CUSTOM DROPDOWNS ---- */
    .pj-select-wrap .pj-dropdown {
        max-height: 180px !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 9999 !important;
        box-shadow: 0 -5px 30px rgba(0,0,0,0.3) !important;
        max-height: 50vh !important;
    }

    .pj-select-wrap .pj-select-btn {
        font-size: 13px !important;
        padding: 9px 12px !important;
    }

    /* ---- ANNOUNCEMENT BAR ---- */
    #announcement-bar .container > div > span:first-child {
        display: none !important;
    }

    #announcement-bar p {
        font-size: 11px !important;
    }

    /* ---- SERVICE CARDS ---- */
    .col-6.col-md-3 a > div:first-child {
        width: 40px !important;
        height: 40px !important;
    }

    .col-6.col-md-3 h6 {
        font-size: 12px !important;
    }

    /* ---- PAGE HEADER ---- */
    .pj-page-header {
        padding: 40px 0 30px !important;
    }

    .pj-page-header h1 {
        font-size: 1.4rem !important;
    }

    .pj-page-header p {
        font-size: 13px !important;
    }

    .pj-page-header .pj-header-badge {
        font-size: 9px !important;
        padding: 3px 10px !important;
    }

    /* ---- SECTIONS ---- */
    .pj-section {
        padding: 40px 0 !important;
    }

    .pj-card {
        margin-bottom: 15px !important;
    }

    .pj-icon-circle {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }

    .pj-stat-box h3 {
        font-size: 1.5rem !important;
    }

    /* ---- CTA SECTION ---- */
    section[style*="hero-bg.svg"] .row {
        text-align: center !important;
    }

    section[style*="hero-bg.svg"] .col-lg-5 {
        text-align: center !important;
    }

    section[style*="hero-bg.svg"] .btn {
        display: block !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* ---- FOOTER ---- */
    #footer .col-lg-3,
    #footer .col-lg,
    #footer .col-6.col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #footer .col-lg-3:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    #footer .list-unstyled.d-flex {
        justify-content: center !important;
    }

    /* Footer nav links — reduce excessive spacing */
    #footer .nav.flex-column .nav-link {
        padding: 4px 0 !important;
        font-size: 13px !important;
        min-height: auto !important;
    }

    #footer .nav.flex-column .nav-item {
        margin-bottom: 0 !important;
    }

    #footer h4.text-3 {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    /* Footer trust bar section */
    #footer .section.bg-primary {
        padding: 15px 0 10px !important;
    }

    #footer .section.bg-primary .featured-box {
        margin-bottom: 8px !important;
    }

    #footer .section.bg-primary h4 {
        font-size: 13px !important;
    }

    #footer .section.bg-primary p {
        font-size: 11px !important;
        margin-bottom: 0 !important;
    }

    #footer .section.bg-primary .featured-box-icon {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }

    /* Footer copyright */
    .footer-copyright {
        text-align: center !important;
    }

    /* Social icons in footer */
    #footer .social-icons {
        justify-content: center !important;
        margin-top: 10px !important;
    }

    /* About section on mobile */
    section[style*="padding:70px"] h2[style*="2rem"] {
        font-size: 1.4rem !important;
    }

    section[style*="padding:70px"] p[style*="16px"] {
        font-size: 14px !important;
    }

    /* How it works cards */
    section .col-md-4 div[style*="padding:30px"] {
        padding: 20px !important;
    }

    /* Testimonials — show 2 on tablet */
    section .col-lg-3 div[style*="padding:24px"] {
        padding: 16px !important;
    }

    /* FAQ accordion */
    .accordion-button {
        font-size: 13px !important;
        padding: 12px 14px !important;
    }

    .accordion-body {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* ---- BOOKING PAGE ---- */
    .booking-hide-mobile {
        display: none !important;
    }

    .booking-card {
        padding: 16px !important;
    }

    .step-progress {
        gap: 0 !important;
    }

    .step-dot {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .step-line {
        width: 20px !important;
    }

    .parcel-type-card {
        padding: 10px 8px !important;
    }

    .parcel-type-card i {
        font-size: 18px !important;
    }

    .parcel-type-card span {
        font-size: 10px !important;
    }

    /* ---- TRACKING PAGE ---- */
    .track-hero {
        padding: 40px 0 !important;
    }

    .track-input {
        font-size: 14px !important;
        padding: 12px 14px !important;
    }

    .track-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Status steps on tracking result */
    .status-steps {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px !important;
    }

    .status-step {
        min-width: 70px !important;
    }

    .status-label {
        font-size: 9px !important;
    }

    /* Timeline */
    .timeline-item {
        gap: 10px !important;
    }

    /* Route visual */
    .info-card {
        padding: 15px !important;
    }

    /* ---- BLOG ---- */
    .blog-post .title-blog {
        font-size: 1.2rem !important;
    }

    .meta-blog {
        font-size: 12px !important;
    }

    /* ---- AUTH PAGES ---- */
    .reg-right {
        padding: 20px 20px !important;
    }

    .reg-form-wrap {
        max-width: 100% !important;
        padding-top: 10px !important;
    }

    .reg-input {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .reg-btn {
        padding: 12px !important;
        font-size: 14px !important;
    }

    .quick-login {
        gap: 6px !important;
    }

    .quick-btn {
        min-width: 60px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* ---- TABLES (public pages) ---- */
    .table-responsive {
        font-size: 12px !important;
    }

    /* ---- STATION PAGE ---- */
    .station-info-card {
        padding: 16px !important;
    }
}

/* ========== PHONES (max-width: 575px) ========== */
@media (max-width: 575px) {

    /* Footer — single column */
    #footer .col-6,
    #footer .col-sm-6.col-md {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Footer nav links — even more compact on phones */
    #footer .nav.flex-column .nav-link {
        padding: 3px 0 !important;
        font-size: 13px !important;
    }

    #footer h4.text-3 {
        margin-top: 8px !important;
        margin-bottom: 6px !important;
    }

    #footer .col-12.col-lg-3 {
        text-align: center !important;
    }

    /* Hero form — full width inputs */
    .hero-wrap .col-lg-6,
    .hero-wrap .col-lg-5,
    .hero-wrap .col-lg-7 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hero form card padding */
    .hero-wrap .bg-white.rounded.p-4 {
        padding: 16px !important;
    }

    /* Hero right-side content */
    .hero-wrap .col-lg-7 h1 {
        font-size: 1.4rem !important;
    }

    .hero-wrap .col-lg-7 .d-flex.gap-3 > div .fw-700[style*="1.5rem"] {
        font-size: 1.1rem !important;
    }

    /* Hero CTA buttons — stack vertically */
    .hero-wrap .col-lg-7 .d-flex.gap-2 {
        flex-direction: column !important;
    }

    .hero-wrap .col-lg-7 .d-flex.gap-2 .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Stats bar */
    section[style*="linear-gradient"] .row.text-center h2 {
        font-size: 1.6rem !important;
    }

    section[style*="linear-gradient"] .row.text-center p {
        font-size: 12px !important;
    }

    /* Stats bar — remove right borders on mobile */
    section[style*="linear-gradient"] div[style*="border-right"] {
        border-right: none !important;
    }

    /* About section */
    section[style*="padding:70px"] {
        padding: 30px 0 !important;
    }

    section h2[style*="2rem"] {
        font-size: 1.3rem !important;
    }

    /* About feature cards */
    .col-6 div[style*="padding:24px"] {
        padding: 14px !important;
    }

    .col-6 div[style*="padding:24px"] h6 {
        font-size: 13px !important;
    }

    /* How it works cards */
    section .col-md-4 div[style*="padding:30px"] {
        padding: 16px !important;
        margin-bottom: 8px !important;
    }

    /* Popular routes — 3 cols on phone */
    section .col-6.col-md-4.col-lg-2 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }

    section .col-6.col-md-4.col-lg-2 div[style*="padding:20px"] {
        padding: 12px 8px !important;
    }

    /* Industries — 3 cols on phone */
    section .col-6.col-md-4.col-lg-2 div[style*="padding:24px 16px"] {
        padding: 14px 8px !important;
    }

    /* Testimonials — single column */
    section .col-md-6.col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Booking — parcel type cards 2 columns */
    .parcel-type-card {
        padding: 8px 6px !important;
    }

    /* Trust bar icons */
    #footer .col-sm-6.col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 10px !important;
    }

    /* Step progress — smaller */
    .step-dot {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }

    .step-line {
        width: 15px !important;
    }

    /* Blog sidebar hidden on small phones */
    .col-lg-4.col-xl-3 {
        display: none !important;
    }

    /* WhatsApp button — don't overlap content */
    #whatsapp-float {
        bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
        right: 12px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 22px !important;
    }

    /* Back to top — position alongside WhatsApp */
    #back-to-top {
        display: none !important;
    }
}

/* ========== VERY SMALL PHONES (max-width: 375px) ========== */
@media (max-width: 375px) {

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    h1 {
        font-size: 1.2rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    .hero-wrap .bg-white {
        padding: 12px !important;
    }

    .hero-wrap .bg-white h2 {
        font-size: 1.05rem !important;
    }

    .pj-select-wrap .pj-select-btn {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Popular routes & Industries — 2 cols on tiny phones */
    section .col-6.col-md-4.col-lg-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Footer links — smaller */
    #footer .nav.flex-column .nav-link {
        font-size: 12px !important;
    }

    .reg-right {
        padding: 15px !important;
    }

    .booking-card {
        padding: 12px !important;
    }
}

/* ========== HOMEPAGE FOOTER TUNING ========== */
@media (max-width: 767px) {
    .pj-home-footer .pj-home-footer-grid {
        --bs-gutter-y: 1.25rem;
    }

    .pj-home-footer .pj-home-footer-grid > .pj-home-footer-group {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .pj-home-footer .pj-home-footer-grid > .pj-home-footer-contact {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    .pj-home-footer .pj-home-footer-grid h4.text-3 {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        font-size: 15px !important;
    }

    .pj-home-footer .nav.flex-column .nav-link {
        margin: 0 !important;
        padding: 4px 0 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .pj-home-footer .social-icons {
        justify-content: flex-start !important;
        margin-top: 12px !important;
    }

    .pj-home-footer .footer-copyright {
        padding-top: 24px !important;
        margin-top: 24px !important;
    }

    .pj-home-footer .footer-copyright .copyright-text {
        font-size: 13px !important;
        line-height: 1.65 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 575px) {
    .pj-home-footer .container.mt-4 {
        margin-top: 1.25rem !important;
    }

    .pj-home-footer .pj-home-footer-grid {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .pj-home-footer .pj-home-footer-grid > .pj-home-footer-group {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .pj-home-footer .pj-home-footer-grid > .pj-home-footer-contact {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .pj-home-footer .section.bg-primary {
        padding: 16px 0 12px !important;
    }

    .pj-home-footer .section.bg-primary .featured-box {
        padding: 0 6px !important;
        margin-bottom: 10px !important;
    }

    .pj-home-footer .section.bg-primary h4 {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .pj-home-footer .section.bg-primary p {
        font-size: 11px !important;
        line-height: 1.55 !important;
        margin-bottom: 0 !important;
    }
}

/* ========== PUBLIC SHELL POLISH ========== */
@media (max-width: 767px) {
    body {
        overflow-x: clip;
    }

    .pj-topbar {
        padding: 8px 0 !important;
    }

    .pj-topbar .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .pj-topbar .pj-topbar-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .pj-topbar .pj-topbar-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
        font-size: 10px !important;
        letter-spacing: 1.35px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .pj-topbar .pj-topbar-tagline {
        display: none !important;
    }

    .pj-topbar .pj-topbar-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        min-width: 0;
        flex-shrink: 0;
    }

    .pj-topbar .pj-topbar-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .pj-topbar .d-none.d-md-inline,
    .pj-topbar .d-none.d-md-inline-flex {
        display: none !important;
    }

    .pj-topbar .pj-topbar-link i {
        flex-shrink: 0;
    }

    .pj-topbar .pj-topbar-link span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pj-topbar .pj-topbar-phone {
        max-width: 132px;
        font-size: 11px !important;
    }

    /* Only one number fits a phone-width top bar ("/ second" is hidden); the contact page lists both. */
    .pj-topbar .pj-topbar-phone-2 {
        display: none !important;
    }

    .pj-topbar .pj-topbar-quick {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        flex-shrink: 0;
    }

    #header {
        position: sticky;
        top: 0;
        z-index: 98;
    }

    #header .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #header .header-row {
        min-height: 72px;
        gap: 10px;
        align-items: center !important;
    }

    #header .header-column.justify-content-end {
        gap: 10px;
    }

    #header .logo {
        margin-right: 0 !important;
    }

    #header .logo img {
        max-width: 132px !important;
        width: 132px !important;
        height: auto !important;
    }

    #header .vr {
        display: none !important;
    }

    #header .navbar-toggler {
        margin: 0;
        padding: 8px 10px;
        border-radius: 10px;
        background: #f8fafc;
    }

    #header .primary-menu {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
    }

    #header .primary-menu > div {
        width: 100%;
        margin-top: 10px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
        overflow: hidden;
    }

    #header .primary-menu ul.navbar-nav > li > a:not(.btn),
    #header .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
        font-size: 14px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    #header .login-signup ul.navbar-nav > li.profile > a span.user-icon {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: #eef2f6;
        color: #1e2a3a;
    }

    .pj-page-header {
        padding: 46px 0 34px !important;
    }

    .pj-app-download-cta {
        margin-top: 20px !important;
    }

    .pj-app-download-cta .pj-app-download-card {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .pj-app-download-cta .pj-app-download-row {
        --bs-gutter-y: 0.9rem;
    }

    .pj-app-download-cta .pj-app-download-copy,
    .pj-app-download-cta .pj-app-download-actions {
        text-align: left !important;
    }

    .pj-app-download-cta .pj-app-download-actions {
        display: flex !important;
        flex-direction: column !important;
    }

    .pj-app-download-cta .pj-app-download-link {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 14px !important;
    }

    .pj-app-download-cta .pj-app-download-link-text {
        min-width: 0;
    }

    #footer.pj-site-footer {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }

    #footer.pj-site-footer .pj-footer-grid {
        --bs-gutter-x: 1.1rem;
        --bs-gutter-y: 1.15rem;
    }

    #footer.pj-site-footer .pj-footer-brand {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }

    #footer.pj-site-footer .pj-footer-brand ul {
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }

    #footer.pj-site-footer .pj-footer-group {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #footer.pj-site-footer .pj-footer-contact {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #footer.pj-site-footer .pj-footer-group h6,
    #footer.pj-site-footer .pj-footer-contact h6 {
        margin-bottom: 10px !important;
    }

    #footer.pj-site-footer .pj-footer-group a,
    #footer.pj-site-footer .pj-footer-contact a,
    #footer.pj-site-footer .pj-footer-contact span {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    #footer.pj-site-footer .pj-footer-bottom {
        row-gap: 8px;
        text-align: center;
    }

    #footer.pj-site-footer .pj-footer-bottom > div {
        text-align: center !important;
    }

    .pj-track-nav {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .pj-track-search .input-group {
        flex-direction: column;
        gap: 10px;
    }

    .pj-track-search .track-input,
    .pj-track-search .track-btn {
        width: 100%;
        border-radius: 12px !important;
    }

    .pj-track-search .track-btn {
        justify-content: center;
    }

    .pj-track-highlights {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px 18px !important;
    }

    .pj-track-highlights > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .pj-auth-panel {
        padding: 30px 20px !important;
    }

    .pj-auth-form {
        padding-top: 8px !important;
    }
}

@media (max-width: 575px) {
    .pj-topbar {
        padding: 7px 0 !important;
    }

    .pj-topbar .pj-topbar-badge {
        font-size: 9px !important;
        letter-spacing: 1.15px !important;
    }

    .pj-topbar .pj-topbar-phone {
        max-width: 118px;
        font-size: 10.5px !important;
    }

    .pj-topbar .pj-topbar-quick {
        min-height: 36px !important;
        padding: 0 11px !important;
        font-size: 11.5px !important;
    }

    #header .header-row {
        min-height: 68px;
    }

    #header .login-signup ul.navbar-nav > li.profile > a span.user-icon {
        width: 38px;
        height: 38px;
    }

    .pj-app-download-cta .pj-app-download-card {
        padding: 16px !important;
    }

    .pj-app-download-cta .pj-app-download-link-meta {
        font-size: 10px !important;
    }

    .pj-app-download-cta .pj-app-download-link-title {
        font-size: 12.5px !important;
    }

    #footer.pj-site-footer {
        padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
    }

    #footer.pj-site-footer .pj-footer-grid {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    #footer.pj-site-footer .pj-footer-brand ul {
        gap: 10px !important;
    }

    #footer.pj-site-footer .pj-footer-group {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #footer.pj-site-footer .pj-footer-contact {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .pj-track-nav .container {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center !important;
    }

    .pj-track-nav .navbar-brand {
        width: 100%;
        justify-content: center;
    }

    .pj-track-nav-actions {
        width: 100%;
    }

    .pj-track-nav-actions .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .pj-track-highlights {
        justify-content: flex-start !important;
        text-align: left;
    }

    .pj-track-highlights > span {
        justify-content: flex-start;
        text-align: left;
    }

    .pj-auth-panel {
        padding: 24px 18px !important;
    }

    .pj-auth-form {
        padding-top: 0 !important;
    }

    .pj-auth-aux-row,
    .pj-auth-split-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
}

@media (max-width: 374px) {
    #footer.pj-site-footer .pj-footer-group {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ========== TOUCH-FRIENDLY ========== */
@media (hover: none) and (pointer: coarse) {
    /* Bigger tap targets on touch devices — buttons and primary nav only */
    .btn, .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Primary nav links — touch-friendly */
    .primary-menu .nav-link,
    .login-signup .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer links — compact, no forced height */
    #footer .nav.flex-column .nav-link {
        min-height: auto;
        display: block;
        padding: 5px 0;
    }

    .form-control, .form-select, .reg-input, .reg-select {
        min-height: 44px;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Disable hover effects on touch */
    .pj-card:hover {
        transform: none !important;
    }
}

/* ========== LANDSCAPE PHONES ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-content {
        min-height: auto !important;
        padding: 15px 0 !important;
    }

    .track-hero {
        padding: 20px 0 !important;
    }

    .pj-page-header {
        padding: 25px 0 20px !important;
    }
}

/* ========== PWA STANDALONE MODE ========== */
@media (display-mode: standalone) {
    /* Hide browser-specific elements when running as PWA */
    .pj-topbar {
        display: none !important;
    }

    /* Add safe area for notched phones */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ========== PRINT ========== */
@media print {
    .pj-topbar, #header, #announcement-bar, #footer,
    .btn, .social-icons, .back-to-top {
        display: none !important;
    }
}