/* =========================================
     TIXBROADWAY SEARCH WIDGET CSS
========================================== --*/

.tb-search-glass {
  width min(700px, 100%);
  margin 0 auto;
  padding 18px;
  border-radius 18px;
  background
    linear-gradient(
      180deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.10)
    );
  border 1px solid rgba(255,255,255,.22);
  box-shadow
    0 10px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter blur(10px);
  -webkit-backdrop-filter blur(10px);
}

.tb-search-box {
  display flex;
  align-items center;
  gap 10px;
  width 100%;
  margin-top 14px;
}

.tb-search-input {
  flex 1 1 auto;
  min-width 0;
  height 48px;
  border-radius 999px;
  border 1px solid rgba(255,255,255,.25);
  padding 0 18px;
  font-size 16px;
  outline none;
  background rgba(255,255,255,.94);
  color #000;
  box-shadow
    inset 0 1px 2px rgba(0,0,0,.10),
    0 2px 8px rgba(0,0,0,.15);
}

.tb-search-inputplaceholder {
  color #555;
}

.tb-search-inputfocus {
  border-color #fda83c;
  box-shadow
    0 0 0 3px rgba(253,168,60,.25),
    inset 0 1px 2px rgba(0,0,0,.10);
}

.tb-search-btn {
  flex 0 0 auto;
  height 48px;
  padding 0 22px;
  border-radius 999px;
  border 0;
  cursor pointer;
  font-size 15px;
  font-weight 700;
  color #fff;
  background #0099ff;
  box-shadow
    0 6px 14px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition
    transform .15s ease,
    background .15s ease;
}

.tb-search-btnhover {
  background #fda83c;
  color #000;
  transform translateY(-1px);
}

.tb-search-btnactive {
  transform translateY(0);
}

@media (max-width 768px) {

  .tb-search-box {
    flex-direction column;
  }

  .tb-search-input,
  .tb-search-btn {
    width 100%;
  }

}

@media (max-width 736px) and (orientation landscape) {

  .tb-search-glass {
    width min(100%, calc(100vw - 24px));
    padding 12px;
  }

  .tb-search-box {
    flex-direction row;
    gap 8px;
  }

  .tb-search-input {
    min-width 0;
    height 44px;
    font-size 16px;
  }

  .tb-search-btn {
    height 44px;
    padding 0 16px;
    white-space nowrap;
  }

}

/* =========================================
   TIXBROADWAY SEARCH WIDGET FRAME
========================================= */

.tb-search-glass {
  position: relative;
  width: min(700px, 100%);
  margin: 0 auto;

  /* OUTER FRAME */
  padding: 22px;
  border-radius: 22px;

  /* FRAME BACKGROUND */
  background:
    linear-gradient(
      180deg,
      rgba(18, 32, 52, .96),
      rgba(36, 51, 70, .94)
    );

  /* FRAME BORDER */
  border: 3px solid rgba(249, 153, 3, .88);

  /* FRAME SHADOW */
  box-shadow:
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 22px rgba(249,153,3,.18);

  overflow: hidden;
  box-sizing: border-box;
}

/* =========================================
   INNER GLASS PANEL
========================================= */

.tb-search-glass::before {
  content: "";

  position: absolute;
  inset: 8px;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.08)
    );

  border: 1px solid rgba(255,255,255,.16);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  pointer-events: none;
}

/* =========================================
   KEEP CONTENT ABOVE GLASS OVERLAY
========================================= */

.tb-search-glass > * {
  position: relative;
  z-index: 2;
}

/* =========================================
   TITLE
========================================= */

.tb-search-title p {
  margin: 0 0 14px 0;

  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  color: #fff;

  text-shadow:
    0 2px 6px rgba(0,0,0,.55);
}

/* =========================================
   SEARCH ROW
========================================= */

.tb-search-box {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  margin-top: 10px;
}

/* =========================================
   INPUT
========================================= */

.tb-search-input {
  flex: 1 1 auto;
  min-width: 0;

  height: 50px;

  padding: 0 18px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);

  background: rgba(255,255,255,.95);

  color: #000;
  font-size: 16px;

  outline: none;

  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.10),
    0 3px 10px rgba(0,0,0,.18);

  box-sizing: border-box;
}

.tb-search-input::placeholder {
  color: #555;
}

.tb-search-input:focus {
  border-color: #fda83c;

  box-shadow:
    0 0 0 4px rgba(253,168,60,.25),
    inset 0 1px 3px rgba(0,0,0,.10);
}

/* =========================================
   BUTTON
========================================= */

.tb-search-btn {
  flex: 0 0 auto;

  height: 50px;
  padding: 0 24px;

  border: 0;
  border-radius: 999px;

  background: #0099ff;
  color: #fff;

  font-size: 15px;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 6px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16);

  transition:
    transform .15s ease,
    background .15s ease;
}

.tb-search-btn:hover {
  background: #fda83c;
  color: #000;

  transform: translateY(-1px);
}

.tb-search-btn:active {
  transform: translateY(0);
}

/* =========================================
   SUGGESTIONS
========================================= */

.tb-search-suggestions {
  margin-top: 18px;

  text-align: center;

  font-size: 15px;
  line-height: 1.8;

  color: #fff;
}

.tb-search-suggestions strong {
  color: #fda83c;
}

.tb-search-suggestions a {
  color: #7cc8ff;
  text-decoration: none;
  font-weight: 700;
}

.tb-search-suggestions a:hover {
  color: #fff;
  text-decoration: underline;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .tb-search-box {
    flex-direction: column;
  }

  .tb-search-input,
  .tb-search-btn {
    width: 100%;
  }

}

/* =========================================
   iPHONE LANDSCAPE HARDENING
========================================= */

@media (max-width: 736px) and (orientation: landscape) {

  .tb-search-glass {
    width: min(100%, calc(100vw - 24px));
    padding: 14px;
  }

  .tb-search-title p {
    font-size: 22px;
  }

  .tb-search-box {
    flex-direction: row;
    gap: 8px;
  }

  .tb-search-input {
    min-width: 0;
    height: 44px;
    font-size: 16px;
  }

  .tb-search-btn {
    height: 44px;
    padding: 0 16px;
    white-space: nowrap;
  }

}