:root{
  --bg:#f5efe2;
  --sheet:#faf6ec;
  --card:#ffffff;
  --brown:#7a5230;
  --brown-dark:#2b1c10;
  --brown-mid:#a9662e;
  --muted:#9a8a72;
  --border:#e6dcc7;
  --green:#2f7d4f;
  --error:#b5453a;
  --radius:20px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
/* Several elements below set their own `display` (block/flex/grid) so they
   can be toggled with the plain `hidden` attribute from JS — without this,
   a same-specificity class rule silently wins over the browser's default
   `[hidden]{display:none}` and the element never actually hides. */
[hidden]{display:none !important;}
body{
  margin:0;
  background:var(--bg);
  color:var(--brown-dark);
  min-height:100vh;
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
.page{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  padding-bottom:60px;
}
#card{display:block;}
.step{padding:0 22px 28px;}
.step-hero{padding:0 0 28px;}

/* ---------- hero (language / contact / success) ---------- */
.hero{position:relative;width:100%;}
.hero-img{width:100%;height:340px;object-fit:cover;display:block;}
.hero-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;
  padding:20px;
  background:linear-gradient(180deg,rgba(20,30,40,.28),rgba(20,30,40,.12) 55%,rgba(20,30,40,.35));
}
.brand-word{
  font-family:'Playfair Display',serif;
  font-size:2.4rem;
  font-weight:700;
  margin:0 0 8px;
  letter-spacing:.01em;
}
.hero-subtitle{margin:0 0 10px;font-size:1.05rem;font-weight:600;}
.hero-tagline{
  margin:8px 0 0;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.6;
  opacity:.92;
}

.sheet{
  background:var(--sheet);
  border-radius:var(--radius) var(--radius) 0 0;
  margin-top:-22px;
  position:relative;
  padding:26px 22px 30px;
  box-shadow:0 -6px 20px rgba(43,28,16,.06);
}

/* ---------- flat header (steps 1-4, 6) ---------- */
.flat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0 8px;
}
.back-btn{
  background:none;
  border:none;
  color:var(--brown);
  font-size:1.2rem;
  cursor:pointer;
  padding:6px 8px;
  line-height:1;
}
.back-spacer{width:34px;}
.brand-mark{display:flex;flex-direction:column;align-items:center;}
.brand-caps{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--brown-dark);
}
.brand-city{
  font-size:.6rem;
  letter-spacing:.22em;
  color:var(--muted);
  margin-top:2px;
}

/* ---------- stepper ---------- */
.step-of{
  text-align:center;
  font-size:.85rem;
  color:var(--brown-dark);
  margin:4px 0 10px;
}
.stepper{
  display:flex;
  align-items:center;
  margin-bottom:22px;
}
.stepper .dot{
  width:22px;height:22px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;
  flex:0 0 auto;
  border:2px solid var(--border);
  color:var(--muted);
  background:transparent;
}
.stepper .line{flex:1;height:2px;background:var(--border);}
.stepper .dot.done{background:var(--brown);border-color:var(--brown);color:#fff;}
.stepper .dot.active{border-color:var(--brown);background:#fff;}
.stepper .dot.active::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brown);}
.stepper .line.done{background:var(--brown);}

/* ---------- titles ---------- */
.step-title{
  font-family:'Playfair Display',serif;
  font-size:1.7rem;
  font-weight:700;
  margin:0 0 6px;
  color:var(--brown-dark);
}
.step-subtitle{
  margin:0 0 20px;
  color:var(--muted);
  font-size:.95rem;
}

/* ---------- language screen ---------- */
.lang-title{
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:1.3rem;
  font-weight:700;
  color:var(--brown-dark);
  margin:4px 0 18px;
}
.lang-list{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;}
.lang-opt{
  display:flex;align-items:center;gap:14px;
  background:var(--card);
  border:2px solid transparent;
  border-radius:14px;
  padding:14px 16px;
  cursor:pointer;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:1.05rem;
  color:var(--brown-dark);
  text-align:left;
}
.lang-opt .flag{font-size:1.4rem;}
.lang-opt span:nth-child(2){flex:1;}
.lang-opt .chev{color:var(--muted);font-size:1.2rem;}
.lang-opt.selected{border-color:var(--brown);}

/* ---------- buttons ---------- */
.btn-primary{
  background:var(--brown);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:16px 24px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:1.05rem;
  cursor:pointer;
}
.btn-outline{
  background:transparent;
  color:var(--brown);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:15px 24px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  margin-top:12px;
}
.btn-block{width:100%;display:block;text-align:center;}
.btn-back{
  background:var(--card);
  border:1.5px solid var(--border);
  color:var(--brown);
  border-radius:12px;
  width:52px;
  flex:0 0 52px;
  cursor:pointer;
  font-size:1.1rem;
}
.btn-submit{
  background:var(--brown);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:16px 20px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  flex:1;
}
.link-muted{color:var(--muted);cursor:pointer;font-size:.9rem;}
.actions{
  display:flex;
  align-items:stretch;
  gap:14px;
  margin-top:10px;
}
.actions .btn-primary{flex:1;}

