/**
 * THIC Responsive Fixes - MOBILE FIRST
 *
 * Focus on mobile responsive improvements only (max-width: 767px)
 * Desktop/tablet styles are commented out to avoid conflicts
 * Import this file AFTER main theme CSS in base.php
 *
 * Priority: Mobile responsive fixes only
 * Date: 2025-10-17
 */

/* ============================================
   0. MINIMUM WIDTH - PREVENT TOO SMALL SCREENS
   ============================================ */

/* Set minimum width to prevent layout breaking on very small screens */
html, body {
  min-width: 320px; /* iPhone SE (smallest commonly used device) */
}

/* ============================================
   1. CRITICAL GLOBAL FIXES ONLY
   ============================================ */

/* COMMENTED: May affect desktop layout
img {
  max-width: 100%;
  height: auto;
}
*/

/* COMMENTED: May affect desktop layout
html, body {
  width: 100%;
  max-width: 100vw;
}
*/

/* COMMENTED: Already in Bootstrap
*, *::before, *::after {
  box-sizing: border-box;
}
*/

/* Fix Thai tone marks being cut off in hero banner titles - MOBILE ONLY */
@media only screen and (max-width: 767px) {
  .section-title h1 {
    line-height: 1.3 !important; /* Increase from 1.1em to accommodate Thai tone marks */
  }

  .hero-content .section-title h1 {
    line-height: 1.3 !important;
  }
}

/* ============================================
   2. HEADER & NAVIGATION FIXES - MOBILE ONLY
   ============================================ */

