/* ==========================================================
   BOOKIO TEMPLATE CSS – FINAL CLEAN (CENTERED + CLEAN DROPDOWNS)
   + STEP 1 GUTTERS (consistent spacing without flex/grid)
   ========================================================== */

:root{
  --bg: transparent;

  --text: #453a3a;
  --text-strong: #232121;
  --placeholder: #8a8a8a;

  --border: #cccccc;
  --border-soft: #edf0ea;

  --brand: #ad073d;
  --brand-hover: #950633;

  --dp-disabled: #665656;

  --select-arrow: #746161;

  /* unified field sizing */
  --field-font: 16px;
  --field-height: 46px;
  --field-pad-x: 14px;

  /* desired gap between fields */
  --gap: 16px; /* zmeň na 10–20px */
}

/* ---------- Base background ---------- */
html, body, .np-body-bg{
  background-color: var(--bg);
}

/* ---------- Hide branding ---------- */
#header, #footer, .np-footer, .restaurant-name, div[powered-by]{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* ---------- Base text ---------- */
.np-body p,
.np-link,
.np-options a,
p a.np-link,
.np-checkbox-wrapp a,
.np-options li:not(:first-child):before{
  color: var(--text);
}

a.np-link:hover,
.np-options a:hover,
.np-checkbox-wrapp a:hover{
  color: var(--text-strong);
  text-decoration:none;
}

/* ==========================================================
   UNIFIED TYPOGRAPHY
   ========================================================== */
.np-body input,
.np-body select,
.np-body textarea,
.np-input,
.np-filed,
.np-select{
  font: inherit !important;
  font-size: var(--field-font) !important;
  color: var(--text-strong) !important;
}

/* placeholders */
.np-body input::placeholder,
.np-body textarea::placeholder{
  color: var(--placeholder) !important;
  opacity: 1 !important;
}

/* ==========================================================
   STEP 1 controls (visuals + vertical centering)
   ========================================================== */