/* ---------- document scan ---------- */
.scan-box{
  border:2px dashed var(--brown-mid);
  border-radius:16px;
  background:var(--card);
  padding:32px 20px;
  text-align:center;
  cursor:pointer;
  margin-bottom:18px;
}
.scan-icon{font-size:2rem;margin-bottom:10px;}
.scan-thumb{width:72px;height:72px;object-fit:cover;border-radius:12px;margin:0 auto 10px;display:block;}
.scan-main{font-weight:600;font-size:1.05rem;margin-bottom:6px;}
.scan-sub{color:var(--muted);font-size:.85rem;}
.or-sep{
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  margin:20px 0 14px;
}
.rectoverso{display:flex;gap:14px;margin-bottom:20px;}
.rv-tile{
  flex:1;
  position:relative;
  background:var(--card);
  border:1.5px dashed var(--border);
  border-radius:14px;
  padding:26px 10px 14px;
  text-align:center;
  cursor:pointer;
}
.rv-icon{font-size:1.6rem;opacity:.6;}
.rv-thumb{width:100%;height:56px;object-fit:cover;border-radius:8px;display:block;margin-bottom:6px;}
.rv-badge{
  position:absolute;
  right:12px;bottom:34px;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--brown);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.rv-tile p{margin:8px 0 0;font-size:.9rem;color:var(--brown-dark);}
.rv-tile.filled{border-style:solid;border-color:var(--green);}
.rv-tile.filled .rv-badge{background:var(--green);}
.ocr-status{
  text-align:center;
  color:var(--brown-mid);
  font-weight:600;
  margin-bottom:16px;
}
.doc-error{text-align:center;}
.scan-box.validated{border-color:var(--green);}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;}

/* ---------- form fields ---------- */
.field{margin-bottom:18px;}
label{
  display:block;
  font-size:.92rem;
  color:var(--brown-mid);
  margin-bottom:7px;
}
.info-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;
  border-radius:50%;
  border:1px solid var(--brown-mid);
  color:var(--brown-mid);
  font-size:.65rem;
  font-style:italic;
  margin-left:4px;
  vertical-align:middle;
}
.hint{font-weight:400;font-size:.8rem;color:var(--muted);margin:6px 0 0;}
input[type=text],input[type=date],input[type=tel],input[type=email],input[type=number],select{
  width:100%;
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:14px 14px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem;
  color:var(--brown-dark);
  background:var(--card);
  appearance:none;
}
input::placeholder{color:#b9ab93;}
input:focus,select:focus{outline:2px solid var(--brown);outline-offset:1px;}
input.invalid,select.invalid,.iti.invalid .iti__tel-input{border-color:var(--error);}
.step-error{text-align:center;}
button,.scan-box,.rv-tile,.lang-opt,.consent-row{-webkit-tap-highlight-color:transparent;}
input,select,textarea,button{font-size:16px;}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%237a5230' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.icon-select{position:relative;}
.icon-select .isel-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1rem;}
.icon-select select,.icon-select input{padding-left:40px;}
/* quantity stepper (number of guests): [−] [ n ] [+] */
.qty{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:10px;background:var(--card);overflow:hidden;}
.qty input[type=number]{flex:1;min-width:0;border:none;border-radius:0;text-align:center;font-weight:600;padding:14px 4px;}
.qty input[type=number]:focus{outline:none;}
.qty:focus-within{outline:2px solid var(--brown);outline-offset:1px;}
.qty-btn{
  flex:0 0 52px;border:none;background:#f5efe2;color:var(--brown);
  font-size:1.4rem;font-weight:600;cursor:pointer;line-height:1;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.qty-btn:active{background:#eadfc9;}
.qty-btn:focus{outline:none;}
.qty-btn:focus-visible{background:#eadfc9;}
.qty-btn:disabled{opacity:.4;cursor:not-allowed;}
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* intl-tel-input: full-width, matches our inputs */
.iti{width:100%;}
.iti__tel-input{width:100%;}
.iti--inline-dropdown .iti__dropdown-content{border-radius:12px;border-color:var(--border);}
.iti__search-input{font-size:16px;}
.iti .iti__selected-country{border-radius:10px 0 0 10px;}
/* flatpickr: brand colours, 16px text to avoid iOS zoom */
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.endRange{
  background:var(--brown);border-color:var(--brown);
}
.flatpickr-day.today{border-color:var(--brown-mid);}
.flatpickr-day.today:hover{background:var(--brown-mid);border-color:var(--brown-mid);color:#fff;}
.flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months{font-family:'Inter',sans-serif;}
.flatpickr-calendar{font-family:'Inter',sans-serif;border-radius:14px;}
.date-input.form-control{cursor:pointer;background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237a5230' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") no-repeat right 14px center;padding-right:42px;}
.radio-row{display:flex;gap:28px;margin-top:6px;}
.radio-opt{display:flex;align-items:center;gap:8px;color:var(--brown-dark);font-size:1rem;cursor:pointer;}
.consent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.92rem;
  color:var(--brown-dark);
  cursor:pointer;
  margin:18px 0 14px;
}
/* Custom-drawn checkbox: iOS Safari ignores width/height on the native one
   and renders it tiny, so we draw our own at a fixed 24px. */
.consent-row input[type=checkbox]{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;min-width:24px;flex:0 0 24px;
  margin:0;
  border:2px solid var(--brown);
  border-radius:7px;
  background:var(--card);
  display:inline-block;
  position:relative;
  cursor:pointer;
}
.consent-row input[type=checkbox]:checked{background:var(--brown);}
.consent-row input[type=checkbox]:checked::after{
  content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);
}
.consent-row input[type=checkbox]:focus-visible{outline:2px solid var(--brown);outline-offset:2px;}
.consent-row span{padding-top:2px;}
.radio-opt input[type=radio]{width:20px;height:20px;margin:0;accent-color:var(--brown);}
.btn-conditions{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:.95rem;
  color:var(--brown-dark);
  cursor:pointer;
  text-align:left;
}
.btn-conditions .chev{margin-left:auto;color:var(--muted);}

/* ---------- recap ---------- */
.recap{
  background:var(--card);
  border-radius:14px;
  padding:6px 18px;
  margin-bottom:24px;
}
.recap-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  font-size:.92rem;
}
.recap-row:last-child{border-bottom:none;}
.recap-row .ic{font-size:1rem;flex:0 0 20px;}
.recap-row .k{color:var(--muted);flex:0 0 100px;}
.recap-row .v{font-weight:600;color:var(--brown-dark);text-align:right;flex:1;min-width:0;overflow-wrap:break-word;word-break:break-word;}

/* ---------- signature ---------- */
.sig-label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;}
.sig-label-row label{margin-bottom:0;}
#sigHintTop{margin:0 0 10px;}
.sig-wrap{
  position:relative;
  border:1.5px dashed var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
}
#sigPad{
  width:100%;
  height:200px;
  display:block;
  touch-action:none;
  position:relative;
  z-index:1;
}
.sig-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--muted);
  font-size:.9rem;
  pointer-events:none;
}
.sig-pencil{font-size:1.4rem;opacity:.6;}
.error-msg{color:var(--error);font-size:.9rem;margin:0 0 14px;}

