/*
 * widget.css — Self-contained styles for the TripGoGo B2B embedded widget.
 *
 * No Tailwind, no external dependencies beyond MapLibre's own CSS (loaded
 * conditionally in widget_base.html). All colour values reference CSS custom
 * properties injected by widget_base.html from the tenant WidgetConfig.
 *
 * Naming: every class is prefixed "widget-" to avoid collisions when the
 * host page's stylesheet leaks through (unusual but possible in some iframe
 * sandbox configurations).
 *
 * Layout: single-column on mobile; map + itinerary side-by-side at 768 px+.
 */

/* ── Custom property fallbacks ─────────────────────────────────────────────
   widget_base.html injects :root { --widget-primary: ...; } from the tenant
   config. These fallbacks kick in only when config is None (e.g. error pages
   that extend widget_base without a live config context).
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --widget-primary: #186966;
  --widget-accent: #ffb000;
  --widget-secondary: #e85d33;

  /* Derived UI tokens */
  --widget-primary-dark: color-mix(in srgb, var(--widget-primary) 80%, black);
  --widget-bg: #ffffff;
  --widget-surface: #f7f8fa;
  --widget-border: #e2e5ea;
  --widget-text: #1a1a2e;
  --widget-text-muted: #6b7280;
  --widget-radius: 10px;
  --widget-radius-sm: 6px;
  --widget-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --widget-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --widget-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --widget-transition: 150ms ease;
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --widget-bg: #0f1117;
  --widget-surface: #1a1d27;
  --widget-border: #2d3042;
  --widget-text: #f0f1f5;
  --widget-text-muted: #9ba3b2;
  --widget-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --widget-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ── Preview-mode ribbon (for-business portal only, see widget_base.html) ── */

.widget-preview-ribbon {
  background: var(--widget-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  padding: 6px 10px;
}

.widget-preview-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--widget-text-muted);
  text-align: center;
}

/* ── AI Act Art. 50 disclosure (always rendered, see widget_base.html) ───── */

.widget-ai-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--widget-text-muted);
  background: var(--widget-surface);
  border-bottom: 1px solid var(--widget-border);
}

.widget-ai-notice i {
  /* Nudge the glyph onto the first line's baseline without shifting the text. */
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Reset / base ───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--widget-bg);
  color: var(--widget-text);
  font-family: var(--widget-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--widget-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Brand header ──────────────────────────────────────────────────────── */

.widget-brand-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--widget-surface);
  border-bottom: 1px solid var(--widget-border);
  min-height: 48px;
}

.widget-brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.widget-brand-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--widget-primary);
}

/* ── Main content area ─────────────────────────────────────────────────── */

.widget-main {
  padding: 16px;
}

/* ── Powered-by footer ─────────────────────────────────────────────────── */

.widget-powered-by {
  padding: 8px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--widget-text-muted);
  border-top: 1px solid var(--widget-border);
}

.widget-powered-by a {
  color: var(--widget-text-muted);
  font-weight: 500;
}

.widget-powered-by a:hover {
  color: var(--widget-primary);
  text-decoration: underline;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.widget-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--widget-radius-sm);
  font-family: var(--widget-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--widget-transition),
    opacity var(--widget-transition);
  text-align: center;
  white-space: nowrap;
}

.widget-btn--primary {
  background: var(--widget-primary);
  color: #ffffff;
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: 15px;
}

.widget-btn--primary:hover {
  background: var(--widget-primary-dark);
}

.widget-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.widget-btn--consent {
  background: var(--widget-surface);
  color: var(--widget-text-muted);
  border: 1px solid var(--widget-border);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
}

.widget-btn--consent:hover {
  background: var(--widget-border);
}

/* ── Builder form ───────────────────────────────────────────────────────── */

.widget-builder {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.widget-welcome-text {
  margin: 0;
  font-size: 15px;
  color: var(--widget-text-muted);
}

.widget-destination-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--widget-primary) 12%, transparent);
  color: var(--widget-primary);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  align-self: flex-start;
}

.widget-builder-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.widget-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.widget-field-row {
  display: flex;
  gap: 12px;
}

.widget-field--days {
  flex: 0 0 80px;
}

.widget-field--date {
  flex: 1;
}

.widget-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--widget-text);
}

.widget-label-optional {
  font-weight: 400;
  color: var(--widget-text-muted);
}

.widget-textarea,
.widget-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--widget-border);
  border-radius: var(--widget-radius-sm);
  background: var(--widget-bg);
  color: var(--widget-text);
  font-family: var(--widget-font);
  font-size: 14px;
  line-height: 1.5;
  transition:
    border-color var(--widget-transition),
    box-shadow var(--widget-transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.widget-textarea:focus,
.widget-input:focus {
  border-color: var(--widget-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--widget-primary) 20%, transparent);
}

.widget-textarea {
  resize: vertical;
  min-height: 90px;
}

/* ── Form errors ────────────────────────────────────────────────────────── */

.widget-form-errors {
  background: #fff1f1;
  border: 1px solid #fca5a5;
  border-radius: var(--widget-radius-sm);
  padding: 10px 14px;
}