.np-input,
.np-filed,
.selectWrapper{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:5px !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

/* Date field wrapper + inner input centered */
.np-filed{
  height: var(--field-height) !important;
  padding: 0 !important;
}
.np-filed input{
  height: var(--field-height) !important;
  line-height: var(--field-height) !important;
  padding: 0 var(--field-pad-x) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

/* If Bookio uses .np-input as real input */
.np-input{
  height: var(--field-height) !important;
  line-height: var(--field-height) !important;
  padding: 0 var(--field-pad-x) !important;
}

/* Select wrapper + inner label/value centered */
.selectWrapper{
  height: var(--field-height) !important;
}
.np-select,
.selectWrapper select{
  height: var(--field-height) !important;
  line-height: var(--field-height) !important;
  padding: 0 var(--field-pad-x) !important;
  background:transparent !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

/* avoid double border on inner select */
.np-select{ border:0 !important; }

/* focus */
.np-input:focus,
.np-filed:focus,
.selectWrapper:focus-within{
  border-color: var(--brand) !important;
  outline:none !important;
  box-shadow:none !important;
}

/* prevent black flash */
.np-select:active,
.np-select.active,
.selectWrapper:active{
  background-color:#ffffff !important;
}

/* select arrows (custom) */
.np-select:after{
  border-color: var(--select-arrow) transparent transparent transparent;
}
.np-select:before{
  border-color: transparent transparent var(--select-arrow) transparent;
}

/* ==========================================================
   STEP 1 GUTTERS (the part you want)
   - keeps Bookio structure
   - creates consistent 10–20px gaps
   - makes fields visually wider (no weird % gaps)
   ========================================================== */

/* container: pull gutters back so row stays same width */
.np-options,
.np-options ul{
  margin-left: calc(var(--gap) / -2) !important;
  margin-right: calc(var(--gap) / -2) !important;
}

/* each "column" (li) gets equal padding -> consistent gaps */
.np-options > li,
.np-options li{
  padding-left: calc(var(--gap) / 2) !important;
  padding-right: calc(var(--gap) / 2) !important;
  box-sizing: border-box !important;
}

/* ensure field boxes fill their column */
.np-options > li .np-filed,
.np-options > li .selectWrapper,
.np-options > li .np-input{
  width: 100% !important;
}

/* ==========================================================
   FIX 1: hide spinners (number/time)
   ========================================================== */
.np-body input[type="number"]::-webkit-outer-spin-button,
.np-body input[type="number"]::-webkit-inner-spin-button,
.np-body input[type="time"]::-webkit-outer-spin-button,
.np-body input[type="time"]::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.np-body input[type="number"],
.np-body input[type="time"]{
  -moz-appearance: textfield !important;
}

/* ==========================================================
   FIX 2: dropdown options styling
   ========================================================== */
.selectOptions{
  background:#fff !important;
  border:1px solid #cccccc !important;
  border-radius:8px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;
  overflow:hidden !important;
  padding: 6px 0 !important;
}
.selectOptions li{
  color: var(--text-strong) !important;
  border: 0 !important;
  padding: 10px 14px !important;
  line-height: 1.2 !important;
}
.selectOptions li:hover{
  background:#f3f3f3 !important;
  color: var(--text-strong) !important;
}
.selectOptions li.active,
.selectOptions li.selected{
  background: rgba(173,7,61,.08) !important;
}

/* ==========================================================
   STEP 2 fields
   ========================================================== */
.np-body input[type="text"],
.np-body input[type="email"],
.np-body input[type="tel"],
.np-body input[type="number"],
.np-body input[type="url"],
.np-body select{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:5px !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
  outline:none !important;

  height: var(--field-height) !important;
  line-height: var(--field-height) !important;
  padding: 0 var(--field-pad-x) !important;

  font-size: var(--field-font) !important;
  color: var(--text-strong) !important;
}

.np-body textarea{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:5px !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
  outline:none !important;

  padding: 12px var(--field-pad-x) !important;
  line-height: 1.4 !important;
  min-height: 120px !important;
  height: auto !important;

  font-size: var(--field-font) !important;
  color: var(--text-strong) !important;
}

.np-body input[type="text"]:focus,
.np-body input[type="email"]:focus,
.np-body input[type="tel"]:focus,
.np-body input[type="number"]:focus,
.np-body input[type="url"]:focus,
.np-body select:focus,
.np-body textarea:focus{
  border-color: var(--brand) !important;
  outline:none !important;
  box-shadow:none !important;
}

.np-body .np-input-wrapp{ border-bottom:none !important; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.np-button{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color:#fff !important;
}
.np-button:hover{
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}
.np-body .np-button,
.np-body .np-button:hover,
.np-body .np-button:active,
.np-body .np-button *{
  color:#fff !important;
}

/* ==========================================================
   STEP 2/3 banner -> burgundy
   ========================================================== */
.np-label-box{
  background-color: var(--brand) !important;
  color:#fff !important;
}
.np-label-box .np-triangle{
  border-color: var(--brand) transparent transparent transparent !important;
  _border-color: var(--brand) #000000 #000000 #000000 !important;
}

.np-text-before{ border-top: var(--border-soft); }

/* ==========================================================
   DATEPICKER
   ========================================================== */
.ui-datepicker{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:5px !important;
}
.ui-datepicker-title{ color: var(--brand) !important; }
.ui-datepicker th,
.ui-datepicker-prev span,
.ui-datepicker-next span,
.ui-datepicker tbody td a{
  color: var(--text-strong) !important;
}
.ui-datepicker tbody td a{ border-bottom:none !important; }
.ui-datepicker-unselectable span{ color: var(--dp-disabled) !important; }
.ui-datepicker-calendar .ui-state-active,
.ui-datepicker-calendar .ui-state-active:hover{
  background: var(--brand) !important;
  color:#fff !important;
  border-radius:4px !important;
}
.ui-datepicker-calendar .ui-state-highlight{
  background: var(--brand) !important;
  color:#fff !important;
}