/* Mobile Responsive Styles - pewdo.com v2.0 */
/* Prevent horizontal scroll */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

@media screen and (max-width: 1024px) {
  .container, .wrapper { width: 100% !important; max-width: 100% !important; }
  .sidebar { display: none !important; }
  .main-content { width: 100% !important; float: none !important; }
}

@media screen and (max-width: 768px) {
  * { box-sizing: border-box; }
  body { font-size: 14px; line-height: 1.6; margin: 0; padding: 0; overflow-x: hidden; }
  .container, .wrapper, .main { width: 100% !important; max-width: 100% !important; padding: 0 12px !important; margin: 0 auto !important; }
  .header, .nav, .navbar { display: flex; flex-direction: column; padding: 10px !important; }
  .header .logo, .nav .logo { text-align: center; margin-bottom: 10px; }
  .nav ul, .menu ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; list-style: none; }
  .nav ul li, .menu ul li { margin: 4px 6px; }
  .nav a, .menu a { font-size: 14px; padding: 8px 12px; display: block; }
  .banner, .swiper, .carousel { height: auto !important; min-height: 180px; overflow: hidden; }
  .banner img, .swiper img, .carousel img { width: 100% !important; height: auto !important; max-height: 280px; object-fit: cover; }
  .content, .article-content { padding: 15px 10px !important; word-wrap: break-word; overflow-wrap: break-word; }
  .content h1, .article-content h1 { font-size: 20px; margin: 15px 0 10px; line-height: 1.3; }
  .content h2, .article-content h2 { font-size: 18px; margin: 12px 0 8px; line-height: 1.3; }
  .content h3, .article-content h3 { font-size: 16px; margin: 10px 0 6px; }
  .content p, .article-content p { font-size: 14px; line-height: 1.8; margin: 8px 0; }
  .content img, .article-content img { max-width: 100% !important; height: auto !important; display: block; margin: 10px auto; }
  .sidebar, .aside { display: none !important; }
  .footer { padding: 20px 10px !important; text-align: center; }
  .footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .footer a { font-size: 12px; margin: 3px; }
  table { width: 100% !important; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grid, .row { display: flex; flex-direction: column; }
  .grid > div, .row > div { width: 100% !important; margin-bottom: 15px; }
  .am-u-sm-1, .am-u-sm-2, .am-u-sm-3, .am-u-sm-4, .am-u-sm-5, .am-u-sm-6, .am-u-sm-7, .am-u-sm-8, .am-u-sm-9, .am-u-sm-10, .am-u-sm-11, .am-u-sm-12 { width: 100% !important; }
  .am-g { margin: 0 !important; }
  .breadcrumb { font-size: 12px; padding: 8px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .article-meta { font-size: 12px; color: #999; margin: 5px 0; }
  .related-list, .article-list { display: flex; flex-direction: column; }
  .related-list li, .article-list li { margin-bottom: 10px; }
  /* Touch-friendly tap targets */
  a, button { min-height: 44px; min-width: 44px; }
  .nav a { min-height: 40px; }
  /* Hide slow-loading elements on mobile */
  .desktop-only { display: none !important; }
}

@media screen and (max-width: 480px) {
  body { font-size: 13px; }
  .header { padding: 8px !important; }
  .nav a, .menu a { font-size: 13px; padding: 6px 8px; }
  .content h1 { font-size: 18px; }
  .content h2 { font-size: 16px; }
  .banner img, .swiper img { max-height: 200px; }
  .footer a { font-size: 11px; }
}

@media screen and (max-width: 360px) {
  body { font-size: 12px; }
  .nav ul li, .menu ul li { margin: 3px 4px; }
  .nav a, .menu a { font-size: 12px; padding: 5px 6px; }
  .content h1 { font-size: 16px; }
  .content p { font-size: 12px; line-height: 1.7; }
}

@media screen and (max-width: 320px) {
  .nav a, .menu a { font-size: 11px; padding: 4px 5px; }
}

/* ===== Mobile Bottom Navigation Bar ===== */
.mobile-nav {
    display: none;
}

@media screen and (max-width: 768px) {
    body {
        padding-bottom: 62px !important;
    }

    .mobile-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 58px;
        background: #fff;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top: 1px solid #eee;
    }

    .mn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #666;
        padding: 6px 0 4px;
        position: relative;
        transition: color 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .mn-item:active {
        color: #e63946;
    }

    .mn-icon {
        width: 22px;
        height: 22px;
        margin-bottom: 2px;
    }

    .mn-label {
        font-size: 11px;
        line-height: 1;
        font-weight: 500;
    }

    /* Highlight call button */
    .mn-call {
        color: #e63946;
    }

    .mn-call .mn-icon {
        stroke: #e63946;
    }

    .mn-call .mn-label {
        color: #e63946;
        font-weight: 600;
    }

    /* Service button accent */
    .mn-service {
        position: relative;
    }

    .mn-service::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 38px;
        background: linear-gradient(135deg, #e63946, #f5576c);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(230,57,70,0.35);
        z-index: 0;
    }

    .mn-service .mn-icon {
        position: relative;
        z-index: 1;
        width: 20px;
        height: 20px;
        stroke: #fff;
        margin-top: -16px;
        margin-bottom: 4px;
    }

    .mn-service .mn-label {
        position: relative;
        z-index: 1;
        color: #e63946;
        font-weight: 600;
    }

    /* Hide old footer-nav */
    .footer-nav.after {
        display: none !important;
    }

    /* Service Popup */
    .service-popup {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 10000;
    }

    .service-popup.active {
        display: block;
    }

    .sp-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        animation: spFadeIn 0.25s ease;
    }

    .sp-card {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 16px 16px 0 0;
        padding: 0;
        animation: spSlideUp 0.3s ease;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sp-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .sp-title {
        font-size: 17px;
        font-weight: 700;
        color: #333;
    }

    .sp-close {
        font-size: 26px;
        color: #999;
        cursor: pointer;
        line-height: 1;
        padding: 0 4px;
    }

    .sp-body {
        padding: 12px 20px;
    }

    .sp-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 0;
        border-bottom: 1px solid #f5f5f5;
        text-decoration: none;
        color: #333;
        font-size: 15px;
    }

    .sp-item:last-child {
        border-bottom: none;
    }

    .sp-btn {
        display: block;
        margin: 16px 20px 20px;
        padding: 14px;
        background: linear-gradient(135deg, #e63946, #f5576c);
        color: #fff !important;
        text-align: center;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(230,57,70,0.3);
    }

    .sp-btn:active {
        opacity: 0.85;
    }

    @keyframes spFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes spSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* Desktop: hide mobile nav */
@media screen and (min-width: 769px) {
    .mobile-nav {
        display: none !important;
    }
    .service-popup {
        display: none !important;
    }
}