/* ================================================================
   PHASE 2 STYLES — Boeno Grillz
   Products · Cart · Checkout · Appointment · Admin
   ================================================================ */

/* ── PAGE HERO (all inner pages) ────────────────────────────── */
.page-hero {
  background: var(--black-soft);
  border-bottom: 1px solid var(--grey-900);
  padding: calc(var(--nav-h) + var(--sp-7)) 0 var(--sp-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(212,175,55,.08) 0%, transparent 60%);
  pointer-events: none;
}

.page-hero--slim { padding-top: calc(var(--nav-h) + var(--sp-5)); padding-bottom: var(--sp-5); }
.page-hero--appt { padding-top: calc(var(--nav-h) + var(--sp-8)); }
.page-hero--products { text-align: left; }

.page-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}

.page-hero__title {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  margin-bottom: var(--sp-3);
}

.page-hero__title--sm { font-size: clamp(1.8rem, 4vw, 3rem); }

.page-hero__sub {
  font-size: .9rem;
  color: var(--grey-400);
  max-width: 540px;
  margin: 0 auto;
}

.page-hero--products .page-hero__sub { margin: 0; }

.page-hero__deco {
  position: absolute;
  top: -40px; right: -60px;
  width: 300px; height: 300px;
  border: 1px solid rgba(212,175,55,.08);
  border-radius: 50%;
  pointer-events: none;
}

/* ── CATEGORY TABS ──────────────────────────────────────────── */
.cat-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
  padding-top: var(--sp-5);
}

.cat-tab {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey-400);
  border: 1px solid var(--grey-900);
  transition: all var(--dur-fast);
}

.cat-tab:hover      { color: var(--white); border-color: var(--grey-800); }
.cat-tab--active    { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* ── PRODUCT GRID ───────────────────────────────────────────── */
.products-section { padding-block: var(--sp-7) var(--sp-10); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.product-card {
  background: var(--black-mid);
  border: 1px solid var(--grey-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-mid), transform var(--dur-mid) var(--ease-smooth), box-shadow var(--dur-mid);
}

.product-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), 0 0 40px rgba(212,175,55,.1);
}

.product-card__img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--black-light);
}

.product-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-smooth);
}

.product-card:hover .product-card__img { transform: scale(1.06); }

.product-card__placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.product-card__placeholder svg { width: 100%; max-width: 200px; }

.product-card__badge {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-ui);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.product-card__overlay-btn {
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity var(--dur-mid);
}

.product-card:hover .product-card__overlay-btn { opacity: 1; }

.product-card__body {
  padding: var(--sp-4);
}

.product-card__cat {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}

.product-card__name {
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}

.product-card__name a:hover { color: var(--gold); }

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-card__price {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
}

.btn-quick-add {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--grey-800);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-400);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.btn-quick-add svg { width: 18px; height: 18px; }
.btn-quick-add:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-10) var(--sp-5);
}

.empty-state__icon { font-size: 3rem; color: var(--gold); margin-bottom: var(--sp-4); }

.empty-state--cart .empty-state__icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.empty-state--cart .empty-state__icon-wrap svg { width: 80px; height: 80px; }

.empty-state__title { font-family: var(--font-headline); font-size: 2.5rem; color: var(--white); margin-bottom: var(--sp-3); }
.empty-state__text  { color: var(--grey-400); margin-bottom: var(--sp-5); }

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: calc(var(--nav-h) + var(--sp-4));
  padding-bottom: var(--sp-4);
  font-size: .78rem;
  color: var(--grey-600);
  flex-wrap: wrap;
}

.breadcrumb__link:hover { color: var(--gold); }
.breadcrumb__sep        { color: var(--grey-800); }
.breadcrumb__current    { color: var(--grey-200); }

/* ── PRODUCT DETAIL ─────────────────────────────────────────── */
.product-detail { padding-bottom: var(--sp-10); }

.product-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 900px) {
  .product-detail__grid { grid-template-columns: 1fr; }
}

/* Gallery */
.product-gallery__main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--black-light);
  aspect-ratio: 4/3;
  position: relative;
  border: 1px solid var(--grey-900);
}

.product-gallery__main-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-smooth);
}

.product-gallery__main:hover .product-gallery__main-img { transform: scale(1.03); }

.product-gallery__placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}

.product-gallery__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(212,175,55,.06) 0%, transparent 70%);
  pointer-events: none;
}

.product-gallery__thumbs {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}

