/* =====================
   Index Page Specific Styles
   ===================== */

/* =====================
   Hero Section
   ===================== */
.hero{
  position:relative;overflow:hidden;height:100vh;min-height:840px;
  display:flex;align-items:center;justify-content:center;padding:0;z-index:0
}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-slides{position:absolute;inset:0;width:100%;height:100%}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease-in-out}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;border-radius:0;position:absolute;top:0;left:0;object-fit:cover}

/* Hero Indicators */
.hero-indicators{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;gap:0.75rem;z-index:10
}
.hero-indicator{
  width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,0.5);
  background:transparent;cursor:pointer;transition:all 0.3s ease;padding:0
}
.hero-indicator:hover{border-color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.3)}
.hero-indicator.active{border-color:#fff;background:#fff;transform:scale(1.2)}

.hero-content{
  position:relative;z-index:1;text-align:left;max-width:1200px;padding:2rem
}
.hero-title{
  font-size:clamp(1.6rem,4vw,2.8rem);font-weight:900;margin:0 0 0.8rem;
  color:#fff;text-shadow:0 2px 4px rgba(0,0,0,0.3);line-height:1.3;
  max-width:1100px;text-align:center
}
.hero-title .line1{display:block;font-size:1em}
.hero-title .line2{
  display:block;font-size:0.85em;margin-top:0.4rem;
  font-weight:400;letter-spacing:0.05em;opacity:0.95
}
.hero-subtitle{
  font-size:clamp(0.9rem,2vw,1.2rem);margin:0 0 1.5rem;
  color:rgba(255,255,255,0.9);text-shadow:0 1px 2px rgba(0,0,0,0.3);
  font-weight:300;line-height:1.5
}
.hero-actions{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem
}
.hero-actions .btn{font-size:1.1rem;padding:1rem 2rem;min-width:160px}
.hero-search{
  background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);
  border-radius:20px;padding:1.5rem;box-shadow:0 8px 32px rgba(0,0,0,0.1);
  max-width:680px;margin:0 auto;width:100%
}

/* =====================
   Searchbar
   ===================== */
.searchbar{
  display:grid;gap:.8rem;margin-top:1rem;background:var(--card);
  border:1px solid var(--bd);box-shadow:var(--sh);border-radius:16px;padding:1rem
}
.searchbar label{font-size:.85rem;color:var(--ink2);display:block;margin-bottom:.4rem;font-weight:500}
.input,.select{
  width:100%;padding:.8rem .9rem;border:1px solid var(--bd);border-radius:12px;
  background:color-mix(in hsl, #fff 85%, transparent);font-size:.95rem
}
.searchbar .btn{padding:.8rem 1.5rem;font-size:.95rem;white-space:nowrap;align-self:end}
.input:focus-visible,.select:focus-visible,.btn:focus-visible{
  outline:2px solid color-mix(in hsl, var(--forest) 70%, black 30%);outline-offset:2px
}

/* =====================
   Camp Cards
   ===================== */
.camp-card{
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.12);
  border:1px solid rgba(0,0,0,0.06);transition:all 0.3s ease;position:relative;
  height:380px;display:flex;flex-direction:column
}
.camp-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.16)}
.camp-card.clickable{cursor:pointer}
.camp-card.clickable:hover{cursor:pointer;transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.16)}
.clickable{cursor:pointer;transition:all 0.3s ease}
.clickable:hover{cursor:pointer;transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.12)}

.camp-card-image{
  position:relative;flex:1;background:linear-gradient(135deg,#FEF3C7,#D1FAE5,#DBEAFE);overflow:hidden
}
.camp-card-content{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);padding:1rem;}

/* Camp Card Text Styling */
.camp-card .camp-card-content {color: #ffffff}
.camp-card .camp-card-title {
  color: #ffffff;font-weight: 900;text-shadow: 1px 1px 2px rgba(0,0,0,0.7)
}
.camp-card .camp-card-subtitle {
  color: rgba(255,255,255,0.95);font-weight: 600;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)
}
.camp-card .chip {
  background: rgba(255,255,255,0.9);color: #000000;
  border: 1px solid rgba(255,255,255,0.3);font-weight: 900
}
.camp-card .price {
  color: #ffffff !important;font-weight: 900;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)
}

