/*
  Palette taken from the real Lorenzo brand system (lorenzo-menu.com +
  the attached brand package): deep green (dominant accent), warm cream,
  and gold — Cairo for display type, Tajawal for body text, big soft
  radii and pill-shaped buttons, exactly like the site's own
  cards/buttons. Built RTL-first for the Saudi Arabic experience;
  red is reserved only for genuine validation/error states (--error).
*/
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;700;900&family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  --green:         #12341a;
  --green-2:       #1a4524;
  --green-3:       #235b31;
  --green-line:    rgba(255,255,255,0.10);
  --cream:         #efe7d5;
  --cream-2:       #e6dcc4;
  --paper:         #f7f2e6;
  --paper-dim:     #e6dcc4;

  /* Brand accent — replaces the old red across all UI states.
     Primary/CTA use the mid-green (green-3); hover/active/required
     marks step down to the darker green-2 for depth and contrast. */
  --accent:        var(--green-3);
  --accent-hover:  var(--green-2);
  --accent-soft:   rgba(35,91,49,0.16);   /* focus rings */
  --accent-shadow: rgba(18,52,26,0.45);   /* button shadow, resting */
  --accent-shadow-hover: rgba(18,52,26,0.6);

  --gold:          #e8b14a;
  --basil:         #235b31;

  /* Genuine validation/error messaging only — never used for brand
     accents, badges, or required-field marks. */
  --error:         #b3261e;

  --ink:           #1e2a1c;
  --ink-soft:      rgba(239,231,213,0.72);
  --ink-faint:     rgba(239,231,213,0.36);
  --radius:        16px;
  --font-display:  'Cairo', sans-serif;
  --font-body:     'Tajawal', sans-serif;
  --font-mono:     'Cairo', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; direction:rtl;}
body{
  margin:0;
  background:var(--green);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
  direction:rtl;
  text-align:right;
}

.oven-glow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(35,91,49,0.55), transparent 70%),
    radial-gradient(40% 30% at 85% 15%, rgba(232,177,74,0.14), transparent 70%);
}

.page{position:relative; z-index:1; max-width:640px; margin:0 auto; padding:0 20px 80px;}

/* ---------- HERO ---------- */
.hero{
  text-align:center;
  padding:64px 0 40px;
}
.hero__stamp{
  display:flex;
  justify-content:center;
  margin-bottom:22px;
  /* Real Lorenzo logo, swapped in via background so index.html
     doesn't need to change. Points at the logo shipped in this
     project's assets/ folder — adjust the path below if the form
     lives somewhere else relative to that folder. */
  background-image:url('assets/logo.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  width:100%;
  height:96px;
}
/* Placeholder crest hidden now that the real logo is in place. */
.crest{display:none;}

.hero__eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:4px;
  color:var(--gold);
  text-transform:uppercase;
  margin:0 0 14px;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(28px, 5.2vw, 40px);
  font-weight:900;
  margin:0 0 16px;
  color:#fff;
}
.hero__title span{color:var(--accent); display:block; font-weight:800;}
.hero__sub{
  color:var(--ink-soft);
  font-size:16px;
  max-width:420px;
  margin:0 auto;
}

/* ---------- TICKET ---------- */
.ticket{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border-radius:24px;
  box-shadow:0 34px 70px -34px rgba(6,20,10,0.65);
  overflow:hidden;
}
.ticket__notches{
  height:14px;
  background:
    radial-gradient(circle at 12px 0, transparent 7px, var(--paper) 7.5px) top left/24px 14px repeat-x,
    var(--paper);
  mask: radial-gradient(circle 7px at 12px 0, transparent 98%, #000 100%) top/24px 14px repeat-x;
}
.ticket__notches--top{background-color:var(--green);}
.ticket__notches--bottom{background-color:var(--green); transform:rotate(180deg);}

.ticket__body{padding:36px 30px 30px;}

.ticket__row--head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--font-mono);
}
.ticket__label{font-size:12px; font-weight:700; letter-spacing:2px; color:var(--green-2);}
.ticket__label--muted{color:#8a8069;}

.tear{
  border:none;
  border-top:1.5px dashed #cabb98;
  margin:22px 0;
}

.group{border:0; padding:0; margin:0;}
.group__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:900;
  color:var(--green-2);
  padding:0;
  margin:0 0 16px;
}
.group__num{
  font-family:var(--font-mono);
  font-weight:800;
  font-size:11px;
  color:#fff;
  background:var(--accent);
  padding:3px 8px;
  border-radius:99px;
  letter-spacing:1px;
}

