* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure [hidden] always wins over component display rules */
[hidden] { display: none !important; }

body {
  font-family: 'Inter', 'Google Sans', 'Segoe UI', Arial, sans-serif;
  background: #f0f0ff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 100%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

header .logo-img {
  height: 36px;
  width: auto;
  display: block;
}

header .tagline {
  font-size: 0.95rem;
  color: #9ca3af;
}

.container {
  width: 100%;
  max-width: 560px;
  margin: 36px auto 0;
  padding: 0 16px;
}

.seo-block {
  width: 100%;
  max-width: 560px;
  margin: 28px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}


.seo-accordion {
  background: #fff;
  border: 1px solid #e8e9f5;
  border-radius: 14px;
  overflow: hidden;
}
.seo-accordion summary {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #374151;
  margin: 0;
  padding: 16px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  user-select: none;
}
.seo-accordion summary::-webkit-details-marker { display: none; }
.seo-accordion summary::marker { display: none; }
.seo-accordion[open] > summary {
  border-bottom: 1px solid #e8e9f5;
}
.seo-chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.2s ease;
}
.seo-accordion[open] .seo-chevron {
  transform: rotate(180deg);
}
.seo-accordion__body {
  padding: 4px 0 8px;
}

.seo-block__subheading {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  color: #4b5563;
  margin: 0;
  padding: 12px 22px 6px;
}

.seo-block__body {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #6b7280;
  margin: 0;
  padding: 0 22px 14px;
}

.seo-block__body:last-child {
  padding-bottom: 10px;
}

@media (max-width: 600px) {
  .seo-block {
    padding: 0 12px;
  }
}

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  border: 1px solid #eeeff5;
  padding: 32px 28px 28px;
}

.card-heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.card h2 {
  font-size: 1.1rem;
  color: #374151;
  margin-bottom: 0;
  font-weight: 600;
}

.address-tip-btn {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid #c4c9fb;
  background: none;
  color: #a0a8f0;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.address-tip-btn:hover,
.address-tip-btn[aria-expanded="true"] {
  border-color: #6673f7;
  color: #6673f7;
  background: #eef0ff;
}

.address-tip {
  background: #eef0ff;
  border-left: 3px solid #6673f7;
  border-radius: 0 8px 8px 0;
  padding: 9px 13px;
  font-size: 0.82rem;
  color: #4b5563;
  margin-bottom: 16px;
  line-height: 1.55;
  animation: tipFadeIn 0.18s ease;
}
.address-tip[hidden] { display: none; }

@keyframes tipFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 22px;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-wrapper label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-wrapper input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  font-size: 0.97rem;
  color: #1e2433;
  outline: none;
  transition: border-color 0.2s;
  background: #fafbfc;
}

.input-wrapper input:focus {
  border-color: #6673f7;
  background: #fff;
}

/* ── Extra user slots ─────────────────────────────────────────────────────── */
#extra-users-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 0;
}

#extra-users-container:not(:empty) {
  margin-top: 18px;
  margin-bottom: 18px;
}

.extra-user-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: extraUserSlideIn 0.2s ease;
}

.extra-user-wrapper input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  font-size: 0.97rem;
  color: #1e2433;
  outline: none;
  transition: border-color 0.2s;
  background: #fafbfc;
  box-sizing: border-box;
}

.extra-user-wrapper input[type="text"]:focus {
  border-color: #6673f7;
  background: #fff;
}

@keyframes extraUserSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.extra-user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.extra-user-header label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.remove-user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.remove-user-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fff5f5;
}

.mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.mode-label {
  font-size: 0.8rem;
  color: #9ca3af;
  white-space: nowrap;
}

.mode-btns {
  display: flex;
  gap: 4px;
}

.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fafbfc;
  cursor: pointer;
  transition: all 0.18s;
  padding: 0;
}

.mode-btn:hover {
  border-color: #6673f7;
  background: #edeeff;
}

.mode-btn.active {
  border-color: #6673f7;
  background: #6673f7;
}

.mode-icon {
  height: 16px;
  width: auto;
  display: block;
  filter: brightness(0) saturate(100%) invert(43%) sepia(60%) saturate(600%) hue-rotate(210deg) brightness(90%);
}

.mode-btn.active .mode-icon {
  filter: brightness(0) invert(1);
}

.vibe-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  margin-top: 0;
  flex-wrap: wrap;
}

/* kept for potential script.js refs, but no longer visible in the card */
.vibe-label {
  display: none;
}

.vibe-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vibe-btn {
  padding: 8px 18px;
  border: 1.5px solid #c4b5fd;
  border-radius: 20px;
  background: #fff;
  color: #4c1d95;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(99,102,241,0.10);
}

.vibe-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #ede9fe;
}

.vibe-btn.active {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,0.30);
}

.meeting-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.meeting-time-label {
  font-size: 13px;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
}

.meeting-time-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meeting-time-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.meeting-time-btn.active {
  border-color: #6673f7;
  background: #6673f7;
  color: #fff;
}

.meeting-time-input {
  padding: 5px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  font-size: 13px;
  color: #444;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.meeting-time-input:focus,
.meeting-time-input.active {
  border-color: #6673f7;
}

.time-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.time-range-select {
  padding: 5px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  background: #fff;
  color: #374151;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.time-range-select:hover,
.time-range-select:focus {
  border-color: #6673f7;
}

.open-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.open-badge-now {
  background: #d1fae5;
  color: #065f46;
}

.open-badge-soon {
  background: #fef9c3;
  color: #854d0e;
}

.radius-badge {
  margin: 4px 0 10px;
  font-size: 0.8rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 6px;
}

.radius-badge-expand {
  color: #6673f7;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.radius-badge-expand:hover {
  color: #4f5de5;
}

.expand-prompt {
  margin: 16px 0 8px;
  padding: 16px 18px;
  background: #f0f0ff;
  border: 1.5px solid #dcdeff;
  border-radius: 14px;
  text-align: center;
}

.pill-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}

.pill-btn {
  padding: 5px 15px;
  border-radius: 20px;
  border: 1.5px solid #dcdeff;
  background: white;
  color: #6673f7;
  font-size: 0.81rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  white-space: nowrap;
}

.pill-btn:hover {
  background: #edeeff;
  border-color: #6673f7;
}

.pill-btn.active {
  background: #6673f7;
  color: white;
  border-color: #6673f7;
}

.something-different-btn {
  display: block;
  width: 100%;
  margin: 4px 0 14px;
  padding: 10px 0;
  background: none;
  border: 1.5px dashed #c4c9fb;
  border-radius: 12px;
  color: #6673f7;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.something-different-btn:hover {
  background: #edeeff;
  border-color: #6673f7;
  color: #4f5de5;
}

.expand-msg {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
}

.expand-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.expand-btn {
  padding: 7px 22px;
  border: none;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}

.expand-btn:active {
  transform: scale(0.96);
}

.expand-yes {
  background: #6673f7;
  color: #fff;
}

.expand-yes:hover {
  background: #4f5de5;
}

.expand-no {
  background: #fff;
  color: #6673f7;
  border: 1.5px solid #6673f7;
}

.expand-no:hover {
  background: #edeeff;
}

.flavor-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.flavor-btn {
  padding: 5px 13px;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  background: #fafbfc;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}

.flavor-btn:hover {
  border-color: #6673f7;
  color: #6673f7;
  background: #edeeff;
}

.flavor-btn.active {
  border-color: #6673f7;
  background: #6673f7;
  color: #fff;
}

.place-empty {
  font-size: 0.9rem;
  color: #9ca3af;
  font-style: italic;
  padding: 12px 0 4px;
  list-style: none;
}

.btn {
  width: 100%;
  padding: 13px;
  background: #6673f7;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.2px;
}

.btn:hover {
  background: #4f5de5;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  background: #c4c9fb;
  cursor: not-allowed;
}

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

.spinner {
  width: 28px;
  height: 28px;
  margin: 14px auto 0;
  border: 3px solid #dcdeff;
  border-top-color: #6673f7;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

#error-msg {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #f43f5e;
  min-height: 20px;
  text-align: center;
}

#map-section {
  width: 100%;
  max-width: 560px;
  margin: 24px auto 0;
  padding: 0 16px;
  display: none;
}

#midpoint-info {
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  border-bottom: 1px solid #f0f1f5;
}