.camp-card-title{
  font-size:1.1rem;font-weight:700;margin:0 0 0.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.camp-card-subtitle{
  font-size:0.85rem;margin:0 0 0.75rem;height:2.4em;
  line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  line-clamp:2;-webkit-box-orient:vertical
}
.camp-card-status{display:flex;gap:0.5rem;align-items:center;width:100%;max-width:100%}
.status-badge{padding:0.25rem 0.75rem;border-radius:20px;font-size:0.75rem;font-weight:600}
.status-sold-out{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.event-time-text{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  width:100%;max-width:100%;
}
.status-available{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}

/* Modal scroll styles */
.modal .panel-body .grid > div:last-child{
  max-height:70vh;overflow-y:auto;padding-right:0.5rem
}
.modal .panel-body .grid > div:last-child::-webkit-scrollbar{
  width:6px
}
.modal .panel-body .grid > div:last-child::-webkit-scrollbar-track{
  background:rgba(0,0,0,0.1);border-radius:3px
}
.modal .panel-body .grid > div:last-child::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.3);border-radius:3px
}
.modal .panel-body .grid > div:last-child::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,0.5)
}
.alert-btn{
  background:none;border:none;color:#059669;font-size:0.75rem;
  font-weight:600;text-decoration:underline;cursor:pointer;padding:0
}
.alert-btn:hover{color:#047857}

/* =====================
   Feature Text Box
   ===================== */
.feature-text-box {
  position: absolute;bottom: 1.5rem;left: 1.5rem;right: 1.5rem;
  background: rgba(255,255,255,0.95);backdrop-filter: blur(10px);
  padding: 0.5rem 1.5rem;border-radius: var(--rad);box-shadow: var(--sh);max-width: 400px
}

/* =====================
   Overlay Text
   ===================== */
.overlay-text {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  max-width: 500px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.overlay-text strong {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
  display: block;
  margin-bottom: 0.5rem;
}

.overlay-text p {
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.4);
  margin: 0;
  line-height: 1.5;
}

/* 那須高原野菜とBBQセット用の2行制限スタイル */
.overlay-text.limited {
  max-width: 500px;
}

.overlay-text.limited strong {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
  display: block;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-text.limited p {
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.4);
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* =====================
   Availability Alerts
   ===================== */
.availability-alerts{
  background:linear-gradient(135deg,#7c2d12,#991b1b);color:#fff;
  border-radius:20px;padding:2rem;text-align:center;margin-top:2rem
}
.availability-alerts h3{font-size:1.5rem;font-weight:700;margin:0 0 0.5rem}
.availability-alerts p{font-size:1rem;opacity:0.9;margin:0}

/* =====================
   Section Titles
   ===================== */
.section-title{font-size:clamp(22px,3.2vw,32px);margin:0 0 .2rem 0}
.section-title-no-margin{font-size:clamp(22px,3.2vw,32px);margin:0}
.no-margin{margin:0}
.no-margin-bottom{margin-bottom:0}

/* =====================
   Tabs (Cafe/Menu)
   ===================== */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.tab{
  border:1px solid var(--bd);background:var(--card);padding:.5rem .9rem;
  border-radius:999px;font-weight:800;color:var(--ink)
}
.tab[aria-selected="true"]{
  background:color-mix(in hsl,var(--forest) 12%, white);
  border-color:color-mix(in hsl,var(--forest) 40%, white);color:var(--ink)
}
.tabpanel{display:none}
.tabpanel[aria-hidden="false"]{display:block}

.price{font-weight:900}

/* =====================
   Masonry Layout
   ===================== */
.masonry{columns:2;column-gap:1rem}
.masonry .item{break-inside:avoid;margin-bottom:1rem}

/* =====================
   Sauna HowTo
   ===================== */
.steps{display:grid;gap:.6rem}
.step{display:grid;grid-template-columns:40px 1fr;gap:.8rem;align-items:start}
.step .num{
  width:40px;height:40px;border-radius:12px;
  background:color-mix(in hsl,var(--blue) 14%, white);
  display:grid;place-items:center;font-weight:900;color:var(--ink)
}

/* =====================
   News List
   ===================== */
.list{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--rad);
  overflow:hidden;box-shadow:var(--sh)
}
.list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--bd);transition:all 0.2s ease
}
.list a:last-child{border-bottom:none}
.list a.clickable:hover{
  background:color-mix(in hsl, var(--ink) 5%, transparent);transform:translateX(4px)
}

/* =====================
   Camp Modal Styles (using common content modal classes)
   ===================== */
/* Note: Camp modal now uses .content-modal-content, .content-modal-images, .content-modal-info classes from common.css */

/* =====================
   Camp Slideshow
   ===================== */
.camp-slideshow{position:relative;width:100%;height:100%;min-height:400px;display:flex;flex-direction:column}
.camp-slides{position:relative;width:100%;height:100%;overflow:hidden;flex:1}
.camp-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.5s ease-in-out}
.camp-slide.active{opacity:1}
.camp-slide img{width:100%;height:100%;object-fit:cover}

