/*
 * Tooka Studio - booking page styles (lightbox, gallery, coupon row, submit messages).
 *
 * Served by the plugin as a real .css file for the same reason the JS is: an inline
 * <style> block pasted into the page builder is not reliable. Keep this file as the
 * single source of truth for these styles.
 *
 * Layout notes: the media viewer uses ABSOLUTE positioning for the close button and the
 * prev/next arrows rather than a flex column with dvh sizing. The old flex+dvh version
 * collapsed on some browsers and pushed the controls off-screen. Here the backdrop is a
 * simple fixed full-screen flex centre, the media is capped with vh (dvh only as a
 * progressive upgrade), and the controls float on top - so nothing can push anything
 * out of view.
 */

/* ---------- media viewer (lightbox) ---------- */
#ts-lightbox {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, .92);
  box-sizing: border-box;
  padding: 64px 16px;
  overflow: hidden;
}

#ts-lightbox.ts-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#ts-lightbox * { box-sizing: border-box; }

#ts-lightbox .ts-lb-shell {
  position: static; /* keep the absolute controls anchored to the full-screen backdrop,
                       not to the image box, so they can never be pushed off-screen */
  width: 100%;
  max-width: 1240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The media itself.
 *
 * The !important flags are load-bearing: something in the site/theme CSS hides these
 * elements (the very first version of this lightbox needed the same overrides). An
 * inline style set from JS would lose to a theme rule marked !important, so visibility
 * is driven by classes on #ts-lightbox instead - see .ts-show-img / .ts-show-video.
 *
 * vh first so every browser gets a correct cap; dvh layered on after as an upgrade.
 */
#ts-lightbox #ts-lb-img,
#ts-lightbox #ts-lb-video {
  max-width: 100% !important;
  max-height: 78vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
}

@supports (max-height: 1dvh) {
  #ts-lightbox #ts-lb-img,
  #ts-lightbox #ts-lb-video {
    max-height: calc(100dvh - 140px) !important;
  }
}

/* Which element is visible is decided by a class on the backdrop, so these rules can
   carry !important and beat any theme rule that would otherwise hide them. */
#ts-lightbox #ts-lb-img,
#ts-lightbox #ts-lb-video { display: none !important; }

#ts-lightbox.ts-show-img #ts-lb-img,
#ts-lightbox.ts-show-video #ts-lb-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Counter pinned top-left of the backdrop, never in the flow of the media. */
#ts-lightbox .ts-lb-counter {
  position: absolute;
  top: 20px;
  left: 22px;
  color: #fff;
  font: 600 14px/1 'DM Sans', system-ui, sans-serif;
  z-index: 3;
}

#ts-lightbox .ts-lb-top {
  position: static;
  display: contents;
}

#ts-lightbox .ts-lb-close,
#ts-lightbox .ts-lb-nav {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}

#ts-lightbox .ts-lb-close { top: 14px; right: 18px; }
#ts-lightbox .ts-lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
#ts-lightbox .ts-lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

#ts-lightbox .ts-lb-close:hover,
#ts-lightbox .ts-lb-nav:hover { background: rgba(255, 255, 255, .28); }

#ts-lightbox .ts-lb-icon {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* The frame/slider wrappers must not impose their own height, and must not be hidden
   by a theme rule either. */
#ts-lightbox .ts-lb-slider,
#ts-lightbox .ts-lb-frame {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-width: 0;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  #ts-lightbox { padding: 56px 8px; }
  #ts-lightbox .ts-lb-close { width: 42px; height: 42px; top: 10px; right: 10px; }
  #ts-lightbox .ts-lb-nav { width: 42px; height: 42px; background: rgba(0, 0, 0, .55); }
  #ts-lightbox .ts-lb-prev { left: 4px; }
  #ts-lightbox .ts-lb-next { right: 4px; }
  #ts-lightbox #ts-lb-img,
  #ts-lightbox #ts-lb-video { max-height: 68vh; }
}

/* ---------- hero video play badge ---------- */
.ts-gallery .ts-g-cell.ts-main { position: relative; cursor: pointer; }

.ts-hero-play-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ts-gallery .ts-g-cell { cursor: pointer; }

/* ---------- discount code row ---------- */
/* The theme gives .ts-b-inp a bottom margin; with align-items:stretch that made the
   button taller than the field and pushed its label around. Zero the margin here and
   give the button a real size of its own. */
.ts-coupon-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}

.ts-coupon-row .ts-b-inp {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}

.ts-coupon-apply-btn {
  flex: 0 0 auto;
  min-width: 96px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 !important;
}

.ts-coupon-apply-btn:hover { opacity: .85; }
.ts-coupon-apply-btn:disabled { opacity: .5; cursor: default; }

