:root{
  --tbw-bg: var(--tbw-bg, rgba(255,255,255,0.92));
  --tbw-radius: var(--tbw-radius, 18px);
  --tbw-shadow: 0 14px 34px rgba(16, 24, 40, 0.18);

  --tbw-accent: var(--wp--preset--color--primary, var(--tbw-accent-fallback, #2563eb));
  --tbw-text: var(--wp--preset--color--contrast, rgba(255,255,255,0.92));
  --tbw-muted: rgba(255,255,255,0.75);
  --tbw-pill-bg: rgba(255,255,255,0.16);
  --tbw-pill-bg-hover: rgba(255,255,255,0.22);
  --tbw-pill-bg-open: rgba(255,255,255,0.26);
  --tbw-pop-bg: rgba(255,255,255,0.92);
  --tbw-pop-text: rgba(15, 23, 42, 0.92);

  --tbw-mobile-bp: var(--tbw-mobile-bp, 640px);
}

.tbw{ width:100%; font-family: inherit; box-sizing: border-box; }
.tbw *, .tbw *::before, .tbw *::after{ box-sizing: border-box; }

/* Desktop-only option using var breakpoint */
@media (max-width: var(--tbw-mobile-bp)){
  .tbw--desktopOnly{ display:none !important; }
}

/* BAR */
.tbw__bar{
  position: relative;
  overflow: visible;
  display:flex;
  align-items: stretch;
  gap: 14px;
  width: min(1100px, 100%);
  padding: 12px;
  border-radius: calc(var(--tbw-radius) + 8px);
  background: var(--tbw-bg);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: var(--tbw-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* PILL */
.tbw__pill{
  position: relative;
  flex: 1 1 0;
  min-width: 220px;
  z-index: 1;
}
.tbw__pill.is-open{ z-index: 30; }

.tbw__pillBtn{
  width: 100%;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: var(--tbw-pill-bg);
  border-radius: 16px;
  padding: 10px 12px;
  cursor:pointer;
  color: var(--tbw-text);
  text-align: left;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
  user-select: none;
}

.tbw__pillBtn:hover{ background: var(--tbw-pill-bg-hover); }
.tbw__pill.is-open .tbw__pillBtn{ background: var(--tbw-pill-bg-open); border-color: rgba(255,255,255,0.35); }

.tbw__pillIcon{ font-size: 16px; opacity: 0.95; }
.tbw__pillLabel{ font-size: 13px; font-weight: 650; letter-spacing: -0.01em; color: var(--tbw-muted); min-width: 64px; }
.tbw__pillValue{ font-size: 14px; font-weight: 750; letter-spacing: -0.01em; color: var(--tbw-text); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

/* POP */
.tbw__pop{
  pointer-events: auto;
  position:absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 2000;
  width: min(560px, 92vw);
  padding: 12px;
  background: var(--tbw-pop-bg);
  color: var(--tbw-pop-text);
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 18px 38px rgba(15,23,42,0.18);
  display:none;
}
.tbw__pill.is-open .tbw__pop{
  pointer-events: auto; display:block; }

.tbw__popRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tbw__pop label span{ display:block; font-size: 12px; font-weight: 650; color: rgba(15,23,42,0.65); margin-bottom: 6px; }

.tbw__pop input[type="date"],
.tbw__pop input[type="number"]{
  width:100%;
  border:1px solid rgba(15,23,42,0.14);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline:none;
  background: #fff;
  color: rgba(15,23,42,0.92);
}
.tbw__pop input:focus{
  border-color: color-mix(in srgb, var(--tbw-accent) 55%, rgba(15,23,42,0.14));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tbw-accent) 18%, transparent);
}

.tbw__popActions{ margin-top: 12px; display:flex; justify-content:flex-end; }
.tbw__popClose{ border: 0; border-radius: 12px; padding: 10px 12px; font-weight: 750; cursor:pointer; background: rgba(15,23,42,0.08); color: rgba(15,23,42,0.85); }

/* GUESTS */
.tbw__guestRow{ display:flex; justify-content: space-between; align-items:center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(15,23,42,0.08); }
.tbw__guestRow:last-child{ border-bottom: 0; }
.tbw__guestTitle{ font-weight: 800; }
.tbw__guestSub{ font-size: 12px; color: rgba(15,23,42,0.55); margin-top: 2px; }

.tbw__stepper{ display:grid; grid-template-columns: 40px 56px 40px; gap: 8px; align-items:center; }
.tbw__stepper input{ text-align:center; }
.tbw__step{ height: 40px; width: 40px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.14); background: #fff; cursor:pointer; font-size: 18px; line-height: 1; }

/* CATEGORY */
.tbw__catGrid{ display:flex; flex-wrap:wrap; gap: 8px; }
.tbw__catBtn{ border:1px solid rgba(15,23,42,0.14); background: #fff; border-radius: 999px; padding: 10px 12px; cursor:pointer; font-weight: 750; white-space: nowrap; }
.tbw__catBtn.is-active{ border-color: color-mix(in srgb, var(--tbw-accent) 55%, rgba(15,23,42,0.14)); background: color-mix(in srgb, var(--tbw-accent) 10%, #fff); }

/* SUBMIT — lås den längst till höger på desktop */
.tbw__submit{
  margin-left: auto;          /* <-- FIX: alltid till höger när det finns plats */
  flex: 0 0 auto;
  height: 54px;
  min-width: 170px;
  border: 0;
  border-radius: 16px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 850;
  cursor:pointer;
  background: var(--tbw-accent);
  color: #fff;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--tbw-accent) 28%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
}
.tbw__submit:hover{ filter: brightness(0.98); }
.tbw__submit:active{ transform: translateY(1px); }

/* RESPONSIVE */
@media (max-width: 980px){
  .tbw__bar{ flex-wrap: wrap; gap: 10px; }
  .tbw__pill{ min-width: 260px; flex: 1 1 260px; }
  .tbw__submit{ width: 100%; margin-left: 0; } /* på wrap -> fullbredd */
}

@media (max-width: 540px){
  .tbw__bar{ padding: 8px; border-radius: calc(var(--tbw-radius) + 6px); }
  .tbw__pill{ min-width: 100%; }
  .tbw__pillBtn{ height: 52px; border-radius: 14px; }
  .tbw__pop{
  pointer-events: auto; position: fixed; left: 50%; transform: translateX(-50%); right: auto; top: auto; bottom: 14px; width: calc(100vw - 24px); max-width: 560px; max-height: 72vh; overflow: auto; }
  .tbw__popRow{ grid-template-columns: 1fr; }
  .tbw__submit{ height: 52px; border-radius: 14px; }

  /* FIX: kategori-alternativ anpassar sig till skärmen */
  .tbw__catGrid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .tbw__catBtn{
    width: 100%;
    text-align: center;
    padding: 10px 6px;
    font-size: 14px;
    white-space: normal; /* låt det bryta rad vid behov */
  }
}

/* Transparent bg */
.tbw__bar[style*="--tbw-bg:transparent"],
:root[style*="--tbw-bg:transparent"] .tbw__bar{
  background: transparent;
  border-color: rgba(255,255,255,0.18);
}