/* otlaat home — deferred CSS (modals + popups + calendar)
 * Loaded async via <link rel='preload' onload='this.rel=stylesheet'>.
 * Safe to defer: every selector here is hidden by default (display:none)
 * until the visitor clicks the search field, date picker, or guest picker.
 * The mobile responsive overrides for these popups travel with them.
 * Extracted from home.php inline <style> on the critical-CSS migration. */

  .osb-ac{position:absolute;top:calc(100% + 12px);inset-inline-start:0;inset-inline-end:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.2);max-height:400px;overflow:auto;z-index:40;display:none;text-align:start}
  .osb-ac.open{display:block}
  .osb-ac .grp{padding:12px 16px 5px;font-size:11px;font-weight:800;color:var(--ink-2);letter-spacing:.5px}
  .osb-ac .item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .12s}
  .osb-ac .item:hover,.osb-ac .item.hl{background:var(--bg-2)}
  .osb-ac .item .ico{width:34px;height:34px;border-radius:9px;background:var(--navy-soft);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .osb-ac .item b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
  .osb-ac .item small{display:block;font-size:12px;color:var(--ink-2)}
  .osb-ac .empty{padding:20px 16px;color:var(--ink-2);font-size:13.5px;text-align:center}
  .osb-pop{position:absolute;top:calc(100% + 12px);inset-inline-end:0;width:280px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.2);padding:8px;z-index:40;display:none;text-align:start}
  .osb-pop.open{display:block}
  .osb-prow{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
  .osb-prow b{font-size:14px;font-weight:700;color:var(--ink)}
  .osb-prow small{display:block;font-size:11.5px;color:var(--ink-2);font-weight:400}
  .osb-step{display:flex;align-items:center;gap:14px}
  .osb-step button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:17px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}
  .osb-step button:disabled{opacity:.4;cursor:not-allowed}
  .osb-step span{min-width:18px;text-align:center;font-weight:700}
  .osb-pop .done{width:100%;background:var(--navy);color:#fff;border:0;padding:11px;border-radius:10px;font-family:inherit;font-weight:700;cursor:pointer;margin-top:4px}
  .osb-pop .done:hover{background:var(--navy-2)}

  /* ---- guest picker (presets + per-room expanded) — mirrors hotels.otlaat.com ---- */
  .osb-guest-pop{width:320px;padding:8px;text-align:start}
  .osb-guest-pop.gp-wide{width:420px}
  .gp-compact{display:flex;flex-direction:column;gap:6px}
  .gp-preset{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
    background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;
    font-family:inherit;cursor:pointer;text-align:start;transition:all .15s}
  .gp-preset:hover{border-color:var(--navy);background:var(--bg-2)}
  .gp-preset b{font-size:14px;font-weight:700;color:var(--ink)}
  .gp-preset small{font-size:12px;color:var(--ink-2);font-weight:500}
  .gp-more{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;
    background:transparent;border:0;font-family:inherit;font-size:13.5px;font-weight:700;
    color:var(--navy);padding:10px 14px;cursor:pointer;border-radius:10px}
  .gp-more:hover{background:var(--navy-soft)}
  .gp-expanded{padding:4px 2px 2px}
  .gp-room{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
  .gp-room-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .gp-room-head b{font-size:14px;font-weight:700;color:var(--ink)}
  .gp-rm{background:transparent;border:0;color:var(--ink-2);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px;border-radius:6px}
  .gp-rm:hover{background:#fef2f2;color:#dc2626}
  .gp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .gp-sel label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
  .gp-sel select,.gp-age-list select{width:100%;font-family:inherit;font-size:13.5px;font-weight:600;
    color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;
    appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%234a4f54' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
    background-repeat:no-repeat;background-position:left 10px center;padding-inline-end:30px}
  .gp-sel select:focus,.gp-age-list select:focus{outline:none;border-color:var(--navy)}
  .gp-ages{margin-top:10px}
  .gp-ages label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
  .gp-age-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
  .gp-add{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:1px dashed var(--line);
    color:var(--navy);font-family:inherit;font-weight:700;font-size:13.5px;padding:10px 14px;border-radius:10px;
    cursor:pointer;justify-content:center;margin-bottom:8px}
  .gp-add:hover{background:var(--navy-soft);border-color:var(--navy)}
  .gp-add small{color:var(--ink-2);font-weight:500;margin-inline-start:4px}
  .gp-add[hidden]{display:none}
  .gp-note{font-size:11.5px;color:var(--ink-2);text-align:center;margin:4px 0 8px;line-height:1.5}
  .osb-dval{font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
  .osb-cal{position:absolute;top:calc(100% + 12px);inset-inline-start:50%;transform:translateX(50%);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 55px rgba(0,0,0,.22);padding:20px 22px;z-index:45;display:none}
  .osb-cal.open{display:block}
  /* nights counter — pill between check-in / check-out */
  .nights-badge{display:inline-flex;align-items:center;align-self:center;
    background:var(--orange-soft);color:#a85a10;font-size:11.5px;font-weight:800;
    padding:3px 10px;border-radius:99px;white-space:nowrap;flex-shrink:0}
  .cal-foot .cal-nights{font-size:13px;font-weight:800;color:var(--orange)}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .cal-nav{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .cal-nav:hover:not(:disabled){border-color:var(--navy);background:var(--bg-2)}
  .cal-nav:disabled{opacity:.35;cursor:default}
  .cal-titles{display:flex;gap:48px;flex:1;justify-content:space-around}
  .cal-titles h4{margin:0;font-size:15px;font-weight:800;color:var(--ink);text-align:center}
  .cal-months{display:flex;gap:36px}
  .cal-m{width:266px}
  .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
  .cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--ink-2);padding:6px 0}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
  .cal-grid button{height:36px;border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;border-radius:8px;padding:0}
  .cal-grid button:hover:not(:disabled):not(.sel){background:var(--orange-soft)}
  .cal-grid button:disabled{color:#c8ccd4;cursor:default}
  .cal-grid button.empty{visibility:hidden;pointer-events:none}
  .cal-grid button.rng{background:var(--orange-soft);border-radius:0}
  .cal-grid button.sel{background:var(--orange);color:#fff}
  .cal-grid button.sel.s{border-radius:0 9px 9px 0}
  .cal-grid button.sel.e{border-radius:9px 0 0 9px}
  .cal-grid button.sel.s.e{border-radius:9px}
  .cal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .cal-foot .hint{font-size:12.5px;color:var(--ink-2)}
  .cal-foot .apply{background:var(--navy);color:#fff;border:0;padding:9px 24px;border-radius:9px;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
  .cal-foot .apply:hover{background:var(--navy-2)}
  @media (max-width:760px){
    .cal-months{flex-direction:column;gap:18px}
    .cal-m{width:240px}
    .cal-titles{gap:0}
  }