/* North Albania Reservations — compact booking bar */
.na-res{
  width:100%;margin:0 auto;box-sizing:border-box;
  background:#F5EFE6;border-radius:14px;padding:14px 16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#1C2B3A;box-shadow:0 4px 16px rgba(28,43,58,.08);
}
.na-res *{box-sizing:border-box}

/* Header line: title + trip toggle */
.na-bar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.na-bar-title{font-size:17px;font-weight:800;color:#1C2B3A}

.na-trip-toggle{display:flex;background:#fff;border:1px solid #ddd3c4;border-radius:10px;padding:3px}
.na-tt{border:none;background:transparent;padding:6px 14px;border-radius:8px;font-size:13px;font-weight:700;color:#6B6560;cursor:pointer;transition:all .15s}
.na-tt.active{background:#1C4A5A;color:#fff}

/* The single compact input row */
.na-bar-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.na-field{flex:1 1 150px;display:flex;flex-direction:column;min-width:0}
.na-field.na-narrow{flex:0 1 100px}
.na-field.na-full{flex-basis:100%}
.na-field label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#1C4A5A;margin-bottom:3px}
.na-field input,.na-field select{
  width:100%;max-width:100%;padding:9px 10px;border:1px solid #ddd3c4;border-radius:9px;background:#fff;
  font-size:14px;color:#1C2B3A;outline:none;transition:border-color .15s;min-height:40px;
  -webkit-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box
}
/* iOS Safari: date/time inputs overflow their box unless these are set */
.na-field input[type=date],.na-field input[type=time]{
  min-width:0;display:block;-webkit-appearance:none;appearance:none;
  background:#fff;height:40px;line-height:normal
}
.na-field input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.na-field input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto}
.na-field select{padding-right:28px}
.na-field input:focus,.na-field select:focus{border-color:#2AABBB}

.na-search{flex:0 0 auto;background:#2AABBB;color:#fff;border:none;border-radius:9px;
  padding:0 22px;height:40px;font-size:14px;font-weight:800;cursor:pointer;transition:background .15s}
.na-search:hover{background:#2496a4}

/* Step 2 (revealed after Search) */
.na-step2{margin-top:12px;padding-top:12px;border-top:1px solid #e5ded3}
.na-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}

.na-return-block{background:#eef4f2;border:1px solid #d5e3dd;border-radius:11px;padding:11px 11px 2px;margin-bottom:10px}
.na-return-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#1C4A5A;margin-bottom:8px}

.na-price{background:#fff;border:1px solid #ddd3c4;border-radius:9px;padding:9px 13px;margin:2px 0 10px;font-size:14px}
.na-price strong{color:#1C4A5A;font-size:16px}
.na-price span{color:#6B6560;font-size:12px}

/* Advanced Options */
.na-adv-toggle{background:none;border:none;color:#1C4A5A;font-size:13px;font-weight:800;cursor:pointer;padding:6px 0;margin-bottom:4px}
.na-adv-toggle:hover{color:#2AABBB}
.na-adv{background:#fff;border:1px solid #e5ded3;border-radius:11px;padding:12px 12px 2px;margin-bottom:10px}

.na-btn{width:100%;background:#E8654A;color:#fff;border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:800;cursor:pointer;transition:background .15s}
.na-btn:hover{background:#d9553a}
.na-btn:disabled{opacity:.6;cursor:default}
.na-note{font-size:11px;color:#6B6560;margin-top:8px;text-align:center;line-height:1.4}

.na-error{background:#fdecea;border:1px solid #f5c6c0;color:#c0392b;padding:9px 12px;border-radius:9px;margin-bottom:9px;font-size:13px}
.na-res-loading,.na-res-off{text-align:center;padding:18px 10px;color:#6B6560;font-size:14px}
.na-res-off p{margin:0}

/* Tablet */
@media(max-width:760px){
  .na-field{flex:1 1 45%}
  .na-search{flex:1 1 100%;margin-top:4px}
}
/* Mobile: stack, bigger touch targets */
@media(max-width:520px){
  .na-res{padding:13px 12px}
  .na-bar-title{font-size:16px}
  .na-field{flex:1 1 100%}
  .na-field.na-narrow{flex:1 1 100%}
  .na-field input,.na-field select{min-height:44px;font-size:15px}
  .na-search{height:46px;font-size:15px}
  .na-btn{padding:14px;font-size:16px}
}