/* =====================
   Menu Slideshow (shares same styles as camp)
   ===================== */
.menu-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.5s ease-in-out}
.menu-slide.active{opacity:1}
.menu-slide img{width:100%;height:100%;object-fit:cover}

/* =====================
   BBQ Set Slideshow (shares same styles as camp)
   ===================== */
.bbq-set-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.5s ease-in-out}
.bbq-set-slide.active{opacity:1}
.bbq-set-slide img{width:100%;height:100%;object-fit:cover}
.camp-indicators{
  position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
  display:flex;gap:0.5rem;z-index:10
}
.camp-indicator{
  width:8px;height:8px;border-radius:50%;border:2px solid rgba(255,255,255,0.5);
  background:transparent;cursor:pointer;transition:all 0.3s ease;padding:0;
  min-width:8px;min-height:8px;max-width:8px;max-height:8px
}
.camp-indicator:hover{border-color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.3)}
.camp-indicator.active{border-color:#fff;background:#fff}

/* =====================
   Access Grid
   ===================== */
.access-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.2rem;
  align-items: center;
}

/* =====================
   Action Links (PDF, All Events, etc.)
   ===================== */
.action-link{
  font-weight:800;display:flex;align-items:center;height:2.2rem;
  padding:0.4rem 0.8rem;border:1px solid var(--bd);border-radius:var(--rad);
  background:var(--card);color:var(--ink2);text-decoration:none;
  transition:all 0.2s ease;flex:0 0 auto;min-width:120px;
  text-align:center;white-space:nowrap;font-size:0.85rem
}
.action-link:hover{
  background:color-mix(in hsl,var(--forest) 8%, transparent);
  color:var(--forest);border-color:var(--forest)
}

/* =====================
   PDF Link (legacy support)
   ===================== */
.pdf-link{
  font-weight:800;display:flex;align-items:center;height:2.2rem;
  padding:0.4rem 0.8rem;border:1px solid var(--bd);border-radius:var(--rad);
  background:var(--card);color:var(--ink2);text-decoration:none;
  transition:all 0.2s ease;flex:0 0 auto;min-width:180px;
  text-align:center;white-space:nowrap;font-size:0.85rem
}
.pdf-link:hover{
  background:color-mix(in hsl,var(--forest) 8%, transparent);
  color:var(--forest);border-color:var(--forest)
}

/* =====================
   STAVE CAFE Slideshow
   ===================== */
.stave-slideshow{position:relative;width:100%;height:100%}
.stave-slides{position:relative;width:100%;height:100%;overflow:hidden}
.stave-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.5s ease-in-out}
.stave-slide.active{opacity:1}
.stave-slide img{width:100%;height:100%;object-fit:cover}

/* Slide Navigation */
.slide-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  background:rgba(255,255,255,0.9);border:none;border-radius:50%;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.15)
}
.slide-nav:hover{background:rgba(255,255,255,1);transform:translateY(-50%) scale(1.1)}
.slide-prev{left:10px}
.slide-next{right:10px}
.slide-nav .icon{width:20px;height:20px}

/* Slide Indicators */
.slide-indicators{
  position:absolute;bottom:15px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:10
}
.slide-indicator{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.5);
  cursor:pointer;transition:all 0.2s ease
}
.slide-indicator.active{background:rgba(255,255,255,1);transform:scale(1.2)}

/* =====================
   Responsive Design - Unified Breakpoints
   ===================== */

/* Desktop: 1025px and above */

/* Chef Video Grid Base Styles */
.chef-video-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.chef-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 100%;
}

.chef-video-ph {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: unset;
  margin-right: unset;
  border-radius: var(--rad);
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chef-video-ph:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--rad);
  transition: background-color 0.3s ease;
}

.chef-video-ph:hover .video-overlay {
  background: rgba(0,0,0,0.6);
}

.play-button {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--forest);
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.chef-video-ph:hover .play-button {
  background: white;
  transform: scale(1.1);
}