/* ---------- success ---------- */
.sheet-success{text-align:center;padding-top:34px;}
.success-icon{
  width:64px;height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-size:1.8rem;
  display:flex;align-items:center;justify-content:center;
}
.sheet-success h2{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  margin:0 0 8px;
  color:var(--brown-dark);
}
.sheet-success p{color:var(--muted);margin:0 0 22px;font-size:.95rem;}
.footer-tagline{
  text-align:center;
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.08em;
  margin:22px 0 0;
}

/* ---------- conditions modal ---------- */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.modal-box{
  background:var(--sheet);
  border-radius:20px;
  width:90%;
  max-width:640px;
  height:90vh;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  padding:20px 22px 26px;
}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex:0 0 auto;}
.modal-header h3{font-family:'Playfair Display',serif;margin:0;font-size:1.2rem;color:var(--brown-dark);}
.modal-close{background:none;border:none;font-size:1.1rem;color:var(--muted);cursor:pointer;}
.modal-body{flex:1;overflow-y:auto;font-size:.9rem;line-height:1.6;color:var(--brown-dark);white-space:pre-line;}

/* ---------- resume banner ---------- */
.resume-banner{
  position:fixed;
  bottom:0;left:0;right:0;
  background:#2f5aa8;
  color:#fff;
  padding:16px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  z-index:40;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.resume-actions{display:flex;gap:10px;}
.resume-actions button{
  border:none;
  border-radius:8px;
  padding:8px 16px;
  font-weight:600;
  cursor:pointer;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
#resumeContinue{background:#fff;color:#2f5aa8;}
#resumeRestart{background:transparent;color:#fff;border:1px solid #fff;}

/* ---------- desktop: centered layout, capped at 800px, fields grouped 2 per row ---------- */
@media (min-width:701px){
  .page{
    max-width:800px;
    margin:0 auto;
  }
  .step:not(.step-hero){
    padding:0 40px 40px;
  }
  .sheet{
    padding:34px 40px 40px;
  }
  .flat-header{
    padding:26px 0 14px;
  }
  .field-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 24px;
    align-items:start;
  }
  .field-grid .field{margin-bottom:22px;}
  .field-wide{grid-column:1/-1;}
  .lang-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .actions{max-width:480px;margin-left:auto;margin-right:auto;}
}