/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ensure [hidden] always wins over any display rule */
[hidden] { display: none !important; }

:root {
  --brown-dark:   #2c1a0e;
  --brown-mid:    #6b3f1f;
  --brown-light:  #c8956c;
  --cream:        #faf6f1;
  --cream-dark:   #f0e8dd;
  --white:        #ffffff;
  --text-primary: #1e1208;
  --text-muted:   #7a6352;
  --success:      #2d7a4f;
  --success-bg:   #ecfdf5;
  --error:        #c0392b;
  --error-bg:     #fff0ee;
  --shadow-sm:    0 1px 3px rgba(44,26,14,.10);
  --shadow-md:    0 4px 16px rgba(44,26,14,.12);
  --shadow-lg:    0 8px 32px rgba(44,26,14,.16);
  --radius:       12px;
  --radius-sm:    8px;
  --transition:   .18s ease;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--cream);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.header {
  background: linear-gradient(135deg, var(--brown-dark) 0%, var(--brown-mid) 100%);
  color: var(--white);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.header__inner { max-width: 700px; margin: 0 auto; }

.header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-bottom: .5rem;
}

.logo-icon { font-size: 2rem; }

.logo-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.header__tagline {
  font-size: .95rem;
  color: var(--brown-light);
  font-weight: 400;
}

.header__meta,
.header__phone {
  display: block;
  margin-top: .45rem;
  color: #ead7c3;
  font-size: .9rem;
}

.header__phone {
  text-decoration: none;
  font-weight: 700;
}

.header__phone:hover { color: var(--white); }

/* ═══════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════ */
.main {
  flex: 1;
  max-width: 900px;
  width: 100%;
  margin: 2rem auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ═══════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════ */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}

.card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  color: var(--brown-dark);
  margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════
   FORM
═══════════════════════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }

label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.required { color: var(--brown-mid); }

input, textarea, select {
  font-family: inherit;
  font-size: .95rem;
  color: var(--text-primary);
  background: var(--cream);
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: .65rem .85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}

input:focus, textarea:focus {
  border-color: var(--brown-light);
  box-shadow: 0 0 0 3px rgba(200,149,108,.2);
  background: var(--white);
}

input.invalid, textarea.invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(192,57,43,.15);
}

textarea { resize: vertical; min-height: 80px; }

.field__error {
  font-size: .78rem;
  color: var(--error);
  min-height: 1em;
}

.phone-group {
  display: flex;
  gap: .5rem;
}
.phone-group .phone-prefix-select {
  width: auto;
  flex-shrink: 0;
}
.phone-group input {
  flex: 1;
  min-width: 0;
}

.form-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  padding: .65rem 1.4rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn--primary {
  background: linear-gradient(135deg, var(--brown-mid), var(--brown-dark));
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--brown-dark), var(--brown-mid));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--primary:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--cream-dark);
}

.btn--ghost:hover { background: var(--cream); }

.btn--danger {
  background: #b42318;
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--danger:hover {
  background: #912018;
  transform: translateY(-1px);
}

.btn--icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 6px;
  font-size: 1rem;
  transition: background var(--transition);
  color: var(--text-muted);
}

.btn--icon:hover { background: var(--cream-dark); }

.btn--sm {
  padding: .45rem .75rem;
  font-size: .82rem;
}

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
.toast {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 500;
  display: none;
  animation: fadeIn .25s ease;
}

.toast.success { display: block; background: var(--success-bg); color: var(--success); border: 1px solid #a7f3d0; }
.toast.error   { display: block; background: var(--error-bg);   color: var(--error);   border: 1px solid #fecaca; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════
   LIST HEADER & BADGE
═══════════════════════════════════════════════ */
.list-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.list-header .card__title { margin-bottom: 0; }

.badge {
  background: var(--brown-mid);
  color: var(--white);
  font-size: .78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .2rem .6rem;
  min-width: 1.6rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════
   RESERVATION ITEMS
═══════════════════════════════════════════════ */
#reservations-container {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.reservation-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
  background: var(--cream);
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  transition: box-shadow var(--transition);
  animation: slideIn .2s ease;
}

.reservation-item:hover { box-shadow: var(--shadow-sm); }

@keyframes slideIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

.reservation-item__info { display: flex; flex-direction: column; gap: .2rem; }

.reservation-item__name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--brown-dark);
}

