/**
 * moj.golf - Golf w Polsce Page Styles v25
 * Design System zgodny z docs/styleguide.md
 * Wymaga: global-25.css, components-25.css, header-nav-25.css, footer-25.css
 */

/* =============================================================================
   0. PAGE SETUP
   ============================================================================= */

/* Hero section, header i nav overrides są w header-nav-25.css */

/* =============================================================================
   1. SEARCH SECTION - Filters and search bar
   ============================================================================= */

.search-section {
  padding: var(--spacing-5) 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}

.search-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@media (min-width: 768px) {
  .search-container {
    padding: 0 var(--spacing-6);
  }
}

/* Main Search Row - Search + Province + Reset */
.search-box {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-input {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);
  background: var(--color-white);
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  color: var(--color-gray-900);
  font-size: var(--font-size-body-sm);
  transition: all var(--duration-normal) var(--ease-out);
  font-family: var(--font-family-primary);
}

.search-input::placeholder {
  color: var(--color-gray-500);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-green-fairway);
  box-shadow: 0 0 0 3px rgba(85, 139, 47, 0.1);
}

.search-icon {
  position: absolute;
  left: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-500);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

/* Filters Row - combines search, province, reset */
.filters {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  align-items: center;
}

.filter-select {
  flex: 0 0 auto;
  min-width: 200px;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  color: var(--color-gray-900);
  font-size: var(--font-size-body-sm);
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-green-fairway);
}

.btn-reset {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: transparent;
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  color: var(--color-gray-700);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  white-space: nowrap;
}

.btn-reset:hover {
  border-color: var(--color-green-fairway);
  color: var(--color-green-green);
  background-color: rgba(85, 139, 47, 0.05);
}

.btn-reset svg {
  width: 16px;
  height: 16px;
}

/* Type Filters Row - compact with label */
.type-filters {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  align-items: center;
}

.type-filters::before {
  content: 'Typ:';
  color: var(--color-gray-600);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  margin-right: var(--spacing-1);
}

.type-filter-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-300);
  border-radius: 20px;
  color: var(--color-gray-700);
  font-size: var(--font-size-body-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  user-select: none;
}

.type-filter-label:hover {
  border-color: var(--color-green-fairway);
  background-color: var(--color-gray-100);
}

.type-filter-label input[type="radio"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-green-fairway);
  width: 14px;
  height: 14px;
}

.type-filter-label input[type="radio"]:checked + span {
  color: var(--color-green-green);
  font-weight: var(--font-weight-semibold);
}

.type-filter-label:has(input[type="radio"]:checked) {
  border-color: var(--color-green-fairway);
  background: rgba(85, 139, 47, 0.15);
}

/* Results Count - inline with filters */
.results-count {
  margin-left: auto;
  color: var(--color-gray-600);
  font-size: var(--font-size-body-sm);
  white-space: nowrap;
  padding-left: var(--spacing-3);
  border-left: 1px solid var(--color-gray-300);
}

.results-count span {
  color: var(--color-green-green);
  font-weight: var(--font-weight-bold);
}

/* =============================================================================
   2. MAP & LIST SECTION
   ============================================================================= */

.map-list-section {
  padding: var(--spacing-10) 0;
}

/* View Toggle Container - Mobile/Tablet Only */
.view-toggle-container {
  display: none;
  max-width: 1400px;
  margin: 0 auto var(--spacing-6);
  padding: 0 var(--spacing-4);
}

@media (min-width: 768px) {
  .view-toggle-container {
    padding: 0 var(--spacing-6);
  }
}

@media (max-width: 1024px) {
  .view-toggle-container {
    display: block;
  }
}

.map-list-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: var(--spacing-8);
  min-height: 600px;
}

@media (min-width: 768px) {
  .map-list-container {
    padding: 0 var(--spacing-6);
  }
}

/* Map Section */
.map-section-wrapper {
  display: flex;
  flex-direction: column;
}

.map-header {
  margin-bottom: var(--spacing-5);
}

