/* ============================================================
   PM PROGRAMING - MOBILE APP UI (ADD-ON)
   ------------------------------------------------------------
   Loads ALONGSIDE Bootstrap + style.css (does not replace).
   All rules are scoped to @media (max-width: 991.98px) so the
   desktop view stays 100% identical. Bottom nav is hidden on
   desktop via the matching @media (min-width: 992px) block at
   the bottom of this file.

   Color tokens reuse :root variables from css/style.css
   ------------------------------------------------------------ */

/* ========== MOBILE + TABLET (matches Bootstrap lg breakpoint) ========== */
@media (max-width: 991.98px) {

  /* --- Reserve space for the fixed bottom navigation --- */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  /* --- Compact the desktop navbar on mobile: keep brand, hide menu --- */
  /* (Bootstrap already collapses the menu to a hamburger; we replace
     the hamburger experience with the bottom nav below.) */
  #mainNav { padding: 8px 0; }
  #mainNav .navbar-toggler { display: none !important; }
  #mainNav .collapse.navbar-collapse { display: none !important; }
  #mainNav .container { padding-left: 16px; padding-right: 16px; }
  .brand-logo { max-height: 32px !important; }
  .brand-text { font-size: 1.05rem !important; }
  .top-announce-bar { font-size: .78rem; padding: 6px 10px; }

  /* --- Typography: tighter for native feel --- */
  body { font-size: 15.5px; line-height: 1.65; }
  h1, .hero-title { font-size: 1.7rem !important; letter-spacing: -0.01em; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.15rem !important; }
  section { padding-top: 28px; padding-bottom: 28px; }
  .container { padding-left: 16px; padding-right: 16px; }

  /* --- Cards: rounded + soft shadow + tap feedback --- */
  .card,
  .product-card,
  .pricing-card,
  .blog-card,
  .feature-card,
  .article-card {
    border: 0;
    border-radius: var(--radius-lg, 20px);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .card:active,
  .product-card:active,
  .pricing-card:active,
  .blog-card:active,
  .article-card:active {
    transform: scale(0.985);
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.10);
  }

  /* --- Tap-target safe buttons (44px+ per Apple HIG / Material) --- */
  .btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: .98rem;
    border-radius: var(--radius-sm, 8px);
  }
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    margin-bottom: 8px;
  }

  /* --- Hero --- */
  .hero-section { padding: 24px 0 16px; min-height: auto; }
  .hero-visual { min-height: auto; margin-top: 16px; }

  /* --- Hide the contact buttons sitting in the top nav (they're now in
        the dedicated Contact page + bottom-nav entry) --- */
  #mainNav .ms-lg-3 { display: none !important; }

  /* --- PRICING TABLES -> stacked vertical cards (no side-scroll) --- */
  .table-responsive { overflow-x: visible !important; }
  table.pricing-table,
  table.table-pricing,
  .pricing-mobile-stack {
    display: block;
    width: 100%;
  }
  table.pricing-table thead,
  table.table-pricing thead { display: none; }
  table.pricing-table tbody,
  table.table-pricing tbody { display: block; }
  table.pricing-table tr,
  table.table-pricing tr {
    display: block;
    background: #fff;
    border-radius: var(--radius-lg, 20px);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
    margin-bottom: 14px;
    padding: 14px 16px;
  }
  table.pricing-table td,
  table.table-pricing td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    border-bottom: 1px dashed var(--gray-200, #E2E8F0);
    padding: 9px 0;
    white-space: normal;
  }
  table.pricing-table td:last-child,
  table.table-pricing td:last-child { border-bottom: 0; }
  /* Use data-label="ชื่อคอลัมน์" attribute on <td> for a label prefix.
     Optional — if omitted, layout still works. */
  table.pricing-table td[data-label]::before,
  table.table-pricing td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--gray-700, #334155);
    margin-right: 12px;
    flex-shrink: 0;
  }

  /* --- BLOG / ARTICLE LIST: 1 column full width cards --- */
  .blog-grid,
  .article-grid,
  .blog-list .row { gap: 12px !important; }
  .blog-list .col-md-6,
  .blog-list .col-lg-4,
  .article-list .col-md-6,
  .article-list .col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px;
  }
  .blog-card img,
  .article-card img,
  .post-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
  }

  /* --- SYSTEM/PRODUCT GRID: 2 columns on phones, 3 on small tablets --- */
  .product-grid,
  .catalog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* Bootstrap product cards (col-md-* etc.) -> force 2-col on phones */
  .product-list .col-md-4,
  .product-list .col-md-6,
  .product-list .col-lg-3,
  .product-list .col-lg-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* --- CONTACT PAGE: full-width LINE/Call buttons in CONTENT area --- */
  /* Note: scoped to in-page CTAs only (inside sections), NOT the
     legacy .float-contact-bar at the bottom of the screen — that one
     is hidden below to make room for the Bottom Nav.                  */
  .contact-cta,
  section .btn-line,
  section .btn-call {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 14px;
    margin-bottom: 10px;
    min-height: 52px;
  }

  /* --- HIDE the legacy floating Call+LINE bar from style.css --- */
  /* It conflicted with the Bottom Nav. The Call/LINE actions are
     still reachable: (a) via in-page content cards on pricing/contact/
     product pages, (b) via the "ติดต่อเรา" tab in the Bottom Nav.    */
  .float-contact-bar { display: none !important; }

  /* --- FOOTER: compact, leave room for bottom nav --- */
  .footer { padding: 24px 16px 24px !important; }
  .footer .row > [class*='col-'] { margin-bottom: 16px; }

  /* --- Hide AOS animations on mobile for snappier feel --- */
  [data-aos] { transition-delay: 0s !important; }

  /* --- CATALOG FILTER BAR: horizontal scroll, single row --- */
  /* Override Bootstrap .flex-wrap so tag chips stay in one swipeable row
     instead of stacking into 3 rows and eating half the viewport.       */
  .filter-bar .d-flex.flex-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px 16px 10px;
    margin: 0 -16px;          /* bleed to screen edges */
    gap: 8px !important;
    /* Soft fade on right edge to hint "more chips →" */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  /* hide scrollbar (still scrollable by swipe) */
  .filter-bar .d-flex.flex-wrap::-webkit-scrollbar { display: none; }
  .filter-bar .d-flex.flex-wrap { scrollbar-width: none; }

  .filter-bar .filter-btn {
    flex: 0 0 auto;            /* don't shrink */
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 8px 16px;
    min-height: 38px;
    font-size: .88rem;
    border-radius: 999px;
  }
  /* Make filter-bar sticky just under the navbar so it stays accessible */
  .filter-bar {
    position: sticky;
    top: 0;
    z-index: 1015;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.08);
  }
}