.reservation-item__meta {
  font-size: .83rem;
  color: var(--text-muted);
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

.reservation-item__notes {
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: .15rem;
}

.reservation-item__actions {
  display: flex;
  gap: .25rem;
  flex-shrink: 0;
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem 0;
  font-size: .95rem;
}

/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44,26,14,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
  animation: fadeIn .2s ease;
}

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  width: 100%;
  max-width: 520px;
  animation: slideUp .22s ease;
}

@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.modal__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  color: var(--brown-dark);
  margin-bottom: 1.5rem;
}

.app-message-modal {
  max-width: 420px;
}

.app-message-modal__text {
  color: var(--text-muted);
  line-height: 1.5;
  margin: -.5rem 0 1.25rem;
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer {
  text-align: center;
  padding: 1.25rem;
  font-size: .82rem;
  color: var(--text-muted);
  border-top: 1px solid var(--cream-dark);
  margin-top: auto;
}

/* ═══════════════════════════════════════════════
   CONFIRMATION SCREEN
═══════════════════════════════════════════════ */
.main--centered { max-width: 620px; }

.confirmation {
  text-align: center;
  padding: 1rem 0;
}

.confirmation__icon  { font-size: 3rem; margin-bottom: .75rem; }
.confirmation__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: var(--brown-dark);
  margin-bottom: .5rem;
}
.confirmation__text  { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .95rem; }

.confirmation__details {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.conf-row {
  display: flex;
  justify-content: space-between;
  padding: .4rem 0;
  font-size: .9rem;
  border-bottom: 1px solid var(--cream-dark);
}
.conf-row:last-child { border-bottom: none; }
.conf-row span  { color: var(--text-muted); }
.conf-row strong { color: var(--brown-dark); }
.conf-row a {
  color: var(--brown-dark);
  overflow-wrap: anywhere;
}
.conf-hint {
  display: block;
  color: var(--text-muted);
  line-height: 1.45;
}
.conf-row--stack {
  flex-direction: column;
  gap: .25rem;
}

.self-service-actions {
  display: grid;
  gap: .65rem;
  padding-top: .9rem;
}

.self-edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #fffbea;
  border: 1.5px solid #f4c543;
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.self-edit-banner__info {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  color: #6b4e00;
  font-weight: 600;
}

.self-edit-banner__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.self-edit-banner__back {
  background: none;
  border: 1.5px solid #c8960a;
  border-radius: 6px;
  padding: .3rem .8rem;
  font-size: .8rem;
  color: #7a5c00;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}

.self-edit-banner__back:hover {
  background: #fceea0;
}

.push-cta {
  margin: 1rem 0;
  padding: .95rem;
  border: 1px solid rgba(75, 39, 21, .22);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 8px 18px rgba(44, 26, 14, .08);
}

.push-cta strong {
  display: block;
  color: var(--brown-dark);
  font-size: .98rem;
  margin-bottom: .25rem;
}

.push-cta p {
  color: var(--text-muted);
  font-size: .86rem;
  line-height: 1.45;
  margin-bottom: .75rem;
}

.push-cta .btn {
  min-height: 44px;
  font-weight: 800;
}

.push-prompt-modal {
  max-width: 460px;
  text-align: center;
}

.push-prompt-text {
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.push-prompt-actions {
  display: grid;
  gap: .65rem;
}

.push-feedback {
  margin-top: .45rem;
  color: var(--error);
  font-size: .84rem;
  text-align: center;
}

.share-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .45rem;
}

.share-fallback {
  margin-top: .55rem;
  color: var(--text-muted);
  font-size: .85rem;
}

.share-fallback__url {
  width: 100%;
  margin-top: .45rem;
  padding: .5rem .65rem;
  border: 1px solid var(--cream-dark);
  border-radius: 8px;
  background: var(--white);
  color: var(--brown-dark);
  font: inherit;
}

.share-fallback__links {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

.share-fallback__links a {
  display: inline-flex;
  align-items: center;
  padding: .35rem .55rem;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--cream-dark);
  color: var(--brown-mid);
  font-weight: 700;
  text-decoration: none;
}

.customer-portal-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  margin-top: .9rem;
  padding: .85rem;
  border: 1px solid rgba(107, 63, 31, .18);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.customer-portal-entry strong,
.customer-portal-entry span {
  display: block;
}

.customer-portal-entry strong {
  color: var(--brown-dark);
  margin-bottom: .15rem;
}

.customer-portal-entry span {
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.35;
}

.customer-portal {
  display: grid;
  gap: 1rem;
}

.customer-portal__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #fffaf3, #f1e1d0);
  border: 1px solid #e8d5c1;
}

.customer-portal__eyebrow {
  display: block;
  color: var(--brown-mid);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .25rem;
}

.customer-portal__hero h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem;
  color: var(--brown-dark);
  margin-bottom: .25rem;
}

