/* ═══════════════════════════════════════════════════════════════
   TSi Slide-Out Contact Form v1.2 — Plugin Styles

   ARCHITECTURE CHANGE: The panel is now position:absolute so it
   is removed from flow. The bar sizes ONLY to the tab. The panel
   floats beside it without affecting the bar's height.
   ═══════════════════════════════════════════════════════════════ */

/* ── Bar Container ──
   The bar is a positioning anchor. Its height = tab height only. */
.tsi-sc-bar {
  position: fixed !important;
  z-index: 2147483647 !important;
  display: block !important;
  font-family: 'Barlow', sans-serif !important;
  box-sizing: border-box !important;
  right: 0 !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
  clear: none !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  line-height: normal !important;
}
.tsi-sc-bar *,
.tsi-sc-bar *::before,
.tsi-sc-bar *::after {
  box-sizing: border-box !important;
}


/* ════════════════════════════════════════════
   TAB BUTTON — the only in-flow child
   ════════════════════════════════════════════ */
.tsi-sc-tab {
  background: var(--tsi-sc-tab, #1B5EA6) !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.8rem 0.6rem !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  box-shadow: -3px 0 16px rgba(0,0,0,0.25) !important;
  transition: background 0.2s !important;
  height: 180px !important;
  min-height: 0 !important;
  max-height: 220px !important;
  outline: none !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  line-height: normal !important;
}

/* Right side: tab rounded on left */
.tsi-sc-bar[data-side="right"] .tsi-sc-tab {
  border-radius: 6px 0 0 6px !important;
}
/* Left side: tab rounded on right */
.tsi-sc-bar[data-side="left"] .tsi-sc-tab {
  border-radius: 0 6px 6px 0 !important;
  box-shadow: 3px 0 16px rgba(0,0,0,0.25) !important;
}

.tsi-sc-tab:hover {
  filter: brightness(1.15) !important;
}
.tsi-sc-tab:focus-visible {
  outline: 2px solid white !important;
  outline-offset: -2px !important;
}

.tsi-sc-tab.do-pulse {
  animation: tsiScTabPulse 1s ease-out forwards !important;
}
@keyframes tsiScTabPulse {
  0%   { box-shadow: -3px 0 16px rgba(0,0,0,0.25); }
  40%  { box-shadow: -3px 0 28px rgba(27,94,166,0.85), 0 0 0 8px rgba(27,94,166,0.25); }
  100% { box-shadow: -3px 0 16px rgba(0,0,0,0.25); }
}

/* Tab text */
.tsi-sc-tab-text {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.0rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transform: rotate(180deg) !important;
  white-space: nowrap !important;
}

/* Tab arrows */
.tsi-sc-tab-arrow {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  writing-mode: horizontal-tb !important;
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  opacity: 0.75 !important;
  line-height: 1 !important;
  transition: opacity 0.3s, transform 0.35s ease !important;
}
.tsi-sc-tab-arrow.top {
  top: 0.6rem !important;
  transform: translateX(-50%) rotate(0deg) !important;
}
.tsi-sc-tab-arrow.bot {
  bottom: 0.6rem !important;
  transform: translateX(-50%) rotate(0deg) !important;
}
.tsi-sc-bar.open .tsi-sc-tab-arrow.top {
  transform: translateX(-50%) rotate(180deg) !important;
  opacity: 1 !important;
}
.tsi-sc-bar.open .tsi-sc-tab-arrow.bot {
  transform: translateX(-50%) rotate(180deg) !important;
  opacity: 1 !important;
}


/* ════════════════════════════════════════════
   PANEL — position:absolute, OUT OF FLOW
   Cannot affect the bar's height at all.
   ════════════════════════════════════════════ */
.tsi-sc-panel {
  position: absolute !important;
  top: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #1a2228 !important;
  box-shadow: -6px 0 32px rgba(0,0,0,0.35) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 70vh !important;
  height: auto !important;
  border-radius: 6px !important;
  z-index: 10 !important;
}

/* Right side: panel opens to the left of the tab */
.tsi-sc-bar[data-side="right"] .tsi-sc-panel {
  right: 100% !important;
  left: auto !important;
  border-right: 3px solid var(--tsi-sc-accent, #3a7d44) !important;
  border-left: none !important;
  border-radius: 6px 0 0 6px !important;
}
/* Left side: panel opens to the right of the tab */
.tsi-sc-bar[data-side="left"] .tsi-sc-panel {
  left: 100% !important;
  right: auto !important;
  border-left: 3px solid var(--tsi-sc-accent, #3a7d44) !important;
  border-right: none !important;
  box-shadow: 6px 0 32px rgba(0,0,0,0.35) !important;
  border-radius: 0 6px 6px 0 !important;
}

.tsi-sc-bar.open .tsi-sc-panel {
  width: 320px !important;
}

.tsi-sc-panel-inner {
  width: 320px !important;
  padding: 1.2rem 1.2rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  height: auto !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
}


/* ════════════════════════════════════════════
   PANEL CONTENT
   ════════════════════════════════════════════ */

/* ── Header ── */
.tsi-sc-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.tsi-sc-header svg { flex-shrink: 0 !important; }
.tsi-sc-header-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: white !important;
}
.tsi-sc-header-status {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.5) !important;
}
.tsi-sc-status-dot {
  width: 7px !important;
  height: 7px !important;
  background: var(--tsi-sc-accent, #4e9a59) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: tsiScPulse 2s ease infinite !important;
}
@keyframes tsiScPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}

/* ── Intro ── */
.tsi-sc-intro {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.45 !important;
}

/* ── Options ── */
.tsi-sc-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}
.tsi-sc-option {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.8) !important;
  padding: 0.5rem 0.8rem !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.85rem !important;
  text-align: left !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s !important;
  line-height: 1.4 !important;
}
.tsi-sc-option:hover,
.tsi-sc-option.selected {
  background: rgba(58,125,68,0.2) !important;
  border-color: var(--tsi-sc-accent, #3a7d44) !important;
  color: white !important;
}

/* ── Form ── */
.tsi-sc-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}
.tsi-sc-form-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--tsi-sc-accent, #4e9a59) !important;
}
.tsi-sc-textarea,
.tsi-sc-input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: white !important;
  padding: 0.65rem 0.8rem !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.86rem !important;
  border-radius: 3px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  resize: vertical !important;
}
.tsi-sc-textarea:focus,
.tsi-sc-input:focus { border-color: var(--tsi-sc-accent, #3a7d44) !important; }
.tsi-sc-textarea::placeholder,
.tsi-sc-input::placeholder { color: rgba(255,255,255,0.3) !important; }

/* ── Send Button ── */
.tsi-sc-send {
  background: var(--tsi-sc-accent, #3a7d44) !important;
  color: white !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  transition: filter 0.2s, opacity 0.2s !important;
  text-decoration: none !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}
.tsi-sc-send:hover { filter: brightness(1.15) !important; }
.tsi-sc-send.sending { opacity: 0.6 !important; pointer-events: none !important; }

/* ── Error ── */
.tsi-sc-error {
  font-size: 0.82rem !important;
  color: #e85454 !important;
  line-height: 1.4 !important;
}

/* ── Success ── */
.tsi-sc-success { text-align: center !important; padding: 1rem 0 !important; }
.tsi-sc-success-icon {
  width: 48px !important; height: 48px !important;
  background: var(--tsi-sc-accent, #3a7d44) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.4rem !important;
  color: white !important;
  margin: 0 auto 0.8rem !important;
}
.tsi-sc-success p {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.55 !important;
}

/* ── Footer ── */
.tsi-sc-footer {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding-top: 0.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.35) !important;
}
.tsi-sc-footer a {
  color: var(--tsi-sc-accent, #4e9a59) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.tsi-sc-footer a:hover { color: white !important; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .tsi-sc-bar { display: none !important; }
}