/* Mobile header fixes (up to 1200px - mobile menu breakpoint) */
@media only screen and (max-width: 1200px) {
  .headerM-sec {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  /* Fix mobile menu height for iOS */
  .headerM-sec .navbar-sec .menu-btn:checked ~ .menu {
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px); /* Use dynamic viewport on supported browsers */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch support */
  }

  /* Increase touch targets for mobile menu */
  .headerM-sec .navbar-sec li a {
    padding: 12px 15px; /* Ensure 44px+ height */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* COMMENTED: Overlay may not exist in current design
  .menu-overlay {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 995;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }

  .menu-btn:checked ~ .menu-overlay {
    opacity: 1;
    visibility: visible;
  }
  */

  /* COMMENTED: Mobile menu may not use this structure
  .mobile-menu {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 280px;
    max-width: 85vw;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    background: #fff;
    z-index: 999;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }

  .menu-btn:checked ~ .mobile-menu {
    right: 0;
  }
  */
}

/* COMMENTED: Desktop keyboard navigation - not priority for mobile
@media only screen and (min-width: 1201px) {
  .header-sec .navbar-sec .menu-list .menu-item.sub:focus-within .submenu-list {
    display: block;
  }
}
*/

/* ============================================
   3. HERO/BANNER RESPONSIVE FIXES - MOBILE ONLY
   ============================================ */

/* COMMENTED: May affect desktop hero images
.hero-slider-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
*/

/* Add top spacing to prevent navbar overlap */
/* Tablet/Small Desktop (768-1599px) - navbar overlap fix WITHOUT changing font sizes */
@media only screen and (min-width: 768px) and (max-width: 1599px) {
  .hero.hero-slider,
  .main-content {
    margin-top: 70px; /* Mobile header height - prevent navbar overlap */
  }
}

/* Mobile (up to 767px) - navbar overlap fix WITH smaller fonts */
@media only screen and (max-width: 767px) {
  .hero.hero-slider,
  .main-content {
    margin-top: 70px; /* Mobile header height */
  }
}

/* Mobile hero optimization - use 16:9 aspect ratio (56.25vw) */
@media only screen and (max-width: 767px) {
  /* Use 16:9 aspect ratio (standard widescreen) */
  /* 9/16 = 0.5625 = 56.25% */

  /* CRITICAL: Use exact height calculation to prevent zoom */
  .hero.bg-section.hero-slider,
  .hero.hero-slider {
    min-height: 56.25vw !important;
    max-height: 56.25vw !important;
    height: 56.25vw !important;
    margin: 70px 0 0 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    padding: 0 !important; /* Remove any padding */
  }

  /* Force exact height on all nested containers */
  .hero.hero-slider .hero-slider-layout,
  .hero-slider-layout {
    width: 100vw !important;
    min-height: 56.25vw !important;
    max-height: 56.25vw !important;
    height: 56.25vw !important;
    position: relative !important;
  }

  /* Swiper container - exact height */
  .hero-slider-layout .swiper,
  .hero-slider-layout > .swiper {
    width: 100vw !important;
    min-height: 56.25vw !important;
    max-height: 56.25vw !important;
    height: 56.25vw !important;
  }

  /* Swiper wrapper - exact height */
  .hero-slider-layout .swiper-wrapper,
  .hero-slider-layout .swiper > .swiper-wrapper {
    width: 100vw !important;
    min-height: 56.25vw !important;
    max-height: 56.25vw !important;
    height: 56.25vw !important;
  }

  /* Each swiper slide - exact height */
  .hero-slider-layout .swiper-slide,
  .hero-slider-layout .swiper-wrapper > .swiper-slide {
    width: 100vw !important;
    min-height: 56.25vw !important;
    max-height: 56.25vw !important;
    height: 56.25vw !important;
  }

  /* Override desktop padding - THIS IS CRITICAL */
  .hero-slider-layout .hero-slide,
  .hero-slider-layout .swiper-slide > .hero-slide,
  .hero-slider-layout .swiper-slide > a.hero-slide {
    padding: 0 !important; /* Remove 300px 0 200px padding */
    min-height: 56.25vw !important;
    max-height: 56.25vw !important;
    height: 56.25vw !important;
    display: block !important;
    position: relative !important;
  }

  /* Override desktop min-height on overlay - THIS IS CRITICAL */
  .hero-slider-layout .hero-slide::before,
  .hero-slider-layout .swiper-slide > .hero-slide::before,
  .hero-slider-layout .swiper-slide > a.hero-slide::before {
    min-height: 56.25vw !important; /* Override 700px min-height */
    max-height: 56.25vw !important;
    height: 56.25vw !important;
  }

  /* Image container - fill parent exactly */
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image,
  .hero-slider-layout .hero-slide .hero-slider-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 56.25vw !important;
  }

  /* Images fill container - use cover to fill frame */
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image img,
  .hero-slider-layout .hero-slide .hero-slider-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 56.25vw !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Optimize hero content for mobile - center vertically */
  .hero-slide .container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important; /* Center vertically */
    justify-content: center !important; /* Center horizontally */
  }

  .hero-slide .container .row {
    width: 100% !important;
    margin: 0 !important;
  }

  .hero-content {
    padding: 1.5rem 1rem !important;
    position: relative;
    z-index: 2;
  }

  .hero-content .section-title {
    margin-bottom: 1rem;
  }

  .hero-content .section-title h1 {
    font-size: 1.75rem !important; /* Smaller heading */
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
  }

  .hero-content .section-title p {
    font-size: 0.875rem !important; /* Smaller description */
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    line-clamp: 2; /* Standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Compact swiper pagination */
  .hero-slider .swiper-pagination {
    bottom: 0.5rem !important;
  }

  .hero-slider .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
    margin: 0 3px !important;
  }
}

/* ============================================
   4. BANNER LEFT-RIGHT RESPONSIVE FIXES
   ============================================ */

/* Stack banner left-right vertically on tablet (768-991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Force both columns to full width (stack vertically) */
  .why-choose-us .col-lg-6.col-md-12,
  .why-choose-us .col-lg-6.col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem;
  }

  /* Ensure images maintain aspect ratio */
  .why-choose-image {
    height: auto; /* Auto height for responsive sizing */
    max-height: 400px; /* Maximum height to prevent too large */
  }

  .why-choose-image figure,
  .why-choose-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/* ============================================
   5. CARD GRID RESPONSIVE FIXES - MOBILE ONLY
   ============================================ */

/* COMMENTED: May affect desktop cards
.service-item .service-image img,
.wrap-item .img-box img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}



/* ============================================
   6. BUTTON RESPONSIVE FIXES - MOBILE ONLY
   ============================================ */


