/* EVOAK Ritual Booking Wizard — v1.4.0 */

:root {
  --evr-bg:       #1c1510;
  --evr-surface:  #251c14;
  --evr-border:   rgba(201,169,110,.18);
  --evr-gold:     #c9a96e;
  --evr-cream:    #f5ede0;
  --evr-muted:    rgba(245,237,224,.55);
  --evr-dark:     #2A1F14;
  --evr-red:      #8B1A1A;
  --evr-serif:    Georgia, "Times New Roman", serif;
  --evr-sans:     "Helvetica Neue", Arial, sans-serif;
  --evr-radius:   3px;
  --evr-trans:    .22s ease;
}

/* ── WRAPPER ──────────────────────────────────────────────────────────────── */

.evoak-ritual-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  font-family: var(--evr-serif);
  color: var(--evr-cream);
  background: var(--evr-bg) !important;
  border-radius: 4px;
}

/* Reset browser/theme button interference for all wizard buttons */
.evoak-ritual-wrap button {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────── */

.evr-eyebrow {
  font-family: var(--evr-sans);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--evr-gold);
  margin: 0 0 .6rem;
}

.evr-gate-title,
.evr-step-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: normal;
  color: var(--evr-cream);
  margin: 0 0 .5rem;
  line-height: 1.25;
}

.evr-step-sub {
  color: var(--evr-muted);
  font-size: .92rem;
  margin: 0 0 1.8rem;
  font-family: var(--evr-sans);
}

/* ── GATE ─────────────────────────────────────────────────────────────────── */

.evr-gate {
  padding: 2.5rem 0 1rem;
}

.evr-gate-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 560px) {
  .evr-gate-cards { grid-template-columns: 1fr; }
}

.evr-gate-card {
  background: var(--evr-surface) !important;
  border: 1px solid var(--evr-border) !important;
  border-radius: var(--evr-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--evr-trans), background var(--evr-trans);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: var(--evr-cream) !important;
}

.evr-gate-card:hover {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
}

.evr-gate-icon {
  font-size: 1.6rem;
  color: var(--evr-gold);
  display: block;
}

.evr-gate-label {
  font-size: 1.05rem;
  display: block;
  font-family: var(--evr-serif);
}

.evr-gate-hint {
  font-size: .78rem;
  color: var(--evr-muted);
  font-family: var(--evr-sans);
  line-height: 1.4;
  display: block;
}

/* ── FORMS ────────────────────────────────────────────────────────────────── */

.evr-form-wrap {
  padding: 2rem 0;
}

.evr-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.evr-form label,
.evr-intake-row,
.evr-agree-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: var(--evr-sans);
  font-size: .82rem;
  color: var(--evr-muted);
  letter-spacing: .03em;
}

.evr-intake-row,
.evr-agree-row {
  flex-direction: row;
  align-items: flex-start;
  gap: .6rem;
  color: var(--evr-cream);
  font-size: .9rem;
  cursor: pointer;
  padding: .4rem 0;
}

.evr-form input[type=text],
.evr-form input[type=email],
.evr-form input[type=tel],
.evr-form input[type=date] {
  background: var(--evr-surface);
  border: 1px solid var(--evr-border);
  border-radius: var(--evr-radius);
  padding: .7rem .9rem;
  color: var(--evr-cream);
  font-family: var(--evr-sans);
  font-size: .92rem;
  outline: none;
  transition: border-color var(--evr-trans);
  width: 100%;
  box-sizing: border-box;
}

.evr-form input:focus {
  border-color: var(--evr-gold);
}

.evr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

@media (max-width: 480px) {
  .evr-row { grid-template-columns: 1fr; }
}

.evr-optional {
  font-weight: normal;
  color: var(--evr-muted);
  font-size: .75rem;
}

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */

.evr-btn {
  cursor: pointer;
  font-family: var(--evr-sans);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--evr-radius);
  padding: .85em 2.2em;
  transition: background var(--evr-trans), opacity var(--evr-trans);
}

.evr-btn-primary {
  background: var(--evr-dark) !important;
  color: var(--evr-cream) !important;
  align-self: flex-start;
  margin-top: .5rem;
}

