/* ============================================
   Responsive Styles — Padel & Halısaha Platform
   Mobile-first approach
   Breakpoints: 481px (sm), 769px (md), 1025px (lg), 1441px (xl)
   ============================================ */

/* ── Base = Mobile (< 481px) ── */

/* Typography — mobile base */
html {
  font-size: 14px;
}

.section__title {
  font-size: var(--font-size-xl);
}

.section__subtitle {
  font-size: var(--font-size-sm);
}

/* Layout — mobile base */
.container {
  padding: 0 var(--space-3);
}

.section {
  padding: var(--space-8) 0;
}

/* Grid — single column on mobile */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* Navbar — mobile: hamburger + slide-in panel */
.navbar {
  overflow: visible !important;
  clip-path: none !important;
  border-radius: 0;
  left: 0;
  right: 0;
  top: 0;
}

.navbar__inner {
  overflow: visible !important;
}

.navbar__hamburger {
  display: flex;
}

.navbar__menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  width: 280px;
  transform: translateX(100%);
  transition: transform 250ms ease;
  background: #1A2E26;
  flex-direction: column;
  padding: var(--space-16) var(--space-6) var(--space-6);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  display: flex;
  overflow-y: auto;
  visibility: hidden;
}

.navbar__menu--open {
  transform: translateX(0);
  visibility: visible;
}

.navbar__link {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.navbar__actions {
  display: none;
}

.navbar__lang {
  display: flex !important;
  margin-right: 8px;
}

.navbar__actions--open {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-gold-border);
}

/* Mobile actions should appear inside the slide-in panel */
.navbar__actions--mobile {
  width: 100%;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-gold-border);
  margin-top: auto;
}

.navbar__actions--mobile.navbar__actions--open {
  display: flex;
  flex-direction: column;
}

/* 44x44px minimum touch targets on mobile */
.btn,
.navbar__link,
.form-input,
.form-select,
.form-textarea {
  min-height: 44px;
}

.btn {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-sm);
}

/* Cards — mobile */
.card__body {
  padding: var(--space-4);
}

.card__footer {
  padding: var(--space-3) var(--space-4);
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

/* Forms — touch-friendly sizing */
.form-input,
.form-select,
.form-textarea {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  min-height: 48px;
}

/* Toast — mobile */
.toast-container {
  top: auto;
  bottom: var(--space-6);
  right: var(--space-4);
  left: var(--space-4);
}

.toast {
  min-width: auto;
  max-width: 100%;
}

/* Cookie Banner — mobile */
.cookie-banner__inner {
  flex-direction: column;
  text-align: center;
  gap: var(--space-4);
}

/* Modal — mobile */
.modal-backdrop {
  padding: var(--space-4);
  align-items: flex-end;
}

.modal {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: 85vh;
}

.modal__header,
.modal__body,
.modal__footer {
  padding: var(--space-4);
}

.modal__footer {
  flex-direction: column;
}

.modal__footer .btn {
  width: 100%;
}

/* WhatsApp Float — mobile */
.whatsapp-float {
  width: 48px;
  height: 48px;
  bottom: var(--space-4);
  right: var(--space-4);
}

.whatsapp-float svg {
  width: 24px;
  height: 24px;
}

/* Payment Options — mobile */
.payment-options__cards {
  flex-direction: column;
  gap: var(--space-3);
}

.payment-card {
  min-width: 0;
  padding: var(--space-4);
}

.payment-card__title {
  font-size: var(--font-size-sm);
}

/* Payment Split — mobile */
.payment-player-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.payment-player-row__info {
  justify-content: space-between;
}

.payment-split__list {
  gap: var(--space-3);
}

.payment-player-row .btn--whatsapp {
  width: 100%;
  justify-content: center;
}

/* Reservation Slots — 2 columns on mobile */
.slots-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.slot-card {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  min-height: 44px;
}

/* Price Summary — mobile */
.price-summary {
  padding: var(--space-4);
}

.price-summary__total {
  font-size: var(--font-size-xl);
}

/* Progress Indicator — mobile */
.progress-indicator {
  padding: var(--space-4) 0;
  overflow-x: auto;
}

.progress-step__label {
  font-size: 0.625rem;
}

/* Admin Sidebar — mobile: slide-in from left */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  transform: translateX(-100%);
  transition: transform 250ms ease;
  z-index: var(--z-modal);
  box-shadow: var(--shadow-xl);
}