.product-gallery__thumb {
  width: 68px; height: 54px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast);
  flex-shrink: 0;
}

.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.active,
.product-gallery__thumb:hover { border-color: var(--gold); }

/* Product Info */
.product-info__cat {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}

.product-info__name {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  margin-bottom: var(--sp-4);
}

.product-info__price-wrap { margin-bottom: var(--sp-4); }

.product-info__price {
  font-family: var(--font-ui);
  font-size: 2rem;
  font-weight: 700;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1.1;
}

.product-info__price-note {
  font-size: .72rem;
  color: var(--grey-600);
  margin-top: 4px;
  display: block;
}

.product-info__desc {
  font-size: .9rem;
  color: var(--grey-400);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}

/* Option groups */
.options-form { margin-bottom: var(--sp-5); }

.option-group {
  border: none;
  margin-bottom: var(--sp-4);
}

.option-group__legend {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey-200);
  margin-bottom: var(--sp-2);
}

.option-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.option-chip { cursor: pointer; }

.option-chip__input { position: absolute; opacity: 0; width: 0; height: 0; }

.option-chip__label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--grey-800);
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 500;
  color: var(--grey-400);
  transition: all var(--dur-fast);
  user-select: none;
}

.option-chip__label small { font-size: .65rem; color: var(--gold-dim); }

.option-chip__input:checked + .option-chip__label {
  background: rgba(212,175,55,.12);
  border-color: var(--gold);
  color: var(--gold);
}

.option-chip:hover .option-chip__label { border-color: var(--grey-600); color: var(--white); }

/* Product Actions */
.product-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-5);
}

/* Qty control */
.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--grey-800);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-btn {
  width: 38px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--grey-400);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.qty-btn:hover { background: var(--grey-900); color: var(--white); }

.qty-input, .qty-display {
  width: 44px; height: 44px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
  color: var(--white);
  background: transparent;
  border: none;
  border-left: 1px solid var(--grey-800);
  border-right: 1px solid var(--grey-800);
  outline: none;
  -moz-appearance: textfield;
}

.qty-control--sm .qty-btn    { width: 28px; height: 30px; font-size: .9rem; }
.qty-control--sm .qty-display { width: 32px; height: 30px; font-size: .8rem; line-height: 30px; }

/* Trust badges */
.trust-badges {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--grey-900);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--grey-600);
}

.trust-badge svg { width: 16px; height: 16px; }

/* ── CART PAGE ──────────────────────────────────────────────── */
.cart-section { padding-block: var(--sp-5) var(--sp-10); }

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
}

.cart-items__header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 40px;
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey-600);
  border-bottom: 1px solid var(--grey-900);
}

@media (max-width: 700px) {
  .cart-items__header { display: none; }
}

.cart-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 40px;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--grey-900);
  align-items: center;
  transition: background var(--dur-fast), opacity var(--dur-mid);
}

@media (max-width: 700px) {
  .cart-row { grid-template-columns: 1fr; gap: var(--sp-2); position: relative; }
}

.cart-row__product { display: flex; gap: var(--sp-3); align-items: center; }

.cart-row__img-wrap {
  width: 60px; height: 50px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--grey-900);
}

.cart-row__img-wrap svg { width: 100%; height: 100%; }

.cart-row__name { font-weight: 600; font-size: .88rem; color: var(--white); margin-bottom: 4px; }

.cart-row__opts {
  list-style: none;
  font-size: .7rem;
  color: var(--grey-600);
}

.cart-row__opts li span { color: var(--grey-400); }

.cart-row__price,
.cart-row__total {
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 600;
  color: var(--white);
}

.cart-row__total { color: var(--gold); }

.cart-remove-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-600);
  border: 1px solid transparent;
  transition: all var(--dur-fast);
}

.cart-remove-btn svg { width: 16px; height: 16px; }
.cart-remove-btn:hover { border-color: var(--red, #e74c3c); color: #e74c3c; }

/* Cart Summary */
.cart-summary {
  background: var(--black-mid);
  border: 1px solid var(--grey-900);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-4));
}

.cart-summary__title {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-4);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: .88rem;
  color: var(--grey-400);
  margin-bottom: var(--sp-3);
}

.cart-summary__row--total {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-5);
}

.cart-summary__divider {
  height: 1px;
  background: var(--grey-900);
  margin-bottom: var(--sp-3);
}

.cart-summary__note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--grey-600);
  margin-bottom: var(--sp-4);
}