.evr-btn-primary:hover { background: #4a3520 !important; }
.evr-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.evr-btn-ghost {
  background: transparent !important;
  border: 1px solid var(--evr-border) !important;
  color: var(--evr-cream) !important;
}
.evr-btn-ghost:hover { border-color: var(--evr-gold) !important; }

.evr-btn-submit { align-self: stretch; text-align: center; }

.evr-link {
  color: var(--evr-gold);
  text-decoration: none;
  font-family: var(--evr-sans);
  font-size: .85rem;
}
.evr-link:hover { text-decoration: underline; }

.evr-back {
  margin-top: 1.5rem;
}

.evr-skip-link { margin-top: .5rem; }

/* ── ERRORS ───────────────────────────────────────────────────────────────── */

.evr-error {
  color: #e07070;
  font-family: var(--evr-sans);
  font-size: .82rem;
  padding: .4rem 0;
}

.evr-hidden { display: none !important; }

/* ── ZONE GRID ────────────────────────────────────────────────────────────── */

.evr-zones-wrap {
  padding: 2rem 0;
}

.evr-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
}

.evr-zone-card {
  background: var(--evr-surface) !important;
  border: 1px solid var(--evr-border) !important;
  border-radius: var(--evr-radius);
  padding: 1.5rem 1.2rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: border-color var(--evr-trans), background var(--evr-trans);
  color: var(--evr-cream) !important;
}

.evr-zone-card:hover {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
}

.evr-zone-card.evr-selected {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
}

.evr-reveal-card {
  cursor: default;
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
  margin-bottom: 1.5rem;
}

.evr-reveal-card:hover {
  background: #2e2212 !important;
}

.evr-zone-icon {
  font-size: 1.4rem;
  color: var(--evr-gold);
  display: block;
  margin-bottom: .2rem;
}

.evr-zone-name {
  font-size: 1.05rem;
  font-family: var(--evr-serif);
  display: block;
}

.evr-zone-sub {
  font-size: .73rem;
  color: var(--evr-gold);
  font-family: var(--evr-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
}

.evr-zone-feel {
  font-size: .88rem;
  color: var(--evr-muted);
  line-height: 1.5;
  display: block;
  font-family: var(--evr-sans);
}

.evr-zone-meta {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-size: .72rem;
  font-family: var(--evr-sans);
  color: var(--evr-muted);
  border-top: 1px solid var(--evr-border);
  padding-top: .6rem;
  gap: .5rem;
}

.evr-zone-dur { flex-shrink: 0; }

.evr-zone-next {
  text-align: right;
  color: var(--evr-gold);
}

.evr-loading {
  color: var(--evr-muted);
  font-family: var(--evr-sans);
  font-size: .85rem;
  margin: 1rem 0;
}

/* ── REVEAL ACTIONS ───────────────────────────────────────────────────────── */

.evr-reveal-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

/* ── HELP OPTIONS ─────────────────────────────────────────────────────────── */

.evr-help-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: 1.5rem;
}

.evr-help-opt {
  background: var(--evr-surface) !important;
  border: 1px solid var(--evr-border) !important;
  border-radius: var(--evr-radius);
  padding: .95rem 1.2rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--evr-serif);
  font-size: .96rem;
  color: var(--evr-cream) !important;
  transition: border-color var(--evr-trans), background var(--evr-trans);
}

.evr-help-opt:hover {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
  color: var(--evr-cream) !important;
}

/* ── SLOT PICKER ──────────────────────────────────────────────────────────── */

.evr-slots-wrap {
  padding: 2rem 0;
}

.evr-date-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem 0 1rem;
}

.evr-date-tab {
  background: var(--evr-surface) !important;
  border: 1px solid var(--evr-border) !important;
  border-radius: var(--evr-radius);
  padding: .5rem .9rem;
  font-family: var(--evr-sans);
  font-size: .8rem;
  color: var(--evr-cream) !important;
  cursor: pointer;
  transition: border-color var(--evr-trans), background var(--evr-trans);
}

.evr-date-tab:hover,
.evr-date-tab.evr-selected {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
  color: var(--evr-cream) !important;
}

.evr-times {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.evr-time-btn {
  background: var(--evr-surface) !important;
  border: 1px solid var(--evr-border) !important;
  border-radius: var(--evr-radius);
  padding: .6rem 1.1rem;
  font-family: var(--evr-sans);
  font-size: .88rem;
  color: var(--evr-cream) !important;
  cursor: pointer;
  min-width: 70px;
  text-align: center;
  transition: border-color var(--evr-trans), background var(--evr-trans);
}

.evr-time-btn:hover,
.evr-time-btn.evr-selected {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
}

/* ── DURATION ─────────────────────────────────────────────────────────────── */

.evr-duration-grid {
  display: flex;
  gap: .8rem;
  margin: 1.5rem 0 2rem;
}

.evr-dur-btn {
  background: var(--evr-surface) !important;
  border: 1px solid var(--evr-border) !important;
  border-radius: var(--evr-radius);
  padding: .8rem 1.6rem;
  font-family: var(--evr-sans);
  font-size: .9rem;
  color: var(--evr-cream) !important;
  cursor: pointer;
  transition: border-color var(--evr-trans), background var(--evr-trans);
}

.evr-dur-btn:hover,
.evr-dur-btn.evr-selected {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
}

/* ── ADD-ONS ──────────────────────────────────────────────────────────────── */

.evr-addon-title {
  font-size: 1rem;
  font-weight: normal;
  color: var(--evr-cream);
  margin: 0 0 .3rem;
  font-family: var(--evr-serif);
}

.evr-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .8rem;
  margin: 1rem 0 1.5rem;
}