.admin-sidebar--open {
  transform: translateX(0);
}

.admin-content {
  margin-left: 0;
}

/* Site Footer — mobile */
.site-footer {
  padding: var(--space-6) 0;
  font-size: var(--font-size-xs);
}


/* ── Small Mobile+ (min-width: 481px) ── */
@media (min-width: 481px) {
  html {
    font-size: 15px;
  }

  .container {
    padding: 0 var(--space-4);
  }

  .section {
    padding: var(--space-10) 0;
  }

  .section__title {
    font-size: var(--font-size-2xl);
  }

  /* Grid — 2 columns */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Cards */
  .card__body {
    padding: var(--space-5);
  }

  .card__footer {
    padding: var(--space-4) var(--space-5);
    flex-direction: row;
    align-items: center;
  }

  /* Reservation Slots */
  .slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-3);
  }
}

/* ── Tablet+ (min-width: 769px) ── */
@media (min-width: 769px) {
  html {
    font-size: 16px;
  }

  .container {
    padding: 0 var(--space-6);
  }

  .section {
    padding: var(--space-16) 0;
  }

  .section__title {
    font-size: var(--font-size-3xl);
  }

  .section__subtitle {
    font-size: var(--font-size-md);
  }

  /* Navbar — desktop: horizontal menu, no hamburger */
  .navbar {
    border-radius: var(--radius-lg);
    left: var(--navbar-margin);
    right: var(--navbar-margin);
    top: var(--navbar-margin);
    overflow: hidden;
  }

  .navbar__hamburger {
    display: none;
  }

  .navbar__menu {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    transition: none;
    background: transparent;
    flex-direction: row;
    padding: 0;
    box-shadow: none;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--space-1);
    overflow-y: visible;
    visibility: visible;
  }

  .navbar__link {
    width: auto;
    min-height: auto;
    padding: var(--space-2) var(--space-4);
  }

  .navbar__actions {
    display: flex;
  }

  /* Grid — 2 columns for grid--3 and grid--4 at tablet */
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Cards */
  .card__image {
    height: 200px;
  }

  /* Toast — desktop position */
  .toast-container {
    top: var(--space-6);
    right: var(--space-6);
    left: auto;
    bottom: auto;
  }

  .toast {
    min-width: 320px;
    max-width: 420px;
  }

  /* Modal — desktop centered */
  .modal-backdrop {
    padding: var(--space-6);
    align-items: center;
  }

  .modal {
    border-radius: var(--radius-xl);
    max-height: 90vh;
  }

  .modal__header,
  .modal__body {
    padding: var(--space-6);
  }

  .modal__footer {
    padding: var(--space-4) var(--space-6);
    flex-direction: row;
  }

  .modal__footer .btn {
    width: auto;
  }

  /* Cookie Banner — desktop */
  .cookie-banner__inner {
    flex-direction: row;
    text-align: left;
    gap: var(--space-6);
  }

  /* Payment Options — desktop */
  .payment-options__cards {
    flex-direction: row;
  }

  .payment-player-row {
    flex-direction: row;
    align-items: center;
  }

  /* Admin Sidebar — desktop: static sidebar */
  .admin-sidebar {
    position: static;
    transform: none;
    transition: none;
    width: 260px;
    box-shadow: none;
    flex-shrink: 0;
  }

  .admin-content {
    margin-left: 0;
    flex: 1;
  }

  /* Buttons — restore desktop sizing */
  .btn {
    min-height: auto;
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-sm);
  }

  .btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-base);
  }

  /* Forms — desktop sizing */
  .form-input,
  .form-select,
  .form-textarea {
    min-height: auto;
  }

  /* WhatsApp Float — desktop */
  .whatsapp-float {
    width: 56px;
    height: 56px;
    bottom: var(--space-6);
    right: var(--space-6);
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  /* Site Footer */
  .site-footer {
    font-size: var(--font-size-sm);
  }
}

/* ── Desktop+ (min-width: 1025px) ── */
@media (min-width: 1025px) {
  /* Grid — full columns */
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Large Desktop (min-width: 1441px) ── */
@media (min-width: 1441px) {
  .container {
    padding: 0 var(--space-8);
  }

  .section {
    padding: var(--space-20) 0;
  }
}