.cart-summary__note svg { width: 14px; height: 14px; flex-shrink: 0; }

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

.cart-continue-link {
  display: block;
  text-align: center;
  font-size: .78rem;
  color: var(--grey-600);
  margin-top: var(--sp-3);
  transition: color var(--dur-fast);
}

.cart-continue-link:hover { color: var(--gold); }

.text-gold { color: var(--gold); }

/* ── CHECKOUT ───────────────────────────────────────────────── */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.step {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--grey-600);
  text-transform: uppercase;
}

.step--active { color: var(--gold); }
.step--done   { color: var(--white); }

.step__line {
  width: 32px; height: 1px;
  background: var(--grey-800);
}

.checkout-section { padding-block: var(--sp-6) var(--sp-10); }

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }

.checkout-form-col {}

.form-section { margin-bottom: var(--sp-6); }

.form-section__title {
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--grey-900);
}

.form-group { margin-bottom: var(--sp-4); }

.form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

@media (max-width: 600px) { .form-row--half { grid-template-columns: 1fr; } }

.form-label {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  background: var(--black-mid);
  border: 1px solid var(--grey-900);
  border-radius: var(--radius-md);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .9rem;
  padding: 12px 14px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder { color: var(--grey-800); }
.form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.1); }

.form-textarea { resize: vertical; min-height: 90px; }

.iyzico-notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--grey-900);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-5);
  font-size: .8rem;
  color: var(--grey-400);
  line-height: 1.6;
}

.iyzico-notice strong { color: var(--white); }
.iyzico-notice__logo  { flex-shrink: 0; filter: brightness(1.2); }

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

/* Checkout summary sidebar */
.checkout-summary {
  background: var(--black-mid);
  border: 1px solid var(--grey-900);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-4));
}

.checkout-summary__items { list-style: none; margin-bottom: var(--sp-4); }

.checkout-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--grey-900);
}

.checkout-summary__item-name  { font-size: .85rem; font-weight: 600; color: var(--white); }
.checkout-summary__item-opts  { font-size: .72rem; color: var(--grey-600); margin-top: 2px; }
.checkout-summary__item-qty   { font-size: .72rem; color: var(--grey-600); }
.checkout-summary__item-price { font-weight: 700; color: var(--gold); font-size: .9rem; white-space: nowrap; }

.security-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  color: var(--grey-600);
  margin-top: var(--sp-4);
}

.security-badges svg { width: 14px; height: 14px; }

/* Payment page */
.payment-section { padding-block: var(--sp-6) var(--sp-10); }

.payment-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 800px) { .payment-layout { grid-template-columns: 1fr; } }

.iyzico-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--grey-900);
}

.iyzico-header__text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--grey-400);
}

.iyzico-header__text svg { width: 16px; height: 16px; }
.iyzico-header__amount   { font-weight: 700; color: var(--gold); }

.sandbox-notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: rgba(212,175,55,.06);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: var(--radius-md);
  font-size: .82rem;
  color: var(--grey-400);
  line-height: 1.6;
}

.sandbox-notice svg  { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.sandbox-notice code { background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 4px; font-size: .78rem; }
.sandbox-notice strong { color: var(--gold); }

.payment-side { padding: var(--sp-5); background: var(--black-mid); border: 1px solid var(--grey-900); border-radius: var(--radius-lg); }
.payment-side h2 { font-family: var(--font-ui); font-size: .9rem; font-weight: 700; color: var(--white); margin-bottom: var(--sp-4); }

.payment-features { list-style: none; font-size: .82rem; color: var(--grey-400); display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.card-logos { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.card-logo {
  padding: 4px 10px;
  border: 1px solid var(--grey-800);
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--grey-400);
  letter-spacing: .08em;
}

/* Success page */
.success-section { padding: var(--sp-10) var(--sp-5); }

.success-card {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  background: var(--black-mid);
  border: 1px solid var(--grey-900);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
}

.success-card__icon { display: flex; justify-content: center; margin-bottom: var(--sp-5); }
.success-card__icon svg { width: 80px; height: 80px; }

.success-card__title {
  font-family: var(--font-headline);
  font-size: 3rem;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}

.success-card__msg { color: var(--white); font-weight: 500; margin-bottom: var(--sp-2); }
.success-card__sub { color: var(--grey-400); font-size: .88rem; margin-bottom: var(--sp-6); }

.success-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-5);
  font-size: .88rem;
  line-height: 1.5;
}