.midpoint-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

#travel-times {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.travel-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #edeeff;
  border-radius: 20px;
  padding: 3px 10px 3px 6px;
  font-size: 0.8rem;
  color: #6b7280;
}

.travel-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6673f7;
  flex-shrink: 0;
}

.travel-chip strong {
  color: #4f5de5;
  font-weight: 600;
}

#midpoint-info .pin-icon {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
}

#midpoint-info .pin-icon-img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  display: block;
}

#midpoint-label {
  font-size: 0.93rem;
  color: #4b5563;
  font-weight: 500;
}

#map {
  width: 100%;
  height: 380px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

#map-static {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  overflow: hidden;
  background: #e8eaf0;
}
.map-static-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.map-pro-badge {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border: 1px solid #e8e9f5;
  border-radius: 50px;
  padding: 8px 14px 8px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #374151;
  white-space: nowrap;
}
.map-pro-badge svg {
  flex-shrink: 0;
  color: #6673f7;
}
.map-pro-badge-btn {
  background: #6673f7;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 4px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.map-pro-badge-btn:hover {
  background: #4f5de5;
}

#midpoint-actions-row {
  display: none;
  width: 100%;
  max-width: 560px;
  margin: 14px auto 0;
  padding: 0 16px;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

#share-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#adjust-midpoint-wrap {
  flex-shrink: 0;
}

.btn-adjust {
  background: none;
  border: none;
  color: #6673f7;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.btn-adjust:hover {
  color: #4f5de5;
}

.drag-hint {
  display: none;
  margin-top: 8px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #6b7280;
  font-weight: 500;
}

#find-places-wrap {
  display: none;
  width: 100%;
  max-width: 560px;
  margin: 24px auto 0;
  padding: 0 16px;
}

/* ── Find-places card ────────────────────────────────────────────── */
.find-places-card {
  background: #fff;
  border: 1px solid #eeeff5;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  padding: 28px 28px 22px;
  box-sizing: border-box;
  animation: findPlacesReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes findPlacesReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.find-places-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.find-places-step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35);
}

.find-places-card-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #3730a3;
  margin: 0 0 5px;
  line-height: 1.25;
}

.find-places-card-sub {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

.btn-places {
  background: #fff;
  color: #6673f7;
  border: 2px solid #6673f7;
  font-weight: 600;
  transition: background 0.18s, color 0.18s;
}

.btn-places:hover {
  background: #6673f7;
  color: #fff;
}

.btn-places:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #fff;
  color: #6673f7;
}

#places-section {
  width: 100%;
  max-width: 560px;
  margin: 20px auto 40px;
  padding: 0 16px;
  display: none;
}

.places-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}

.places-heading {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
  padding-left: 2px;
}

.places-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* History button (header, Pro-locked) */
.history-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: white;
  color: #9ca3af;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: not-allowed;
  white-space: nowrap;
}

/* Sign In button */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.signin-btn {
  margin-left: 0;
  background: white;
  color: #6673f7;
  border: 1.5px solid #6673f7;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.signin-btn:hover {
  background: #6673f7;
  color: white;
}

/* Pro locked feature buttons */
.pro-feature-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3f4f6;
  color: #9ca3af;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pro-feature-btn--unlocked {
  background: #f0f0ff;
  color: #6673f7;
  border-color: #c7cbfc;
  cursor: pointer;
}
.pro-feature-btn--unlocked:hover {
  background: #e6e8ff;
}
.pro-lock {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.pro-lock svg {
  width: 11px;
  height: 11px;
}
.pro-feature-btn--block {
  width: 100%;
  justify-content: center;
  border-radius: 50px;
  padding: 10px 16px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

/* Send invite button (per place card) */
.place-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #6673f7;
  color: white;
  border: none;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.place-invite-btn:hover {
  background: #4f5de5;
}

/* Saved address chips */
.saved-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 4px;
  flex-wrap: wrap;
}
.saved-chip {
  display: inline-flex;
  align-items: center;
  background: #f3f4f6;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: not-allowed;
  white-space: nowrap;
}
.saved-chip--add {
  border-style: dashed;
}

/* Save place button (per card) */
.place-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 0.82rem;
  color: #9ca3af;
  cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.place-save-btn--saved {
  background: #fff0f5;
  color: #e11d48;
  border-color: #fda4af;
}
.save-lock {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.save-lock svg {
  width: 10px;
  height: 10px;
}

.gmaps-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1.5px solid #6673f7;
  border-radius: 999px;
  background: none;
  color: #6673f7;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.gmaps-btn:hover {
  background: #6673f7;
  color: #fff;
}

.share-wrap {
  position: relative;
  flex-shrink: 0;
}

.share-btn {
  background: none;
  border: 1.5px solid #6673f7;
  color: #6673f7;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.share-btn:hover {
  background: #6673f7;
  color: #fff;
}

.share-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid #eeeff5;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  min-width: 180px;
  z-index: 100;
  overflow: hidden;
}

.share-panel.open {
  display: block;
}

.share-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  font-size: 0.9rem;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.13s;
  box-sizing: border-box;
  text-align: left;
}

.share-opt:hover {
  background: #edeeff;
  color: #4f5de5;
}

.share-opt + .share-opt {
  border-top: 1px solid #f5f6fa;
}

#share-native {
  display: none;
}

.copy-feedback {
  font-size: 0.78rem;
  color: #10b981;
  font-weight: 600;
  margin-top: 6px;
  display: none;
  text-align: right;
}

#places-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.place-item {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  border: 1px solid #eeeff5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.place-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  border-color: #dcdeff;
}

.place-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.place-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.place-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #f0f1f5;
}

.place-thumb-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  flex-shrink: 0;
  background: #f0f1f5;
}

.place-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.place-name {
  font-size: 0.97rem;
  font-weight: 600;
  color: #4f5de5;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.place-name:hover {
  text-decoration: underline;
}

