/* Booking bar on phones and tablets: clear, steady, obviously tappable fields.
   Meeting 2 Nov, item 21. Below 1024px the theme draws the pickers as bare
   text on the white bar (no border, no arrow, -webkit-appearance:button), so
   nothing says "tap here". Up to 451px the date pickers are 12px while the
   guest pickers are 16px, and iOS Safari zooms the page in when a field under
   16px gets focus, so a tap on a date jerks the whole page sideways. The
   pickers are empty in the HTML and filled later by the booking engine's
   base.js, and every row is sized by its content (auto widths, space-between,
   centred wrap), so the bar reflows whenever the lists are filled or
   refilled. Now every picker sits in a fixed tile: one shade
   darker than the bar, a thin border, an icon, a small label, a chevron,
   16px text, and a pressed and focus state. Widths come from the grid, not
   from the option text. Desktop (1024px and up) is untouched. */
@media (max-width:1023px){
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;
    max-width:560px;margin:0 auto;-ms-flex-align:stretch;align-items:stretch;
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row{
    display:block;width:auto;min-width:0;margin:0;padding:0;
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:first-child,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:last-child{grid-column:1 / -1}

  /* Dates: the shared "check in / check-out" caption becomes one label per tile */
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:first-child .cmp-homescreen__bar__table-col{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:first-child .cmp-homescreen__bar__table-col:first-child,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date-div{display:none}

  /* The tile: date pair, adults, children */
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(2),
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(3){
    position:relative;box-sizing:border-box;
    display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;
    height:3.25rem;min-width:0;padding:0;margin:0;
    background:#f1f5f8 no-repeat 14px 50%/18px 18px;
    border:1.5px solid #a7b9c6;border-radius:4px;
    box-shadow:0 1px 2px rgba(9,69,103,.06);
    -webkit-tap-highlight-color:transparent;
    transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23094567' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(2),
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(3){
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23094567' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.9 3.7-6 7.2-6s6.3 2.1 7.2 6'/%3E%3C/svg%3E");
  }

  /* Small label inside the tile, above the value; taps fall through to the picker */
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date::before,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(2) > span,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(3) > span{
    position:absolute;top:8px;left:42px;margin:0;
    color:#2f4a5d;font-size:.75rem;font-weight:600;line-height:1;
    letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
    pointer-events:none;
  }
  /* Labels in the page language (html lang="cs" / "en" / "de") */
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:first-child::before{content:"Check-in"}
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:last-child::before{content:"Check-out"}
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:first-child:lang(cs)::before{content:"P\0159\00EDjezd"}
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:last-child:lang(cs)::before{content:"Odjezd"}
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:first-child:lang(de)::before{content:"Anreise"}
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:last-child:lang(de)::before{content:"Abreise"}

  /* The pickers: one size everywhere (16px also stops the iOS focus zoom) */
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table select{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    display:block;box-sizing:border-box;height:100%;width:100%;min-width:0;margin:0;
    padding:1.125rem 1.75rem .125rem 0;
    color:#094567;font-family:inherit;font-size:1rem;font-weight:500;
    line-height:1.2;letter-spacing:.02em;text-overflow:ellipsis;
    background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23094567' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px top 30px/11px 7px;
    border:0;border-radius:0;box-shadow:none;outline:0;cursor:pointer;
  }
  /* Day and month are two pickers in the booking engine's form. Each gets its own
     clearly separate tap area: the day area takes the icon and label side of the
     field, a thin divider, then the month area to the right edge. Each has its arrow. */
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date select:first-child{
    -ms-flex:0 0 5.75rem;flex:0 0 5.75rem;padding-left:42px;padding-right:1.75rem;
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date select:last-child{
    -ms-flex:1 1 auto;flex:1 1 auto;padding-left:14px;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23094567' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      linear-gradient(#a7b9c6,#a7b9c6);
    background-repeat:no-repeat,no-repeat;
    background-position:right 14px top 30px,left 0 top 22px;
    background-size:11px 7px,1px calc(100% - 30px);
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(2) select,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(3) select{
    padding-left:42px;
  }

  /* Pressed and focused */
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:active,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(2):active,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(3):active{
    background-color:#e9f0f4;border-color:#a9bccb;
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:focus-within,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(2):focus-within,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(3):focus-within{
    border-color:#094567;box-shadow:0 0 0 3px rgba(9,69,103,.18);
  }

  /* The button: full width, same height rhythm as the tiles */
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:last-child{margin-top:4px}
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table .submit{
    -webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;
    width:100%;height:3rem;padding:0 1rem;border-radius:4px;
    font-size:.8125rem;letter-spacing:.2em;cursor:pointer;
    transition:background-color .15s ease-out,border-color .15s ease-out;
  }
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table .submit:active{
    background:#a97b40;border-color:#a97b40;
  }
}
@media (max-width:1023px) and (hover:hover){
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-date:hover,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(2):hover,
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:nth-child(3):hover{
    background-color:#eef3f6;border-color:#a9bccb;
  }
}
/* Narrow phones: check-in and check-out stack, each on its own full-width row */
@media (max-width:451px){
  .cmp-homescreen__bar #AVP .cmp-homescreen__bar__table-row:first-child .cmp-homescreen__bar__table-col{
    grid-template-columns:minmax(0,1fr);
  }
  /* the booking card rises over the bottom of the photo: rounded, raised, part of the hero
     instead of a white strip under it (the theme's 150px bottom padding becomes outer space) */
  .cmp-homescreen__bar .cmp-homescreen__bar-container{
    position:relative;z-index:2;margin:-3.5rem 12px 3rem;padding:18px 14px;
    border-radius:16px;
    box-shadow:0 2px 6px rgba(5,30,45,.10),0 14px 36px rgba(5,30,45,.22);
  }
}