.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

.alert--success { background: rgba(39,174,96,.1); border: 1px solid rgba(39,174,96,.3); color: #5dce8a; }
.alert--error   { background: rgba(231,76,60,.1); border: 1px solid rgba(231,76,60,.3); color: #f08b80; }

/* ── APPOINTMENT ────────────────────────────────────────────── */
.appt-section { padding-block: var(--sp-6) var(--sp-10); }

.appt-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-7);
  align-items: start;
}

@media (max-width: 900px) { .appt-layout { grid-template-columns: 1fr; } }

/* Steps */
.appt-step { margin-bottom: var(--sp-6); }

.appt-step--hidden { display: none; }

.appt-step__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.appt-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.appt-step__title {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.appt-step__date-badge {
  font-size: .75rem;
  padding: 3px 10px;
  background: rgba(212,175,55,.12);
  color: var(--gold);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(212,175,55,.3);
}

/* Calendar */
.appt-calendar {
  background: var(--black-mid);
  border: 1px solid var(--grey-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.appt-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--grey-900);
}

.appt-cal__month {
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 700;
  color: var(--white);
}

.appt-cal__arrow {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--grey-400);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.appt-cal__arrow:hover { background: var(--grey-900); color: var(--gold); }

.appt-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: var(--sp-2) var(--sp-3);
  gap: 4px;
}

.appt-cal__weekdays span {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--grey-600);
}

.appt-cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 var(--sp-3) var(--sp-3);
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: .82rem;
  font-weight: 500;
  color: var(--grey-200);
  transition: background var(--dur-fast), color var(--dur-fast);
  cursor: pointer;
}

.cal-day:hover        { background: rgba(212,175,55,.15); color: var(--gold); }
.cal-day--empty       { pointer-events: none; }
.cal-day--disabled    { color: var(--grey-800) !important; cursor: not-allowed; background: none !important; }
.cal-day--today       { background: rgba(255,255,255,.05); }
.cal-day--selected    { background: var(--gold) !important; color: var(--black) !important; font-weight: 700; }

/* Slots */
.appt-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--sp-2);
}

.appt-slots__loading,
.appt-slots__empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--grey-600);
  font-size: .88rem;
  padding: var(--sp-5);
}

.slot-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--grey-900);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.slot-btn span      { font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--white); }
.slot-btn small     { font-size: .65rem; color: var(--grey-600); letter-spacing: .06em; text-transform: uppercase; }

.slot-btn:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(212,175,55,.08);
}

.slot-btn:hover:not(:disabled) span { color: var(--gold); }

.slot-btn--taken {
  opacity: .4;
  cursor: not-allowed;
}

.slot-btn--taken small { color: #e74c3c; }

.slot-btn--selected {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}

.slot-btn--selected span  { color: var(--black) !important; }
.slot-btn--selected small { color: var(--black) !important; }

/* Booking form */
.appt-customer-form { margin-top: var(--sp-2); }

.appt-booking-summary {
  background: rgba(212,175,55,.06);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.appt-booking-summary__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.appt-booking-summary__date { font-weight: 600; color: var(--white); font-size: .9rem; }
.appt-booking-summary__time { color: var(--gold); font-size: .85rem; margin-top: 2px; }

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

/* Info sidebar */
.appt-info { display: flex; flex-direction: column; gap: var(--sp-4); }

.appt-info__card {
  background: var(--black-mid);
  border: 1px solid var(--grey-900);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.appt-info__title {
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-3);
}

.appt-info__card p { font-size: .85rem; color: var(--grey-400); line-height: 1.7; }

.appt-info__map-link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: .78rem;
  color: var(--gold);
  transition: opacity var(--dur-fast);
}

.appt-info__map-link:hover { opacity: .75; }

.appt-info__hours { list-style: none; font-size: .82rem; }

.appt-info__hours li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--grey-900);
  color: var(--grey-400);
}

.appt-info__hours li span:first-child { color: var(--white); }
.closed { color: var(--grey-800) !important; }

.appt-info__ical-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-3);
  padding: 9px 16px;
  border: 1px solid var(--grey-800);
  border-radius: var(--radius-md);
  font-size: .78rem;
  color: var(--grey-400);
  transition: all var(--dur-fast);
}

.appt-info__ical-btn svg { width: 16px; height: 16px; }
.appt-info__ical-btn:hover { border-color: var(--gold); color: var(--gold); }