/* ==========================================
   File: /css/tixpick-widgets.css
   Purpose: Central styles for:
   - tpU carousels (base + modifiers)
   - Search widget (tp-search-glass)
   - TN results widget tweaks (NOT vendor CSS)
   ========================================== */

/* --------------------------
   tpU Carousel (BASE)
-------------------------- */
.tpU{
  width:100%;
  max-width:1290px;
  margin:0 auto;
  padding:12px;
  font-family:system-ui, Arial, Helvetica, sans-serif;
  color:var(--text-dark, #000);
}
.tpU *{ box-sizing:border-box; }

.tpU-header{ display:block; margin:0 0 10px 0; }

.tpU-title{
  margin:0 0 6px 0;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  color: var(--text-dark, #000);
}
.tpU-title-white{
  margin:0 0 6px 0;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  color: var(--white-bright, #fff);
}
.tpU-subtitle{ margin:0; font-size:12px; color: var(--text-gray, #333); }
.tpU-subtitle-gray{ margin:0; font-size:12px; color:#999; }

.tpU-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0;
  width:100%;
}
.tpU-arrow{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--gray-accent, #ccc);
  background:var(--white-bright, #fff);
  color:var(--text-dark, #000);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 4px rgba(0,0,0,.25);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.tpU-arrow:hover{
  background:#fff7ea;
  border-color:var(--gold-accent, #fda83c);
}
.tpU-arrow:focus{
  outline:2px solid var(--blue-accent, #0099ff);
  outline-offset:2px;
}

.tpU-dots{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  flex-wrap:wrap;
}
.tpU-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid var(--gray-accent, #ccc);
  background:var(--white-bright, #fff);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tpU-dot[aria-selected="true"]{
  background:var(--gold-accent, #fda83c);
  border-color:var(--gold-accent, #fda83c);
}

.tpU-viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding:4px;
  border-radius:8px;
  outline:none;
  background:transparent;
}
@supports (scroll-snap-type:x mandatory){
  .tpU-viewport{ scroll-snap-type:x mandatory; }
  .tpU-card{ scroll-snap-align:start; }
}

.tpU-track{
  display:flex;
  flex-direction:row;
  gap:14px;
  align-items:stretch;
  width:max-content;
  min-width:100%;
}

.tpU-card{
  flex:0 0 260px;
  background:var(--white-bright, #fff);
  border:1px solid var(--gray-accent, #ccc);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 5px #999;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.tpU-media{
  height:170px;
  background:var(--gray-accent, #ccc);
  overflow:hidden;
  position:relative;
}
.tpU-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:0;
}

.tpU-imgLabel{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.06em;
  font-size:14px;
  color:#111;
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(230,230,230,.9));
  text-align:center;
  padding:10px;
}

.tpU-body{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  height:auto;
  min-height:0;
}

.tpU-cardTitle{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:var(--text-dark, #000);
  line-height:1.15;
}
.tpU-desc{
  margin:0;
  font-size:12px;
  line-height:1.25;
  color:var(--text-gray, #333);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.25em * 3);
}

/* More specific so this wins over site css */
.tpU .tpU-btn{
  margin-top:6px;
  display:inline-block;
  text-decoration:none;
  text-align:center;
  font-weight:700;
  font-size:12px;
  padding:8px 10px;
  border-radius:50px;
  background:var(--blue-accent, #0099ff);
  color:var(--white-bright, #fff);
  box-shadow:0 6px 4px rgba(0,0,0,.25);
  border:1px solid rgba(0,0,0,.10);
  white-space:nowrap;
}
.tpU .tpU-btn:hover{
  background:var(--gold-accent, #fda83c);
  color:var(--text-dark, #000);
}
.tpU .tpU-btn:focus{
  outline:2px solid var(--blue-accent, #0099ff);
  outline-offset:2px;
}

@media (min-width:768px){
  .tpU-card{ flex-basis:300px; }
  .tpU-media{ height:190px; }
  .tpU-title, .tpU-title-white{ font-size:20px; }
}
@media (max-width:420px){
  .tpU-arrow{ display:none; }
  .tpU{ padding:10px; }
  .tpU-card{ flex-basis:240px; }
  .tpU-media{ height:160px; }
}
@media (prefers-reduced-motion:reduce){
  .tpU-viewport{ scroll-behavior:auto; }
}

/* --------------------------
   tpU Carousel (MODIFIERS)
-------------------------- */
.tpU-artists .tpU-media{ height:248px; }

.tpU-compact .tpU-body{ padding:7px 8px; gap:3px; }
.tpU-compact .tpU-btn{ margin-top:auto; padding:7px 10px; }
.tpU-compact .tpU-desc{ -webkit-line-clamp:3; }

/* Vegas size modifiers (requires data-carousel=...) */
.tpU[data-carousel="lvVenues9"] .tpU-card{ height:315px; }
.tpU[data-carousel="lvVenues9"] .tpU-media{ height:195px; }
.tpU[data-carousel="lvVenues9"] .tpU-body{
  height:calc(315px - 195px);
  padding:7px 8px;
  gap:3px;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.tpU[data-carousel="lvVenues9"] .tpU-desc{ -webkit-line-clamp:3; min-height:0; }
.tpU[data-carousel="lvVenues9"] .tpU-btn{ margin-top:auto; padding:7px 10px; }

.tpU[data-carousel="lvAttractions5"] .tpU-card{ height:330px; }
.tpU[data-carousel="lvAttractions5"] .tpU-media{ height:200px; }
.tpU[data-carousel="lvAttractions5"] .tpU-body{
  height:calc(330px - 200px);
  padding:7px 8px;
  gap:3px;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.tpU[data-carousel="lvAttractions5"] .tpU-desc{ -webkit-line-clamp:3; min-height:0; }
.tpU[data-carousel="lvAttractions5"] .tpU-btn{ margin-top:auto; padding:7px 10px; }

/* --------------------------
   Search Widget (tp-search-glass)
-------------------------- */
.tp-search-glass{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: .55rem .6rem .45rem;
  width: 100%;
  max-width: 400px;   /* ← updated */
  margin: 0 auto;
  display:block;
}

.tp-search-title{ margin:0 0 .35rem; text-align:center; }
.tp-search-box{ width:100%; }
.tp-search-box form{
  display:flex;
  align-items:center;
  width:100%;
  gap:0;
}

.tp-search-input{
  flex:1 1 auto;
  min-width:0;
  height:38px;
  border-radius:999px 0 0 999px;
  border:1px solid rgba(0,0,0,.14);
  border-right:none;
  background:rgba(255,255,255,.82);
  padding:0 1.35rem;
  font-size:.95rem;
  outline:none;
}

.tp-search-btn{
  width:42px;
  min-width:42px;
  height:38px;
  border-radius:0 999px 999px 0;
  border:1px solid rgba(0,0,0,.14);
  border-left:none;
  background:rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.tp-search-btn:hover{ background:rgba(255,255,255,.9); }
.tp-search-poweredby{ text-align:center; }

/* Responsive width adjustment (TOP-LEVEL) */
@media (max-width: 768px){
  .tp-search-glass{
    width:80vw;
    max-width:none;
  }
}

@media (max-width: 420px){
  .tp-search-glass{
    width:85vw;
  }
}


/* Small screens (phones + small tablets) */
@media (max-width: 767px){
  .tp-search-glass{
    width:80vw;          /* 80% of viewport width */
    max-width:none;      /* remove 520px cap */
  }
}

/* Very small screens (extra narrow portrait phones) */
@media (max-width: 420px){
  .tp-search-glass{
    width:85vw;          /* slight bump for usability */
  }
}
  

.tp-search-title{ margin:0 0 .35rem; text-align:center; }
.tp-search-box{ width:100%; }
.tp-search-box form{
  display:flex;
  align-items:center;
  width:100%;
  gap:0;
}
.tp-search-input{
  flex:1 1 auto;
  min-width:0;
  height:38px;
  border-radius:999px 0 0 999px;
  border:1px solid rgba(0,0,0,.14);
  border-right:none;
  background:rgba(255,255,255,.82);
  padding:0 1.35rem;
  font-size:.95rem;
  outline:none;
}
.tp-search-input:focus{
  border-color: rgba(0,0,0,.22);
  box-shadow:0 0 0 3px rgba(0,0,0,.06);
}
.tp-search-btn{
  width:42px;
  min-width:42px;
  height:38px;
  border-radius:0 999px 999px 0;
  border:1px solid rgba(0,0,0,.14);
  border-left:none;
  background:rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.tp-search-btn:hover{ background:rgba(255,255,255,.9); }
.tp-search-poweredby{ text-align:center; }

/* --------------------------
   TicketNetwork Results Widget tweaks
-------------------------- */
.tner-btn:hover,
.tner-row:hover .tner-btn{ background-color:#13c548 !important; }
.tner-container .tner-block{ border-radius:2px !important; }
.tner-day-full{ display:none; }
.tner-month-num,
.tner-month-full{ display:none; }
.tner-year-full{ display:block; }


/* =========================================================
   SEARCH WIDGET — HARDENED iPhone anti-bloat pack
   Put at VERY BOTTOM of tixpick-widgets.css
========================================================= */

/* 1) Kill horizontal overflow in the widget area */
.tns3-widget,
.tns3-widget *{
  box-sizing: border-box !important;
}

/* 2) Never allow the widget to exceed the visible viewport width */
.tns3-widget.tp-search-glass,
.tp-search-glass{
  width: min(400px, calc(100% - 24px), calc(100vw - 24px)) !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  overflow: clip !important;       /* stronger than hidden (supported in modern Safari) */
  overflow-x: clip !important;
}

/* fallback for older Safari */
@supports not (overflow: clip){
  .tns3-widget.tp-search-glass,
  .tp-search-glass{ overflow-x: hidden !important; }
}

/* 3) Lock the input row so the icon can never be pushed off-screen */
.tp-search-box,
.tp-search-box form{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.tp-search-box form{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* KEY: without min-width:0, iOS can let the input overflow its flex container */
.tp-search-input{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 16px !important;      /* prevents iOS zoom-on-focus */
  line-height: 1.2 !important;
}

/* Keep the button pinned */
.tp-search-btn{
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
}

/* 4) Prevent iOS “text size adjust” from resizing on focus/rotate */
html{
  -webkit-text-size-adjust: 100%;
}

/* iPhone Landscape: keep search input + icon on ONE line */
@media (min-width: 481px) and (max-width: 736px){

  /* keep the whole search module constrained */
  .tns3-widget.tp-search-glass,
  .tp-search-glass{
    width: min(500px, calc(100vw - 24px)) !important;
    max-width: 500px !important;
  }

  /* force the row layout and forbid wrapping */
  .tns3-widget.tp-search-glass .tp-search-box form,
  .tp-search-glass .tp-search-box form{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
  }

  /* make the input shrink (Safari/iOS flex fix) */
  .tns3-widget.tp-search-glass .tp-search-input,
  .tp-search-glass .tp-search-input{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 1% !important;              /* critical for iOS */
    max-width: none !important;
  }

  /* hit ANY button used as the icon, even if class differs */
  .tns3-widget.tp-search-glass .tp-search-box form button,
  .tp-search-glass .tp-search-box form button{
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}