/* ============================================
   7. FORM RESPONSIVE FIXES - MOBILE ONLY
   ============================================ */

/* Better form spacing on mobile */
@media only screen and (max-width: 767px) {
  .modal-body {
    padding: 1.5rem 1rem;
  }

  .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
  }

  .form-control {
    font-size: 1rem;
    padding: 0.75rem;
  }

  /* Password toggle larger tap target */
  .input-group-text {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.25rem;
    padding: 0.5rem;
  }

  /* Modal header spacing */
  .modal-header {
    padding: 1rem;
  }

  .modal-title {
    font-size: 1.5rem;
  }
}

/* ============================================
   8. FOOTER RESPONSIVE FIXES - MOBILE ONLY
   ============================================ */

/* COMMENTED: May affect desktop footer
.footer-logo img {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 0 auto;
}
*/

/* Footer links spacing on mobile */
@media only screen and (max-width: 767px) {
  .footer-links {
    margin-bottom: 2rem;
  }

  .footer-links ul li {
    margin-bottom: 0.75rem;
  }

  .footer-info-box {
    margin-bottom: 1rem;
  }
}

/* ============================================
   9. TABLE RESPONSIVE FIXES - MOBILE ONLY
   ============================================ */

/* Make tables scrollable on mobile */
@media only screen and (max-width: 767px) {
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 600px; /* Ensure table doesn't collapse */
  }

  /* Optional: Stack table rows */
  .table-stacked {
    min-width: 100%;
  }

  .table-stacked thead {
    display: none;
  }

  .table-stacked tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
  }

  .table-stacked td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border: none;
  }

  .table-stacked td:before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 1rem;
  }
}

/* ============================================
   10. UTILITY CLASSES - MOBILE ONLY
   ============================================ */

/* Mobile-only visibility */
.mobile-only {
  display: none;
}

@media only screen and (max-width: 767px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none !important;
  }
}