.evr-addon-card {
  background: var(--evr-surface) !important;
  border: 1px solid var(--evr-border) !important;
  border-radius: var(--evr-radius);
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transition: border-color var(--evr-trans), background var(--evr-trans);
  color: var(--evr-cream) !important;
}

.evr-addon-card:hover {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
}

.evr-addon-card.evr-selected {
  border-color: var(--evr-gold) !important;
  background: #2e2212 !important;
}

.evr-addon-label {
  font-family: var(--evr-serif);
  font-size: .92rem;
  color: var(--evr-cream);
}

.evr-addon-desc {
  font-family: var(--evr-sans);
  font-size: .75rem;
  color: var(--evr-muted);
  line-height: 1.4;
}

/* ── INTAKE ───────────────────────────────────────────────────────────────── */

.evr-intake-form {
  gap: .2rem;
}

.evr-intake-chk,
.evr-agree-chk {
  margin-top: .15rem;
  accent-color: var(--evr-gold);
  flex-shrink: 0;
}

.evr-intake-notes {
  display: flex !important;
  flex-direction: column !important;
  gap: .35rem;
  margin-top: 1rem;
  font-family: var(--evr-sans);
  font-size: .82rem;
  color: var(--evr-muted);
}

.evr-intake-notes textarea {
  background: var(--evr-surface);
  border: 1px solid var(--evr-border);
  border-radius: var(--evr-radius);
  padding: .7rem .9rem;
  color: var(--evr-cream);
  font-family: var(--evr-sans);
  font-size: .88rem;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color var(--evr-trans);
}

.evr-intake-notes textarea:focus { border-color: var(--evr-gold); }

/* ── TERMS ────────────────────────────────────────────────────────────────── */

.evr-terms-block {
  background: var(--evr-surface);
  border: 1px solid var(--evr-border);
  border-radius: var(--evr-radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--evr-sans);
  font-size: .88rem;
  line-height: 1.65;
  color: var(--evr-cream);
}

.evr-terms-block p { margin: 0 0 .9rem; }
.evr-terms-block p:last-child { margin: 0; }
.evr-terms-block strong { color: var(--evr-gold); }

.evr-agree-row {
  margin-bottom: 1rem;
}

/* ── OVERVIEW / SUMMARY ───────────────────────────────────────────────────── */

.evr-summary {
  background: var(--evr-surface);
  border: 1px solid var(--evr-border);
  border-radius: var(--evr-radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.evr-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--evr-border);
  font-family: var(--evr-sans);
  font-size: .88rem;
  gap: 1rem;
}

.evr-summary-row:last-child { border-bottom: none; }
.evr-summary-row span:first-child { color: var(--evr-muted); }
.evr-summary-row span:last-child { text-align: right; color: var(--evr-cream); }

.evr-summary-badge {
  background: rgba(201,169,110,.12);
  color: var(--evr-gold);
  font-family: var(--evr-sans);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem 1.25rem;
  text-align: center;
}

/* ── SUCCESS ──────────────────────────────────────────────────────────────── */

.evr-success {
  padding: 3rem 0 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.evr-success-icon {
  font-size: 2.5rem;
  color: var(--evr-gold);
  line-height: 1;
}

.evr-success-title {
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: normal;
  color: var(--evr-cream);
  margin: 0;
}

.evr-success-sub {
  color: var(--evr-muted);
  font-family: var(--evr-sans);
  font-size: .92rem;
  margin: 0;
}

.evr-success-details {
  background: var(--evr-surface);
  border: 1px solid var(--evr-border);
  border-radius: var(--evr-radius);
  padding: 1.2rem 2rem;
  font-family: var(--evr-sans);
  font-size: .92rem;
  color: var(--evr-cream);
  line-height: 1.7;
}

.evr-success-details p { margin: 0; }

.evr-ref {
  color: var(--evr-muted) !important;
  font-size: .8rem !important;
  margin-top: .4rem !important;
}

.evr-success-note {
  color: var(--evr-muted);
  font-family: var(--evr-sans);
  font-size: .85rem;
  margin: 0;
}