.customer-portal__hero p {
  color: var(--text-muted);
  line-height: 1.45;
  font-size: .92rem;
}

.customer-portal__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.customer-portal__stats div,
.customer-portal__panel {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.customer-portal__stats div {
  padding: .8rem;
}

.customer-portal__stats span {
  display: block;
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.customer-portal__stats strong {
  display: block;
  color: var(--brown-dark);
  font-size: 1.35rem;
  margin-top: .25rem;
}

.customer-portal__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
}

.customer-portal__panel {
  padding: 1rem;
}

.customer-portal__panel h4 {
  color: var(--brown-dark);
  font-size: 1rem;
  margin-bottom: .75rem;
}

.portal-list,
.portal-products {
  list-style: none;
  display: grid;
  gap: .55rem;
}

.portal-reservation,
.portal-products li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .72rem;
  border-radius: 8px;
  background: var(--cream);
  border: 1px solid rgba(107, 63, 31, .08);
}

.portal-reservation strong,
.portal-reservation span,
.portal-products span,
.portal-products small {
  display: block;
}

.portal-reservation strong,
.portal-products span {
  color: var(--brown-dark);
}

.portal-reservation span,
.portal-reservation small,
.portal-products small,
.portal-empty {
  color: var(--text-muted);
  font-size: .82rem;
}

.portal-reservation > div:last-child {
  text-align: right;
  flex-shrink: 0;
}

.portal-status {
  display: inline-flex;
  padding: .18rem .45rem;
  border-radius: 999px;
  background: #efe3d7;
  color: var(--brown-dark);
  font-size: .75rem;
  font-weight: 800;
}

.portal-status--confirmed,
.portal-status--completed,
.portal-status--in_house {
  background: var(--success-bg);
  color: var(--success);
}

.portal-status--cancelled,
.portal-status--no_show {
  background: var(--error-bg);
  color: var(--error);
}

.portal-products li {
  align-items: center;
}

.portal-products strong {
  color: var(--brown-mid);
}

.portal-empty {
  line-height: 1.45;
}

.btn--wide { width: 100%; justify-content: center; }

/* Footer admin link */
.footer__admin-link {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--text-muted);
  text-decoration: none;
  opacity: .6;
}
.footer__admin-link:hover { opacity: 1; }

/* Status select in table */
.status-select {
  font-family: inherit;
  font-size: .82rem;
  padding: .25rem .5rem;
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  outline: none;
}
.status-select:focus { border-color: var(--brown-light); }

/* ═══════════════════════════════════════════════
   SHIFT + TRAMOS INLINE
═══════════════════════════════════════════════ */
.shift-options {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: .25rem;
}

.shift-option {
  background: var(--cream);
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.shift-option.selected {
  border-color: var(--brown-mid);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(107,63,31,.12), var(--shadow-sm);
}

.shift-option--no-slots {
  cursor: pointer;
}

.shift-option--no-slots:hover {
  border-color: var(--brown-light);
  background: var(--white);
}

/* header actúa como botón */
.shift-option__header {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.shift-option__header:hover .shift-option__name {
  color: var(--brown-mid);
}

.shift-option__chevron {
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--text-muted);
  line-height: 1;
  transition: transform var(--transition);
  display: inline-block;
}

.shift-option.expanded .shift-option__chevron {
  transform: rotate(90deg);
}

.shift-option.expanded {
  border-color: var(--brown-mid);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(107,63,31,.10), var(--shadow-sm);
}

.shift-option__emoji {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.shift-option__info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.shift-option__name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-primary);
}

.shift-option__desc {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
}

.shift-option__range {
  font-size: .78rem;
  color: var(--text-muted);
}

.shift-option__slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.6rem, max-content));
  gap: .45rem;
  margin-top: .7rem;
  padding-top: .65rem;
  border-top: 1px solid var(--cream-dark);
}

.shift-option__slots--time-only {
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
}