.video-title {
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* =====================
   Responsive Media Queries
   ===================== */

/* Desktop: 1025px and above */
@media (min-width: 1025px) {
  .masonry{columns:3}
  .searchbar{grid-template-columns:1fr 1fr auto;gap:1.2rem}
  .nav-links{display:flex}
  .nav-acts{display:flex}
  .hamb{display:none}
  .mobile{display:none!important}
}

/* Tablet: 769px - 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
  .masonry{columns:2}
  .searchbar{grid-template-columns:1fr 1fr auto;gap:1rem}
  .nav-links{display:flex}
  .nav-acts{display:flex}
  .hamb{display:none}
  .mobile{display:none!important}
  
  .chef-video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
  
  .chef-video-ph:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
  /* Navigation */
  .nav-links{display:none}
  .nav-acts{display:none}
  .hamb{display:inline-grid}
  .mobile{display:none}
  .mobile.open{display:block!important}
  
  .hero{height:100vh;min-height:500px;padding:0 1rem}
  .hero-content{
    padding:1rem;display:flex;flex-direction:column;
    justify-content:center;align-items:center;min-height:100vh;text-align:center
  }
  .hero-title{font-size:clamp(1.4rem,6vw,2.2rem);line-height:1.3;margin-top:0}
  .hero-title .line2{font-size:0.8em;margin-top:0.3rem}
  .hero-subtitle{
    font-size:clamp(0.85rem,3.5vw,1.1rem);margin-top:1.2rem;
    margin-bottom:1.2rem;line-height:1.4
  }
  .hero-actions{display:none}
  .hero-search{
    padding:1rem;border-radius:16px;margin:0 1rem;display:none
  }
  .brand-logo{width:clamp(100px, 20vw, 150px);height:clamp(40px, 8vw, 60px)}
  
  .hero-indicators{bottom:1.5rem;gap:0.5rem}
  .hero-indicator{width:10px;height:10px}
  
  .searchbar{gap:.6rem;padding:.8rem}
  .searchbar .btn{margin-top:.5rem;padding:.9rem 1.2rem}
  
  .content-modal-content{grid-template-columns:1fr;grid-template-rows:300px 1fr}
  .content-modal-images{min-height:300px}
  .camp-slideshow{min-height:300px}
  .content-modal-info{padding:1.5rem}
  
  /* Grid layouts */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .chef-video-grid{grid-template-columns:1fr;gap:1.5rem}
  .chef-video-ph{aspect-ratio:4/3;min-height:200px;max-width:100%;margin:0 auto}
  .chef-video-ph:last-child{grid-column:1;max-width:100%}
  .sauna-howto-grid{grid-template-columns:1fr !important;gap:1rem !important}
  .sauna-howto-grid img{aspect-ratio:4/3;min-height:200px;border-radius:var(--rad)}
  .access-grid{grid-template-columns:1fr;gap:1.5rem}
  .access-grid .ph{aspect-ratio:4/3;min-height:200px;max-width:100%;height:auto}
  
  /* Video overlay adjustments */
  .play-button{width:50px;height:50px;font-size:1.2rem}
  .video-title{font-size:0.85rem}
  
  /* Responsive button sizing */
  .action-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    height: 2.2rem;
    min-width: 120px;
  }
  
  .pdf-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    height: 2.2rem;
    min-width: 180px;
  }
  
  .head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .head > div:last-child {
    flex-direction: column;
    gap: 0.5rem;
  }
  .head > div:last-child a {
    width: 100%;
    max-width: 100%;
    min-width: unset;
  }
  #dlSaunaGuide {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    height: 2.2rem;
  }
  .head > div:first-child p {
    font-size: 0.85rem;
    line-height: 1.7;
  }
  
  /* Overlay text responsive */
  .overlay-text {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: none;
    padding: 0.8rem 1rem;
  }
  
  .overlay-text strong {
    font-size: 1.2rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
  }
  
  .overlay-text p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.5);
  }
}

/* Mobile Small: 480px and below */
@media (max-width: 480px) {
  .overlay-text {
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    padding: 0.6rem 0.8rem;
  }
  
  .overlay-text strong {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
  }
  
  .overlay-text p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
  }
  
  .overlay-text.limited {
    max-width: none;
  }
  
  .overlay-text.limited strong {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
  }
  
  .overlay-text.limited p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
  }
}

/* Desktop button styles */
@media (min-width: 769px) {
  .action-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    height: 2.2rem;
    min-width: 120px;
  }
  
  .pdf-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    height: 2.2rem;
    min-width: 180px;
  }
}

/* =====================
   Footer Responsive Styles
   ===================== */
@media (max-width: 768px) {
  footer .container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  
  footer h4 {
    font-size: 1rem !important;
  }
  
  footer h5 {
    font-size: 0.9rem !important;
  }
  
  footer ul {
    padding-left: 0 !important;
  }
}

@media (max-width: 480px) {
  footer .container {
    padding: 1.2rem 1rem !important;
    gap: 1.5rem !important;
  }
  
  footer h4 {
    font-size: 0.95rem !important;
  }
  
  footer p {
    font-size: 0.9rem !important;
  }
  
  footer ul {
    font-size: 0.9rem !important;
  }
}