/* ============================================================
   BOTTOM NAVIGATION BAR
   Only rendered on mobile/tablet (hidden on desktop below).
============================================================ */
@media (max-width: 991.98px) {
  .mobile-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1100;
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    /* Blue gradient top border (more vivid in the middle, fades at the edges) */
    border-top: 1.5px solid transparent;
    border-image: linear-gradient(90deg,
        rgba(37, 99, 235, 0.10) 0%,
        rgba(37, 99, 235, 0.55) 25%,
        rgba(59, 130, 246, 0.70) 50%,
        rgba(37, 99, 235, 0.55) 75%,
        rgba(37, 99, 235, 0.10) 100%) 1;
    /* Layered shadow: soft blue glow + crisp shadow underneath */
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.85) inset,
        0 -2px 6px rgba(37, 99, 235, 0.06),
        0 -8px 24px rgba(37, 99, 235, 0.16),
        0 -16px 48px rgba(37, 99, 235, 0.10),
        0 -4px 12px rgba(15, 23, 42, 0.06);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bottom-nav__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--gray-500, #64748B);
    text-decoration: none;
    font-family: 'Sarabun', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    border-radius: 12px;
    transition: color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav__item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease, stroke-width .18s ease;
  }
  .mobile-bottom-nav__item:active svg { transform: scale(0.88); }
  .mobile-bottom-nav__item:hover { color: var(--blue-600, #2563EB); }

  .mobile-bottom-nav__item.is-active {
    color: var(--blue-600, #2563EB);
    font-weight: 700;
    /* Soft blue wash behind the active item */
    background: linear-gradient(180deg,
        rgba(37, 99, 235, 0.10) 0%,
        rgba(37, 99, 235, 0.00) 70%);
  }
  .mobile-bottom-nav__item.is-active svg {
    stroke-width: 2.5;
    /* Subtle blue glow on the active icon */
    filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.35));
  }
  /* Active indicator pill at the top edge of the active tab */
  .mobile-bottom-nav__item.is-active::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 4px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5);
  }
}

/* ========== DESKTOP: hide bottom nav, no other changes ========== */
@media (min-width: 992px) {
  .mobile-bottom-nav { display: none !important; }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav__item,
  .mobile-bottom-nav__item svg,
  .card, .product-card, .pricing-card, .blog-card, .article-card {
    transition: none !important;
  }
}