.ts-coupon-msg { font-size: 12.5px; margin: 0 0 8px; min-height: 1em; }
.ts-coupon-msg.ts-coupon-ok { color: #1f9d55; font-weight: 600; }
.ts-coupon-msg.ts-coupon-bad { color: #d92d20; font-weight: 600; }

/* ---------- date fields ---------- */
/* Signals that the whole field is clickable, not only the calendar glyph. */
.ts-booking-form input[type="date"],
#ts-extra-slots input[type="date"] {
  cursor: pointer;
}

.ts-booking-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* ---------- add-ons: collapsible categories with large photos ---------- */
/* The old tiny thumbnails made it impossible to tell items apart, so each category is
   now a set of proper photo cards. These use their own ts-ao-* class names rather than
   the theme's .ts-addon-card, so nothing in the theme can restyle (or hide) them. */

/* Three tabs in a row: Backdrops / Furniture / Lighting. Clicking one swaps the items
   grid below it - only one category's items are in the DOM at a time. */
.ts-ao-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 4px 0 28px !important;
}

/* !important throughout: something in the theme's own button styling was beating
   these rules at equal or higher specificity, which is why the padding increase was
   not visible even after the new CSS shipped. This forces it regardless of what the
   theme does elsewhere. */
.ts-ao-tab {
  flex: 1 1 0 !important;
  min-width: 110px !important;
  padding: 24px 18px !important;
  border: 1.5px solid #e6e3de !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: #111 !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ts-ao-tab:hover { border-color: #c9c5bd; }

.ts-ao-tab.ts-active {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

.ts-ao-tab-count {
  font-weight: 500;
  opacity: .75;
  font-size: 13px;
  margin-left: 4px;
}

/* Items for the active category wrap onto new lines like an ordinary grid - deliberately
   NOT a horizontal-scrolling flex row. A fixed-width flex row previously stretched the
   entire page sideways on some layouts (Elementor's flex containers do not always give
   a bounded width to descendants), and a wrapping grid cannot do that: every column
   uses minmax(0, 1fr), so tracks shrink to fit instead of forcing the page wider. */
.ts-ao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  min-width: 0;
}

@media (max-width: 560px) {
  .ts-ao-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.ts-ao-card {
  position: relative;
  min-width: 0;
  border: 1.5px solid #e6e3de;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ts-ao-card:hover {
  border-color: #c9c5bd;
}

.ts-ao-card.ts-sel {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}

/* Big enough to actually recognise the item. */
.ts-ao-photo {
  aspect-ratio: 1 / 1;
  background: #f3f1ee;
}

.ts-ao-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-ao-info {
  padding: 16px 20px 20px !important;
}

.ts-ao-name {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.ts-ao-price {
  font-size: 13px;
  margin-top: 6px;
}

/* Empty box until selected, then the yellow tick. */
.ts-ao-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1.5px solid #d8d5d0;
  background: rgba(255, 255, 255, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  z-index: 2;
}

.ts-ao-card.ts-sel .ts-ao-tick {
  background: #f5c518;
  border-color: #f5c518;
  color: #111;
}

/* Defensive: Elementor builds the page out of flex containers, and a flex child's
   default min-width is auto (its content size), not 0 - meaning a wide descendant can
   force its ancestor to grow instead of wrapping/scrolling internally, stretching the
   whole page sideways. Constraining the containers on this section's own path is cheap
   insurance against that regardless of which piece of content is wide. */
.ts-sec,
.ts-addons-grid,
.ts-ao-items {
  min-width: 0;
}

/* The panel list holds 20 items, so it scrolls internally - roughly five rows visible -
   instead of pushing the Request to Book button far down the page. */
.ts-addons-panel-list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: 8px;
  padding-right: 4px;
}

.ts-addons-panel-list::-webkit-scrollbar { width: 6px; }
.ts-addons-panel-list::-webkit-scrollbar-track { background: transparent; }
.ts-addons-panel-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .2);
  border-radius: 3px;
}

/* Panel rows stay on a single line: the compact name flexes, the price never wraps. */
.ts-addons-panel-list .ts-ar {
  align-items: center;
}

.ts-addons-panel-list .ts-ar-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-addons-panel-list .ts-ar-price {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Category labels inside the booking panel list. */
.ts-ao-panel-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 12px 0 4px;
}

.ts-ao-panel-head:first-child {
  margin-top: 2px;
}

/* Regular price, struck through, next to the FREE badge. */
.ts-addon-was {
  color: #9a9a9a;
  text-decoration: line-through;
  margin-right: 5px;
}

.ts-addon-free {
  color: #1f9d55;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---------- service type ---------- */
.ts-service-note {
  font-size: 12px;
  color: #8a6d1f;
  background: #fdf6e3;
  border-radius: 6px;
  padding: 7px 10px;
  margin: -2px 0 10px;
  line-height: 1.35;
}

/* ---------- mobile ordering ---------- */
/* On mobile the booking panel is moved (by JS) to sit directly under the studio-name
   block, above the description sections. It needs its own bottom spacing there, since
   it is no longer the last thing in the column. */
@media (max-width: 1024px) {
  .ts-layout .ts-booking-card { margin-bottom: 28px; }
}

/* ---------- submit feedback ---------- */
.ts-extra-slot-note { font-size: 11.5px; color: #888; margin: 2px 0 4px; }
.ts-submit-msg { font-size: 13px; margin-bottom: 6px; min-height: 1em; }
.ts-submit-msg.ts-submit-ok { color: #1f9d55; font-weight: 600; }
.ts-submit-msg.ts-submit-bad { color: #d92d20; font-weight: 600; }
.ts-book-btn[disabled] { opacity: .6; cursor: default; }