.slot-btn {
  display: grid;
  grid-template-columns: minmax(3.45rem, auto) max-content;
  align-items: center;
  column-gap: .38rem;
  min-width: 8rem;
  padding: .34rem .62rem .34rem .42rem;
  background: var(--white);
  border: 1.5px solid var(--cream-dark);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.slot-btn__time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--brown-dark);
  font-size: .98rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.slot-btn__meta {
  min-width: 0;
  white-space: nowrap;
  text-align: left;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 650;
}

.shift-option__slots--time-only .slot-btn {
  grid-template-columns: 1fr;
  min-width: 0;
  padding: .34rem .42rem;
}

.shift-option__slots--time-only .slot-btn__time {
  width: 100%;
}

.slot-btn:hover {
  background: var(--cream);
  border-color: var(--brown-light);
}

.slot-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  text-decoration: line-through;
}

.slot-btn:disabled:hover {
  background: var(--white);
  border-color: var(--cream-dark);
}

.slot-btn.selected {
  background: var(--brown-mid);
  color: var(--white);
  border-color: var(--brown-mid);
}

.slot-btn.selected .slot-btn__time {
  background: rgba(255,255,255,.16);
  color: var(--white);
}

.slot-btn.selected .slot-btn__meta {
  color: rgba(255,255,255,.82);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
/* ── PWA install banner ── */
.pwa-install-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--brown-dark);
  color: #fff;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .88rem;
  flex-wrap: wrap;
}
.pwa-install-banner__icon { font-size: 1.5rem; flex-shrink: 0; }
.pwa-install-banner__body { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.pwa-install-banner__body strong { font-size: .92rem; }
.pwa-install-banner__body span { font-size: .82rem; color: #d4bfaa; }
.pwa-install-banner__actions { display: flex; gap: .4rem; flex-shrink: 0; }
.pwa-install-banner__actions .btn--ghost { color: #d4bfaa; border-color: #6b4e35; font-size: 1.1rem; line-height: 1; }

@media (max-width: 600px) {
  .card { padding: 1.25rem; }

  .form-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: 1; }

  .logo-text { font-size: 1.6rem; }
  .header { padding: 1.75rem 1rem 1.5rem; }

  .reservation-item { grid-template-columns: 1fr; }
  .reservation-item__actions { justify-content: flex-end; }

  .form-actions { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }
  .customer-portal-entry,
  .customer-portal__hero {
    flex-direction: column;
  }
  .customer-portal__stats,
  .customer-portal__grid {
    grid-template-columns: 1fr;
  }
  .portal-reservation,
  .portal-products li {
    align-items: flex-start;
  }
}

/* ── Party-size carousel ──────────────────────────────────── */
.field--party { min-width: 0; }
.party-carousel {
  display: grid;
  gap: .65rem;
}

.party-carousel__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: fit-content;
  min-width: 108px;
  margin: 0 auto;
  padding: .45rem .85rem;
  border: 1px solid var(--cream-dark, #e0d4c4);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdfb, #faf6f1);
  color: var(--brown-dark, #2c1a0e);
}

.party-carousel__summary strong {
  font-size: 1.25rem;
  line-height: 1;
}

.party-carousel__summary span {
  color: var(--text-muted, #7a6352);
  font-size: .82rem;
  font-weight: 700;
}

.party-carousel__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: .5rem;
}

.party-carousel__track-wrap {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
.party-carousel__track-wrap::-webkit-scrollbar { display: none; }

.party-carousel__track {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: max-content;
  min-width: 100%;
  padding: .45rem 0;
}

.party-carousel__item {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--cream-dark, #e0d4c4);
  background: var(--white, #fff);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown-dark, #2c1a0e);
  cursor: pointer;
  scroll-snap-align: center;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.party-carousel__item:hover {
  border-color: var(--brown-mid, #6b3d1e);
  background: #fffaf6;
}
.party-carousel__item--active:hover {
  background: var(--brown-dark, #2c1a0e);
  border-color: var(--brown-dark, #2c1a0e);
  color: #fff;
}
.party-carousel__item--active {
  background: var(--brown-dark, #2c1a0e);
  border-color: var(--brown-dark, #2c1a0e);
  color: #fff;
  box-shadow: 0 8px 18px rgba(44, 26, 14, .16);
}

.party-carousel__btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--cream-dark, #e0d4c4);
  background: var(--white, #fff);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brown-dark, #2c1a0e);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.party-carousel__btn:hover:not([disabled]) {
  background: var(--brown-dark, #2c1a0e);
  color: #fff;
  border-color: var(--brown-dark, #2c1a0e);
}
.party-carousel__btn[disabled] {
  opacity: .3;
  cursor: default;
}

/* ── Edit-mode (manual number entry) ─────────────────────── */
.party-carousel__row--with-edit {
  grid-template-columns: minmax(0, 1fr) 36px;
}

.party-carousel__track-col {
  min-width: 0;
}

.party-carousel__manual-input {
  display: none;
  width: 100%;
  height: 52px;
  padding: 0 .5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: inherit;
  border: 2px solid var(--brown-mid, #6b3d1e);
  border-radius: 12px;
  background: #fffaf6;
  color: var(--brown-dark, #2c1a0e);
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.party-carousel__manual-input::-webkit-outer-spin-button,
.party-carousel__manual-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.party-carousel__manual-input:focus {
  outline: none;
  border-color: var(--brown-dark, #2c1a0e);
}

.party-carousel__btn--edit {
  font-size: .9rem;
}

.party-carousel__row--edit-mode .party-carousel__track-wrap { display: none; }
.party-carousel__row--edit-mode .party-carousel__manual-input { display: block; }

@media (max-width: 600px) {
  .party-carousel__row {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: .35rem;
  }
  .party-carousel__row--with-edit {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .party-carousel__btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .party-carousel__item {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .party-carousel__manual-input {
    height: 48px;
    font-size: 1.25rem;
  }

  .party-carousel__track {
    padding-inline: 0;
  }

  .party-carousel__track-wrap {
    scroll-padding-inline: 0;
  }
}

/* ── Person type chips ───────────────────────────────────── */
.person-types-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  padding: .7rem .9rem;
  border: 1px solid var(--cream-dark, #e0d4c4);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdfb, #faf6f1);
  color: var(--brown-dark, #2c1a0e);
}

.person-types-summary span {
  color: var(--text-muted, #7a6352);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.person-types-summary strong {
  font-size: 1.45rem;
  line-height: 1;
}

.person-types-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  margin-bottom: .75rem;
}

.person-type-carousel {
  display: grid;
  gap: .5rem;
  padding: .75rem;
  border: 1px solid var(--cream-dark, #e0d4c4);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
}

.person-type-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.person-type-carousel__header .person-type-chip__count {
  min-width: 2rem;
  text-align: right;
  color: var(--brown-dark, #2c1a0e);
  font-size: 1.1rem;
}

.person-type-carousel__row {
  grid-template-columns: minmax(0, 1fr) 36px;
}

.person-type-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  padding: .65rem .75rem;
  border-radius: 14px;
  border: 1px solid var(--cream-dark, #e0d4c4);
  background: rgba(255,255,255,.78);
  font-size: .9rem;
}
.person-type-chip__label { font-weight: 600; color: var(--brown-dark, #2c1a0e); }
.person-type-chip__counter {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.person-type-chip__count {
  min-width: 1.4rem;
  text-align: center;
  font-weight: 700;
  color: var(--brown-dark, #2c1a0e);
}
.party-chip-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--cream-dark, #e0d4c4);
  background: transparent;
  color: var(--brown-dark, #2c1a0e);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.party-chip-btn:hover {
  background: var(--brown-dark, #2c1a0e);
  color: #fff;
}

/* ═══════════════════════════════════════════════
   DESIGN REFRESH
═══════════════════════════════════════════════ */
:root {
  --brown-dark:   #2f241d;
  --brown-mid:    #7a5236;
  --brown-light:  #b98255;
  --cream:        #f7f5f1;
  --cream-dark:   #e5ded5;
  --white:        #ffffff;
  --text-primary: #1f2933;
  --text-muted:   #6b7280;
  --accent:       #0f766e;
  --accent-soft:  #e8f5f2;
  --success:      #15803d;
  --success-bg:   #ecfdf3;
  --error:        #b42318;
  --error-bg:     #fff1f0;
  --shadow-sm:    0 1px 2px rgba(31, 41, 51, .06), 0 1px 8px rgba(31, 41, 51, .04);
  --shadow-md:    0 12px 30px rgba(31, 41, 51, .10);
  --shadow-lg:    0 24px 70px rgba(31, 41, 51, .18);
  --radius:       14px;
  --radius-sm:    10px;
  --transition:   .16s ease;
}

body {
  background: #f4f6f4;
}

.card,
.modal {
  border: 1px solid rgba(229, 222, 213, .9);
}

.card {
  box-shadow: var(--shadow-sm);
}

input,
textarea,
select {
  min-height: 42px;
  background: #fff;
  border-color: #ddd6cd;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
  background: #fff;
}

.btn {
  min-height: 42px;
  justify-content: center;
  border-radius: 10px;
  text-decoration: none;
}

.btn--sm {
  min-height: 34px;
}

.btn--primary {
  background: #3f2417;
  color: #fff;
  box-shadow: 0 8px 20px rgba(63, 36, 23, .18);
}

.btn--primary:hover {
  background: #2f1a10;
  box-shadow: 0 10px 24px rgba(63, 36, 23, .22);
}

.btn--ghost {
  background: #fff;
  color: #604234;
  border-color: #ddd6cd;
}

.btn--ghost:hover {
  background: #f7f5f1;
  border-color: #cbbfb2;
}

.badge {
  background: var(--accent-soft);
  color: var(--accent);
}

.reservation-item {
  background: #fff;
  border-color: #e5ded5;
}

.modal-overlay {
  background: rgba(31, 41, 51, .54);
  backdrop-filter: blur(2px);
}

@media (max-width: 600px) {
  .btn {
    min-height: 46px;
  }
}

/* ═══════════════════════════════════════════════
   PUBLIC RESERVATION EXPERIENCE
   Editorial hospitality layer. Kept page-scoped because this stylesheet is
   also consumed by the administration interface.
═══════════════════════════════════════════════ */
.public-reservation-page {
  --brown-dark: #29231f;
  --brown-mid: #76533b;
  --brown-light: #c18d67;
  --cream: #f4f0e9;
  --cream-dark: #ded5c9;
  --white: #fffdf9;
  --text-primary: #29231f;
  --text-muted: #70675f;
  --accent: #8b4b2d;
  --accent-soft: #f3e4d9;
  --success: #2f6b50;
  --success-bg: #eaf3ed;
  --error: #ae3f32;
  --error-bg: #fbeceb;
  --shadow-sm: 0 1px 0 rgba(41, 35, 31, .08);
  --shadow-md: 0 16px 42px rgba(56, 45, 36, .08);
  --shadow-lg: 0 28px 68px rgba(41, 35, 31, .18);
  --radius: 4px;
  --radius-sm: 3px;
  --transition: .18s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 4%, rgba(193, 141, 103, .16), transparent 22rem),
    var(--cream);
}

.public-reservation-page .header {
  position: relative;
  overflow: hidden;
  padding: clamp(2.4rem, 6vw, 4.75rem) 1.5rem clamp(2rem, 5vw, 3.5rem);
  text-align: left;
  background: #29231f;
  box-shadow: none;
}

.public-reservation-page .header::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  content: '';
  mask-image: linear-gradient(to right, black, transparent 72%);
  pointer-events: none;
}

.public-reservation-page .header__inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.public-reservation-page .header__logo {
  justify-content: flex-start;
  gap: .75rem;
  margin-bottom: .7rem;
}

.public-reservation-page .logo-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding-bottom: .05rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  font-size: 1.15rem;
}

.public-reservation-page .logo-text,
.public-reservation-page .card__title,
.public-reservation-page .confirmation__title,
.public-reservation-page .modal__title {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -.03em;
}

.public-reservation-page .logo-text {
  font-size: clamp(2rem, 5vw, 3.15rem);
  font-weight: 600;
  line-height: 1;
}

.public-reservation-page .header__tagline {
  max-width: 32rem;
  color: #e8d6c7;
  font-size: 1rem;
  line-height: 1.55;
}

.public-reservation-page .header__meta,
.public-reservation-page .header__phone {
  color: #bfae9f;
  font-size: .83rem;
  letter-spacing: .01em;
}

.public-reservation-page .header__phone:hover { color: #fff; }

.public-reservation-page .main {
  max-width: 700px;
  margin: clamp(1.5rem, 4vw, 3rem) auto clamp(2.5rem, 6vw, 5rem);
  gap: 1rem;
}

.public-reservation-page .main--centered { max-width: 700px; }

.public-reservation-page .card {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  background: rgba(255, 253, 249, .9);
  box-shadow: var(--shadow-md);
}

.public-reservation-page .form-card { border-top: 3px solid var(--brown-mid); }

.public-reservation-page .card__title {
  max-width: 22rem;
  margin-bottom: 2rem;
  color: var(--brown-dark);
  font-size: clamp(1.7rem, 4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.12;
}

.public-reservation-page .form-grid { gap: 1.3rem 1.5rem; }

.public-reservation-page label {
  color: #5f554c;
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .105em;
}

.public-reservation-page .required { color: var(--accent); }

.public-reservation-page input,
.public-reservation-page textarea,
.public-reservation-page select {
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid #bcb1a5;
  border-radius: 0;
  background: transparent;
  padding: .7rem 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.public-reservation-page input::placeholder,
.public-reservation-page textarea::placeholder { color: #9a9188; opacity: 1; }

.public-reservation-page input:focus,
.public-reservation-page textarea:focus,
.public-reservation-page select:focus {
  border-color: var(--accent);
  box-shadow: 0 2px 0 var(--accent);
  background: transparent;
}

.public-reservation-page textarea { min-height: 92px; }
.public-reservation-page .phone-group { gap: .85rem; }
.public-reservation-page .phone-group .phone-prefix-select { max-width: 6.25rem; }

.public-reservation-page .form-actions {
  justify-content: flex-start;
  margin-top: 2.25rem;
}

.public-reservation-page .btn {
  min-height: 46px;
  border-radius: 2px;
  padding: .7rem 1.2rem;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .025em;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.public-reservation-page .btn--primary {
  background: var(--accent);
  box-shadow: none;
}

.public-reservation-page .btn--primary:hover {
  background: #6e3821;
  box-shadow: none;
  transform: translateY(-1px);
}

.public-reservation-page .btn--ghost {
  border: 1px solid #bcb1a5;
  border-radius: 2px;
  background: transparent;
  color: #50463e;
}

.public-reservation-page .btn--ghost:hover { border-color: #50463e; background: #eee8df; }
.public-reservation-page .btn--danger { box-shadow: none; }

.public-reservation-page .pwa-install-banner {
  border: 1px solid #ded5c9;
  border-left: 3px solid var(--brown-mid);
  border-radius: 0;
  background: #ebe4da;
  color: var(--text-primary);
}
.public-reservation-page .pwa-install-banner__body span { color: var(--text-muted); }
.public-reservation-page .pwa-install-banner__actions .btn--ghost { color: var(--text-primary); border-color: #bcb1a5; }

.public-reservation-page .party-carousel__summary,
.public-reservation-page .person-types-summary {
  border-radius: 2px;
  background: #eee8df;
}

.public-reservation-page .party-carousel__item,
.public-reservation-page .party-carousel__btn,
.public-reservation-page .person-type-carousel,
.public-reservation-page .person-type-chip {
  border-radius: 2px;
  box-shadow: none;
}

.public-reservation-page .party-carousel__item--active,
.public-reservation-page .party-carousel__item--active:hover,
.public-reservation-page .party-carousel__btn:hover:not([disabled]),
.public-reservation-page .party-chip-btn:hover {
  border-color: var(--accent);
  background: var(--accent);
}

.public-reservation-page .party-stepper {
  display: inline-grid;
  grid-template-columns: 2.8rem minmax(8.5rem, auto) 2.8rem;
  align-items: stretch;
  border: 1px solid #bcb1a5;
  background: #faf7f2;
}

.public-reservation-page .party-stepper__control {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--brown-dark);
  cursor: pointer;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}

.public-reservation-page .party-stepper__control:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.public-reservation-page .party-stepper__control:disabled {
  color: #b9afa4;
  cursor: default;
}

.public-reservation-page .party-stepper__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .35rem;
  margin: 0;
  border-right: 1px solid #d7cec3;
  border-left: 1px solid #d7cec3;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.public-reservation-page .party-stepper__value input {
  width: 2rem;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  color: var(--brown-dark);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  text-align: right;
}

.public-reservation-page .party-stepper__value input:focus { box-shadow: none; }
.public-reservation-page .party-stepper__value input::-webkit-inner-spin-button,
.public-reservation-page .party-stepper__value input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.public-reservation-page .party-stepper__value input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.public-reservation-page .shift-option {
  padding: 1.1rem;
  border: 1px solid #d7cec3;
  border-radius: 2px;
  background: #fcfaf6;
}
.public-reservation-page .shift-option.selected,
.public-reservation-page .shift-option.expanded {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.public-reservation-page .shift-option__emoji {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #eee8df;
  font-size: 1rem;
}
.public-reservation-page .shift-option__name {
  color: var(--brown-dark);
  font-size: 1rem;
}
.public-reservation-page .shift-option__desc { font-style: normal; }
.public-reservation-page .shift-option__range { color: var(--brown-mid); font-weight: 600; }
.public-reservation-page .shift-option__chevron { color: var(--brown-mid); }
.public-reservation-page .shift-option__slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
}
.public-reservation-page .shift-option__slots--time-only { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.public-reservation-page .slot-btn,
.public-reservation-page .shift-option__slots--time-only .slot-btn {
  display: block;
  min-width: 0;
  padding: 0;
  border: 1px solid #d7cec3;
  border-radius: 2px;
  background: #fffdf9;
  color: var(--brown-dark);
  text-align: center;
}
.public-reservation-page .slot-btn__time,
.public-reservation-page .shift-option__slots--time-only .slot-btn__time {
  display: block;
  min-height: 0;
  padding: .6rem .25rem;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 600;
}
.public-reservation-page .slot-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: #f6ece5;
}
.public-reservation-page .slot-btn.selected {
  border-color: var(--accent);
  background: var(--accent);
}
.public-reservation-page .slot-btn.selected .slot-btn__time { color: #fff; }

@media (max-width: 480px) {
  .public-reservation-page .shift-option { padding: .85rem; }
  .public-reservation-page .shift-option__slots,
  .public-reservation-page .shift-option__slots--time-only { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.public-reservation-page .confirmation { padding: .5rem 0; }
.public-reservation-page .confirmation__icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto 1.25rem;
  border: 1px solid #d0c3b6;
  border-radius: 50%;
  background: #f4eee6;
  font-size: 1.7rem;
}
.public-reservation-page .confirmation__icon--success::before {
  width: 1.15rem;
  height: .62rem;
  border-bottom: 2px solid var(--success);
  border-left: 2px solid var(--success);
  content: '';
  transform: translateY(-.13rem) rotate(-45deg);
}
.public-reservation-page .confirmation__icon--unavailable::before {
  width: 1.2rem;
  border-top: 2px solid var(--error);
  content: '';
  transform: rotate(-45deg);
}
.public-reservation-page .confirmation__icon--unavailable { background: #f8e9e6; }
.public-reservation-page .confirmation__icon--custom { font-size: 1.65rem; }
.public-reservation-page .confirmation__title { font-size: 2rem; }
.public-reservation-page .confirmation__text { max-width: 29rem; margin-right: auto; margin-left: auto; line-height: 1.6; }
.public-reservation-page .confirmation__details { border: 1px solid var(--cream-dark); border-radius: 2px; background: #faf7f2; }
.public-reservation-page .conf-row { padding: .62rem 0; }
.public-reservation-page .conf-row span { font-size: .78rem; font-weight: 600; }
.public-reservation-page .conf-row strong { font-size: .9rem; }

.public-reservation-page .modal-overlay { background: rgba(35, 29, 25, .62); backdrop-filter: blur(4px); }
.public-reservation-page .modal {
  max-width: 440px;
  border: 1px solid #d7cec3;
  border-top: 3px solid var(--brown-mid);
  border-radius: 2px;
  padding: 2rem;
}
.public-reservation-page .modal__eyebrow {
  display: block;
  margin-bottom: .6rem;
  color: var(--brown-mid);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.public-reservation-page .modal__title { margin-bottom: .65rem; font-size: 1.75rem; }
.public-reservation-page .modal__text,
.public-reservation-page .app-message-modal__text { margin: 0 0 1.7rem; color: var(--text-muted); line-height: 1.6; }
.public-reservation-page .modal__actions { display: grid; gap: .6rem; }

.public-reservation-page .self-edit-banner {
  border: 1px solid #dfc66d;
  border-left: 3px solid #c8960a;
  border-radius: 2px;
  background: #fff6d9;
}
.public-reservation-page .self-edit-banner__back {
  border-radius: 2px;
  background: transparent;
}
.public-reservation-page .push-cta,
.public-reservation-page .customer-portal-entry {
  border-color: #d7cec3;
  border-radius: 2px;
  box-shadow: none;
}

.public-reservation-page .footer {
  border-top: 0;
  color: #81776d;
}

@media (max-width: 600px) {
  .public-reservation-page .header { padding: 2.25rem 1.25rem 2rem; }
  .public-reservation-page .main { padding: 0 .75rem; }
  .public-reservation-page .card { padding: 1.35rem; }
  .public-reservation-page .card__title { margin-bottom: 1.6rem; }
  .public-reservation-page .form-actions .btn { width: 100%; }
}