/*! ldk-searchbar 2 | big, always-visible search bar for Shoptet template-11 + the ldk-search widget
 *  Scoped to html.ldk-ui, which the Záhlavie snippet sets before first paint (no layout jump).
 *  Colors are the widget's own: ink #0b1f33, cyan #00afdb, deep #007ba3, line #e4eaf0. */

/* ---------- 1. the bar itself (all widths: desktop, and Shoptet's own search window on phones if the widget is down) */
html.ldk-ui #formSearchForm {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  margin: 0;
  padding: 0 4px 0 0;
  background: #fff;
  border: 2px solid #00afdb;
  border-radius: 14px;
  box-shadow: 0 8px 22px -16px rgba(0, 123, 163, .6);
  transition: border-color .15s, box-shadow .15s;
}
html.ldk-ui #formSearchForm::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007ba3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
html.ldk-ui #formSearchForm:hover { border-color: #0096c7; }
html.ldk-ui #formSearchForm:focus-within,
html.ldk-ui #formSearchForm.ldk-on {
  border-color: #00afdb;
  box-shadow: 0 0 0 4px rgba(0, 175, 219, .18), 0 10px 28px -12px rgba(0, 175, 219, .65);
}
/* borderless input inside the shell; also cancels the widget's own !important ring on the input */
html.ldk-ui #formSearchForm input[name="string"],
html.ldk-ui #formSearchForm.ldk-on input[name="string"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 12px 0 50px;
  border: 0 !important;
  border-radius: 12px;
  background: transparent;
  box-shadow: none !important;
  outline: none;
  font: 400 17px/1.2 "Open Sans", sans-serif;
  color: #0b1f33;
}
html.ldk-ui #formSearchForm input[name="string"]::placeholder {
  color: #5b6d80;                 /* 5.3:1 on white */
  opacity: 1;
}
html.ldk-ui #formSearchForm button[type="submit"] {
  flex: none;
  height: 40px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: #007ba3;            /* white text 4.8:1 (the old #00afdb was 2.6:1) */
  color: #fff;
  font: 700 15px/1 "Open Sans", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color .15s;
}
html.ldk-ui #formSearchForm button[type="submit"]:hover { background: #00698c; }
html.ldk-ui #formSearchForm button[type="submit"]:focus-visible {
  outline: 2px solid #0b1f33;
  outline-offset: 2px;
}

/* ---------- 2. desktop + tablet (>= 768px, the widget's desktop range) */
@media (min-width: 768px) {
  html.ldk-ui .header-top {
    align-items: center;
    column-gap: clamp(16px, 3vw, 48px);
  }
  html.ldk-ui .header-top .site-name-wrapper {
    flex: 0 0 clamp(170px, 21vw, 300px);
    width: auto;
  }
  html.ldk-ui .header-top .search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 756px;             /* 756 + 2 x 12px = the widget's 780px panel, flush on both sides */
    margin: 0 auto;
    padding: 0;
  }
  html.ldk-ui .header-top .navigation-buttons {
    flex: 0 0 auto;
    width: auto;
  }

  /* sticky: once the header scrolls away, the bar follows (class set by ldk-searchbar.js; never in cart/checkout) */
  html.ldk-ui.ldk-stuck { scroll-padding-top: 84px; }
  html.ldk-ui.ldk-stuck .header-top .search {
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    right: 0;
    max-width: none;
    margin: 0;
    padding: 10px max(16px, calc((100% - 756px) / 2));
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 1px 0 #e4eaf0, 0 12px 24px -20px rgba(11, 31, 51, .5);
    animation: ldk-drop .2s cubic-bezier(.2, .7, .2, 1);
  }
}

/* ---------- 3. phones (< 768px): a real-looking field under Shoptet's 50px top bar (not in cart/checkout,
 * where Shoptet deliberately hides search and logo)
 * Drawn on the existing search toggle's pseudo-elements, so a tap IS a tap on the toggle: the widget opens its
 * sheet inside the gesture, and if the widget is down, Shoptet's own search window opens in the same spot. */
@media (max-width: 767px) {
  /* 50px Shoptet bar + 60px search strip. !important: Shoptet's own offsets use (0,4,1) selectors */
  html.ldk-ui body:not(.ordering-process) .overall-wrapper { padding-top: 110px !important; }
  /* the USP info bar (Tursky addon) scrolls with the page instead of being fixed under the top bar,
     otherwise phones would carry ~170px of fixed header */
  html.ldk-ui body.is-hib-mobile-fixed:not(.ordering-process) .js-header-info-bar { position: relative !important; top: auto !important; }

  html.ldk-ui body:not(.ordering-process) .responsive-tools .toggle-window[data-target="search"]::before {
    content: "";
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    width: auto;
    height: 60px;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid #e4eaf0;
  }
  html.ldk-ui body:not(.ordering-process) .responsive-tools .toggle-window[data-target="search"]::after {
    content: attr(aria-label);
    position: fixed;
    top: 58px;
    left: 10px;
    right: 10px;
    height: 44px;
    display: block;
    box-sizing: border-box;
    padding: 0 14px 0 44px;
    border: 2px solid #00afdb;
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007ba3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") 13px 50% / 20px 20px no-repeat;
    box-shadow: 0 6px 16px -12px rgba(0, 123, 163, .6);
    font: 400 16px/40px "Open Sans", sans-serif;
    color: #5b6d80;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.ldk-ui body:not(.ordering-process) .responsive-tools .toggle-window[data-target="search"][data-ph]::after { content: attr(data-ph); }

  /* fallback (widget down): Shoptet's own search window takes the field's exact spot and looks the same */
  html.ldk-ui #header .header-top .search {   /* #header: Shoptet's window rule is (1,2,0) */
    box-sizing: border-box;
    padding: 8px 0;
    background: #fff;
  }
  html.ldk-ui #formSearchForm { height: 44px; border-radius: 12px; }
  html.ldk-ui #formSearchForm::before { left: 13px; width: 20px; height: 20px; margin-top: -10px; }
  html.ldk-ui #formSearchForm input[name="string"] { padding-left: 42px; font-size: 16px; }   /* >= 16px: no iOS zoom */
  html.ldk-ui #formSearchForm button[type="submit"] { height: 34px; padding: 0 16px; border-radius: 8px; }
}

@keyframes ldk-drop { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.ldk-ui.ldk-stuck .header-top .search { animation: none; }
}