@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap");

:root {
  --ink: #082d40;
  --ink-soft: #536d78;
  --cream: #f3f0e9;
  --paper: #fffefa;
  --coral: #14758a;
  --coral-dark: #0b5b70;
  --gold: #c49a5a;
  --line: #dce2e2;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

main {
  min-height: 100vh;
}

.topbar {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  padding: 18px max(5vw, calc((100vw - 1220px) / 2));
}

.brand-mark {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: var(--cream);
  display: flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.brand-mark img {
  filter: brightness(0) invert(1);
  height: 32px;
  object-fit: contain;
  width: 32px;
}

.topbar h1 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  margin: 1px 0 0;
}

.eyebrow {
  color: var(--coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  margin: 0;
  text-transform: uppercase;
}

.service-status {
  align-items: center;
  color: var(--ink-soft);
  display: flex;
  font-size: 13px;
  gap: 8px;
  margin-left: auto;
}

.service-status span {
  background: #63a171;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #e6f0e7;
  height: 8px;
  width: 8px;
}

.hero {
  align-items: end;
  background: linear-gradient(125deg, #082d40 0%, #0b4054 64%, #12677a 130%);
  color: white;
  display: flex;
  justify-content: space-between;
  min-height: 235px;
  overflow: hidden;
  padding: 45px max(5vw, calc((100vw - 1220px) / 2));
  position: relative;
}

.hero::after {
  border: 1px solid rgba(214, 170, 97, 0.25);
  border-radius: 50%;
  content: "";
  height: 430px;
  position: absolute;
  right: -100px;
  top: -230px;
  width: 430px;
}

.hero h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -1.7px;
  line-height: 1.02;
  margin: 10px 0 12px;
}

.hero p:not(.eyebrow) {
  color: #b9c6c4;
  margin: 0;
}

.eyebrow.light {
  color: var(--gold);
}

.date-control {
  position: relative;
  z-index: 1;
}

.date-control span {
  color: #b9c6c4;
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
}

.date-control input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9px;
  color: white;
  color-scheme: dark;
  padding: 12px 14px;
}

.stats {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  margin: -22px auto 26px;
  max-width: 1220px;
  padding: 0 5vw;
  position: relative;
  z-index: 2;
}

.stats article {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(23, 51, 53, 0.06);
  display: flex;
  gap: 14px;
  padding: 18px;
}

.stat-icon {
  align-items: center;
  background: #e4f0f1;
  border-radius: 10px;
  color: var(--coral);
  display: flex;
  font-size: 22px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.stats p {
  color: var(--ink-soft);
  font-size: 12px;
  margin: 0 0 2px;
}

.stats strong {
  font-family: "Playfair Display", serif;
  font-size: 24px;
}

.workspace {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(350px, 0.85fr) minmax(480px, 1.35fr);
  margin: 0 auto;
  max-width: 1220px;
  padding: 0 5vw 55px;
}

.restaurant-details {
  display:grid;
  gap:14px;
  grid-template-columns:1.35fr 1fr .8fr;
  margin:0 auto 24px;
  max-width:1220px;
  padding:0 5vw;
}

.restaurant-details article {
  align-items:center;
  background:rgba(255,253,249,.7);
  border:1px solid var(--line);
  border-radius:11px;
  display:flex;
  gap:13px;
  padding:15px 17px;
}

.detail-icon {
  color:var(--coral);
  font-size:23px;
}

.restaurant-details strong,
.restaurant-details span:not(.detail-icon) {
  display:block;
}

.restaurant-details strong {
  font-size:13px;
  margin:4px 0 2px;
}

.restaurant-details strong a {
  color:var(--ink);
  text-decoration:none;
}

.restaurant-details span:not(.detail-icon) {
  color:var(--ink-soft);
  font-size:11px;
}

.schedule-warning {
  background:#faf3e7;
  border-left:3px solid var(--gold);
  color:#775d30;
  font-size:11px;
  line-height:1.5;
  margin:0;
  padding:0;
}

.schedule-warning:not(:empty) {
  padding:9px 11px;
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.panel-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 22px 24px;
}

.panel-heading h3 {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  margin: 5px 0 0;
  text-transform: capitalize;
}

.step {
  color: #d7cec1;
  font-family: "Playfair Display", serif;
  font-size: 34px;
}

.count {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: white;
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

form {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  padding: 24px;
}

label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.full {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  background: #fff;
  border: 1px solid #d9d3c8;
  border-radius: 8px;
  color: var(--ink);
  margin-top: 7px;
  outline: none;
  padding: 11px 12px;
  transition: border 0.2s, box-shadow 0.2s;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(233, 105, 79, 0.12);
}

textarea {
  resize: vertical;
}

.primary-button {
  background: var(--coral);
  border: 0;
  border-radius: 8px;
  color: white;
  font-weight: 700;
  padding: 13px;
}

.primary-button:hover {
  background: var(--coral-dark);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.form-message {
  color: var(--ink-soft);
  font-size: 12px;
  margin: -5px 0 0;
  text-align: center;
}

.reservation-list {
  max-height: 590px;
  overflow-y: auto;
  padding: 10px 22px 22px;
}

.reservation-card {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: 58px 1fr auto;
  padding: 18px 2px;
}

.reservation-card time {
  color: var(--coral);
  font-family: "Playfair Display", serif;
  font-size: 19px;
  font-weight: 700;
}

.guest-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guest-line strong {
  font-size: 15px;
}

.guest-line span {
  background: #edf1ee;
  border-radius: 20px;
  color: var(--ink-soft);
  font-size: 10px;
  padding: 3px 8px;
}

.reservation-info p,
.reservation-info small {
  color: var(--ink-soft);
  display: block;
  font-size: 12px;
  margin: 5px 0 0;
}

.reservation-info small {
  background: #faf3e7;
  border-left: 2px solid var(--gold);
  padding: 6px 8px;
}

.card-actions {
  align-items: center;
  display: flex;
  flex-wrap:wrap;
  gap: 5px;
}

.whatsapp-confirm {
  align-items:center;
  background:#16875f;
  border-radius:7px;
  color:#fff;
  display:inline-flex;
  font-size:10px;
  font-weight:700;
  justify-content:center;
  line-height:1.2;
  min-height:38px;
  padding:8px 11px;
  text-align:center;
  text-decoration:none;
  transition:background .2s, transform .2s;
}

.whatsapp-confirm:hover {
  background:#0f6f4d;
  transform:translateY(-1px);
}

.arrival-button {
  background:#e7f1eb;
  border:1px solid #a9cbb7;
  border-radius:7px;
  color:#356a49;
  font-size:10px;
  font-weight:700;
  min-height:38px;
  padding:8px 11px;
  transition:background .2s, transform .2s;
}

.arrival-button:hover {
  background:#d5e9dc;
  transform:translateY(-1px);
}

.arrival-button:disabled {
  cursor:wait;
  opacity:.65;
}

.card-actions select {
  font-size: 11px;
  margin: 0;
  padding: 7px;
  width: 106px;
}

.delete-button {
  background: transparent;
  border: 0;
  color: #a79f96;
  font-size: 22px;
  padding: 3px 6px;
}

.status-seated {
  opacity: 0.64;
}

.status-cancelled {
  opacity: 0.45;
}

.status-cancelled .reservation-info strong {
  text-decoration: line-through;
}

.empty-state {
  align-items: center;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  text-align: center;
}

.empty-state > span {
  color: var(--gold);
  font-size: 35px;
  margin-bottom: 15px;
}

.empty-state strong {
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-size: 20px;
}

.empty-state p {
  font-size: 12px;
}

footer {
  align-items: center;
  background: #10292b;
  color: #9eb0ae;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding: 26px max(5vw, calc((100vw - 1220px) / 2));
}

footer span {
  color: white;
  font-family: "Playfair Display", serif;
  font-size: 17px;
}

@media (max-width: 820px) {
  .hero {
    align-items: start;
    flex-direction: column;
    gap: 30px;
  }

  .stats {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .restaurant-details {
    grid-template-columns:1fr;
  }
}

@media (max-width: 580px) {
  .topbar {
    padding: 14px 18px;
  }

  .service-status {
    font-size: 0;
  }

  .hero {
    padding: 38px 20px 52px;
  }

  .hero h2 {
    font-size: 39px;
  }

  .stats {
    gap: 8px;
    padding: 0 12px;
  }

  .stats article {
    align-items: start;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
  }

  .stat-icon {
    font-size: 16px;
    height: 30px;
    width: 30px;
  }

  .stats strong {
    font-size: 20px;
  }

  .workspace {
    padding: 0 12px 35px;
  }

  form {
    grid-template-columns: 1fr;
  }

  form label {
    grid-column: 1 / -1;
  }

  .reservation-card {
    gap: 10px;
    grid-template-columns: 52px 1fr;
  }

  .card-actions {
    grid-column: 2;
  }

  .card-actions .whatsapp-confirm {
    flex-basis:100%;
  }

  .card-actions .arrival-button {
    flex-basis:100%;
  }

  footer {
    align-items: start;
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px;
  }

  footer p {
    margin: 0;
  }
}

.user-nav { align-items:center; display:flex; gap:12px; margin-left:auto; }
.user-nav a, .user-nav button { background:transparent; border:0; color:var(--ink-soft); font-size:12px; font-weight:600; padding:5px; text-decoration:none; }
.user-nav form { display:block; padding:0; }
.auth-page { background:var(--ink); }
.auth-shell { display:grid; grid-template-columns:1fr 1fr; margin:auto; max-width:940px; min-height:100vh; padding:8vh 24px; }
.auth-shell.single { display:flex; justify-content:center; }
.auth-brand { align-items:flex-start; color:#fff; display:flex; flex-direction:column; justify-content:center; padding:50px; }
.auth-logo { display:block; filter:brightness(0) invert(1); height:150px; margin-bottom:26px; max-width:270px; object-fit:contain; object-position:left center; width:100%; }
.auth-brand h1 { font-family:"Playfair Display",serif; font-size:48px; line-height:1.04; margin:12px 0; }
.auth-brand>p:last-child { color:rgba(255,255,255,.7); line-height:1.6; }
.auth-card { align-self:center; background:var(--paper); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.2); max-width:470px; padding:40px; width:100%; }
.auth-card h2 { font-family:"Playfair Display",serif; font-size:34px; margin:8px 0; }
.auth-help { color:var(--ink-soft); font-size:13px; line-height:1.5; }
.auth-form { display:flex; flex-direction:column; padding:18px 0 0; }
.alert { border-radius:8px; font-size:12px; margin:16px 24px 0; padding:11px 13px; }
.alert.error { background:#fbe7e2; color:#9b3828; }
.alert.success { background:#e6f0e7; color:#35633c; }
.auth-card .alert { margin-left:0; margin-right:0; }
.users-layout { display:grid; gap:24px; grid-template-columns:minmax(330px,.8fr) minmax(500px,1.2fr); margin:42px auto; max-width:1150px; padding:0 24px; }
.user-list { padding:8px 24px 24px; }
.user-row { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:17px 0; }
.user-row p, .user-row small { color:var(--ink-soft); font-size:12px; margin:4px 0 0; }
.user-row form { display:block; padding:0; }
.secondary-button { background:white; border:1px solid var(--line); border-radius:7px; color:var(--ink); font-size:11px; padding:8px 10px; }
.secondary-button:disabled { cursor:not-allowed; opacity:.4; }

@media (max-width:760px) {
  .auth-shell { display:block; padding:30px 16px; }
  .auth-brand { padding:20px 12px 30px; }
  .auth-brand h1 { font-size:36px; }
  .auth-logo { height:120px; margin-bottom:18px; max-width:230px; }
  .auth-card { padding:28px 22px; }
  .users-layout { grid-template-columns:1fr; }
  .user-nav>span { display:none; }
}

.quotes-hero {
  align-items:center;
  background:linear-gradient(120deg,#082d40,#0c5365);
  color:white;
  display:flex;
  justify-content:space-between;
  padding:52px max(5vw,calc((100vw - 1120px)/2));
}
.quotes-hero h2 { font-family:"Playfair Display",serif; font-size:42px; margin:9px 0; }
.quotes-hero>div>p:last-child { color:#adc0c3; font-size:13px; }
.quote-summary { align-items:center; border:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; min-width:110px; padding:17px; }
.quote-summary span { color:#b9c9cb; font-size:9px; letter-spacing:2px; text-transform:uppercase; }
.quote-summary strong { color:var(--gold); font-family:"Playfair Display",serif; font-size:34px; }
.quotes-workspace { margin:36px auto 70px; max-width:1120px; padding:0 24px; }
.quote-filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.quote-filters a { border:1px solid var(--line); border-radius:20px; color:var(--ink-soft); font-size:10px; padding:8px 13px; text-decoration:none; }
.quote-filters a.active { background:var(--ink); border-color:var(--ink); color:white; }
.quote-list { display:flex; flex-direction:column; gap:14px; }
.quote-card { background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--gold); display:grid; grid-template-columns:90px 1fr; padding:22px; }
.quote-date { align-items:center; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.quote-date span { color:var(--coral); font-size:9px; letter-spacing:2px; text-transform:uppercase; }
.quote-date strong { font-family:"Playfair Display",serif; font-size:32px; }
.quote-date small { color:var(--ink-soft); }
.quote-main { padding-left:24px; }
.quote-title { align-items:start; display:flex; justify-content:space-between; }
.quote-title h3 { font-family:"Playfair Display",serif; font-size:23px; margin:5px 0 13px; }
.quote-title>strong { color:#b4aaa0; font-size:10px; letter-spacing:1px; }
.status-pill { background:#e8f0ec; border-radius:12px; color:#49715a; font-size:8px; padding:4px 8px; text-transform:uppercase; }
.quote-meta { display:flex; flex-wrap:wrap; gap:16px; }
.quote-meta span { color:var(--ink-soft); font-size:9px; text-transform:uppercase; }
.quote-meta b { color:var(--ink); display:block; font-size:11px; margin-top:3px; text-transform:none; }
.quote-notes { background:#f7f3ea; border-left:2px solid var(--gold); color:var(--ink-soft); font-size:11px; line-height:1.6; margin:16px 0 0; padding:9px 11px; }
.quote-actions { align-items:center; display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.quote-actions form { display:block; padding:0; }
.quote-actions select { font-size:10px; margin:0; padding:8px; width:auto; }
.whatsapp-action { background:#167c70; border-radius:7px; color:white; font-size:10px; padding:9px 12px; text-decoration:none; }
.quote-closed { border-left-color:#4c8761; opacity:.8; }
.quote-cancelled { border-left-color:#aaa; opacity:.6; }

@media (max-width:650px) {
  .quotes-hero { align-items:flex-start; flex-direction:column; gap:22px; padding:40px 20px; }
  .quotes-hero h2 { font-size:34px; }
  .quote-summary { flex-direction:row; gap:15px; min-width:0; }
  .quote-card { grid-template-columns:1fr; padding:18px; }
  .quote-date { align-items:baseline; border-bottom:1px solid var(--line); border-right:0; flex-direction:row; gap:7px; justify-content:flex-start; padding-bottom:10px; }
  .quote-date strong { font-size:22px; }
  .quote-main { padding:16px 0 0; }
  .quote-actions { align-items:stretch; flex-direction:column; }
  .whatsapp-action { text-align:center; }
  .quote-actions select { width:100%; }
}

.reviews-admin-hero { align-items:center; background:linear-gradient(120deg,#082d40,#0c5365); color:#fff; display:flex; justify-content:space-between; padding:48px max(5vw,calc((100vw - 1150px)/2)); }
.reviews-admin-hero h2 { font-family:"Playfair Display",serif; font-size:42px; margin:8px 0; }
.reviews-admin-hero>div>p:last-child { color:rgba(255,255,255,.72); margin:0; }
.review-summary { align-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:14px; display:flex; flex-direction:column; min-width:120px; padding:18px; }
.review-summary span { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; }
.review-summary strong { color:#fff; font-family:"Playfair Display",serif; font-size:34px; }
.reviews-admin-workspace { margin:36px auto 70px; max-width:1120px; padding:0 24px; }
.review-admin-list { display:grid; gap:14px; }
.review-admin-card { background:var(--paper); border:1px solid var(--line); border-radius:12px; display:grid; gap:22px; grid-template-columns:155px 1fr; padding:22px; }
.review-admin-code { border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.review-admin-code span { color:var(--ink-soft); font-size:10px; text-transform:uppercase; }
.review-admin-code strong { color:var(--coral); font-size:14px; margin-top:8px; }
.review-admin-title { align-items:start; display:flex; gap:16px; justify-content:space-between; }
.review-admin-title h3 { font-family:"Playfair Display",serif; font-size:23px; margin:8px 0 0; }
.review-admin-title>small { color:var(--ink-soft); font-size:11px; }
.review-admin-phone { color:var(--ink-soft); font-size:12px; margin:8px 0; }
.review-admin-actions { align-items:center; display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.review-admin-actions form { display:block; padding:0; }
.review-admin-actions button { min-height:38px; }
.review-verify-button,.review-email-button { border:0; border-radius:7px; color:#fff; font-size:10px; font-weight:700; padding:9px 13px; }
.review-verify-button { background:#14758a; }
.review-email-button { background:#356a49; }
.status-review-closed { opacity:.6; }

@media (max-width:650px) {
  .reviews-admin-hero { align-items:flex-start; flex-direction:column; gap:22px; padding:38px 20px; }
  .reviews-admin-hero h2 { font-size:34px; }
  .review-admin-card { grid-template-columns:1fr; padding:18px; }
  .review-admin-code { border-bottom:1px solid var(--line); border-right:0; padding-bottom:14px; }
  .review-admin-title { flex-direction:column; gap:5px; }
  .review-admin-actions { align-items:stretch; flex-direction:column; }
  .review-admin-actions form,.review-admin-actions button,.review-admin-actions a { width:100%; }
}

.redeem-page { background:linear-gradient(145deg,#082d40,#0c5365); min-height:100vh; padding:28px; }
.redeem-shell { background:var(--paper); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.25); margin:auto; max-width:580px; min-height:0; padding:clamp(28px,6vw,55px); }
.redeem-shell>img { display:block; filter:none; height:95px; margin:0 auto 28px; object-fit:contain; width:190px; }
.redeem-shell h1 { font-family:"Playfair Display",serif; font-size:40px; margin:8px 0 24px; }
.redeem-status { border-radius:8px; font-size:12px; font-weight:700; margin:20px 0; padding:12px; text-align:center; text-transform:uppercase; }
.redeem-issued { background:#e7f1eb; color:#356a49; }
.redeem-redeemed { background:#fbe7e2; color:#9b3828; }
.redeem-shell dl { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.redeem-shell dl>div { display:grid; gap:10px; grid-template-columns:110px 1fr; padding:12px 15px; }
.redeem-shell dl>div+div { border-top:1px solid var(--line); }
.redeem-shell dt { color:var(--ink-soft); font-size:10px; text-transform:uppercase; }
.redeem-shell dd { font-size:13px; font-weight:600; margin:0; overflow-wrap:anywhere; }
.redeem-search { display:block; padding:0 0 18px; }
.redeem-search label { color:var(--ink-soft); display:block; font-size:11px; margin-bottom:8px; text-transform:uppercase; }
.redeem-search>div { display:flex; gap:8px; }
.redeem-search input { border:1px solid var(--line); border-radius:7px; flex:1; min-width:0; padding:12px; text-transform:uppercase; }
.redeem-search button { background:var(--coral); border:0; border-radius:7px; color:#fff; font-size:11px; font-weight:700; padding:10px 16px; }
.redeem-form { display:flex; flex-direction:column; gap:18px; padding:20px 0 0; }
.redeem-form label { color:var(--ink-soft); font-size:12px; line-height:1.6; }
.redeem-form input { margin-right:8px; }
.redeem-back { color:var(--ink-soft); display:block; font-size:11px; margin-top:22px; text-align:center; }
@media(max-width:480px){.redeem-search>div{flex-direction:column}.redeem-search button{min-height:44px}}

.upcoming-panel { margin:0 auto 55px; max-width:1150px; }
.panel-subcopy { color:var(--ink-soft); font-size:12px; margin:6px 0 0; }
.upcoming-list { display:grid; gap:10px; padding:6px 22px 24px; }
.upcoming-card { align-items:center; border:1px solid var(--line); border-radius:10px; display:grid; gap:16px; grid-template-columns:90px 1fr auto; padding:15px; }
.upcoming-date { align-items:center; border-right:1px solid var(--line); display:flex; flex-direction:column; text-align:center; text-transform:uppercase; }
.upcoming-date strong { color:var(--coral); font-family:"Playfair Display",serif; font-size:18px; }
.upcoming-date span { color:var(--ink-soft); font-size:11px; margin-top:4px; }
.upcoming-info>strong { font-size:14px; }
.upcoming-info p { color:var(--ink-soft); font-size:11px; margin:5px 0; }
.upcoming-info small { color:#9c8b75; font-size:9px; letter-spacing:1px; }
.whatsapp-reminder { background:#16875f; border-radius:7px; color:#fff; font-size:10px; font-weight:700; padding:11px 14px; text-align:center; text-decoration:none; }
.whatsapp-reminder:hover { background:#0f6f4d; }
@media(max-width:650px){
  .upcoming-panel{margin-left:12px;margin-right:12px}
  .upcoming-card{grid-template-columns:70px 1fr}
  .whatsapp-reminder{grid-column:1/-1}
}