/* ===========================
   Modèle CSS responsive pour SimplyBook
   - Couleur primaire : #ff9900
   - Usage : coller dans Custom CSS de SimplyBook
   =========================== */

/* Variables */
:root{
  --primary: #ff9900;
  --bg: #ffffff;
  --muted: #f6f6f7;
  --text: #222222;
  --subtext: #6b6b6b;
  --radius: 10px;
  --shadow: 0 6px 18px rgba(18,18,18,0.07);
  --gutter: 16px;
  --maxwidth: 1100px;
}

/* === Fonts
   - Si tu as League Gothic / Ruqaa, importe-les via @font-face
   - Sinon fallback : Oswald (titre) & Noto Sans (texte)
*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Noto+Sans:wght@300;400;700&display=swap');

body, .sbk-body {
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
  padding:0;
}

/* Wrapper centré */
.sbk-booking-wrapper, .sbk-content {
  max-width: var(--maxwidth);
  margin: 24px auto;
  padding: 18px;
  box-sizing: border-box;
}

/* Layout en deux colonnes desktop / une colonne mobile */
.sbk-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 20px;
  align-items: start;
}

/* Mobile fallback */
@media (max-width: 860px){
  .sbk-booking-wrapper { padding: 12px; }
  .sbk-layout { grid-template-columns: 1fr; }
}

/* Carte / panneaux */
.sbk-panel, .sbk-box, .sbk-sidebar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  border: 1px solid #efefef;
}

/* Header simple */
.sbk-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}
.sbk-header .logo { height:42px; width:auto; display:inline-block; }
.sbk-header h1 {
  font-family: "Oswald", "League Gothic", system-ui;
  letter-spacing: 1px;
  margin:0;
  font-size:20px;
  color:var(--text);
  text-transform:uppercase;
}

/* Service list */
.sbk-services .sbk-service {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px;
  border-radius: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
  border: 1px solid #f3f3f3;
  margin-bottom: 8px;
}
.sbk-services .sbk-service:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
.sbk-service .title { font-weight:700; color:var(--text); }
.sbk-service .meta { font-size:13px; color:var(--subtext); }

/* Calendar */
.sbk-calendar {
  border-radius: 8px;
  overflow:hidden;
  border: 1px solid #eee;
  background: linear-gradient(180deg, #fff, var(--muted));
  padding: 12px;
}
.sbk-calendar .day {
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  margin:4px; border-radius:6px; cursor:pointer; user-select:none;
}
.sbk-calendar .day.available { background:#fff; border:1px solid #eee; color:var(--text); }
.sbk-calendar .day.selected { background:var(--primary); color:#fff; box-shadow: 0 6px 18px rgba(255,153,0,0.18); }

/* Form inputs */
.sbk-form input[type="text"], .sbk-form input[type="email"], .sbk-form select, .sbk-form textarea {
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #e6e6e6;
  background:#fff;
  box-sizing:border-box;
  font-size:14px;
  margin-top:8px;
  color:var(--text);
}
.sbk-form label { font-size:13px; color:var(--subtext); display:block; margin-top:10px; }

/* Boutons */
.sbk-btn, .sbk-button {
  display:inline-block;
  padding:10px 18px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  text-decoration:none;
  font-weight:700;
  border: none;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease, opacity .08s;
  box-shadow: 0 8px 20px rgba(255,153,0,0.16);
}
.sbk-btn.secondary, .sbk-button.secondary {
  background:transparent;
  border:1px solid #ddd;
  color:var(--text);
  box-shadow:none;
}
.sbk-btn:active { transform: translateY(1px); }

/* Price badge */
.sbk-price {
  background: linear-gradient(90deg, rgba(255,153,0,0.12), rgba(255,153,0,0.02));
  color:var(--text);
  padding:6px 10px;
  border-radius:20px;
  font-weight:700;
  font-size:14px;
  border: 1px solid rgba(255,153,0,0.14);
}

/* Sidebar résumé */
.sbk-summary {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sbk-summary .row { display:flex; justify-content:space-between; align-items:center; }

/* Notices / alertes */
.sbk-note {
  background:#fffbe8;
  border-left: 4px solid var(--primary);
  padding:10px 12px;
  border-radius:8px;
  color:#6b5700;
  font-size:13px;
}

/* Petite accessibilité : focus clair pour navigation clavier */
.sbk-form input:focus, .sbk-form select:focus, .sbk-btn:focus { outline: 3px solid rgba(255,153,0,0.14); outline-offset: 2px; }

/* Images et vignettes */
.sbk-thumb { width:56px; height:40px; object-fit:cover; border-radius:6px; border:1px solid #eee; }

/* Footer simple */
.sbk-footer { font-size:13px; color:var(--subtext); margin-top:12px; text-align:center; }

/* petits ajustements pour imprimante / modal */
@media print {
  .sbk-button, .sbk-footer, .sbk-header { display:none; }
  .sbk-booking-wrapper { box-shadow:none; border:none; }
}