/* Responsive spacing utilities - MOBILE ONLY */
@media only screen and (max-width: 767px) {
  .mb-mobile-3 {
    margin-bottom: 1rem;
  }

  .pb-mobile-3 {
    padding-bottom: 1rem;
  }

  .px-mobile-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* COMMENTED: Touch target utility - may not be needed
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
*/

/* ============================================
   11. ACCESSIBILITY - COMMENTED (NOT MOBILE SPECIFIC)
   ============================================ */

/* COMMENTED: Focus styles - applies to all screens
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0866ff;
  outline-offset: 2px;
}
*/

/* COMMENTED: Skip to main - accessibility feature
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: #0866ff;
  color: white;
  padding: 0.5rem 1rem;
  z-index: 10000;
  text-decoration: none;
}

.skip-to-main:focus {
  top: 0;
}
*/

/* COMMENTED: High contrast - accessibility feature
@media (prefers-contrast: high) {
  body {
    background: #fff;
    color: #000;
  }

  .btn-default {
    border: 2px solid currentColor;
  }
}
*/

/* COMMENTED: Reduced motion - accessibility feature
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
*/

/* ============================================
   12. PERFORMANCE - COMMENTED (NOT MOBILE SPECIFIC)
   ============================================ */

/* COMMENTED: Lazy loading - applies to all screens
img[loading="lazy"] {
  content-visibility: auto;
}
*/

/* COMMENTED: Aspect ratio utilities - applies to all screens
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
}
*/

/* COMMENTED: Smooth scroll - applies to all screens
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
*/

/* ============================================
   13. MOBILE - REMOVE WRAPPER PADDING FOR CARD SECTIONS
   ============================================ */

/*
  ISSUE: .our-products has fixed padding: 100px 120px
  This creates thick margins on mobile that don't scale with screen size

  SOLUTION: Reduce padding to minimal values in mobile mode
*/

@media only screen and (max-width: 767px) {
  /* Remove excessive padding from section wrapper in mobile */
  .our-products,
  .our-projects,
  .page-product-single,
  .page-team {
    padding: 40px 15px !important; /* Reduce from 100px 120px to minimal padding */
  }

  /* Also reduce padding for container-fluid inside these sections */
  .our-products .container-fluid,
  .our-projects .container-fluid,
  .page-product-single .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Force rows to stack vertically */
  .our-products .row,
  .our-projects .row,
  .page-product-single .row,
  .page-team .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Force ALL column classes to 100% width - override Bootstrap */
  /* EXCEPT for product-detail-list which needs 2 columns (40:60) */
  .our-products .row > [class*="col-"],
  .our-projects .row > [class*="col-"],
  .page-product-single .row > [class*="col-"]:not(.detail-label):not(.detail-value),
  .page-team .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1.5rem !important;
  }

  /* Override specific Bootstrap column classes */
  .our-products .col-lg-3,
  .our-products .col-lg-4,
  .our-products .col-lg-6,
  .our-products .col-md-6,
  .our-projects .col-lg-3,
  .our-projects .col-lg-4,
  .our-projects .col-lg-6,
  .our-projects .col-md-6,
  .page-team .col-lg-6,
  .page-team .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Ensure cards fill the column */
  .our-products .project-item,
  .our-projects .project-item,
  .page-team .team-member-item {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ============================================
     PRODUCT DETAIL PAGE - MOBILE RESPONSIVE (SIMPLIFIED)
     ============================================ */

  /* 1. Stack product columns vertically and add margin */
  .page-product-single .row > .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    margin-bottom: 1.5rem;
  }

  /* 2. Add left-right margin to details column */
  .page-product-single .row > .col-6.ps-5 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* 3. Product detail rows - Display as simple 2-column table */

  /* Remove margin from "รายละเอียด" heading row */
  .page-product-single .row.mb-4 > p.fw-bold {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-product-single .product-detail-list {
    display: block !important;
  }

  /* Force each row to display as flex with 2 columns */
  .page-product-single .product-detail-list .detail-row.row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Label column - 50% width (col-6) in mobile */
  .page-product-single .product-detail-list .detail-row .detail-label,
  .page-product-single .product-detail-list .detail-row [class*="col-"].detail-label {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Value column - 50% width (col-6) in mobile */
  .page-product-single .product-detail-list .detail-row .detail-value,
  .page-product-single .product-detail-list .detail-row [class*="col-"].detail-value {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Label text styling - bold */
  .page-product-single .product-detail-list .detail-label p {
    margin-bottom: 0 !important;
    font-size: 1rem !important;
  }

  /* Value text styling - normal weight, same size as trader info */
  .page-product-single .product-detail-list .detail-value p {
    margin-bottom: 0 !important;
    font-size: 1rem !important;
    word-break: break-word !important;
  }

  /* 4. Interest button full width */
  .page-product-single .btn-warning {
    width: 100% !important;
  }

  /* 5. Contact Modal */
  #contactModal .modal-body .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #contactModal .modal-body img {
    max-width: 200px;
    margin: 0 auto 1rem;
  }
}

/* ==========================================================================
   HOME PAGE - ข้อมูลทั่วไป SECTION - REDUCE SPACING
   ========================================================================== */
@media only screen and (max-width: 767px) {
  /* Reduce excessive spacing between section title and first card */
  .our-service .section-row .section-title {
    min-height: auto !important;
    margin-bottom: 30px !important;
  }
}

/* ==========================================================================
   SEARCH SECTION - MOBILE RESPONSIVE DESIGN
   ========================================================================== */
@media only screen and (max-width: 767px) {
  /* Reduce padding from 60px to mobile-friendly spacing */
  .search-section-padding {
    padding: 30px 15px !important;
  }

  /* Heading optimization */
  .search-section-padding h2 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
    margin-bottom: 1.5rem !important;
    padding: 0 10px !important;
  }

  /* Stack form elements vertically */
  .search-form .input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important; /* 12px spacing between elements */
    border: none !important; /* Remove outer border */
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Dropdown select - full width with proper styling */
  .search-form .input-group select.btn.dropdown-toggle {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0.75rem 2.5rem !important; /* Equal padding for centered text */
    font-size: 1rem !important;
    text-align: center !important; /* Center text */

    /* Match form-control styling */
    background-color: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 25px !important; /* Half-pill shape */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;

    /* Text styling */
    color: var(--text-color) !important;
    font-family: var(--default-font) !important;

    /* Dropdown arrow positioning */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 16px 12px !important;

    /* Remove default button styles */
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  /* Text input - full width */
  .search-form .input-group .form-control {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    text-align: center !important; /* Center text */

    border: 1px solid #e0e0e0 !important;
    border-radius: 25px !important; /* Half-pill shape */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  /* Center placeholder text */
  .search-form .input-group .form-control::placeholder {
    text-align: center !important;
  }

  .search-form .input-group .form-control:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
  }

  /* Search button - full width with proper touch target */
  .search-form .input-group .btn-primary {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;

    border-radius: 25px !important; /* Consistent pill shape */
    border: none !important;

    /* Use accent color (green from original design) */
    background: var(--accent-color) !important;
    color: #fff !important;

    /* Button effects */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;

    /* Center content */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .search-form .input-group .btn-primary:hover,
  .search-form .input-group .btn-primary:focus {
    background: var(--primary-color) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px) !important;
  }

  .search-form .input-group .btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  /* Icon in button */
  .search-form .input-group .btn-primary i {
    font-size: 1.125rem !important;
    margin: 0 !important;
  }

  /* Select option styling (when dropdown opens) */
  .search-form .input-group select.btn.dropdown-toggle option {
    padding: 0.75rem !important;
    font-size: 1rem !important;
    color: var(--text-color) !important;
  }

  /* Placeholder/default option styling */
  .search-form .input-group select.btn.dropdown-toggle option:first-child {
    color: #999 !important;
  }
}

/* ============================================
   14. VIDEO EMBEDS RESPONSIVE (YouTube, Vimeo) - ALL SCREENS
   ============================================ */

/* Make all iframes in post-entry responsive */
.post-entry iframe,
.article-detail iframe {
    max-width: 100%;
}

/* YouTube and Vimeo specific - full width with 16:9 aspect ratio */
.post-entry iframe[src*="youtube.com"],
.post-entry iframe[src*="youtu.be"],
.post-entry iframe[src*="vimeo.com"],
.article-detail iframe[src*="youtube.com"],
.article-detail iframe[src*="youtu.be"],
.article-detail iframe[src*="vimeo.com"] {
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 400px; /* fallback minimum height for desktop */
    border-radius: 8px; /* rounded corners for better appearance */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* subtle shadow */
    margin: 1.5rem 0; /* vertical spacing */
}

/* Fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    .post-entry iframe[src*="youtube.com"],
    .post-entry iframe[src*="youtu.be"],
    .post-entry iframe[src*="vimeo.com"],
    .article-detail iframe[src*="youtube.com"],
    .article-detail iframe[src*="youtu.be"],
    .article-detail iframe[src*="vimeo.com"] {
        width: 100%;
        height: 450px; /* fallback fixed height for desktop */
    }
}

/* Mobile responsive - smaller height and spacing */
@media only screen and (max-width: 767px) {
    .post-entry iframe[src*="youtube.com"],
    .post-entry iframe[src*="youtu.be"],
    .post-entry iframe[src*="vimeo.com"],
    .article-detail iframe[src*="youtube.com"],
    .article-detail iframe[src*="youtu.be"],
    .article-detail iframe[src*="vimeo.com"] {
        min-height: 200px; /* smaller minimum for mobile */
        margin: 1rem 0; /* reduce vertical spacing on mobile */
    }

    @supports not (aspect-ratio: 16 / 9) {
        .post-entry iframe[src*="youtube.com"],
        .post-entry iframe[src*="youtu.be"],
        .post-entry iframe[src*="vimeo.com"],
        .article-detail iframe[src*="youtube.com"],
        .article-detail iframe[src*="youtu.be"],
        .article-detail iframe[src*="vimeo.com"] {
            height: 250px; /* fallback for mobile */
        }
    }
}