.place-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.place-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.place-distance {
  font-size: 0.8rem;
  color: #9ca3af;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Quota / API fallback banner ─────────────────────────────── */
.quota-banner {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
  padding: 10px 18px 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 9999;
  text-align: center;
  max-width: 380px;
  width: calc(100vw - 48px);
  animation: quota-fadein 0.25s ease;
}
.quota-banner-close {
  margin-left: 10px;
  cursor: pointer;
  opacity: 0.6;
  font-size: 1rem;
  vertical-align: middle;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  line-height: 1;
}
.quota-banner-close:hover { opacity: 1; }
@keyframes quota-fadein {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Skeleton loaders ─────────────────────────────────────────── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
.skeleton-item {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  border: 1px solid #eeeff5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.skeleton-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #e8e9f0;
  flex-shrink: 0;
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 6px;
}
.skeleton-line {
  height: 13px;
  border-radius: 6px;
  background: #e8e9f0;
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton-line.short  { width: 42%; }
.skeleton-line.medium { width: 62%; }
.skeleton-line.long   { width: 83%; }
.skeleton-actions {
  display: flex;
  gap: 8px;
}
.skeleton-btn {
  height: 30px;
  width: 76px;
  border-radius: 8px;
  background: #e8e9f0;
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}

.stars {
  color: #fbbf24;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.stars-empty {
  color: #e5e7eb;
}

.rating-num {
  font-size: 0.82rem;
  color: #6b7280;
  font-weight: 500;
}

.review-count {
  font-size: 0.78rem;
  color: #9ca3af;
}

.place-type {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 1px;
}

.place-price {
  font-size: 0.82rem;
  color: #059669;
  font-weight: 600;
}

.meta-sep {
  color: #d1d5db;
  font-size: 0.75rem;
  line-height: 1;
}

.no-rating {
  font-size: 0.82rem;
  color: #9ca3af;
  font-style: italic;
}

.place-link {
  font-size: 0.82rem;
  color: #4f5de5;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
  border: 1.5px solid #c4c9fb;
  border-radius: 999px;
  padding: 5px 10px;
  transition: background 0.15s;
}

.place-link:hover {
  background: #edeeff;
}

.place-parking {
  font-size: 0.82rem;
  color: #059669;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
  border: 1.5px solid #a7f3d0;
  border-radius: 999px;
  padding: 5px 10px;
  transition: background 0.15s;
}

.place-parking:hover {
  background: #ecfdf5;
}

.place-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.place-share-wrap {
  position: relative;
}

.place-share-btn {
  font-size: 0.82rem;
  color: #6b7280;
  background: none;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.place-share-btn:hover {
  border-color: #6673f7;
  color: #4f5de5;
}

.place-share-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #eeeff5;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  min-width: 170px;
  z-index: 200;
  overflow: hidden;
}

.place-share-panel.open {
  display: block;
}

.pso {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.13s;
}

.pso:hover {
  background: #edeeff;
  color: #4f5de5;
}

.pso + .pso {
  border-top: 1px solid #f5f6fa;
}

/* ── Improve Results Panel ── */
.improve-results {
  margin-top: 28px;
  padding: 20px 18px 18px;
  background: #f8f8ff;
  border: 1.5px solid #e4e6fb;
  border-radius: 16px;
}

.improve-title {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #9ca3af;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.improve-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.improve-btn {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 10px 12px;
  background: #fff;
  border: 1.5px solid #e4e6fb;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: center;
  position: relative;
}

.improve-btn:hover {
  border-color: #6673f7;
  background: #f4f4ff;
  box-shadow: 0 2px 8px rgba(102,115,247,0.10);
}

.improve-btn.active {
  border-color: #6673f7;
  background: #edeeff;
}

.improve-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.improve-btn--locked {
  cursor: pointer;
}
.improve-lock {
  position: absolute;
  top: 6px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  pointer-events: none;
}
.improve-lock svg {
  width: 9px;
  height: 9px;
}

.improve-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.improve-icon-img {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: contain;
  display: block;
}

.improve-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.2;
}

.improve-sub {
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 400;
  min-height: 1em;
}

.improve-chevron {
  transition: transform 0.2s;
  color: #9ca3af;
  margin-top: 1px;
}

.improve-btn.active .improve-chevron {
  transform: rotate(180deg);
}

.improve-refine-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1.5px solid #e4e6fb;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .improve-options {
    flex-direction: row;
    gap: 8px;
  }
  .improve-btn {
    padding: 12px 8px 10px;
    min-width: 90px;
  }
  .improve-icon { font-size: 1.15rem; }
  .improve-label { font-size: 0.74rem; }
}

/* ── Language Picker ── */
.lang-picker {
  margin-left: auto;
  position: relative;
  flex-shrink: 0;
}

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 50px;
  padding: 5px 9px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6673f7;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}

.lang-trigger:hover {
  background: #f0f0ff;
  border-color: #6673f7;
}

.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  min-width: 148px;
  z-index: 200;
  overflow: hidden;
}

.lang-dropdown.open {
  display: block;
}

.lang-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #f5f6fa;
  padding: 10px 14px;
  font-size: 0.84rem;
  cursor: pointer;
  color: #374151;
  font-family: inherit;
  transition: background 0.12s;
}

.lang-opt:last-child {
  border-bottom: none;
}

.lang-opt:hover {
  background: #f0f0ff;
  color: #6673f7;
}

.lang-opt.active {
  background: #edeeff;
  color: #6673f7;
  font-weight: 600;
}

.lang-flag-img {
  vertical-align: middle;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  #lang-code { display: none; }
}

/* ── Auth modal ─────────────────────────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
}
.auth-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.auth-close:hover { color: #374151; }
.auth-logo {
  text-align: center;
  margin-bottom: 18px;
}
.auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e8e9f5;
  margin-bottom: 22px;
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  font-weight: 600;
  color: #9ca3af;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tab.active {
  color: #6673f7;
  border-bottom-color: #6673f7;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  margin-top: 10px;
  margin-bottom: 2px;
}
.auth-input {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 50px;
  padding: 10px 18px;
  outline: none;
  transition: border-color 0.15s;
  background: #fafafa;
}
.auth-input:focus {
  border-color: #6673f7;
  background: #fff;
}
.auth-error {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #ef4444;
  margin: 6px 0 0;
}
.auth-submit {
  margin-top: 18px;
  background: #6673f7;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.auth-submit:hover  { background: #4f5de5; }
.auth-submit:disabled { background: #9ca3af; cursor: not-allowed; }
.auth-alt {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #9ca3af;
  margin-top: 12px;
}
.auth-alt a { color: #6673f7; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }
.auth-reset-intro {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #6b7280;
  margin: 0 0 4px;
  line-height: 1.5;
}
.auth-success {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}
.signin-btn.signed-in {
  background: #f0f0ff;
  color: #6673f7;
  border-color: #c7caff;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu {
  position: relative;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #e8e9f5;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  padding: 14px 16px 10px;
  min-width: 200px;
  z-index: 500;
}

.account-email {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #9ca3af;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-divider {
  border: none;
  border-top: 1px solid #e8e9f5;
  margin: 0 0 8px;
}

.account-signout-btn {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: #6b7280;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}

.account-signout-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.signout-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.75;
}
/* ── Search history ─────────────────────────────────────────────── */
.search-history {
  margin-top: 14px;
  border-top: 1px solid #f0f0f8;
  padding-top: 12px;
}
.search-history-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 8px;
}
.search-history-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: #f9f9ff;
  border: 1px solid #e8e9f5;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #374151;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.search-history-item:last-child { margin-bottom: 0; }
.search-history-item:hover {
  background: #ededff;
  border-color: #c7cbfc;
}
.sh-addr {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sh-sep {
  color: #6673f7;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.sh-mode {
  font-size: 0.78rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.search-history-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #9ca3af;
  cursor: pointer;
  transition: background 0.12s;
}
.search-history-locked:hover { background: #ebebeb; }

/* ── Pro upsell modal ────────────────────────────────────────────── */
.pro-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  padding: 32px 28px 24px;
  max-width: 420px;
  width: calc(100vw - 40px);
  z-index: 1001;
  text-align: center;
  font-family: 'Inter', sans-serif;
}
.pro-modal-star {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 10px;
}
.pro-modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 4px;
}
.pro-modal-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0 0 16px;
}

