/* =====================================================
   Clock7 Meeting Time Finder — meeting-finder.css v1.0
   Prefix: mtf-
   ===================================================== */

.mtf-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 60px 14px 80px;
}

/* ── Hero ──────────────────────────────────────────── */
.mtf-hero { text-align: center; padding: 18px 10px 18px; }
.mtf-hero h1 { margin: 0 0 10px; font-size: clamp(26px, 3vw, 42px); }
.mtf-hero p  { margin: 0 auto 14px; max-width: 680px; opacity: .88; }

.mtf-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; opacity: .8; padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 999px;
  background: #fff; margin-bottom: 14px; text-decoration: none; color: inherit;
}

/* ── Chips ─────────────────────────────────────────── */
.mtf-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 10px;
}
.mtf-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; border: 1px solid rgba(0,0,0,.10); border-radius: 999px;
  text-decoration: none; color: inherit; background: #fff;
  white-space: nowrap; font-size: 13px; transition: box-shadow .12s ease;
}
.mtf-chip:hover { box-shadow: 0 6px 16px rgba(0,0,0,.07); }

/* ── Tool card ─────────────────────────────────────── */
.mtf-tool-card {
  border: 1px solid rgba(0,0,0,.10); border-radius: 20px;
  background: #fff; padding: 22px 20px; margin-bottom: 16px;
}

.mtf-cities-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.mtf-cities-header h2 { margin: 0; font-size: 17px; }

/* ── City row ──────────────────────────────────────── */
.mtf-city-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.mtf-city-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px; align-items: center;
  border: 1px solid rgba(0,0,0,.10); border-radius: 14px;
  padding: 10px 12px; background: #fff; position: relative;
}
.mtf-city-row.has-data {
  border-color: rgba(74,144,226,.35);
  background: rgba(74,144,226,.03);
}

.mtf-city-input-wrap { position: relative; }
.mtf-city-input {
  width: 100%; border: none; outline: none;
  font-size: 15px; font-weight: 600; background: transparent;
  color: var(--text-color); padding: 4px 0;
  box-sizing: border-box;
}
.mtf-city-tz {
  font-size: 12px; opacity: .6; margin-top: 2px;
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mtf-city-right {
  display: flex; align-items: center; gap: 10px;
}
.mtf-city-time {
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--primary-color); white-space: nowrap; min-width: 90px; text-align: right;
}
.mtf-remove-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12); background: #fff;
  font-size: 16px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  color: var(--danger-color, #D9534F); transition: all .12s ease; flex-shrink: 0;
}
.mtf-remove-btn:hover { background: rgba(217,83,79,.08); border-color: rgba(217,83,79,.4); }

/* ── Autocomplete dropdown ─────────────────────────── */
.mtf-autocomplete {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999; max-height: 220px; overflow-y: auto; margin-top: 4px;
}
.mtf-autocomplete-item {
  padding: 10px 14px; cursor: pointer; font-size: 13px;
  font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.05);
  display: flex; flex-direction: column; gap: 2px;
}
.mtf-autocomplete-item:last-child { border-bottom: none; }
.mtf-autocomplete-item:hover { background: rgba(74,144,226,.07); }
.mtf-autocomplete-city  { font-weight: 700; }
.mtf-autocomplete-tz    { font-size: 11px; opacity: .65; }

/* ── Add city button ───────────────────────────────── */
.mtf-add-city-btn {
  padding: 8px 16px; border-radius: 12px; border: 1px solid var(--primary-color);
  background: rgba(74,144,226,.08); color: var(--primary-color);
  font-weight: 900; font-size: 13px; cursor: pointer; transition: all .12s ease;
}
.mtf-add-city-btn:hover { background: rgba(74,144,226,.15); }
.mtf-add-city-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Presets ───────────────────────────────────────── */
.mtf-presets {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid rgba(0,0,0,.06); margin-bottom: 14px;
}
.mtf-presets-label { font-size: 12px; font-weight: 900; opacity: .6; text-transform: uppercase; flex-shrink: 0; }
.mtf-preset-btn {
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.10);
  background: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .12s ease; color: var(--text-color);
}
.mtf-preset-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }

/* ── Options row ───────────────────────────────────── */
.mtf-options-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.mtf-opt-field { display: flex; flex-direction: column; }
.mtf-opt-field label {
  font-size: 11px; font-weight: 900; opacity: .65;
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px;
}
.mtf-opt-field input,
.mtf-opt-field select {
  border: 1px solid rgba(0,0,0,.12); border-radius: 10px;
  padding: 9px 10px; font-size: 13px; font-weight: 700;
  background: #fff; color: var(--text-color);
}
.mtf-opt-field input:focus,
.mtf-opt-field select:focus { outline: none; border-color: var(--primary-color); }