.field{display:block; margin-bottom:16px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field__label{
  display:block;
  font-size:13.5px;
  font-weight:700;
  color:#4a4330;
  margin-bottom:6px;
}
.field__label em{color:var(--accent); font-style:normal; margin-inline-start:2px;}
.field__label small{color:#9c9480; font-weight:400;}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:1.5px solid #ddd4b8;
  border-radius:var(--radius);
  padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{resize:vertical; min-height:90px;}

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

/* ---------- STARS ---------- */
.rating{margin-bottom:18px;}
.rating__label{display:block; font-size:14.5px; font-weight:700; color:#4a4330; margin-bottom:8px;}
.rating__label em{color:var(--accent); font-style:normal;}
.rating__stars{display:flex; gap:6px; font-size:0;}
.star-btn{
  appearance:none;
  border:none;
  background:none;
  padding:2px;
  cursor:pointer;
  line-height:0;
}
.star-btn svg{width:30px; height:30px; transition:transform .12s ease;}
.star-btn svg path{fill:#e7dfc4; stroke:#cabb98; stroke-width:1;}
.star-btn:hover svg{transform:scale(1.1);}
.star-btn.is-active svg path{fill:var(--gold); stroke:var(--accent-hover);}
.star-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

/* ---------- NPS ---------- */
.nps{
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  gap:5px;
  margin-top:10px;
}
.nps-btn{
  appearance:none;
  border:1.5px solid #ddd4b8;
  background:#fff;
  border-radius:10px;
  padding:9px 0;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  color:#7a7159;
  cursor:pointer;
  transition:all .12s ease;
}
.nps-btn:hover{border-color:var(--gold);}
.nps-btn.is-active{
  background:var(--accent);
  border-color:var(--accent-hover);
  color:#fff;
}
.nps__scale{
  display:flex;
  justify-content:space-between;
  font-size:11.5px;
  color:#9c9480;
  margin-top:6px;
}
@media (max-width:480px){
  .nps{grid-template-columns:repeat(5, 1fr); grid-auto-rows:1fr;}
}

/* ---------- SUBMIT ---------- */
.ticket__submit{margin-top:8px; text-align:center;}
.btn{
  appearance:none;
  border:none;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-display);
  font-weight:900;
  font-size:16px;
  padding:15px 40px;
  border-radius:99px;
  cursor:pointer;
  position:relative;
  box-shadow:0 16px 34px -16px var(--accent-shadow);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  width:100%;
}
.btn:hover{background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 24px 44px -18px var(--accent-shadow-hover);}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:0.7; cursor:default; transform:none;}
.btn__spinner{
  display:none;
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,0.4);
  border-top-color:#fff;
  border-radius:50%;
  margin-inline-start:10px;
  vertical-align:middle;
  animation:spin .7s linear infinite;
}
.btn.is-loading .btn__spinner{display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

.ticket__error{
  color:var(--error);
  font-size:13.5px;
  font-weight:700;
  margin-top:12px;
  min-height:18px;
}

/* ---------- THANKS ---------- */
.ticket__thanks{text-align:center; padding:56px 30px 50px;}
.thanks__stamp{display:flex; justify-content:center; margin-bottom:18px;}
.approved{width:130px; height:130px; transform:rotate(8deg);}
.approved__ring{fill:none; stroke:var(--basil); stroke-width:3;}
.approved__text{
  font-family:var(--font-display);
  font-weight:900;
  font-size:17px;
  fill:var(--basil);
  text-anchor:middle;
}
.approved__text--sub{font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:3px;}
.thanks__title{font-family:var(--font-display); font-weight:900; font-size:24px; margin:0 0 10px; color:var(--green-2);}
.thanks__sub{color:#5c5440; max-width:340px; margin:0 auto;}

/* ---------- FOOTER ---------- */
.page__footer{
  text-align:center;
  margin-top:36px;
  font-size:12.5px;
  color:var(--ink-faint);
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:0.5px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .star-btn svg, .btn, .nps-btn{transition:none;}
  .btn__spinner{animation:none;}
}