/* ============================================================
   MOBILE APP SHELL — only active below 768px
   ============================================================ */
@media (max-width: 767px) {

  /* Body padding: top clears fixed navbar/title bar, bottom clears bottom nav */
  body { padding-top: 54px !important; padding-bottom: 68px; }

  /* ---- Slim top navbar: logo only ---- */
  .navbar { height: 50px !important; padding: 6px 16px !important; }
  .navbar .navbar-toggler,
  .navbar .navbar-collapse { display: none !important; }

  /* ---- App inner-page title bar — overlays the navbar ---- */
  .mob-page-title {
    display: flex;
    align-items: center;
    height: 50px;
    background: #262938;
    padding: 0 16px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1031;
  }
  .mob-page-title .mpg-back {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 17px;
    padding: 0 14px 0 0;
    cursor: pointer;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-page-title .mpg-back:active { color: #F79F24; }
  .mob-page-title .mpg-title {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    flex: 1;
  }

  /* ---- Bottom Navigation Bar ---- */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #262938;
    border-top: 1px solid #1a1c27;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1050;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    gap: 3px;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
  }
  .mobile-nav-item i { font-size: 19px; line-height: 1; }
  .mobile-nav-item span {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }
  .mobile-nav-item.active,
  .mobile-nav-item:active { color: #F79F24; }
  .mobile-nav-item.active i { filter: drop-shadow(0 0 4px rgba(247,159,36,0.4)); }

  /* ============================================================
     GLOBAL PAGE STRIPPING
     ============================================================ */

  /* Hide testimonials carousel */
  .clients { display: none !important; }

  /* Hide desktop breadcrumb banners */
  .bg, .contact-bg { display: none !important; }

  /* Hide Google Maps iframe */
  .mapouter { display: none !important; }

  /* Footer: keep contact column only */
  .footer-top .col-lg-4:nth-child(2),
  .footer-top .col-lg-4:nth-child(3) { display: none !important; }
  .footer-top { padding: 20px 0 !important; }

  /* ============================================================
     HOME PAGE
     ============================================================ */
  #home {
    margin-top: 0 !important;
    padding-top: 8px !important;
    min-height: auto !important;
  }
  #home .container { padding: 0 12px; }

  /* Service grid */
  #smcardbody {
    border-radius: 14px !important;
    padding: 10px 4px !important;
    margin: 0 !important;
  }
  #smcardbody center {
    width: 100% !important;
    padding: 4px 12px 0 !important;
    margin-bottom: 12px !important;
  }
  #smcardbody center h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    color: #fff !important;
    line-height: 1.3 !important;
  }
  #smcardbody > a {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    min-height: 80px !important;
    padding: 8px 4px !important;
    border-radius: 10px;
    transition: background 0.15s;
    box-sizing: border-box;
  }
  #smcardbody > a:active { background: rgba(255,255,255,0.08); }
  #smcardbody > a i { font-size: 24px !important; }
  #smcardbody > a div,
  #smcardbody > a span {
    font-size: 11px !important;
    font-weight: 500;
    text-align: center;
    display: block;
  }

  /* About section: hide image col, make text full-width */

  /* Booking form: drop image, full-width form */
  #booking { padding: 20px 16px !important; }
  #booking h2 { font-size: 17px !important; text-align: center; margin-bottom: 16px; }
  #booking .col-lg-5 { display: none !important; }
  #booking .col-lg-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  #booking input,
  #booking select,
  #booking textarea {
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #booking .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ============================================================
     ABOUT PAGE
     ============================================================ */
  /* Hide team section */
  #our-team { display: none !important; }
  /* Hide large image in about section */
  #about-us .col-lg-5 { display: none !important; }
  #about-us .col-lg-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #about-us .accordion { margin-top: 0 !important; }

  /* ============================================================
     CONTACT PAGE
     ============================================================ */
  #contact.form-container {
    padding: 16px 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  #contact .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ============================================================
     PROFILE SHEET
     ============================================================ */
  .profile-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1060;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .profile-sheet-overlay.open { opacity: 1; pointer-events: all; }

  .profile-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 12px 24px 80px;
    z-index: 1070;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    overflow-y: auto;
  }
  .profile-sheet.open { transform: translateY(0); }

  .profile-sheet-handle {
    width: 40px; height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0 auto 20px;
  }
  .profile-sheet h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px; font-weight: 600;
    margin-bottom: 18px; color: #262938;
  }
  .profile-sheet .ps-control {
    display: block; width: 100%; height: 46px;
    padding: 0 14px; border: 1.5px solid #e8e8e8;
    border-radius: 10px; font-family: 'Poppins', sans-serif;
    font-size: 14px; color: #262938; margin-bottom: 12px;
    outline: none; transition: border-color 0.15s; box-sizing: border-box;
  }
  .profile-sheet .ps-control:focus { border-color: #F79F24; }
  .profile-sheet .ps-btn {
    display: block; width: 100%; height: 46px;
    background: #F79F24; color: #262938; border: none;
    border-radius: 10px; font-family: 'Poppins', sans-serif;
    font-size: 14px; font-weight: 700; margin-top: 6px; cursor: pointer;
  }
  .profile-sheet .ps-btn-ghost {
    background: #f4f4f4; color: #555; font-weight: 600; margin-top: 8px;
  }
  .profile-avatar-circle {
    width: 60px; height: 60px; background: #262938; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px; color: #F79F24; font-size: 26px;
    font-family: 'Poppins', sans-serif; font-weight: 700;
  }
  .profile-saved-name {
    text-align: center; font-family: 'Poppins', sans-serif;
    font-size: 16px; font-weight: 600; color: #262938; margin-bottom: 3px;
  }
  .profile-saved-sub {
    text-align: center; font-family: 'Poppins', sans-serif;
    font-size: 12px; color: #999; margin-bottom: 20px;
  }
  #profile-close-btn {
    position: absolute; top: 14px; right: 20px;
    background: none; border: none; font-size: 22px;
    color: #bbb; cursor: pointer; line-height: 1; padding: 0;
  }

  /* ============================================================
     BOOK DRAWER
     ============================================================ */
  .book-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1060;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .book-drawer-overlay.open { opacity: 1; pointer-events: all; }

  .book-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 12px 0 80px;
    z-index: 1070;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 90vh;
    overflow-y: auto;
  }
  .book-drawer.open { transform: translateY(0); }

  .book-drawer-handle {
    width: 40px; height: 4px; background: #e0e0e0;
    border-radius: 2px; margin: 0 auto 4px;
  }
  .book-drawer-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px; font-weight: 700; color: #262938;
    padding: 12px 20px 8px;
    border-bottom: 1px solid #f4f4f4;
  }

  .bdrawer-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    text-decoration: none;
    color: #262938;
    border-bottom: 1px solid #f8f8f8;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
  }
  .bdrawer-item:active,
  .bdrawer-item:hover { background: #fafafa; color: #262938; text-decoration: none; }

  .bdrawer-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: #f4f4f4; display: flex; align-items: center;
    justify-content: center; margin-right: 14px; flex-shrink: 0;
    font-size: 20px; color: #262938;
  }
  .bdrawer-item.featured .bdrawer-icon {
    background: #262938; color: #F79F24;
  }

  .bdrawer-text { flex: 1; }
  .bdrawer-text strong {
    display: block; font-family: 'Poppins', sans-serif;
    font-size: 14px; font-weight: 600; color: #262938;
  }
  .bdrawer-text small {
    font-family: 'Poppins', sans-serif;
    font-size: 11px; color: #999;
  }
  .bdrawer-chevron { color: #ccc; font-size: 13px; }

  /* ============================================================
     GLOBAL APP FEEL — applies to all pages
     ============================================================ */
  body { background: #f4f4f6 !important; }

  /* All hero/breadcrumb banners → hidden */
  .sh-hub, .dr-hub, .repair-hero { display: none !important; }

  /* Universal section card wrapper */
  section, .content-width, #photo_gallery {
    background: #fff;
    border-radius: 14px;
    margin: 10px 10px 0 !important;
    padding: 18px 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  /* Override #home to keep its hero background */
  #home { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; }
  #home .home-caption { display: none !important; }

  /* App-style section titles — 3-level hierarchy */
  section h2, .content-width h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #262938 !important;
    margin-bottom: 12px !important;
  }
  section h3, .content-width h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #262938 !important;
    margin-bottom: 10px !important;
  }
  section h4, section h5, .content-width h4 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #262938 !important;
    margin-bottom: 8px !important;
  }

  /* Full-width columns for all pages */
  .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8,
  .col-md-3, .col-md-4, .col-md-5, .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Strip nested container padding inside content-width to prevent double-indent */
  .content-width .container,
  .content-width .px-3 { padding-left: 0 !important; padding-right: 0 !important; }

  /* Native-style form inputs everywhere */
  input[type=text], input[type=email], input[type=tel],
  input[type=date], input[type=time], input[type=number],
  select, textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: #262938 !important;
    background: #fff !important;
    margin-bottom: 10px !important;
    -webkit-appearance: none;
  }
  input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus,
  input[type=date]:focus, input[type=time]:focus, select:focus, textarea:focus {
    border-color: #F79F24 !important;
    outline: none !important;
  }

  input[type=file] {
    width: 100% !important;
    padding: 10px 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    color: #555 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 4px !important;
  }

  /* Native CTA button */
  .c-btn, button[type=submit], input[type=submit] {
    border-radius: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
  }

  /* ============================================================
     SERVICES PAGE
     ============================================================ */
  /* Each service block becomes a card */
  .d-advert, .s-advert {
    background: #fff !important;
    border-radius: 14px !important;
    margin: 10px 10px 0 !important;
    padding: 18px 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  }
  /* Hide hex clip-path images */
  .d-advert [style*="clip-path"],
  .s-advert [style*="clip-path"] { display: none !important; }
  /* Text columns go full width */
  .d-advert .col-lg-6, .s-advert .col-lg-6 {
    flex: 0 0 100% !important; max-width: 100% !important;
  }
  .d-advert h4, .s-advert h4 {
    font-size: 14px !important; font-weight: 700 !important;
    color: #262938 !important; text-align: left !important;
    padding-top: 0 !important;
  }
  .d-advert ul, .s-advert ul {
    text-align: left !important; padding-left: 18px !important;
    margin-bottom: 12px !important; font-size: 13px !important;
  }
  /* Repair image grid → hide; keep text cols */
  .repair-img { display: none !important; }
  .d-advert.repair .col-lg-4 { display: none !important; }
  .d-advert.repair .col-lg-3,
  .d-advert.repair .col-lg-5 {
    flex: 0 0 100% !important; max-width: 100% !important;
  }
  .d-advert.repair h5 {
    font-size: 14px !important; font-weight: 700 !important;
    color: #262938 !important; margin-bottom: 10px !important;
  }

  /* About section on services → compact */
  #about-us .box .hide { display: none !important; }
  #about-us .box .less { display: none !important; }
  #about-us .box .more { display: none !important; }
  #about-us .box { padding: 0 !important; }
  #about-us .box p { font-size: 13px !important; color: #555 !important; }

  /* Accordion native style */
  #main { margin: 10px 10px 0 !important; }
  .accordion .accordion-button, .accordion-button {
    font-size: 13px !important; font-weight: 600 !important;
    padding: 14px !important; border-radius: 10px !important;
  }

  /* ============================================================
     FLEET GALLERY PAGE
     ============================================================ */
  #photo_gallery { padding: 10px 8px !important; margin: 8px 8px 0 !important; }
  #photo_gallery h3 {
    font-size: 15px !important; font-weight: 700 !important;
    text-align: left !important; color: #262938 !important;
    margin-bottom: 12px !important;
  }

  /* Filter as compact chip row */
  #filter-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  #filter-form .form-check {
    background: #f4f4f6 !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    margin: 0 !important;
    border: 1.5px solid #e8e8e8 !important;
  }
  #filter-form .form-check-label {
    font-size: 12px !important; font-weight: 500 !important;
    color: #262938 !important; cursor: pointer;
  }
  #filter-form .form-check-input { display: none !important; }
  #filter-form .form-check:has(.form-check-input:checked) {
    background: #262938 !important; border-color: #262938 !important;
  }
  #filter-form .form-check:has(.form-check-input:checked) .form-check-label {
    color: #F79F24 !important;
  }

  /* Vehicle cards → 2-col grid */
  #fleet-container { row-gap: 10px !important; }
  #fleet-container > .col-lg-4 {
    flex: 0 0 50% !important; max-width: 50% !important;
    padding: 0 4px !important;
  }
  #fleet-container .card {
    border-radius: 12px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
  }
  #fleet-container .card-body {
    padding: 8px !important;
  }
  #fleet-container .card-title {
    font-size: 12px !important; font-weight: 700 !important;
    color: #262938 !important; margin-bottom: 4px !important;
  }
  .fleet-price-table { font-size: 11px !important; }
  .fleet-price-table td, .fleet-price-table th { padding: 3px 4px !important; }

  /* ============================================================
     RENTAL HUB / SHARING HUB / DRIVER HUB
     ============================================================ */
  .content-width { margin: 10px 10px 0 !important; padding: 18px 14px !important; }
  #rental { margin: 0 !important; padding: 14px !important; box-shadow: none !important; border-radius: 14px !important; }
  #rental input, #rental select, #rental textarea {
    border-radius: 10px !important;
    border: 1.5px solid #e8e8e8 !important;
  }

  /* Tab nav → pill style */
  .nav-tabs {
    border: none !important;
    background: #f4f4f6 !important;
    border-radius: 12px !important;
    padding: 4px !important;
    margin-bottom: 16px !important;
    display: flex !important;
  }
  .nav-tabs .nav-item { flex: 1 !important; }
  .nav-tabs .nav-link {
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #888 !important;
    text-align: center !important;
    padding: 8px 4px !important;
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .nav-tabs .nav-link.active {
    background: #262938 !important;
    color: #F79F24 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
  }

  /* Rental/sharing form cols */
  .col-lg-6.col-md-6, .col-lg-4.col-md-6 {
    flex: 0 0 100% !important; max-width: 100% !important;
  }

  /* ============================================================
     REPAIR HUB PAGE
     ============================================================ */
  #booking section, #mechanics section, #vendors section { margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  .repair-hero + section { margin-top: 0 !important; }

  /* ============================================================
     ABOUT PAGE (additional)
     ============================================================ */
  #about-us .col-lg-5 { display: none !important; }
  #about-us .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; }
  #about-us section { margin-bottom: 0 !important; }

  /* Team section cards → 1-col */
  #our-team .col-lg-4 {
    flex: 0 0 100% !important; max-width: 100% !important;
    margin-bottom: 0 !important; margin-top: 12px !important;
  }
  #our-team .card { border-radius: 12px !important; }
  #our-team .card-img-top { max-height: 160px; object-fit: cover; }

  /* ============================================================
     FOOTER compact
     ============================================================ */
  footer .footer-top { padding: 16px 14px !important; margin: 10px 10px 0 !important; background: #fff; border-radius: 14px; }
  footer .footer-top h4 { font-size: 13px !important; font-weight: 700 !important; margin-bottom: 6px !important; }
  footer .footer-top p { font-size: 12px !important; color: #555 !important; margin-bottom: 2px !important; }
}

/* ---- Hide all mobile-only elements on desktop ---- */
@media (min-width: 768px) {
  .mobile-bottom-nav,
  .profile-sheet-overlay,
  .profile-sheet,
  .book-drawer-overlay,
  .book-drawer,
  .mob-page-title { display: none !important; }
}