/* ──────────────────────────────────────────────────────────────
   Maison Cosmos — responsive-fix.css
   Ajustements responsive + styles login glassmorphism + demo creds
   ────────────────────────────────────────────────────────────── */

/* ── Overlay login ───────────────────────────────────────────── */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(14, 24, 32, .65);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  animation: fadeIn .25s ease both;
}
.login-overlay[hidden] { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.login-card {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  padding: 42px 40px 36px;
  width: 100%; max-width: 420px;
  position: relative;
  box-shadow: 0 30px 80px rgba(14,24,32,.25);
  animation: slideUp .3s cubic-bezier(.4,0,.2,1) both;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-close {
  position: absolute; top: 16px; right: 18px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #f0efeb; color: #7d878c;
  font-size: 18px; display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.login-close:hover { background: #e7e4df; color: #17222c; }

.login-mark {
  width: 48px; height: 48px; border-radius: 13px;
  background: linear-gradient(135deg, #d5a74d, #b87932);
  color: #fff; font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(197,152,61,.35);
}

.login-card .eyebrow { color: #c99a3d; }
.login-card h2 { font: 600 24px 'Playfair Display', serif; margin: 8px 0 6px; }
.login-card p  { color: #7d878c; font-size: 13px; margin: 0 0 24px; }

#login-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; color: #7d878c; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 16px;
}
#login-form input {
  border: 1.5px solid #e7e4df; border-radius: 8px;
  padding: 12px 14px; font-size: 14px; color: #17222c;
  background: #fafaf8;
  transition: border-color .2s, box-shadow .2s;
}
#login-form input:focus {
  outline: none; border-color: #c99a3d;
  box-shadow: 0 0 0 3px rgba(201,154,61,.15);
  background: #fff;
}

.login-error {
  color: #e27542; font-size: 12px; min-height: 18px;
  margin: -8px 0 12px; font-weight: 500;
}

.login-submit {
  width: 100%; padding: 13px; font-size: 13px; font-weight: 700;
  border-radius: 9px; background: #172c3b; color: #fff;
  transition: background .2s, transform .2s, box-shadow .2s;
  letter-spacing: .02em;
}
.login-submit:hover {
  background: #224255; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(23,44,59,.25);
}

/* ── Comptes démo ─────────────────────────────────────────────── */
.demo-credentials {
  margin-top: 24px; border-top: 1px solid #e7e4df; padding-top: 18px;
}
.demo-creds-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: #a0adb2; margin: 0 0 12px;
}
.demo-creds-grid { display: flex; flex-direction: column; gap: 8px; }

.demo-cred-item {
  display: flex; align-items: center; gap: 10px;
  background: #f8f7f3; border: 1px solid #e7e4df;
  border-radius: 8px; padding: 10px 14px;
  cursor: pointer; font-size: 12px;
  transition: background .2s, border-color .2s;
}
.demo-cred-item:hover { background: #f5ead2; border-color: #c99a3d; }
.demo-cred-role {
  font-size: 10px; font-weight: 700; color: #c99a3d;
  width: 80px; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .08em;
}
.demo-cred-item code {
  background: #e7e4df; border-radius: 4px;
  padding: 2px 6px; font-size: 11px; color: #17222c;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ── Cart panel responsive ───────────────────────────────────── */
@media (max-width: 800px) {
  .restaurant-layout { grid-template-columns: 1fr; }
  .cart-panel { position: static; margin-top: 20px; }
}

@media (max-width: 480px) {
  .login-card { padding: 32px 24px 28px; margin: 0 16px; }
  .demo-cred-item { flex-wrap: wrap; }
}

/* ── Deux identités client : séjour calme / restaurant vivant ── */
.hotel-experience { --experience-accent: #b48a3e; }
.hotel-experience .hotel-hero {
  padding: 34px 38px; margin-bottom: 22px; border-radius: 18px;
  color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(circle at 86% 18%, rgba(224,191,121,.35), transparent 19%), linear-gradient(120deg, #142e42 0%, #1d5065 60%, #5b847d 100%);
  box-shadow: 0 18px 34px rgba(20,46,66,.18);
}
.hotel-experience .hotel-hero::after {
  content: 'MC'; position: absolute; right: 34px; bottom: -31px; opacity: .13;
  font: 700 158px/1 'Playfair Display', serif; letter-spacing: -.1em;
}
.hotel-experience .hotel-hero .eyebrow { color: #efd392; }
.hotel-experience .hotel-hero h1 { max-width: 620px; margin: 6px 0 8px; font-size: clamp(28px, 3.4vw, 43px); }
.hotel-experience .hotel-hero p { max-width: 570px; color: rgba(255,255,255,.78); }
.hotel-experience .hotel-hero .primary-button { position: relative; z-index: 1; background: #f5dfaa; color: #163145; box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.hotel-hero-meta, .restaurant-hero-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; position: relative; z-index: 1; }
.hotel-hero-meta span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.1); font-size: 11px; color: #fff; }
.hotel-experience .search-panel { margin: -43px 24px 26px; position: relative; z-index: 3; padding: 19px 20px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 15px 30px rgba(14,40,54,.14); }
.hotel-experience .room-card { border-radius: 14px; overflow: hidden; border-color: #e5e7e1; transition: transform .22s ease, box-shadow .22s ease; }
.hotel-experience .room-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(24,57,61,.14); }
.hotel-experience .room-image { min-height: 154px; }
.hotel-experience .room-image span { background: rgba(15,43,59,.74); border-radius: 999px; padding: 6px 11px; }

.restaurant-experience .restaurant-hero {
  padding: 31px 34px; margin-bottom: 18px; border-radius: 18px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(circle at 93% 16%, rgba(255,190,103,.34), transparent 17%), linear-gradient(118deg, #4a1d20, #812e28 59%, #bc5d2c);
  box-shadow: 0 18px 34px rgba(105,39,31,.18);
}
.restaurant-experience .restaurant-hero::after { content: '✦'; position: absolute; right: 33px; bottom: -40px; color: rgba(255,228,175,.16); font-size: 190px; }
.restaurant-experience .restaurant-hero .eyebrow { color: #ffcb82; }
.restaurant-experience .restaurant-hero h1 { margin: 6px 0; font-size: clamp(29px, 3.4vw, 43px); }
.restaurant-experience .restaurant-hero p { color: rgba(255,255,255,.82); max-width: 600px; }
.restaurant-experience .cart-button { position: relative; z-index: 1; background: #fff4df; color: #6d2a24; border: 0; }
.restaurant-hero-meta span { font-size: 11px; color: #fff4df; }
.restaurant-hero-meta .chef-pick { border-radius: 999px; padding: 7px 11px; background: rgba(58,18,14,.33); border: 1px solid rgba(255,233,184,.28); }
.restaurant-experience .category-tabs { padding: 8px; gap: 6px; border-radius: 12px; background: #fff1e6; width: max-content; max-width: 100%; }
.restaurant-experience .category-tabs button { border-radius: 9px; }
.restaurant-experience .category-tabs button.is-active { background: #8e332b; color: #fff; box-shadow: 0 5px 12px rgba(142,51,43,.22); }
.restaurant-experience .menu-card { border-radius: 14px; border-color: #f0dfd3; transition: transform .2s ease, box-shadow .2s ease; }
.restaurant-experience .menu-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(132,53,38,.13); }
.restaurant-experience .dish-image { background-color: #fff0e2; }
.restaurant-experience .add-dish { background: #9b3b2f; box-shadow: 0 6px 14px rgba(130,42,31,.22); }
.restaurant-experience .cart-panel { border: 1px solid #efd7c7; border-radius: 16px; box-shadow: 0 14px 30px rgba(119,48,37,.1); }
.restaurant-experience .cart-send { background: #8e332b; }

@media (max-width: 800px) {
  .hotel-experience .hotel-hero, .restaurant-experience .restaurant-hero { padding: 27px 22px; }
  .hotel-experience .search-panel { margin: -18px 8px 22px; }
  .hotel-experience .hotel-hero::after, .restaurant-experience .restaurant-hero::after { display: none; }
  .restaurant-experience .category-tabs { width: 100%; overflow-x: auto; }
}