/**
 * Beach Page Inline Styles (extracted from 15 beach templates)
 * Common styles for data highlights, price boxes, tips, tables, lightbox, etc.
 */

/* RESPONSIVE FIX */
html, body { overflow-x: hidden; max-width: 100vw; }

.data-highlight { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-left: 4px solid var(--primary); padding: var(--space-4) var(--space-5); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: var(--space-4) 0; }
.data-highlight strong { color: var(--primary-dark); }
.price-box { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--gray-100); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: 0.875rem; }
.price-mxn { font-weight: 700; color: var(--gray-900); }
.price-usd { color: var(--gray-500); font-size: 0.8125rem; }
.geo-data { font-family: 'SF Mono', Monaco, monospace; background: var(--gray-900); color: #22d3ee; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: 0.8125rem; word-break: break-all; }
.section-anchor { scroll-margin-top: 80px; }
.tip-pro { background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%); border-left: 4px solid #eab308; padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: var(--space-3) 0; font-size: 0.9375rem; }
.tip-pro::before { content: '\1F4A1 '; }
.warning-box { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-left: 4px solid #ef4444; padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: var(--space-3) 0; font-size: 0.9375rem; }
.warning-box::before { content: '\26A0\FE0F '; }
.hours-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.hours-table th, .hours-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--gray-200); }
.hours-table th { background: var(--gray-50); font-weight: 600; font-size: 0.875rem; }
.citable-answer { background: var(--white); border: 2px solid var(--primary); padding: var(--space-4); border-radius: var(--radius-xl); margin: var(--space-4) 0; }
.citable-answer p { margin: 0; font-size: 1rem; line-height: 1.7; }
.quick-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0; }
.quick-nav a { padding: var(--space-2) var(--space-4); background: var(--gray-100); border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 500; color: var(--gray-700); text-decoration: none; transition: all 0.2s; }
.quick-nav a:hover { background: var(--primary); color: white; }

/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
  .hours-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hours-table th, .hours-table td { padding: var(--space-2); font-size: 0.8125rem; white-space: nowrap; }
  .data-highlight { padding: var(--space-3); font-size: 0.9375rem; }
  .quick-nav a { padding: var(--space-2) var(--space-3); font-size: 0.8125rem; }
  .price-box { font-size: 0.8125rem; padding: var(--space-1) var(--space-2); }
  .feature-card { padding: var(--space-3); }
  .beach-hero-meta { flex-wrap: wrap; gap: var(--space-2); }
  .beach-hero-meta .beach-meta-item { font-size: 0.8125rem; }
}

/* LIGHTBOX */
.beach-gallery img { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.beach-gallery img:hover { transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 10000; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-close svg { width: 24px; height: 24px; stroke: white; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-nav svg { width: 24px; height: 24px; stroke: white; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; font-size: 14px; opacity: 0.7; }