.widget-form-error {
  margin: 0 0 4px;
  font-size: 13px;
  color: #b91c1c;
}

.widget-form-error:last-child {
  margin-bottom: 0;
}

[data-theme="dark"] .widget-form-errors {
  background: rgba(185, 28, 28, 0.15);
  border-color: rgba(185, 28, 28, 0.4);
}

[data-theme="dark"] .widget-form-error {
  color: #f87171;
}

/* ── Loading indicator ──────────────────────────────────────────────────── */

.widget-loading-indicator {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
  color: var(--widget-text-muted);
  font-size: 14px;
}

.widget-loading-indicator.htmx-request {
  display: flex;
}

/* Spinner used both in loading indicator and inline loading states */
.widget-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--widget-border);
  border-top-color: var(--widget-primary);
  border-radius: 50%;
  animation: widget-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes widget-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── GDPR consent notice ────────────────────────────────────────────────── */

.widget-consent-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--widget-surface);
  border: 1px solid var(--widget-border);
  border-radius: var(--widget-radius-sm);
  font-size: 12px;
  color: var(--widget-text-muted);
}

.widget-consent-notice p {
  margin: 0;
}

/* ── Trip detail page ───────────────────────────────────────────────────── */

.widget-trip-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.widget-trip-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--widget-text);
  line-height: 1.3;
}

/* ── Day tabs ───────────────────────────────────────────────────────────── */

.widget-day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
}

.widget-day-tab {
  padding: 6px 14px;
  border: 1px solid var(--widget-border);
  border-radius: 20px;
  background: var(--widget-bg);
  color: var(--widget-text-muted);
  font-family: var(--widget-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--widget-transition),
    border-color var(--widget-transition),
    color var(--widget-transition);
}

.widget-day-tab:hover {
  border-color: var(--widget-primary);
  color: var(--widget-primary);
}

.widget-day-tab--active,
.widget-day-tab[aria-selected="true"] {
  background: var(--widget-primary);
  border-color: var(--widget-primary);
  color: #ffffff;
}

/* ── Content area (map + itinerary) ─────────────────────────────────────── */

.widget-content-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Map panel ──────────────────────────────────────────────────────────── */

.widget-map-panel {
  width: 100%;
}

.widget-map-container {
  width: 100%;
  border-radius: var(--widget-radius);
  overflow: hidden;
  border: 1px solid var(--widget-border);
}

.widget-map {
  width: 100%;
  height: 280px;
}

.widget-map-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  color: var(--widget-text-muted);
  font-size: 14px;
  height: 280px;
  justify-content: center;
}

/* ── Itinerary panel ────────────────────────────────────────────────────── */

.widget-itinerary-panel {
  flex: 1;
  min-width: 0;
}

.widget-itinerary {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.widget-generating-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: var(--widget-text-muted);
  font-size: 14px;
}

/* ── Day items list ─────────────────────────────────────────────────────── */

.widget-day-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--widget-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--widget-border);
  margin-bottom: 4px;
}

.widget-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.widget-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--widget-surface);
  border: 1px solid var(--widget-border);
  border-radius: var(--widget-radius);
  box-shadow: var(--widget-shadow);
  transition: box-shadow var(--widget-transition);
}

.widget-item:hover {
  box-shadow: var(--widget-shadow-md);
}

.widget-item-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 42px;
  padding-top: 2px;
}

.widget-item-time-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--widget-primary);
  white-space: nowrap;
}

.widget-item-time-sep {
  font-size: 11px;
  color: var(--widget-text-muted);
}

.widget-item-body {
  flex: 1;
  min-width: 0;
}

.widget-item-type {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--widget-text);
}

.widget-item-location {
  margin: 0 0 2px;
  font-size: 13px;
  color: var(--widget-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.widget-item-address {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--widget-text-muted);
}

.widget-item-notes {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--widget-text-muted);
  line-height: 1.4;
}

.widget-empty-day {
  padding: 20px 0;
  text-align: center;
  color: var(--widget-text-muted);
  font-size: 14px;
}

/*
 * ── Hide main-app interactive chrome when main-app partials are re-used ──
 *
 * The widget uses its own lean _day_items.html for item rendering and does NOT
 * reuse _itinerary_item.html. These rules are here as a safety net in case a
 * future itinerary partial is shared. Class names verified against
 * trips/templates/trips/partials/_itinerary_item.html.
 */

.widget-itinerary .add-item-btn,
.widget-itinerary .add-item-btn-before,
.widget-itinerary .add-item-btn-after,
.widget-itinerary .itinerary-delete-btn,
.widget-itinerary .itinerary-drag-handle,
.widget-itinerary .itinerary-info-btn,
.widget-itinerary .itinerary-time-pill--editable,
.widget-itinerary .tile-book-btn,
.widget-itinerary .tile-manage-btn,
.widget-itinerary .tile-manage-menu,
.widget-itinerary .tile-secondary,
.widget-itinerary .tile-change-btn,
.widget-itinerary .tile-map-btn,
.widget-itinerary .reactions-and-chat,
.widget-itinerary .item-chat-btn,
.widget-itinerary .item-chat-container,
.widget-itinerary .suggestions-container,
.widget-itinerary .day-add-menu,
.widget-itinerary .itinerary-photo-lazy,
.widget-itinerary .provider-logo-badges,
.widget-itinerary .tile-price-line {
  display: none !important;
}