/* ── Pro feature comparison table ───────────────────────────────── */
.pro-compare {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  font-size: 0.82rem;
  text-align: left;
}
.pro-compare-head {
  display: grid;
  grid-template-columns: 1fr 52px 64px;
  background: #f9fafb;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid #e5e7eb;
}
.pro-compare-free-lbl { text-align: center; color: #9ca3af; }
.pro-compare-pro-lbl  { text-align: center; color: #6366f1; }
.pro-compare-row {
  display: grid;
  grid-template-columns: 1fr 52px 64px;
  padding: 7px 12px;
  align-items: center;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.pro-compare-row:last-child { border-bottom: none; }
.pro-compare-row span:first-child { color: #374151; }
.pc-check { text-align: center; color: #6366f1; font-weight: 700; }
.pc-cross  { text-align: center; color: #d1d5db; }
.pc-dim    { text-align: center; color: #9ca3af; font-size: 0.75rem; }
.pc-pro    { text-align: center; color: #6366f1; font-weight: 600; font-size: 0.78rem; }

/* ── Share CTA ───────────────────────────────────────────────────────────── */
.share-cta {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 16px 40px;
  text-align: center;
}
.share-cta-inner {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  border: 1px solid #eeeff5;
  padding: 32px 28px 28px;
}
.share-cta-heart {
  font-size: 1.5rem;
  margin: 0 0 10px;
  color: #e35d6a;
  line-height: 1;
}
.share-cta-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px;
}
.share-cta-brand {
  color: #6673f7;
}
.share-cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #6b7280;
  margin: 0 0 24px;
  line-height: 1.5;
}
.share-cta-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.share-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.share-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.13);
}
.share-cta-btn:active {
  transform: none;
  box-shadow: none;
}
.share-cta-btn--wa {
  background: #25d366;
  color: #fff;
}
.share-cta-btn--ig {
  background: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  color: #fff;
}
.share-cta-btn--x {
  background: #000;
  color: #fff;
}
.share-cta-copied {
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #6673f7;
  font-weight: 500;
}
.pro-modal-note {
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 10px 0 0;
}

/* ── Pro plan cards (inside upsell modal) ────────────────────────── */
.pro-plan-cards {
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
}

.pro-plan-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: 'Inter', sans-serif;
}

.pro-plan-card:hover {
  border-color: #6366f1;
  box-shadow: 0 2px 12px rgba(99,102,241,0.15);
}

.pro-plan-card--featured {
  border-color: #6366f1;
  background: linear-gradient(160deg, #f5f3ff 0%, #eef2ff 100%);
}

.pro-plan-card--featured:hover {
  box-shadow: 0 4px 18px rgba(99,102,241,0.25);
}

.pro-plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #6366f1;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.pro-plan-price {
  font-size: 1.7rem;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.1;
}

.pro-plan-period {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
}

.pro-plan-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}

.pro-plan-sub {
  font-size: 0.72rem;
  color: #9ca3af;
}

.pro-plan-card:disabled,
.pro-plan-card.loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Tutorial modal ─────────────────────────────────────────────── */
.tutorial-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.16);
  padding: 40px 32px 28px;
  max-width: 360px;
  width: calc(100vw - 40px);
  z-index: 1001;
  text-align: center;
  font-family: 'Inter', sans-serif;
}
.tutorial-skip {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
.tutorial-skip:hover { color: #6b7280; background: #f3f4f6; }
.tutorial-step { display: none; }
.tutorial-step.active { display: block; }
.tutorial-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 16px;
}
.tutorial-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 10px;
}
.tutorial-body {
  font-size: 0.88rem;
  color: #6b7280;
  line-height: 1.55;
  margin: 0 0 24px;
}
.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-bottom: 20px;
}
.tutorial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: background 0.2s, transform 0.2s;
}
.tutorial-dot.active {
  background: #6366f1;
  transform: scale(1.25);
}
.tutorial-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.tutorial-prev,
.tutorial-next,
.tutorial-done {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 50px;
  padding: 9px 22px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.tutorial-prev {
  background: #f3f4f6;
  color: #6b7280;
}
.tutorial-prev:hover { background: #e5e7eb; }
.tutorial-next {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}
.tutorial-next:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,0.4); }
.tutorial-done {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}
.tutorial-done:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,0.4); }

@media (max-width: 480px) {
  .auth-modal { padding: 28px 18px 24px; max-width: calc(100vw - 32px); }
  .pro-modal { padding: 28px 18px 24px; }
  .tutorial-modal { padding: 36px 20px 24px; }

  /* Header — compact on mobile */
  header {
    padding: 10px 14px;
    gap: 8px;
  }
  header .tagline {
    display: none;
  }
  header .logo-img {
    height: 28px;
  }
  .signin-btn {
    padding: 5px 10px;
    font-size: 0.76rem;
    max-width: 110px;
  }
  .signin-btn.signed-in {
    max-width: 100px;
  }
  /* Lang picker — flag only, no label on very small screens */
  .lang-trigger {
    padding: 5px 7px;
  }

  /* Contact picker — keep within viewport width */
  .contact-picker {
    min-width: 0;
    max-width: calc(100vw - 16px);
  }
}

/* ── Account dropdown menu buttons ──────────────────────────────── */
.account-menu-btn {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: #374151;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}
.account-menu-btn:hover { background: #f3f4f6; }
.account-menu-btn--pro { color: #6366f1; font-weight: 500; }
.account-menu-btn--pro svg { stroke: #6366f1; }
.account-menu-btn--pro:hover { background: #eef2ff; }
.account-divider { border: none; border-top: 1px solid #f0f0f0; margin: 6px 0; }

.contact-req-badge {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  margin-left: auto;
}

.favorites-count-badge {
  background: #6673f7;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  margin-left: auto;
}

/* ── Saved Places Panel ─────────────────────────────────────────── */
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fav-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: #9ca3af;
  text-align: center;
}

.fav-hint {
  font-size: 0.8rem;
  color: #c0c4d4;
  margin: 0;
}

.fav-loading, .fav-error {
  padding: 24px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9rem;
}

.fav-card {
  background: #fff;
  border: 1px solid #e9eaf4;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.2s;
}

.fav-card--removing {
  opacity: 0.4;
  pointer-events: none;
}

.fav-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fav-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #232946;
  text-decoration: none;
}

.fav-name:hover { text-decoration: underline; color: #6673f7; }

.fav-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #6b7280;
  flex-wrap: wrap;
}

.fav-type {
  background: #f0f1fe;
  color: #6673f7;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 600;
}

.fav-stars {
  color: #f59e0b;
  font-size: 0.78rem;
}

.fav-rating-num {
  color: #6b7280;
}

.fav-sep {
  color: #d1d5db;
}

.fav-address {
  font-size: 0.78rem;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.fav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.fav-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #6673f7;
  text-decoration: none;
  font-weight: 600;
}

.fav-maps-link:hover { text-decoration: underline; }

.fav-remove-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: #ef4444;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  font-weight: 600;
}

.fav-remove-btn:hover { text-decoration: underline; }

/* ── Input label row (label + from-contacts button) ─────────────── */
.input-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.input-label-row label { margin-bottom: 0; }

.from-contacts-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  color: #6673f7;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.from-contacts-btn:hover { background: #f0f1ff; border-color: #6673f7; }

/* ── Side panel (slide-in drawer) ───────────────────────────────── */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 900;
}
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background: #fff;
  z-index: 901;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  overflow: hidden;
}
.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.side-panel-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: #1a1a2e; }
.side-panel-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.12s;
}
.side-panel-close:hover { background: #f3f4f6; color: #374151; }
.side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
}

.panel-intro {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ── Privacy tip box ─────────────────────────────────────────────── */
.privacy-tip-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  color: #0369a1;
  line-height: 1.5;
  margin-bottom: 18px;
}
.privacy-tip-box svg { flex-shrink: 0; margin-top: 1px; }

