* { box-sizing: border-box; }
:root {
  --bg: #000000;
  --card: #0f0f0f;
  --text: #ffffff;
  --muted: #d0d0d0;
  --accent: #e02424; /* red */
  --ok: #31c553;
  --danger: #ff4d4d;
  --border: #1a1a1a;
  --shadow: 0 10px 30px rgba(0,0,0,0.6);
}
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.container { width: min(1100px, 92vw); margin: 0 auto; }

header { padding: 2.5rem 0 1rem; text-align:center; }
h1 { margin: 0 0 .25rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
h2 { margin-top:0; }
.tagline { margin:0; color: var(--muted); }

.controls { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow); }
.date-range { display:flex; flex-wrap:wrap; gap:.75rem; align-items: center; }
.date-range label { display:flex; align-items:center; gap:.5rem; color: var(--muted); }
.date-range input[type="date"] { background: #080808; color: var(--text); border:1px solid var(--border); border-radius:10px; padding:.45rem .6rem; }
.date-range .checkbox { margin-left:auto; }
button { background: #141414; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .9rem; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #fff; border: none; font-weight:700; }
button.primary:hover { filter: brightness(1.05); }

.slots { margin: 1rem 0 3rem; display: grid; gap: 1rem; }
.day { background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: .75rem; box-shadow: var(--shadow); }
.day h3 { margin: .25rem 0 .75rem; font-size: 1.1rem; color: var(--muted); }
.slot-list { display:flex; flex-wrap: wrap; gap:.5rem; }
.slot { padding: .5rem .75rem; border:1px solid var(--border); border-radius: 10px; background:#0b0b0b; display:flex; align-items:center; gap:.5rem; }
.slot .time { font-weight:700; }
.slot .loc { font-size:.9rem; color: var(--muted); }
.slot .badge { font-size:.8rem; padding:.1rem .4rem; border-radius:8px; }
.badge-available { background:rgba(49,197,83,.15); color:var(--ok); border:1px solid rgba(49,197,83,.35); }
.badge-booked { background:rgba(255,77,77,.15); color:var(--danger); border:1px solid rgba(255,77,77,.35); }
.slot button { margin-left:auto; }

.modal { position:fixed; inset:0; background: rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal.hidden { display:none; }
.modal-content { width: min(560px, 92vw); background: var(--card); border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding:1rem; position:relative; }
.close { position:absolute; right:.6rem; top:.4rem; background:transparent; border:none; font-size:1.5rem; color:#fff; }
.when { color: var(--muted); margin-top: -.25rem; }
form { display:grid; gap:.75rem; margin-top:.75rem; }
input, textarea { width:100%; background:#080808; color: var(--text); border:1px solid var(--border); border-radius:10px; padding:.55rem .7rem; }
.form-msg { margin-top:.5rem; min-height:1.2rem; }
.footer { color: var(--muted); text-align:center; padding-bottom:2rem; }

/* Admin */
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow); }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:.5rem; text-align:left; }
.row { display:flex; gap:.5rem; align-items:end; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* === Shared Nav === */
body { background:#0b0b0b; color:#eee; font-family: Inter, system-ui, sans-serif; }
.cs-nav { background:#000; border-bottom:1px solid #1d1e22; }
.cs-nav-inner { max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.cs-brand { color:#fff; font-weight:700; letter-spacing:.5px; }
.cs-nav-links { list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.cs-nav-links li { list-style:none; }
.cs-nav-links a { color:#e8e8e8; text-decoration:none; }
.cs-nav-links a:hover, .cs-nav-links .active a { color:#fff; }
.nav-authed,
.nav-guest {
  display: none;
}

/* === Layout / Panels === */
/* Book page - one column layout */
.wrap--book{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px;
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
/* Horizontal booking bar */
.book-topbar{
  display:flex;
  align-items:flex-end;
  gap:12px;
  background:#111214;
  border:1px solid #1d1e22;
  border-radius:12px;
  padding:12px;
  position:sticky;   /* sticks under the site nav */
  top:56px;          /* adjust if your nav height differs */
  z-index:5;
}
.book-topbar__left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.book-topbar__controls{
  margin-left:auto;
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;    /* wraps nicely on narrow screens */
}
.book-topbar label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#a8a8a8;
  font-weight:600;
  font-size:14px;
}
.book-topbar input,
.book-topbar textarea{
  background:#080808;
  color:#fff;
  border:1px solid #1d1e22;
  border-radius:10px;
  padding:.55rem .7rem;
}
.book-topbar input{ width:260px; }
.book-topbar textarea{ width:260px; min-height:38px; resize:vertical; }
.book-topbar .btn{ height:40px; }
.book-topbar #msg{ color:#a8a8a8; }

@media (max-width: 900px){
  .book-topbar{ position:static; }
  .book-topbar__controls{
    width:100%;
    align-items:stretch;
  }
  .book-topbar input,
  .book-topbar textarea,
  .book-topbar .btn{ width:100%; }
}

@media (max-width: 900px){ .wrap{ grid-template-columns: 1fr; } }
.panel { background:#111214; border:1px solid #1d1e22; border-radius:12px; padding:16px; }
.h1 { margin:2px 0 6px; font-size:26px; }
.muted { color:#a8a8a8; }
.section-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* === Buttons & Pills === */
.btn { border:0; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer; background:#e02424; color:#fff; }
.btn:hover{ filter:brightness(1.08); }
.btn.outline{ background:transparent; border:1px solid #e02424; color:#e02424; }
.pill { display:inline-block; background:#131417; border:1px solid #1d1e22; border-radius:999px; padding:6px 10px; font-weight:600; }

/* === Slots grid === */
.slots-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
@media (min-width: 1180px){ .slots-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px){ .slots-grid { grid-template-columns: 1fr; } }

.slot-card {
  background:#0e0f12;
  border:1px solid #1d1e22;          /* base border */
  border-radius:12px;
  padding:12px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  cursor:pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
  outline:none;                       /* we’ll provide focus-visible */
}
.slot-card:hover { border-color:#2a2b33; box-shadow:0 0 0 1px #2a2b33 inset; }
.slot-card:active { transform: translateY(1px); }

/* Single clean selection ring (no double-border) */
.slot-card.selected {
  border-color:#e02424;               /* turn the actual border red */
  box-shadow: 0 0 0 2px rgba(224,36,36,.25);  /* soft glow outside */
}

/* Keyboard accessibility */
.slot-card:focus-visible {
  border-color:#e02424;
  box-shadow: 0 0 0 2px rgba(224,36,36,.35);
}

.slot-when { font-weight:700; color:#fff; }
.slot-sub  { color:#bdbdbd; font-size:13px; }

/* Skeletons (keep) */
.skel{
  height:56px; border-radius:12px;
  background:linear-gradient(90deg,#15161b,#1a1b22,#15161b);
  animation: skel 1.1s infinite linear;
  border:1px solid #1d1e22;
}
@keyframes skel { 0%{background-position:0 0} 100%{background-position:100% 0} }

/* === Dashboard styles === */
.dash { max-width: 1080px; margin: 0 auto; padding: 28px 18px 40px; }
.dash-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.dash-title { font-size: 28px; line-height:1.2; margin:0 0 6px; }
.dash-sub { color: var(--muted); margin:0; }
.cs-pill { display:inline-flex; align-items:center; border:1px solid var(--border); background: #0f0f10; padding:8px 12px; border-radius:999px; font-weight:600; }
.cs-pill--accent { border-color: #3a1313; background:#140808; color:#ffd8d6; }

.dash-grid { display:grid; grid-template-columns: 1fr; gap:18px; }
@media (min-width: 900px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
}
.dash-h2 { font-size:18px; margin:8px 0 8px; color:#fff; }
.dash-col { background: var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; }

.cs-list { display:flex; flex-direction:column; gap:10px; }
.cs-card {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 14px; background:#0e0f13;
  border:1px solid var(--border); border-radius:12px;
}
.cs-card-title { font-weight:700; margin-bottom:2px; color:#fff; }
.cs-card-meta { color: var(--muted); font-size: 14px; }
.cs-card-side { display:flex; align-items:center; gap:10px; }

.cs-badge { font-size:12px; padding:6px 8px; border-radius:999px; border:1px solid var(--border); background:#15171c; }
.cs-badge--green { border-color:#12361f; background:#0e1c14; color:#c8f3d7; }
.cs-badge--grey { color:#c9c9c9; }

.cs-btn { appearance:none; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:#121319; color:#fff; cursor:pointer; }
.cs-btn:hover { filter:brightness(1.05); }
.cs-btn:disabled { opacity:.5; cursor:not-allowed; }
.cs-btn--danger { border-color:#4c1515; background:#1a0d0d; color:#ffd8d6; }

.cs-skel { height:42px; border-radius:10px; background:linear-gradient(90deg,#101114,#151720, #101114); background-size:200% 100%; animation: skel 1.4s ease infinite; }
.cs-empty { color: var(--muted); padding: 10px; }

/* === Auth (login / signup) === */
.auth-outer {
  min-height: calc(100vh - 56px);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.auth-panel {
  width: min(520px, 92vw);
  box-shadow: var(--shadow);
}
.auth-title { margin: 2px 0 6px; font-size: 26px; }
.auth-sub { margin: 0 0 12px; }
.auth-form .row { display: grid; gap: 10px; }
.auth-form .btn { width: 100%; padding: 12px; }

/* === Calendar layout for Book page === */
* { box-sizing: border-box; }
:root {
  --bg: #000000;
  --card: #0f0f0f;
  --text: #ffffff;
  --muted: #d0d0d0;
  --accent: #e02424; /* red */
  --ok: #31c553;
  --danger: #ff4d4d;
  --border: #1a1a1a;
  --shadow: 0 10px 30px rgba(0,0,0,0.6);
}
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.container { width: min(1100px, 92vw); margin: 0 auto; }

header { padding: 2.5rem 0 1rem; text-align:center; }
h1 { margin: 0 0 .25rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
h2 { margin-top:0; }
.tagline { margin:0; color: var(--muted); }

.controls { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow); }
.date-range { display:flex; flex-wrap:wrap; gap:.75rem; align-items: center; }
.date-range label { display:flex; align-items:center; gap:.5rem; color: var(--muted); }
.date-range input[type="date"] { background: #080808; color: var(--text); border:1px solid var(--border); border-radius:10px; padding:.45rem .6rem; }
.date-range .checkbox { margin-left:auto; }
button { background: #141414; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .9rem; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #fff; border: none; font-weight:700; }
button.primary:hover { filter: brightness(1.05); }

.slots { margin: 1rem 0 3rem; display: grid; gap: 1rem; }
.day { background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: .75rem; box-shadow: var(--shadow); }
.day h3 { margin: .25rem 0 .75rem; font-size: 1.1rem; color: var(--muted); }
.slot-list { display:flex; flex-wrap: wrap; gap:.5rem; }
.slot { padding: .5rem .75rem; border:1px solid var(--border); border-radius: 10px; background:#0b0b0b; display:flex; align-items:center; gap:.5rem; }
.slot .time { font-weight:700; }
.slot .loc { font-size:.9rem; color: var(--muted); }
.slot .badge { font-size:.8rem; padding:.1rem .4rem; border-radius:8px; }
.badge-available { background:rgba(49,197,83,.15); color:var(--ok); border:1px solid rgba(49,197,83,.35); }
.badge-booked { background:rgba(255,77,77,.15); color:var(--danger); border:1px solid rgba(255,77,77,.35); }
.slot button { margin-left:auto; }

.modal { position:fixed; inset:0; background: rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal.hidden { display:none; }
.modal-content { width: min(560px, 92vw); background: var(--card); border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding:1rem; position:relative; }
.close { position:absolute; right:.6rem; top:.4rem; background:transparent; border:none; font-size:1.5rem; color:#fff; }
.when { color: var(--muted); margin-top: -.25rem; }
form { display:grid; gap:.75rem; margin-top:.75rem; }
input, textarea { width:100%; background:#080808; color: var(--text); border:1px solid var(--border); border-radius:10px; padding:.55rem .7rem; }
.form-msg { margin-top:.5rem; min-height:1.2rem; }
.footer { color: var(--muted); text-align:center; padding-bottom:2rem; }

/* Admin */
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow); }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:.5rem; text-align:left; }
.row { display:flex; gap:.5rem; align-items:end; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* === Shared Nav === */
body { background:#0b0b0b; color:#eee; font-family: Inter, system-ui, sans-serif; }
.cs-nav { background:#000; border-bottom:1px solid #1d1e22; }
.cs-nav-inner { max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.cs-brand { color:#fff; font-weight:700; letter-spacing:.5px; }
.cs-nav-links { list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.cs-nav-links li { list-style:none; }
.cs-nav-links a { color:#e8e8e8; text-decoration:none; }
.cs-nav-links a:hover, .cs-nav-links .active a { color:#fff; }
.nav-authed,
.nav-guest {
  display: none;
}

/* === Layout / Panels === */
.wrap { max-width:1100px; margin:24px auto; padding:0 16px; display:grid; grid-template-columns: 1.4fr .6fr; gap:16px; }
@media (max-width: 900px){ .wrap{ grid-template-columns: 1fr; } }
.panel { background:#111214; border:1px solid #1d1e22; border-radius:12px; padding:16px; }
.h1 { margin:2px 0 6px; font-size:26px; }
.muted { color:#a8a8a8; }
.section-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* === Buttons & Pills === */
.btn { border:0; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer; background:#e02424; color:#fff; }
.btn:hover{ filter:brightness(1.08); }
.btn.outline{ background:transparent; border:1px solid #e02424; color:#e02424; }
.pill { display:inline-block; background:#131417; border:1px solid #1d1e22; border-radius:999px; padding:6px 10px; font-weight:600; }

/* === Slots grid === */
.slots-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
@media (min-width: 1180px){ .slots-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px){ .slots-grid { grid-template-columns: 1fr; } }

.slot-card {
  background:#0e0f12;
  border:1px solid #1d1e22;          /* base border */
  border-radius:12px;
  padding:12px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  cursor:pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
  outline:none;                       /* we’ll provide focus-visible */
}
.slot-card:hover { border-color:#2a2b33; box-shadow:0 0 0 1px #2a2b33 inset; }
.slot-card:active { transform: translateY(1px); }

/* Single clean selection ring (no double-border) */
.slot-card.selected {
  border-color:#e02424;               /* turn the actual border red */
  box-shadow: 0 0 0 2px rgba(224,36,36,.25);  /* soft glow outside */
}

/* Keyboard accessibility */
.slot-card:focus-visible {
  border-color:#e02424;
  box-shadow: 0 0 0 2px rgba(224,36,36,.35);
}

.slot-when { font-weight:700; color:#fff; }
.slot-sub  { color:#bdbdbd; font-size:13px; }

/* Skeletons (keep) */
.skel{
  height:56px; border-radius:12px;
  background:linear-gradient(90deg,#15161b,#1a1b22,#15161b);
  animation: skel 1.1s infinite linear;
  border:1px solid #1d1e22;
}
@keyframes skel { 0%{background-position:0 0} 100%{background-position:100% 0} }

/* === Dashboard styles === */
.dash { max-width: 1080px; margin: 0 auto; padding: 28px 18px 40px; }
.dash-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.dash-title { font-size: 28px; line-height:1.2; margin:0 0 6px; }
.dash-sub { color: var(--muted); margin:0; }
.cs-pill { display:inline-flex; align-items:center; border:1px solid var(--border); background: #0f0f10; padding:8px 12px; border-radius:999px; font-weight:600; }
.cs-pill--accent { border-color: #3a1313; background:#140808; color:#ffd8d6; }

.dash-grid { display:grid; grid-template-columns: 1fr; gap:18px; }
@media (min-width: 900px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
}
.dash-h2 { font-size:18px; margin:8px 0 8px; color:#fff; }
.dash-col { background: var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; }

.cs-list { display:flex; flex-direction:column; gap:10px; }
.cs-card {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 14px; background:#0e0f13;
  border:1px solid var(--border); border-radius:12px;
}
.cs-card-title { font-weight:700; margin-bottom:2px; color:#fff; }
.cs-card-meta { color: var(--muted); font-size: 14px; }
.cs-card-side { display:flex; align-items:center; gap:10px; }

.cs-badge { font-size:12px; padding:6px 8px; border-radius:999px; border:1px solid var(--border); background:#15171c; }
.cs-badge--green { border-color:#12361f; background:#0e1c14; color:#c8f3d7; }
.cs-badge--grey { color:#c9c9c9; }

.cs-btn { appearance:none; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:#121319; color:#fff; cursor:pointer; }
.cs-btn:hover { filter:brightness(1.05); }
.cs-btn:disabled { opacity:.5; cursor:not-allowed; }
.cs-btn--danger { border-color:#4c1515; background:#1a0d0d; color:#ffd8d6; }

.cs-skel { height:42px; border-radius:10px; background:linear-gradient(90deg,#101114,#151720, #101114); background-size:200% 100%; animation: skel 1.4s ease infinite; }
.cs-empty { color: var(--muted); padding: 10px; }

/* === Auth (login / signup) === */
.auth-outer {
  min-height: calc(100vh - 56px);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.auth-panel {
  width: min(520px, 92vw);
  box-shadow: var(--shadow);
}
.auth-title { margin: 2px 0 6px; font-size: 26px; }
.auth-sub { margin: 0 0 12px; }
.auth-form .row { display: grid; gap: 10px; }
.auth-form .btn { width: 100%; padding: 12px; }

/* ==== Calendar (single unified grid: 7 columns) ==== */
.cal { display: grid; gap: 12px; width: 100%; }

.cal-grid {
  display:grid !important;
  grid-template-columns: repeat(7, minmax(140px, 1fr)) !important; /* was 1fr */
  column-gap:12px;
  row-gap:12px;
}

/* Header cells live in the first row of the same grid */
.cal-head-cell {
  text-align: center;
  font-weight: 600;
  color: #bdbdbd;
  padding: 4px 0;
}

/* Day cells */
.cal-cell {
  background: #0e0f12;
  border: 1px solid #1d1e22;
  border-radius: 12px;
  padding: 10px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-cell-head { display:flex; align-items:baseline; gap:6px; margin-bottom:8px; }
.cal-date      { display:inline-block; min-width:28px; text-align:center; border:1px solid #2a2b33; border-radius:8px; padding:2px 6px; font-weight:700; }
.cal-month     { color:#9aa0a6; font-size:12px; }
.cal-cell-head.today .cal-date { background:#e02424; color:#fff; border-color:transparent; }
.cal-cell-body { display:flex; flex-direction:column; gap:6px; flex:1; }
.cal-empty     { color:#444; }

/* Slot chip */
.slot-chip{
  width:100%;
  text-align:left;
  background:#0b0c10;
  border:1px solid #24262e;
  border-radius:10px;
  padding:10px;
  line-height:1.2;

  /* show full text */
  white-space: normal;      /* allow wrapping */
  overflow: visible;        /* no clipping */
  text-overflow: clip;      /* no ellipsis */

  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .05s;
}

/* optional: make time and location sit nicely if you ever add spans */
.slot-chip .slot-line { display:block; }

.slot-chip:hover{ border-color:#2e313b; box-shadow:0 0 0 1px #2e313b inset; }
.slot-chip.selected{ border-color:#e02424; box-shadow:0 0 0 2px rgba(224,36,36,.25); }

/* Responsive collapse */
@media (max-width: 900px) {
  .cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 580px) {
  .cal-grid { grid-template-columns: 1fr !important; }
}

/* in public/css/site.css or inline */
#error, #bookError {
  background: #2a0e10;
  border: 1px solid #e02424;
  color: #ffd9da;
  padding: 8px 10px;
  border-radius: 10px;
}