/* ── Action row ────────────────────────────────────── */
.mtf-action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mtf-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 20px; border-radius: 14px; border: 1px solid rgba(0,0,0,.10);
  background: #fff; cursor: pointer; font-weight: 900; font-size: 14px;
  transition: all .12s ease; color: var(--text-color);
}
.mtf-action:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-1px); }
.mtf-action.primary {
  background: var(--primary-color); color: #fff; border-color: var(--primary-color);
  box-shadow: 0 4px 14px rgba(74,144,226,.3);
}
.mtf-action.primary:hover { background: var(--primary-hover,#357ABD); border-color: var(--primary-hover,#357ABD); }

/* ── Results section title ─────────────────────────── */
.mtf-section-title {
  font-size: 15px; font-weight: 900; margin-bottom: 10px; opacity: .85;
}

/* ── Best slots ────────────────────────────────────── */
.mtf-best-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }

.mtf-slot-card {
  border: 1px solid rgba(92,184,92,.35); border-radius: 16px;
  padding: 14px; background: rgba(92,184,92,.04); cursor: pointer;
  transition: all .12s ease;
}
.mtf-slot-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-1px); }
.mtf-slot-card.top { border-color: rgba(92,184,92,.7); background: rgba(92,184,92,.08); }

.mtf-slot-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 900; padding: 3px 8px;
  border-radius: 999px; background: #5CB85C; color: #fff; margin-bottom: 8px;
}
.mtf-slot-time  { font-size: 18px; font-weight: 900; margin-bottom: 6px; color: var(--primary-color); }
.mtf-slot-cities{ font-size: 12px; opacity: .78; line-height: 1.6; }

/* ── 24hr grid ─────────────────────────────────────── */
.mtf-grid-wrap {
  border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
  background: #fff; overflow: hidden; margin-bottom: 10px;
}
.mtf-grid-hours {
  display: grid; grid-template-columns: 120px repeat(24,1fr);
  border-bottom: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.02);
}
.mtf-hour-label {
  font-size: 10px; font-weight: 700; opacity: .55; text-align: center;
  padding: 6px 0; border-right: 1px solid rgba(0,0,0,.05);
}
.mtf-hour-label.now-col { color: var(--primary-color); font-weight: 900; opacity: 1; }
.mtf-grid-label { font-size: 11px; font-weight: 700; opacity: .55; padding: 6px 10px; }

.mtf-grid-rows  { display: flex; flex-direction: column; }
.mtf-grid-row   { display: grid; grid-template-columns: 120px repeat(24,1fr); border-bottom: 1px solid rgba(0,0,0,.05); }
.mtf-grid-row:last-child { border-bottom: none; }

.mtf-city-label-cell {
  font-size: 12px; font-weight: 700; padding: 10px 10px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid rgba(0,0,0,.07);
}
.mtf-city-label-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtf-city-label-tz   { font-size: 10px; opacity: .55; font-weight: 600; }

.mtf-grid-cell { border-right: 1px solid rgba(0,0,0,.04); min-height: 36px; position: relative; }
.mtf-cell-biz     { background: rgba(74,144,226,.12); }
.mtf-cell-overlap { background: rgba(92,184,92,.35); }
.mtf-cell-night   { background: rgba(0,0,0,.03); }
.mtf-cell-now     { background: rgba(255,152,0,.25); }
.mtf-cell-now-overlap { background: rgba(255,152,0,.45); }

/* ── Legend ────────────────────────────────────────── */
.mtf-legend {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-weight: 700; opacity: .75;
}
.mtf-legend-item { display: flex; align-items: center; gap: 5px; }
.mtf-legend-dot {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
}
.mtf-legend-dot.green   { background: rgba(74,144,226,.25); border: 1px solid rgba(74,144,226,.4); }
.mtf-legend-dot.overlap { background: rgba(92,184,92,.5);   border: 1px solid rgba(92,184,92,.6); }
.mtf-legend-dot.night   { background: rgba(0,0,0,.06);      border: 1px solid rgba(0,0,0,.12); }
.mtf-legend-dot.now     { background: rgba(255,152,0,.4);   border: 1px solid rgba(255,152,0,.6); }

