/* ── FTOM Core – Frontend (Consolidated) ─────────────────────────── */

/* Lists */
.ftom .ftom-list,
.ftom-top-list { list-style: none; padding: 0; }
.ftom .ftom-list li { margin: .5rem 0; }
.ftom-top-list { display: grid; gap: .5rem; }
.ftom-top-list li { display: flex; align-items: center; gap: .4rem; }

/* Buttons */
.ftom-btn { padding: .7rem 1rem; border-radius: 10px; cursor: pointer; }
.ftom-primary { background: var(--ftom-accent, #dd4a58); color: #fff; border: none; }

/* Visual */
.ftom-hero-image { max-width: 100%; border-radius: 12px; }
.ftom-stars { opacity: .8; }
.ftom-status { margin-top: .5rem; font-size: .95rem; opacity: .85; }

/* Locator – Grid */
.ftom-locator .ftom-locator-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}
@media (min-width:700px) {
  .ftom-locator .ftom-locator-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Locator – ZIP controls */
.ftom-locator .ftom-zipbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.ftom-locator .ftom-zip-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.ftom-locator .ftom-zip-wrap input[type="text"] { max-width: 220px; }

/* Keep Find next to input; push Locate Me to the side */
.ftom-locator #ftom-zip-go { order: 2; }
.ftom-locator #ftom-geolocate { margin-left: auto; }
@media (max-width:600px) {
  .ftom-locator #ftom-geolocate { margin-left: 0; }
}

/* Locator hero */
.ftom-locator-hero{max-width:1100px;margin:28px auto;padding:0px;}
.ftom-locator-wrap{background:transparent;border:none;box-shadow:none;padding:0}
.ftom-locator-title{margin:0 0 4px;font-size:26px;font-weight:800}
.ftom-locator-sub{margin:0 0 12px;color:#6b7280}
.ftom-locator-bar{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end}
.ftom-input label{display:block;font-weight:600;font-size:12px;margin-bottom:4px}
.ftom-input input{width:100%;height:42px;padding:8px 12px;border:1px solid #d1d5db;border-radius:10px}
.ftom-ghost{background:transparent;border:1px solid #d1d5db}
.ftom-under{margin-top:10px;}
.ftom-status{margin-top:10px;min-height:18px;color:#6b7280;font-size:13px}
@media (max-width:720px){
  .ftom-locator-bar{grid-template-columns:1fr;align-items:stretch}
  .ftom-ghost,.button{height:42px}
}

.ftom-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.ftom-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ftom-cards{grid-template-columns:1fr}}
.ftom-card{display:block;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.04);text-decoration:none;color:inherit}
.ftom-card-media{aspect-ratio:16/9;background:#f3f4f6;margin:0}
.ftom-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.ftom-card-ph{width:100%;height:100%;background:linear-gradient(135deg,#f3f4f6,#eceff3)}
.ftom-card-body{padding:12px}
.ftom-card-title{font-weight:800;margin:0 0 4px}
.ftom-card-sub{color:#6b7280;margin:0 0 6px}
.ftom-card-meta{font-size:13px;color:#374151}

/* Tighten spacing for FTOM blocks inside modules tagged .ftom-tight */
.ftom-tight .et_pb_text_inner > p { margin-bottom: 6px; }         /* shrink generic */
.ftom-tight .et_pb_text_inner > p:empty { display: none; }         /* kill stray empties */

/* Ensure our blocks start flush with no added gap */
.ftom-tight .et_pb_text_inner > .ftom-cards,
.ftom-tight .et_pb_text_inner > .ftom-locator-hero { margin-top: 0; }

/* Mobile safety */
@media (max-width: 768px){
  .ftom-tight .et_pb_text_inner > p { margin-bottom: 4px; }
}

/* (Optional) If you used the locator “card”, you can flatten it for Divi styling */
.ftom-tight .ftom-locator-wrap{
  background: transparent; border: 0; box-shadow: none; padding: 0;
}

/* ---------- FTOM Home: spacing + layout ---------- */
.ftom-home .ftom-locator-hero{ margin:0 0 16px; padding:0 }
.ftom-home .ftom-locator-wrap{
  background:transparent; border:0; box-shadow:none; padding:0; /* Divi can style the container */
}
.ftom-home .ftom-locator-title{ font-size:28px; margin:0 0 6px }
.ftom-home .ftom-locator-sub{ margin:0 0 12px; color:#6b7280 }
.ftom-home .ftom-locator-bar{
  margin:0; gap:10px; display:grid; grid-template-columns:1fr auto auto; align-items:end
}
.ftom-home .ftom-input input{
  height:42px; padding:8px 12px; border:1px solid #d1d5db; border-radius:10px
}
.ftom-home .ftom-status{ margin-top:8px; min-height:0 }

/* Cards grid (top trucks) */
.ftom-home .ftom-cards{ margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
@media (max-width:900px){ .ftom-home .ftom-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .ftom-home .ftom-cards{ grid-template-columns:1fr } }

/* Card look kept minimal so Divi can provide outer borders/padding if desired */
.ftom-home .ftom-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.04)
}
.ftom-home .ftom-card-media{ aspect-ratio:16/9; background:#f3f4f6; margin:0 }
.ftom-home .ftom-card-media img{ width:100%; height:100%; object-fit:cover; display:block }
.ftom-home .ftom-card-body{ padding:12px }
.ftom-home .ftom-card-title{ margin:0 0 4px; font-weight:800 }
.ftom-home .ftom-card-sub{ margin:0 0 6px; color:#6b7280 }
.ftom-home .ftom-card-meta{ font-size:13px; color:#374151 }

/* Tighten any stray module paragraph spacing that might slip in */
.ftom-home p:empty{ display:none }

/* Hover polish */
.ftom-home .ftom-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ftom-home .ftom-card:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  border-color:#d8dde6;
}
.ftom-home .ftom-card-media{ overflow:hidden }
.ftom-home .ftom-card-media img{
  transition: transform .25s ease;
}
.ftom-home .ftom-card:hover .ftom-card-media img{
  transform: scale(1.03);
}

/* Star icons rendered via CSS mask (no extra images) */
.ftom-home .ftom-card-meta{
  display:flex; align-items:center; gap:8px;
}

/* base 5 gray stars */
.ftom-home .ftom-stars{
  position:relative; display:inline-block; width:90px; height:18px;
}
.ftom-home .ftom-stars::before,
.ftom-home .ftom-stars::after{
  content:""; position:absolute; inset:0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><defs><path id="s" d="M10 1.5l2.6 5.3 5.9.9-4.2 4.1 1 5.9L10 15.6 4.7 17.7l1-5.9L1.5 7.7l5.9-.9z"/></defs><use href="#s"/><use href="#s" x="22"/><use href="#s" x="44"/><use href="#s" x="66"/><use href="#s" x="88"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 20"><defs><path id="s" d="M10 1.5l2.6 5.3 5.9.9-4.2 4.1 1 5.9L10 15.6 4.7 17.7l1-5.9L1.5 7.7l5.9-.9z"/></defs><use href="#s"/><use href="#s" x="22"/><use href="#s" x="44"/><use href="#s" x="66"/><use href="#s" x="88"/></svg>') center / contain no-repeat;
}
.ftom-home .ftom-stars::before{ background:#e5e7eb; }          /* empty stars */
.ftom-home .ftom-stars::after{
  background:linear-gradient(90deg,#f59e0b,#fbbf24);           /* filled stars */
  width:var(--pct,0%);                                        /* set per-card */
  overflow:hidden; display:block;
}

/* keep numeric count tidy */
.ftom-home .ftom-count{ color:#6b7280; font-variant-numeric: tabular-nums; }