:root{
  --bg: #0d1026;
  --bg-2: #11153a;
  --surface: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --text: #f3f6ff;
  --muted: #c7cff3;
  --primary: #6ae0ff;
  --primary-2: #7cffd9;
  --accent: #ff7ad9;
  --accent-2: #ffce6a;
  --ok: #52e08d;
  --danger: #ff6b6b;
  --shadow: 0 2px 10px rgba(0,0,0,0.25), 0 14px 36px rgba(0,0,0,0.35);
  --radius: 16px;
  --gap-sm: .75rem; --gap-md: 1.25rem; --gap-lg: 2rem; --gap-xl: 3rem;
  --container: min(1120px, 92vw);
}

* { box-sizing: border-box }
html,body { margin:0; padding:0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.55 }
a { color: inherit; text-decoration: none }
img { max-width:100%; display:block }
.container { width: var(--container); margin-inline: auto; padding-inline: 12px }

.skip-link{
  position:absolute; inset-inline-start: 12px; inset-block-start:-40px; z-index: 1000;
  background:#fff; color:#111; padding:.5rem .75rem; border-radius:10px; transition: transform .2s;
}
.skip-link:focus-visible{ transform: translateY(52px); outline: 2px solid var(--accent) }

/* Header */
.site-header{
  position:sticky; top:0; z-index: 20;
  background: linear-gradient(180deg, rgba(20,24,74,.9), rgba(13,16,38,.9));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.header-inner{ 
  display:flex; align-items:center; justify-content:space-between; 
  min-height:68px; gap: var(--gap-md) 
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.brand{
  text-decoration:none; color:var(--text); font-weight:900; letter-spacing:.3px; font-size:1.15rem;
  display:inline-flex; align-items:center; gap:.55rem;
}
.brand .spark{ font-size:1.2rem; color: var(--accent-2) }

.lang-switch{ display:flex; gap:.5rem }
.btn{
  appearance:none; border:1px solid var(--border); background: #0d1338; color: var(--text);
  padding:.48rem .75rem; border-radius:999px; font-weight:800; cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.btn:hover{ border-color: rgba(255,255,255,.28) }
.btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.btn[aria-pressed="true"]{ background: linear-gradient(180deg, #23318f, #1b2878) }

/* Admin Button in Header */
.admin-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--muted);
  padding: .45rem .7rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}
.admin-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: var(--text);
  transform: translateY(-1px);
}
.admin-btn:active {
  transform: translateY(0);
}

.check-booking-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: linear-gradient(135deg, var(--primary) 0%, #0a73ff 100%);
  color: white;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(255,255,255,.3);
}
.check-booking-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Hero */
.hero{
  position:relative; overflow:hidden; padding-block: clamp(1.25rem, 4vw, 2.25rem);
  background:
    radial-gradient(1200px 600px at 15% -10%, #2a2f7e 0%, transparent 70%),
    radial-gradient(900px 450px at 85% 10%, #5c1c76 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-2), transparent);
  border-bottom:1px solid var(--border);
}
.hero .container{ display:grid; gap:.6rem }
.hero-title{ margin:0; font-size: clamp(1.3rem, 3.2vw, 2rem); letter-spacing:.3px }
.hero-sub{ margin:0; color: var(--muted); max-width: 68ch }

/* Section */
.section{ padding-block: clamp(1.6rem, 4vw, 2.6rem) }
.section-title{ margin:0 0 .75rem 0; font-size: clamp(1.15rem, 2.5vw, 1.6rem) }

/* Cards Grid */
.card-grid{ display:grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items:stretch }
.card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; display:grid; gap:.6rem; transform: translateZ(0); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease }
.card:hover{ transform: translateY(-6px) rotateZ(.25deg); box-shadow: 0 6px 16px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.45); border-color: rgba(255,255,255,.16) }
.card:focus-within{ outline: 2px solid var(--primary); outline-offset: 2px }
.card-title{ margin:0; font-size:1.1rem }
.card-text{ margin:0; color: var(--muted) }
.card-list{ margin:.25rem 0 0 0; padding-inline-start: 1.1rem }
.card-list li{ margin:.2rem 0 }
.card-tag{ margin:.25rem 0 0 0; font-weight:900; color: var(--primary-2) }
.card-actions{ margin-top:.25rem }
.btn-primary{ display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; background: linear-gradient(180deg, #1aa5ff, #0a73ff); color:#fff; border:0; padding:.6rem .85rem; border-radius:12px; font-weight:900 }
.btn-primary:hover{ filter: brightness(.96) }

/* Accent card (Partner) */
.card-accent{ background: linear-gradient(135deg, #5a65ea 0%, #8142b3 100%); border-color: transparent }
.card-accent .card-text, .card-accent .card-list li, .card-accent .card-tag{ color: #fff; opacity:.95 }
.card-accent .btn-primary{ background: linear-gradient(180deg, #ffd86a, #ffb14a); color:#1a1330 }

/* Floating Price Button (right) */
.price-fab{ position: fixed; inset-block-end: 20px; inset-inline-end: 18px; z-index: 30; text-decoration:none; background: linear-gradient(180deg, #54f0c9, #2fc6f0); color:#0a1130; font-weight:900; border-radius: 999px; padding:.7rem 1rem; box-shadow: var(--shadow); border: 2px solid rgba(255,255,255,.65) }
.price-fab:focus-visible{ outline: 3px solid #fff; outline-offset: 2px }

/* Footer */
.site-footer{ border-top:1px solid var(--border); background: linear-gradient(180deg, rgba(26,31,73,.7), rgba(20,24,52,.8)); padding-block: 1rem }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--gap-md); flex-wrap:wrap }
.footer-cta{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; font-weight:900; background: #19c37d; padding:.6rem .9rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.5) }
.footer-cta:hover{ filter: brightness(.98) }

/* Login Dialog */
.login-dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.login-dialog.active {
  display: flex;
}
.login-content {
  background: linear-gradient(180deg, #1a1f4a, #0f1336);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  width: min(400px, 90vw);
  box-shadow: var(--shadow);
}
.login-title {
  margin: 0 0 1.5rem 0;
  font-size: 1.4rem;
  color: var(--text);
  text-align: center;
}
.form-group {
  margin-bottom: 1.2rem;
}
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.form-input {
  width: 100%;
  padding: 0.7rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  transition: all 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255,255,255,0.12);
}
.login-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.btn-login {
  flex: 1;
  padding: 0.8rem;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-login.primary {
  background: linear-gradient(180deg, #1aa5ff, #0a73ff);
  color: white;
}
.btn-login.primary:hover {
  filter: brightness(1.1);
}
.btn-login.secondary {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-login.secondary:hover {
  background: rgba(255,255,255,0.12);
}
.login-error {
  display: none;
  background: rgba(255,107,107,0.15);
  border: 1px solid rgba(255,107,107,0.3);
  color: var(--danger);
  padding: 0.7rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.login-error.active {
  display: block;
}

/* RTL adjustments */
[dir="rtl"] .header-inner{ flex-direction: row-reverse }
[dir="rtl"] .header-left{ flex-direction: row-reverse }
[dir="rtl"] .hero-title, [dir="rtl"] .hero-sub, [dir="rtl"] .section-title, [dir="rtl"] .card-text, [dir="rtl"] .card-list, [dir="rtl"] .card-tag{ text-align: start }

/* Responsive */
@media (max-width: 768px) {
  .header-inner {
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }
  
  .header-left {
    gap: var(--gap-sm);
  }
  
  .admin-btn {
    font-size: 0.8rem;
    padding: .35rem .6rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .card{ transition: none } .card:hover{ transform: none } }