/* ── City clocks ───────────────────────────────────── */
.mtf-city-clocks {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 10px;
}
.mtf-city-clock-card {
  border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  padding: 14px 12px; background: #fff; text-align: center;
}
.mtf-city-clock-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtf-city-clock-tz   { font-size: 10px; opacity: .55; margin-bottom: 8px; }
.mtf-city-clock-time { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--primary-color); }
.mtf-city-clock-date { font-size: 11px; opacity: .65; margin-top: 3px; }
.mtf-city-clock-status { font-size: 11px; font-weight: 700; margin-top: 5px; padding: 3px 8px; border-radius: 999px; display: inline-block; }
.mtf-city-clock-status.work  { background: rgba(92,184,92,.15); color: #3d8b3d; }
.mtf-city-clock-status.sleep { background: rgba(0,0,0,.06); color: rgba(0,0,0,.5); }
.mtf-city-clock-status.early { background: rgba(255,152,0,.15); color: #c47a00; }

/* ── No overlap ────────────────────────────────────── */
.mtf-no-overlap {
  text-align: center; padding: 40px 20px;
  border: 2px dashed rgba(0,0,0,.12); border-radius: 18px; margin-top: 16px;
  background: #fff;
}
.mtf-no-overlap-icon { font-size: 48px; margin-bottom: 12px; }
.mtf-no-overlap h3   { margin: 0 0 6px; }
.mtf-no-overlap p    { opacity: .75; max-width: 500px; margin: 0 auto; }

/* ── SEO card ──────────────────────────────────────── */
.mtf-seo-card {
  border: 1px solid rgba(0,0,0,.08); border-radius: 18px;
  padding: 18px; background: #fff; text-align: left;
}
.mtf-seo-card h2 { margin: 0 0 8px; }
.mtf-seo-card p  { margin: 0 0 10px; opacity: .9; }

/* ── How to grid ───────────────────────────────────── */
.mtf-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.mtf-how-step {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  padding: 14px; background: rgba(74,144,226,.03);
}
.mtf-how-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-color);
  color: #fff; font-size: 14px; font-weight: 900; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.mtf-how-step strong { font-size: 14px; display: block; margin-bottom: 4px; }
.mtf-how-step p { font-size: 13px; opacity: .85; margin: 0; line-height: 1.5; }

/* ── Combo grid ────────────────────────────────────── */
.mtf-combo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }
.mtf-combo-card {
  border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  padding: 14px; background: rgba(74,144,226,.03);
}
.mtf-combo-title  { font-size: 14px; font-weight: 900; margin-bottom: 5px; }
.mtf-combo-cities { font-size: 12px; opacity: .75; margin-bottom: 6px; }
.mtf-combo-tip    { font-size: 12px; opacity: .65; font-style: italic; }

/* ── Dark mode ─────────────────────────────────────── */
[data-theme="dark"] .mtf-tool-card,
[data-theme="dark"] .mtf-city-row,
[data-theme="dark"] .mtf-grid-wrap,
[data-theme="dark"] .mtf-city-clock-card,
[data-theme="dark"] .mtf-slot-card,
[data-theme="dark"] .mtf-no-overlap,
[data-theme="dark"] .mtf-seo-card,
[data-theme="dark"] .mtf-chip,
[data-theme="dark"] .mtf-kicker,
[data-theme="dark"] .mtf-action,
[data-theme="dark"] .mtf-preset-btn,
[data-theme="dark"] .mtf-autocomplete,
[data-theme="dark"] .mtf-how-step,
[data-theme="dark"] .mtf-combo-card { background: var(--bg-secondary); }

[data-theme="dark"] .mtf-city-row.has-data { background: rgba(74,144,226,.07); }
[data-theme="dark"] .mtf-opt-field input,
[data-theme="dark"] .mtf-opt-field select { background: var(--bg-color); color: var(--text-color); border-color: var(--border-color); }
[data-theme="dark"] .mtf-action.primary   { background: var(--primary-color); color: #fff; }
[data-theme="dark"] .mtf-autocomplete-item:hover { background: rgba(74,144,226,.12); }
[data-theme="dark"] .mtf-grid-rows .mtf-cell-night { background: rgba(255,255,255,.02); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 860px) {
  .mtf-options-row  { grid-template-columns: 1fr 1fr; }
  .mtf-best-slots   { grid-template-columns: 1fr 1fr; }
  .mtf-combo-grid   { grid-template-columns: 1fr 1fr; }
  .mtf-city-clocks  { grid-template-columns: repeat(3,1fr); }
  .mtf-grid-hours,
  .mtf-grid-row     { grid-template-columns: 100px repeat(24,1fr); }
}
@media (max-width: 600px) {
  .mtf-wrap         { padding: 50px 12px 80px; }
  .mtf-options-row  { grid-template-columns: 1fr 1fr; }
  .mtf-best-slots   { grid-template-columns: 1fr; }
  .mtf-combo-grid   { grid-template-columns: 1fr; }
  .mtf-city-clocks  { grid-template-columns: repeat(2,1fr); }
  .mtf-how-grid     { grid-template-columns: 1fr; }
  .mtf-action-row   { flex-direction: column; }
  .mtf-grid-hours,
  .mtf-grid-row     { grid-template-columns: 80px repeat(24,1fr); }
  .mtf-city-label-cell { padding: 8px 6px; }
  .mtf-city-label-tz { display: none; }
}