/*
 * ── Streamed items (SSE, during generation) ─────────────────────────────
 *
 * While generating, the widget appends the main app's streaming partial
 * (itinerary_stream_item.html → _itinerary_item.html), which uses
 * itinerary-* / activity-* classes that only the main app's Tailwind-era
 * CSS styles. Give that markup the same card treatment as the widget's
 * own .widget-item so mid-stream and final items look alike. The block
 * above hides the interactive chrome; this one styles what remains.
 */

.widget-itinerary .itinerary-date-section {
  margin-top: 8px;
}

.widget-itinerary .itinerary-date-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--widget-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--widget-border);
  margin-bottom: 4px;
}

.widget-itinerary .day-header-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.widget-itinerary .itinerary-item-wrapper {
  /* No bottom margin: the routing connector sits directly beneath each item and
     supplies its own spacing, so 10px here just pushed the travel pill away
     from the stop it belongs to. The last item's spacing comes from the day
     section instead. */
  margin-bottom: 0;
}

.widget-itinerary .itinerary-item {
  padding: 12px;
  background: var(--widget-surface);
  border: 1px solid var(--widget-border);
  border-radius: var(--widget-radius);
  box-shadow: var(--widget-shadow);
}

.widget-itinerary .itinerary-header-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.widget-itinerary .itinerary-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--widget-primary);
  white-space: nowrap;
}

.widget-itinerary .itinerary-number-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--widget-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.widget-itinerary .activity-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--widget-text);
}

.widget-itinerary .location-name {
  margin: 0 0 2px;
  font-size: 13px;
  color: var(--widget-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.widget-itinerary .location-address {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--widget-text-muted);
}

.widget-itinerary .activity-notes {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--widget-text-muted);
  line-height: 1.4;
}

/* ── Responsive: 768px+ → map + itinerary side by side ──────────────────── */

@media (min-width: 768px) {
  .widget-content-area--with-map {
    flex-direction: row;
    align-items: flex-start;
  }

  .widget-content-area--with-map .widget-map-panel {
    /* Even split with the itinerary rather than a fixed 320px column. At the
       embed widths partners actually use, a fixed column left the map narrow
       and the itinerary sprawling; a share keeps both readable as the panel
       grows. min-width:0 because a flex item defaults to min-content, and the
       map's own children would otherwise refuse to shrink below 320px and
       break the split. */
    flex: 1 1 0;
    min-width: 0;
    position: sticky;
    top: 0;
  }

  .widget-content-area--with-map .widget-map {
    height: 480px;
  }

  .widget-content-area--with-map .widget-map-loading {
    height: 480px;
  }

  .widget-content-area--with-map .widget-itinerary-panel {
    flex: 1 1 0;
    min-width: 0;
  }

  .widget-map-container {
    border-radius: var(--widget-radius);
  }
}

/* ── Powered-by TG4B logo ──────────────────────────────────────────────── */

.widget-powered-by-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.widget-powered-by-logo {
  height: 14px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* ── Supply item "Add to Cart" button ─────────────────────────────────── */

.widget-item--has-supply {
  position: relative;
}

/* One fixed-height band along the bottom of a tile for everything actionable:
   add-to-cart left, heart and votes pushed hard right. Every control centres
   in the same 36px regardless of which of the three flags put it there, so a
   bookable stop and a plain one carry their buttons identically. Lives here
   and not in accounts.css/group.css because those load only with their flag,
   and this row can exist with any one of the three. */
/* The row is a full-width flex child of the card, so the card must wrap.
   Declared here and not only in group.css because that file loads only for
   group-flag tenants and this row exists with accounts or supply alone. */
.widget-place,
.widget-item {
  flex-wrap: wrap;
}

.widget-item-body,
.widget-place-open {
  min-width: 0;
}

.widget-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-basis: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 8px;
}

/* Inside the row the supply block is a horizontal plus-then-price pair, not
   the old stacked column that set the tile's height. */
.widget-card-actions .widget-place-supply,
.widget-card-actions .widget-item-supply-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}

/* First of the right-aligned cluster. The heart renders before the votes, and
   either can be absent, so push on whichever comes first. */
.widget-card-actions .widget-place-save,
.widget-card-actions .widget-place-supply + .widget-vote,
.widget-card-actions > .widget-vote:first-child {
  margin-left: auto;
}

.widget-card-actions .widget-place-save {
  align-self: center;
}

.widget-item-supply-action {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.widget-supply-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--widget-primary, #186966);
  background: transparent;
  color: var(--widget-primary, #186966);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.widget-supply-add-btn:hover {
  background: var(--widget-primary, #186966);
  color: #fff;
}

.widget-supply-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--widget-primary, #186966);
}