/* ============================================================
   Nocturne — booking form field styles (nf-*).
   Shared by Booking Form.html and the builder's live preview.
   ============================================================ */
.nf-form{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,32px);}

.nf-field{display:flex;flex-direction:column;gap:9px;}
.nf-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.nf-label{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.9vw,23px);
  line-height:1.2;color:var(--text);letter-spacing:-.2px;flex:1 1 auto;min-width:0;text-wrap:balance;}
.nf-req{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);flex:none;white-space:nowrap;}
.nf-help{margin:-2px 0 2px;font-size:13.5px;line-height:1.5;color:var(--text-soft);font-weight:300;max-width:54ch;}

.nf-input{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--text);
  background:var(--field);border:1px solid var(--line);border-radius:4px;padding:13px 15px;
  transition:border-color .2s,box-shadow .2s;outline:none;}
.nf-input::placeholder{color:var(--text-faint);}
.nf-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.nf-area{resize:vertical;min-height:84px;line-height:1.55;}
.nf-select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238c8576' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;}

/* zones */
.nf-zones{display:flex;flex-wrap:wrap;gap:8px;}
.nf-zone{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-soft);
  background:var(--field);border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;
  transition:all .18s;}
.nf-zone:hover{border-color:var(--line-2);color:var(--text);}
.nf-zone.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

/* upload */
.nf-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:26px 20px;border:1.5px dashed var(--line-2);border-radius:5px;background:var(--field);
  cursor:pointer;transition:border-color .2s,background .2s;}
.nf-drop:hover,.nf-drop.over{border-color:var(--accent);background:var(--accent-soft);}
.nf-drop .nf-file{position:absolute;inset:0;opacity:0;cursor:pointer;}
.nf-drop-ic{font-family:var(--mono);font-size:18px;color:var(--text-faint);}
.nf-drop-t{font-size:13.5px;color:var(--text-soft);}
.nf-drop-t b{color:var(--accent);font-weight:500;}
.nf-drop-s{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);}
.nf-files{display:flex;flex-wrap:wrap;gap:7px;}
.nf-files:empty{display:none;}
.nf-file-tag{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--text-soft);
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:5px 9px;}

/* flash — the hero block */
.nf-flashwrap{display:flex;flex-direction:column;gap:14px;}
.nf-flash{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;}
.nf-fcard{position:relative;aspect-ratio:4/5;border:1px solid var(--line);border-radius:5px;background:var(--field);
  display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;padding:0;
  transition:border-color .22s,box-shadow .22s,transform .22s;}
.nf-fcard:not(.claimed):not(.sel):hover{border-color:var(--accent);transform:translateY(-2px);}
.nf-fart{width:62%;height:62%;background:var(--text);
  -webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat;}
.nf-fpill{position:absolute;top:9px;left:9px;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:2px;background:var(--surface-2);color:var(--text-faint);}
.nf-fpill.avail{color:var(--accent);background:var(--accent-soft);}
.nf-fpill.avail::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--accent);margin-right:5px;vertical-align:middle;}
.nf-fcap{position:absolute;left:0;right:0;bottom:0;padding:9px 11px;text-align:left;display:flex;flex-direction:column;gap:1px;
  background:linear-gradient(transparent,color-mix(in srgb,var(--field) 92%,transparent) 42%);}
.nf-fcap b{font-family:var(--sans);font-weight:500;font-size:12px;color:var(--text);}
.nf-fcap i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.06em;color:var(--text-faint);}
.nf-fcard.claimed{opacity:.46;cursor:not-allowed;}
.nf-fcard.claimed .nf-fart{background:var(--text-faint);}
.nf-fcheck{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--accent);
  color:var(--on-accent);font-size:10px;line-height:1;align-items:center;justify-content:center;display:none;}
.nf-fcard.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent);}
.nf-fcard.sel .nf-fcheck{display:flex;}
.nf-fcard.own{flex-direction:column;gap:8px;border-style:dashed;border-color:var(--line-2);background:transparent;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);
  text-align:center;line-height:1.6;}
.nf-fplus{font-size:20px;line-height:1;}
.nf-fcard.own:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.nf-fcard.own.on{border-style:solid;border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent);}
.nf-custom{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .35s;}
.nf-custom.show{max-height:200px;opacity:1;}

/* validation */
.nf-err{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);min-height:0;}
.nf-field.invalid .nf-input,.nf-field.invalid .nf-drop{border-color:var(--accent);}
.nf-field.invalid .nf-err{min-height:14px;}