.map-header h2 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-primary);
  margin: 0;
}

.map-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-gray-100);
  border: 2px solid var(--color-gray-200);
  box-shadow: var(--shadow-md);
}

.golf-map {
  width: 100%;
  height: 600px;
}

.map-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  z-index: 10;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-gray-200);
  border-top-color: var(--color-green-fairway);
  border-radius: 50%;
  animation: spinner-rotation 0.8s linear infinite;
}

@keyframes spinner-rotation {
  to {
    transform: rotate(360deg);
  }
}

.map-loader p {
  margin-top: var(--spacing-4);
  color: var(--color-gray-600);
}

/* Map Info Window */
.map-info-window {
  padding: var(--spacing-2);
  color: #1a202c !important;
  background: white;
  min-width: 200px;
}

.map-info-window h3 {
  margin: 0 0 var(--spacing-2) 0 !important;
  font-size: var(--font-size-body) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: #1a202c !important;
}

.map-info-window p {
  margin: var(--spacing-1) 0 !important;
  font-size: var(--font-size-body-sm) !important;
  color: #4a5568 !important;
}

.map-info-window a {
  color: var(--color-green-green) !important;
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

.map-info-window a:hover {
  text-decoration: underline;
  color: var(--color-green-dark) !important;
}

/* Google Maps InfoWindow override */
.gm-style .gm-style-iw-c {
  padding: 0 !important;
}

.gm-style .gm-style-iw-d {
  overflow: auto !important;
}

.gm-style-iw {
  color: #1a202c !important;
}

.gm-style-iw-t::after {
  background: white !important;
}

/* =============================================================================
   3. COURSES LIST
   ============================================================================= */

.courses-list-wrapper {
  display: flex;
  flex-direction: column;
}

.list-header {
  margin-bottom: var(--spacing-5);
}

.list-header h2 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-primary);
  margin: 0;
}

.view-toggle {
  display: flex;
  gap: var(--spacing-3);
  justify-content: center;
}

.view-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-5);
  background: var(--color-white);
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  color: var(--color-gray-700);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}

.view-btn svg {
  width: 18px;
  height: 18px;
}

.view-btn:hover {
  border-color: var(--color-green-fairway);
  color: var(--color-green-green);
  background-color: rgba(85, 139, 47, 0.05);
}

.view-btn.active {
  border-color: var(--color-green-fairway);
  color: var(--color-green-green);
  background-color: rgba(85, 139, 47, 0.15);
  font-weight: var(--font-weight-bold);
}

.courses-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  overflow-y: auto;
  max-height: 600px;
  padding-right: var(--spacing-2);
}

.courses-list::-webkit-scrollbar {
  width: 8px;
}

.courses-list::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: 4px;
}

.courses-list::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: 4px;
}

.courses-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-green-fairway);
}

/* =============================================================================
   4. COURSE CARD
   ============================================================================= */

.course-card {
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: 12px;
  padding: var(--spacing-5);
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.course-card:hover {
  border-color: var(--color-green-fairway);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
}

.course-name {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
  line-height: var(--line-height-tight);
}

.course-province {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  background: rgba(85, 139, 47, 0.1);
  border: 1px solid var(--color-green-fairway);
  border-radius: 6px;
  color: var(--color-green-green);
  font-size: var(--font-size-body-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}

.course-province:hover {
  background: rgba(85, 139, 47, 0.2);
  border-color: var(--color-green-green);
  transform: scale(1.05);
}

.course-province:active {
  transform: scale(0.98);
}

/* Type Badges */
.course-types {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-3);
}

.type-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: 6px;
  font-size: var(--font-size-body-xs);
  font-weight: var(--font-weight-semibold);
  border: 1px solid;
}

.type-badge.type-course {
  background: rgba(85, 139, 47, 0.1);
  border-color: var(--color-green-fairway);
  color: var(--color-green-green);
}

.type-badge.type-range {
  background: rgba(255, 215, 0, 0.1);
  border-color: #FFD700;
  color: #B8860B;
}