/* ── Saved addresses list ─────────────────────────────────────────── */
.saved-addresses-list { margin-bottom: 20px; }
.saved-addr-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.saved-addr-card-info { flex: 1; min-width: 0; }
.saved-addr-card-label { font-size: 0.8rem; font-weight: 600; color: #374151; margin-bottom: 2px; }
.saved-addr-card-text { font-size: 0.8rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-addr-card-del {
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.12s;
  flex-shrink: 0;
}
.saved-addr-card-del:hover { color: #ef4444; }

/* ── Address form ─────────────────────────────────────────────────── */
.add-address-section { border-top: 1px solid #f0f0f0; padding-top: 16px; }
.add-address-title { font-size: 0.9rem; font-weight: 600; color: #1a1a2e; margin: 0 0 12px; }
.addr-label-row { margin-bottom: 12px; }
.addr-form-label { display: block; font-size: 0.8rem; font-weight: 500; color: #374151; margin-bottom: 6px; }
.addr-label-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.addr-label-btn {
  padding: 5px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.addr-label-btn.active { border-color: #6673f7; background: #f0f1ff; color: #4f5bd5; font-weight: 600; }
.addr-form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.88rem;
  outline: none;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.addr-form-input:focus { border-color: #6673f7; }
.addr-map { width: 100%; height: 200px; border-radius: 10px; overflow: hidden; margin-bottom: 6px; background: #f3f4f6; }
.addr-map-hint { font-size: 0.75rem; color: #9ca3af; margin: 0 0 12px; }
.btn--sm { padding: 8px 18px; font-size: 0.85rem; }
.btn--sm:disabled { opacity: 0.5; cursor: not-allowed; }
.addr-save-msg { font-size: 0.82rem; color: #16a34a; margin: 8px 0 0; }
.addr-save-msg.error { color: #ef4444; }

/* ── Contacts panel ──────────────────────────────────────────────── */
.contacts-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}
.contacts-tab {
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s, border-color 0.12s;
}
.contacts-tab.active { color: #6673f7; border-bottom-color: #6673f7; font-weight: 600; }
.contacts-panel-section { display: block; }
.contacts-list { display: flex; flex-direction: column; gap: 8px; }
.contact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.contact-card-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #6673f7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}
.contact-card-info { flex: 1; min-width: 0; }
.contact-card-name { font-size: 0.85rem; font-weight: 600; color: #374151; }
.contact-card-email { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-card-actions { display: flex; gap: 6px; }
.contact-action-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.contact-action-btn.accept { border-color: #6673f7; color: #6673f7; }
.contact-action-btn.accept:hover { background: #6673f7; color: #fff; }
.contact-action-btn.reject { color: #9ca3af; }
.contact-action-btn.reject:hover { background: #f3f4f6; }
.contact-action-btn.remove { color: #9ca3af; }
.contact-action-btn.remove:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
.add-contact-form { display: flex; flex-direction: column; gap: 10px; }

/* ── Invite card ────────────────────────────────────────────────── */
.invite-card {
  background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
  border: 1px solid #c4b5fd;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 2px;
}
.invite-card-msg {
  font-size: 0.875rem;
  color: #3730a3;
  margin: 0 0 4px;
  line-height: 1.4;
}
.invite-card-sub {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 0 0 12px;
  line-height: 1.4;
}
.invite-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-copy-btn {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.invite-copy-btn:hover  { background: #4f46e5; }
.invite-copy-btn.copied { background: #16a34a; }
.invite-email-btn {
  background: #fff;
  color: #6366f1;
  border: 1.5px solid #6366f1;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.invite-email-btn:hover { background: #ede9fe; }

/* ── Bulk-add section ───────────────────────────────────────────── */
.bulk-add-section { margin-top: 18px; border-top: 1px solid #f0f0f6; padding-top: 14px; }
.bulk-add-toggle {
  background: none; border: none; color: #6366f1; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 3px;
}
.bulk-add-toggle:hover { color: #4f46e5; }
.bulk-add-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.bulk-add-hint { font-size: 0.78rem; color: #6b7280; margin: 0; }
.bulk-add-textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  padding: 9px 11px; font-size: 0.82rem; resize: vertical;
  font-family: inherit; color: #374151;
}
.bulk-add-textarea:focus { outline: none; border-color: #6366f1; }
.bulk-add-results { margin-top: 4px; display: flex; flex-direction: column; gap: 5px; }
.bulk-result-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 7px; font-size: 0.78rem;
  background: #f9fafb;
}
.bulk-result-row.ok  { background: #f0fdf4; color: #166534; }
.bulk-result-row.err { background: #fef2f2; color: #991b1b; }
.bulk-result-row.inv { background: #ede9fe; color: #3730a3; }

/* ── Result-Share Modal ─────────────────────────────────────────── */
.result-share-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1400;
}
.result-share-modal {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  background: #fff; border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
  z-index: 1401; padding: 20px 0 env(safe-area-inset-bottom, 0);
  max-height: 70vh; display: flex; flex-direction: column;
}
.result-share-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0 20px 12px; border-bottom: 1px solid #f0f0f6;
}
.result-share-title { font-size: 0.95rem; font-weight: 700; color: #1f2937; }
.result-share-sub   { font-size: 0.78rem; color: #9ca3af; margin-top: 2px; }
.result-share-close {
  background: none; border: none; color: #9ca3af; font-size: 1.1rem;
  cursor: pointer; line-height: 1; padding: 0; margin-left: 12px;
}
.result-share-close:hover { color: #374151; }
.result-share-list { overflow-y: auto; padding: 10px 0; }
.rs-contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; cursor: pointer; transition: background 0.12s;
}
.rs-contact-row:hover { background: #f5f3ff; }
.rs-contact-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #6366f1; color: #fff; font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rs-contact-info { flex: 1; min-width: 0; }
.rs-contact-name  { font-size: 0.85rem; font-weight: 600; color: #374151; }
.rs-contact-email { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-send-btn {
  background: #6366f1; color: #fff; border: none; border-radius: 7px;
  padding: 6px 13px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s; white-space: nowrap;
}
.rs-send-btn:hover { background: #4f46e5; }
.rs-send-btn.sent { background: #16a34a; }
.rs-empty { padding: 20px; text-align: center; color: #9ca3af; font-size: 0.84rem; }

/* ── Shared-Result Toast ────────────────────────────────────────── */
.shared-result-toast {
  position: fixed; top: 0; left: 0; right: 0;
  background: #312e81; color: #fff;
  z-index: 1500; padding: 0;
  animation: srtSlideDown 0.3s ease;
}
@keyframes srtSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.srt-inner {
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
}
.srt-icon  { font-size: 1.2rem; flex-shrink: 0; }
.srt-text  { flex: 1; min-width: 0; font-size: 0.83rem; line-height: 1.35; }
.srt-text strong { display: block; font-size: 0.86rem; }
.srt-load-btn {
  background: #fff; color: #312e81; border: none; border-radius: 7px;
  padding: 6px 13px; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: background 0.15s;
}
.srt-load-btn:hover { background: #e0e7ff; }
.srt-dismiss-btn {
  background: none; border: none; color: rgba(255,255,255,0.7);
  font-size: 1rem; cursor: pointer; line-height: 1; padding: 4px;
  flex-shrink: 0;
}
.srt-dismiss-btn:hover { color: #fff; }

/* ── Growth Nudge Banner ────────────────────────────────────────── */
.growth-nudge {
  max-width: 640px; margin: 0 auto 12px;
  background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px;
  padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  animation: nudgeFadeIn 0.35s ease;
}
@keyframes nudgeFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#growth-nudge[hidden] { display: none !important; }
.growth-nudge span { flex: 1; font-size: 0.82rem; color: #4c1d95; line-height: 1.4; }
.growth-nudge-cta {
  background: #6366f1; color: #fff; border: none; border-radius: 7px;
  padding: 6px 12px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.growth-nudge-cta:hover  { background: #4f46e5; }
.growth-nudge-close {
  background: none; border: none; color: #9ca3af;
  font-size: 0.9rem; cursor: pointer; line-height: 1; padding: 0;
}
.growth-nudge-close:hover { color: #374151; }

/* ── Send-to-contact button on place cards ──────────────────────── */
.place-send-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid #ddd6fe; border-radius: 7px;
  color: #6366f1; font-size: 0.75rem; font-weight: 600;
  padding: 4px 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.place-send-btn:hover { background: #ede9fe; border-color: #c4b5fd; }
.place-send-btn.sent  { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }

/* ── Fairness Ledger panel ───────────────────────────────────────── */
.ledger-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.85rem;
}
.ledger-hint { font-size: 0.78rem; color: #c7c9d9; margin: 0; max-width: 260px; }

/* ── Contact picker popover ──────────────────────────────────────── */
.contact-picker {
  position: fixed;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  z-index: 800;
  min-width: 240px;
  max-width: 320px;
  overflow: hidden;
}
.contact-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}
.contact-picker-close {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px;
}
.contact-picker-list { padding: 6px 0; max-height: 280px; overflow-y: auto; }
.contact-picker-contact { padding: 8px 14px; cursor: pointer; }
.contact-picker-contact:hover { background: #f9fafb; }
.contact-picker-contact-name { font-size: 0.85rem; font-weight: 600; color: #374151; }
.contact-picker-contact-addrs { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.contact-picker-addr-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 0.78rem;
  color: #374151;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
}
.contact-picker-addr-btn:hover { background: #f0f1ff; border-color: #6673f7; color: #4f5bd5; }
.contact-picker-empty { padding: 16px 14px; font-size: 0.82rem; color: #9ca3af; text-align: center; }

/* ── Credit system ──────────────────────────────────────────────── */
.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #eef0ff;
  color: #4f5bd5;
  border: 1px solid #c7caff;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: default;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.credit-pill--low {
  background: #fff4e5;
  color: #d97706;
  border-color: #fcd34d;
}
.credit-pill-inline {
  margin-left: auto;
  background: #eef0ff;
  color: #4f5bd5;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}
.credit-hint {
  font-size: 0.78rem;
  color: #9ca3af;
  margin: 4px 0 0;
  text-align: center;
}

/* ── Out-of-Credits Modal ───────────────────────────────────────── */
.ooc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
}
.ooc-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  padding: 36px 28px 28px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  z-index: 1101;
  width: min(92vw, 400px);
  text-align: center;
}
.ooc-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
}
.ooc-icon {
  font-size: 2.4rem;
  margin-bottom: 8px;
}
.ooc-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 10px;
}
.ooc-message {
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.55;
  margin-bottom: 20px;
}
.ooc-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.ooc-buy-btn {
  background: #4f5bd5;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.ooc-buy-btn:hover { background: #3d4abf; }
.ooc-upgrade-btn {
  background: #fff;
  color: #4f5bd5;
  border: 2px solid #4f5bd5;
  border-radius: 12px;
  padding: 11px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.ooc-upgrade-btn:hover { background: #f0f1ff; }
.ooc-note {
  font-size: 0.76rem;
  color: #9ca3af;
}

/* ── Credits Info Modal ─────────────────────────────────────────── */
.cim-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  padding: 36px 28px 28px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  z-index: 1101;
  width: min(92vw, 440px);
}
.cim-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 14px;
}
.cim-balance-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: #eef0ff;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.cim-balance-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: #4f5bd5;
}
.cim-balance-sub {
  font-size: 0.82rem;
  color: #6b7280;
}
.cim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-bottom: 14px;
}
.cim-table th {
  text-align: left;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cim-table td {
  padding: 9px 0;
  border-bottom: 1px solid #f7f7f7;
  color: #374151;
}
.cim-table td:last-child { text-align: right; font-weight: 600; color: #4f5bd5; }
.cim-free { color: #10b981; font-weight: 600; }
.cim-note {
  font-size: 0.76rem;
  color: #9ca3af;
  line-height: 1.5;
  margin-bottom: 16px;
}
.cim-footer { text-align: center; }
.cim-buy-btn {
  background: #4f5bd5;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.cim-buy-btn:hover { background: #3d4abf; }

/* ── Location permission banner ───────────────────────────────────────────── */
#location-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e8e8f0;
  box-shadow: 0 -3px 16px rgba(80, 80, 160, 0.10);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9000;
  font-size: 14px;
}
#location-banner[hidden] { display: none !important; }
.loc-banner-icon { flex-shrink: 0; color: #5a7fc7; display: flex; }
.loc-banner-msg  { flex: 1; margin: 0; color: #444; line-height: 1.4; }
.loc-banner-msg strong { color: #5a7fc7; font-weight: 600; }
.loc-banner-btns { display: flex; gap: 8px; flex-shrink: 0; }
.loc-banner-enable {
  background: #5a7fc7;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.loc-banner-enable:hover { background: #4a6db5; }
.loc-banner-dismiss {
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #888;
  white-space: nowrap;
}
.loc-banner-dismiss:hover { background: #f5f5f5; }
@media (max-width: 560px) {
  #location-banner { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .loc-banner-btns { width: 100%; }
  .loc-banner-enable, .loc-banner-dismiss { flex: 1; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════
   Meet History & Invite Feature
   ══════════════════════════════════════════════════════════════════ */

/* ── Invite badge on account menu button ─────────────────────────── */
.invite-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
}
.invite-badge[hidden] { display: none !important; }

/* ── History tab bar inside panel ────────────────────────────────── */
.history-tabs-bar {
  display: flex;
  border-bottom: 1px solid #e8e8f0;
  background: #fff;
  flex-shrink: 0;
}
.history-tab-btn {
  flex: 1;
  padding: 10px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.83rem;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: color 0.15s;
}
.history-tab-btn.active {
  color: #6673f7;
  border-bottom-color: #6673f7;
  font-weight: 700;
}
.history-tab-btn:hover:not(.active) { color: #444; }
.history-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}
.history-tab-badge[hidden] { display: none !important; }

/* ── Tab panes ───────────────────────────────────────────────────── */
.history-tab-pane { display: block; }
.history-tab-pane[hidden] { display: none; }

/* ── Meet History items ──────────────────────────────────────────── */
.history-empty, .invites-empty, .sent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.85rem;
}
.history-empty svg, .invites-empty svg, .sent-empty svg { opacity: 0.4; }
.history-empty p, .invites-empty p, .sent-empty p { margin: 0; }
.history-empty .hint, .invites-empty .hint, .sent-empty .hint {
  font-size: 0.78rem;
  color: #c0c4d8;
}

.history-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f8;
  transition: background 0.12s;
}
.history-item:hover { background: #fafafe; }
.history-item-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6673f7 0%, #a78bfa 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.history-item-body { flex: 1; min-width: 0; }
.history-item-place {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1e1e3f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-item-place a { color: inherit; text-decoration: none; }
.history-item-place a:hover { text-decoration: underline; }
.history-item-with {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 2px;
}
.history-item-meta {
  font-size: 0.73rem;
  color: #b0b3c8;
  margin-top: 3px;
}
.history-item-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.history-invite-again-btn {
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  color: #6673f7;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
}
.history-invite-again-btn:hover { background: #f0f0ff; border-color: #6673f7; }

/* ── Received invite cards ───────────────────────────────────────── */
.invite-card {
  border: 1px solid #e8e8f0;
  border-radius: 14px;
  margin: 10px 12px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(100, 100, 200, 0.06);
}
.invite-card--new { border-color: #c7d2fe; background: #fafaff; }
.invite-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.invite-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6673f7 0%, #a78bfa 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.invite-card-from {
  flex: 1;
  min-width: 0;
}
.invite-card-from-name {
  font-weight: 600;
  font-size: 0.87rem;
  color: #1e1e3f;
}
.invite-card-from-label {
  font-size: 0.73rem;
  color: #9ca3af;
}
.invite-card-place {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #f7f8ff;
  border-radius: 10px;
  margin-bottom: 10px;
}
.invite-card-place-icon { flex-shrink: 0; color: #6673f7; margin-top: 2px; }
.invite-card-place-info { flex: 1; min-width: 0; }
.invite-card-place-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1e1e3f;
}
.invite-card-place-name a { color: inherit; text-decoration: none; }
.invite-card-place-name a:hover { text-decoration: underline; }
.invite-card-place-meta {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
}
.invite-card-datetime {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #6673f7;
  font-weight: 500;
  margin-bottom: 8px;
}
.invite-card-datetime svg { flex-shrink: 0; }
.invite-card-message {
  font-size: 0.8rem;
  color: #4b5563;
  font-style: italic;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #f9f9fd;
  border-left: 3px solid #c7d2fe;
  border-radius: 0 6px 6px 0;
}
.invite-card-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.invite-accept-btn {
  flex: 1;
  padding: 9px 12px;
  background: #6673f7;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.invite-accept-btn:hover { background: #4f5edb; }
.invite-accept-btn:disabled { opacity: 0.6; cursor: default; }
.invite-decline-btn {
  padding: 9px 12px;
  background: transparent;
  color: #6b7280;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.invite-decline-btn:hover { background: #f5f5f5; }
.invite-decline-btn:disabled { opacity: 0.6; cursor: default; }
.invite-propose-btn {
  padding: 9px 12px;
  background: transparent;
  color: #6673f7;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.invite-propose-btn:hover { background: #f0f0ff; }
.invite-propose-btn:disabled { opacity: 0.6; cursor: default; }
.invite-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 8px;
  margin-top: 4px;
}
.invite-card-status--accepted { background: #dcfce7; color: #16a34a; }
.invite-card-status--declined { background: #fee2e2; color: #dc2626; }
.invite-card-status--proposed { background: #fef9c3; color: #d97706; }
.invite-card-cal-row {
  margin-top: 8px;
}
.invite-card-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #c7d2fe;
  background: #f7f8ff;
  color: #6673f7;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}
.invite-card-cal-btn:hover { background: #e8eaff; }

/* ── Sent invite cards ───────────────────────────────────────────── */
.sent-card {
  border: 1px solid #e8e8f0;
  border-radius: 14px;
  margin: 10px 12px;
  padding: 12px 14px;
  background: #fff;
}
.sent-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sent-card-to {
  flex: 1;
  font-size: 0.84rem;
  font-weight: 600;
  color: #1e1e3f;
}
.sent-card-status-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
}
.sent-card-status-pill--pending  { background: #fef3c7; color: #d97706; }
.sent-card-status-pill--accepted { background: #dcfce7; color: #16a34a; }
.sent-card-status-pill--declined { background: #fee2e2; color: #dc2626; }
.sent-card-status-pill--proposed { background: #ede9fe; color: #7c3aed; }
.sent-card-place {
  font-size: 0.82rem;
  color: #4b5563;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sent-card-place a { color: #6673f7; text-decoration: none; }
.sent-card-place a:hover { text-decoration: underline; }
.sent-card-meta {
  font-size: 0.72rem;
  color: #b0b3c8;
}
.sent-card-proposal {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fef9c3;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #92400e;
}

/* ── Propose New Time Modal ──────────────────────────────────────── */
.propose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 70, 0.45);
  z-index: 1600;
}
.propose-overlay[hidden] { display: none; }
.propose-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  width: min(420px, calc(100vw - 32px));
  z-index: 1601;
  box-shadow: 0 12px 48px rgba(60, 60, 120, 0.22);
}
.propose-modal[hidden] { display: none; }
.propose-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e1e3f;
  margin: 0 0 4px;
}
.propose-modal-sub {
  font-size: 0.8rem;
  color: #9ca3af;
  margin: 0 0 18px;
}
.propose-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #e0e0f0;
  border-radius: 10px;
  font-size: 0.88rem;
  margin-bottom: 10px;
  background: #fafafe;
  color: #1e1e3f;
}
.propose-input:focus { outline: none; border-color: #6673f7; }
.propose-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #e0e0f0;
  border-radius: 10px;
  font-size: 0.88rem;
  margin-bottom: 16px;
  background: #fafafe;
  color: #1e1e3f;
  resize: none;
  font-family: inherit;
}
.propose-textarea:focus { outline: none; border-color: #6673f7; }
.propose-btns {
  display: flex;
  gap: 10px;
}
.propose-cancel-btn {
  flex: 1;
  padding: 11px;
  background: #f3f4f6;
  border: none;
  border-radius: 12px;
  color: #6b7280;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.propose-cancel-btn:hover { background: #e5e7eb; }
.propose-send-btn {
  flex: 2;
  padding: 11px;
  background: #6673f7;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.propose-send-btn:hover { background: #4f5edb; }
.propose-send-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Invite Sheet (bottom sheet) ─────────────────────────────────── */
.invite-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 70, 0.4);
  z-index: 1500;
}
.invite-sheet-overlay[hidden] { display: none; }
.invite-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 22px 22px 0 0;
  z-index: 1501;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(60, 60, 120, 0.18);
  display: flex;
  flex-direction: column;
}
.invite-sheet[hidden] { display: none; }
.invite-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #e0e0ee;
  margin: 12px auto 0;
  flex-shrink: 0;
}
.invite-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid #f0f0f8;
}
.invite-sheet-header-text { flex: 1; min-width: 0; }
.invite-sheet-label {
  font-size: 0.72rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 3px;
}
.invite-sheet-place-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e1e3f;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invite-sheet-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 10px;
  flex-shrink: 0;
}
.invite-sheet-close:hover { color: #444; }
.invite-sheet-body {
  padding: 16px 20px 32px;
  flex: 1;
  overflow-y: auto;
}

/* Contact search */
.invite-contact-search-wrap {
  position: relative;
  margin-bottom: 10px;
}
.invite-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.invite-contact-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 34px;
  border: 1.5px solid #e0e0f0;
  border-radius: 12px;
  font-size: 0.88rem;
  background: #fafafe;
  color: #1e1e3f;
}
.invite-contact-search:focus { outline: none; border-color: #6673f7; background: #fff; }
.invite-contacts-list {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid #eeeef8;
  border-radius: 12px;
  margin-bottom: 14px;
}
.invite-contacts-list:empty { display: none; }
.invite-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5fb;
  transition: background 0.1s;
}
.invite-contact-row:last-child { border-bottom: none; }
.invite-contact-row:hover { background: #f7f7ff; }
.invite-contact-row.selected { background: #ededff; }
.invite-contact-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6673f7 0%, #a78bfa 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.invite-contact-info { flex: 1; min-width: 0; }
.invite-contact-name { font-weight: 600; font-size: 0.85rem; color: #1e1e3f; }
.invite-contact-email { font-size: 0.72rem; color: #9ca3af; }
.invite-contact-check {
  color: #6673f7;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Selected contact chip */
.invite-selected-wrap { margin-bottom: 14px; }
.invite-selected-wrap[hidden] { display: none; }
.invite-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: #ededff;
  border: 1.5px solid #c7d2fe;
  border-radius: 20px;
  font-size: 0.83rem;
}
.invite-selected-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6673f7 0%, #a78bfa 100%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invite-selected-name { font-weight: 600; color: #4f46e5; }
.invite-deselect-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
}
.invite-deselect-btn:hover { color: #444; }

/* Date/time & message sections */
.invite-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.invite-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: #b0b3c8; font-size: 0.73rem; }
.invite-datetime-section { margin-bottom: 14px; }
.invite-datetime-row { display: flex; gap: 8px; }
.invite-date-input, .invite-time-input {
  flex: 1;
  padding: 9px 10px;
  border: 1.5px solid #e0e0f0;
  border-radius: 10px;
  font-size: 0.83rem;
  background: #fafafe;
  color: #1e1e3f;
}
.invite-date-input:focus, .invite-time-input:focus { outline: none; border-color: #6673f7; }
.invite-message-section { margin-bottom: 16px; }
.invite-message-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #e0e0f0;
  border-radius: 12px;
  font-size: 0.85rem;
  background: #fafafe;
  color: #1e1e3f;
  resize: none;
  font-family: inherit;
}
.invite-message-input:focus { outline: none; border-color: #6673f7; }
.invite-send-btn {
  width: 100%;
  padding: 13px;
  background: #6673f7;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.invite-send-btn:hover:not(:disabled) { background: #4f5edb; }
.invite-send-btn:disabled { background: #c7d2fe; cursor: default; }
.invite-send-btn.sent { background: #16a34a; }

/* ── "Invite here" button on fav cards ────────────────────────────── */
.fav-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.73rem;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #c7d2fe;
  background: #f7f8ff;
  color: #6673f7;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}
.fav-invite-btn:hover { background: #ededff; border-color: #6673f7; }

/* ── "Invite here" button on result cards (overrides old link style) ─ */
.place-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #c7d2fe;
  background: #f7f8ff;
  color: #6673f7;
  font-size: 0.73rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.place-invite-btn:hover { background: #ededff; border-color: #6673f7; }

/* ── Calendar add button helper ──────────────────────────────────── */
.cal-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid #c7d2fe;
  background: #f7f8ff;
  color: #6673f7;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.cal-add-btn:hover { background: #ededff; }

/* ══════════════════════════════════════════════════════════════════
   Time Selector — pill-based UI
   ══════════════════════════════════════════════════════════════════ */

/* Fix: CSS class display:flex was overriding [hidden] attribute */
.result-share-modal[hidden]  { display: none !important; }
.result-share-overlay[hidden]{ display: none !important; }

.time-date-pills,
.time-slot-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.time-date-pills,
.time-slot-pills { display: flex !important; }

.time-pill {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  line-height: 1.4;
  user-select: none;
}
.time-pill:hover { border-color: #6673f7; color: #6673f7; }
.time-pill.active {
  border-color: #6673f7;
  background: #6673f7;
  color: #fff;
}
.time-pill:focus-visible { outline: 2px solid #6673f7; outline-offset: 2px; }

.time-datepick-wrap,
.time-custompick-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.time-datepick-wrap.active,
.time-custompick-wrap.active {
  border-color: #6673f7;
  background: #6673f7;
  color: #fff;
}

.time-overlay-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  font-size: 16px; /* prevents zoom on iOS */
}

/* ── Non-contact invite section (inside invite sheet) ────────────── */
.invite-noncontact-section { margin-top: 8px; }
.invite-noncontact-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: #c0c4d8;
  font-size: 0.75rem;
}
.invite-noncontact-divider::before,
.invite-noncontact-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8e8f0;
}
.invite-noncontact-body { }
.invite-noncontact-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 8px;
}
.invite-noncontact-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #e0e0f0;
  border-radius: 12px;
  font-size: 0.88rem;
  background: #fafafe;
  color: #1e1e3f;
  margin-bottom: 10px;
}
.invite-noncontact-input:focus { outline: none; border-color: #6673f7; }
.invite-noncontact-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.invite-noncontact-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #c7d2fe;
  background: #f7f8ff;
  color: #6673f7;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.invite-noncontact-btn:hover:not(:disabled) { background: #ededff; border-color: #6673f7; }
.invite-noncontact-btn--gmail { background: #fff; }
.invite-noncontact-btn:disabled { opacity: 0.6; cursor: default; }
.invite-noncontact-hint {
  font-size: 0.72rem;
  color: #b0b3c8;
  margin: 0;
}

/* ── Invite card note (contacts panel) ────────────────────────────── */
.invite-card-note {
  font-size: 0.72rem;
  color: #b0b3c8;
  margin: 8px 0 0;
  text-align: center;
}

/* ── Invite welcome banner (shown when ?invite= token is in URL) ──── */
.invite-welcome-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1.5px solid #c7d2fe;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(60,60,120,0.18);
  padding: 16px 20px;
  z-index: 1200;
  max-width: min(420px, calc(100vw - 32px));
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: slideUpFade 0.35s ease;
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.invite-welcome-banner[hidden] { display: none; }
.invite-welcome-icon { font-size: 1.6rem; text-align: center; }
.invite-welcome-title { font-size: 0.95rem; font-weight: 700; color: #1e1e3f; text-align: center; }
.invite-welcome-sub { font-size: 0.8rem; color: #6b7280; text-align: center; }
.invite-welcome-btns { display: flex; gap: 8px; }
.invite-welcome-signup-btn {
  flex: 2;
  padding: 10px;
  background: #6673f7;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.invite-welcome-signup-btn:hover { background: #4f5edb; }
.invite-welcome-dismiss-btn {
  flex: 1;
  padding: 10px;
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.invite-welcome-dismiss-btn:hover { background: #e5e7eb; }

/* ══════════════════════════════════════════════════════════════════
   Date + Time Picker Popover (.tpp-*)
   ══════════════════════════════════════════════════════════════════ */
.tpp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1490;
}
.tpp-overlay[hidden] { display: none; }

.tpp-popover {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(60,60,120,0.22);
  padding: 20px;
  z-index: 1491;
  width: min(340px, calc(100vw - 32px));
  max-height: 90vh;
  overflow-y: auto;
}
.tpp-popover[hidden] { display: none; }

/* Month navigation */
.tpp-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tpp-month-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e1e3f;
}
.tpp-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e0e0f0;
  background: #f7f8ff;
  color: #6673f7;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.tpp-nav-btn:hover { background: #ededff; border-color: #6673f7; }

/* Weekday header */
.tpp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b0b3c8;
  margin-bottom: 4px;
}

/* Days grid */
.tpp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 16px;
}
.tpp-day {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e1e3f;
  font-weight: 400;
  padding: 0;
  width: 100%;
}
.tpp-day:hover:not(:disabled):not(.tpp-day--empty) { background: #f0f1ff; }
.tpp-day--today { font-weight: 700; color: #6673f7; }
.tpp-day--selected { background: #6673f7 !important; color: #fff !important; font-weight: 700; }
.tpp-day--past { color: #d1d5db; cursor: default; }
.tpp-day--empty { pointer-events: none; }

/* Time section label */
.tpp-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Hours grid */
.tpp-hours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.tpp-hour-btn {
  padding: 8px 4px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: #fafafe;
  color: #444;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.tpp-hour-btn:hover { border-color: #6673f7; color: #6673f7; }
.tpp-hour-btn.active { border-color: #6673f7; background: #6673f7; color: #fff; font-weight: 600; }

/* Minutes */
.tpp-minutes-wrap { margin-bottom: 12px; }
.tpp-minutes-wrap[hidden] { display: none; }
.tpp-minutes-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #b0b3c8;
  margin-bottom: 6px;
}
.tpp-minutes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tpp-min-btn {
  padding: 8px 4px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: #fafafe;
  color: #444;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.tpp-min-btn:hover { border-color: #6673f7; color: #6673f7; }
.tpp-min-btn.active { border-color: #6673f7; background: #6673f7; color: #fff; }

/* Footer */
.tpp-footer {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f8;
}
.tpp-cancel-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.tpp-cancel-btn:hover { background: #f3f4f6; }
.tpp-confirm-btn {
  flex: 2;
  padding: 10px;
  border-radius: 12px;
  border: none;
  background: #6673f7;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.tpp-confirm-btn:hover { background: #4f5edb; }

/* "Pick date & time" pill — active state shows selected label */
#meeting-time-pick.active {
  border-color: #6673f7;
  background: #6673f7;
  color: #fff;
}