.type-badge.type-simulator {
  background: rgba(0, 150, 255, 0.1);
  border-color: #0096FF;
  color: #0077CC;
}

/* Course Details */
.course-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.course-detail {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  color: var(--color-gray-600);
  font-size: var(--font-size-body-sm);
}

.course-detail svg {
  flex-shrink: 0;
  color: var(--color-green-fairway);
}

.course-detail a {
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  word-break: break-word;
}

.course-detail a:hover {
  color: var(--color-green-green);
  text-decoration: underline;
}

/* Course Actions */
.course-actions {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.btn-navigate,
.btn-show-on-map {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: 8px;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  border: none;
}

.btn-navigate {
  background: var(--color-dark-primary);
  color: var(--color-white);
  text-decoration: none;
}

.btn-navigate:hover {
  background: var(--color-green-fairway);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-show-on-map {
  background: transparent;
  border: 2px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

.btn-show-on-map:hover {
  border-color: var(--color-green-fairway);
  color: var(--color-green-green);
  background-color: rgba(85, 139, 47, 0.05);
}

/* =============================================================================
   5. EMPTY STATE
   ============================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12) var(--spacing-4);
  text-align: center;
  color: var(--color-gray-600);
}

.empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-4);
  opacity: 0.5;
  color: var(--color-gray-400);
}

.empty-state h3 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-2) 0;
  color: var(--color-gray-900);
}

.empty-state p {
  font-size: var(--font-size-body);
  margin: 0;
}

/* =============================================================================
   6. ERROR MESSAGE
   ============================================================================= */

.error-message {
  padding: var(--spacing-8);
  text-align: center;
  color: #DC2626;
  background: rgba(220, 38, 38, 0.1);
  border: 2px solid #DC2626;
  border-radius: 12px;
  margin: var(--spacing-6);
}

/* =============================================================================
   7. RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 1024px) {
  .map-list-container {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .map-section-wrapper,
  .courses-list-wrapper {
    display: none;
  }

  .map-section-wrapper.active,
  .courses-list-wrapper.active {
    display: block;
  }

  /* Remove scroll and constraints on list for mobile/tablet */
  .courses-list {
    overflow-y: visible;
    max-height: none;
    padding-right: 0;
  }

  /* Full width on mobile/tablet */
  .courses-list-wrapper {
    width: 100%;
  }

  .list-header {
    padding: 0 var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }

  .course-card {
    margin: 0 var(--spacing-4) var(--spacing-4);
  }

  .course-card:last-child {
    margin-bottom: 0;
  }

  /* Map adjustments */
  .map-section-wrapper {
    padding: 0 var(--spacing-4);
  }

  .map-header {
    margin-bottom: var(--spacing-4);
  }
}

@media (max-width: 767px) {
  .search-section {
    padding: var(--spacing-4) 0;
  }

  .search-container {
    gap: var(--spacing-3);
  }

  /* Type filters stack below on mobile */
  .type-filters {
    width: 100%;
    justify-content: flex-start;
  }

  .type-filters::before {
    flex-shrink: 0;
  }

  /* Results count on separate line on mobile */
  .results-count {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--color-gray-300);
    padding-top: var(--spacing-2);
    text-align: center;
  }

  .filters {
    flex-direction: column;
    width: 100%;
  }

  .search-box {
    width: 100%;
  }

  .filter-select {
    width: 100%;
    min-width: 100%;
  }

  .btn-reset {
    width: 100%;
    justify-content: center;
  }

  /* View toggle buttons on mobile */
  .view-toggle {
    flex-direction: row;
    width: 100%;
  }

  .view-btn {
    flex: 1;
    justify-content: center;
  }

  /* Course cards edge-to-edge on mobile */
  .course-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0 0 var(--spacing-3) 0;
  }

  .list-header {
    padding: 0 var(--spacing-4);
  }

  .course-header {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .course-actions {
    flex-direction: column;
  }

  .btn-navigate,
  .btn-show-on-map {
    width: 100%;
    justify-content: center;
  }
}