/* Shared design system for the main-site SEO/promo pages that live at the
   domain root (customer-support.php, customer-feedback.php,
   who-can-write-review-and-when.php, guidelines-for-reviewers.php).
   Same blue/green/orange brand palette as portal.css/admin.css, but this
   file is intentionally standalone: these pages load the main site's own
   header.css/footer.css and do NOT include portal.css. One shared,
   cacheable file instead of per-page inline <style> blocks. */

.tt-page {
  --tt-blue: #1b75bc; --tt-blue-deep: #125a94;
  --tt-green: #39b54a; --tt-green-deep: #27913a;
  --tt-orange: #f7941e; --tt-orange-deep: #d9780a;
  --tt-red: #d64545; --tt-red-deep: #b83a3a;
  --tt-slate: #414750; --tt-ink: #1f2430; --tt-muted: #647080;
  --tt-card: #ffffff; --tt-border: #e6eaf0; --tt-bg: #f5f7fa;
  --tt-radius: 14px;
  --tt-shadow: 0 1px 2px rgba(35,42,51,0.06), 0 8px 22px rgba(35,42,51,0.08);
}

.tt-page h2 { color: var(--tt-slate); font-size: 26px; margin: 0 0 6px; }
.tt-page h3 { color: var(--tt-slate); }
.tt-page .tt-section-sub { color: var(--tt-muted); font-size: 14.5px; margin: 0 0 26px; max-width: 640px; }
.tt-page .tt-section-head { margin-bottom: 8px; }
.tt-page .tt-lede { color: var(--tt-muted); font-size: 15px; line-height: 1.6; max-width: 760px; }

/* Trust pills under a hero intro */
.tt-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.tt-trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--tt-border); border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--tt-slate);
  box-shadow: var(--tt-shadow);
}
.tt-trust-pill i { color: var(--tt-green); }

/* Promo cards (quote / ticket / review) */
.tt-promo-stack { display: flex; flex-direction: column; gap: 18px; }
.tt-promo-card {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 24px; border-radius: var(--tt-radius); text-decoration: none;
  box-shadow: 0 1px 2px rgba(35,42,51,0.08), 0 10px 26px rgba(35,42,51,0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tt-promo-card:hover, .tt-promo-card:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(35,42,51,0.10), 0 16px 34px rgba(35,42,51,0.16); }
.tt-promo-card.quote { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep)); }
.tt-promo-card.ticket { background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep)); }
.tt-promo-card.review { background: linear-gradient(135deg, var(--tt-green), var(--tt-green-deep)); }
.tt-promo-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,0.18); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.tt-promo-text { color: #fff; }
.tt-promo-text .tt-promo-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.85; margin-bottom: 4px;
}
.tt-promo-text h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #fff; }
.tt-promo-text p { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,0.9); }
.tt-promo-arrow { margin-left: auto; color: #fff; font-size: 18px; flex-shrink: 0; }
.tt-hero-footnote { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--tt-muted); }
.tt-hero-footnote a { color: var(--tt-blue); font-weight: 700; text-decoration: none; }
.tt-hero-footnote a:hover { text-decoration: underline; }

/* Generic section wrapper */
.tt-section { padding: 56px 0; }
.tt-section.tt-alt { background: var(--tt-bg); }

/* Info card - icon header + row list + quick actions (hours, widgets, etc.) */
.tt-info-card {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch;
  background: var(--tt-card); border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius); box-shadow: var(--tt-shadow);
  padding: 28px 30px;
}
.tt-info-head { display: flex; align-items: flex-start; gap: 14px; flex: 1 1 220px; min-width: 220px; }
.tt-info-head .tt-icon-badge {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.tt-info-head h3 { margin: 0 0 4px; font-size: 17px; }
.tt-info-head p { margin: 0; font-size: 13px; color: var(--tt-muted); }
.tt-info-rows { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.tt-info-row {
  display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px;
  padding: 7px 0; border-bottom: 1px dashed var(--tt-border);
}
.tt-info-row:last-child { border-bottom: none; }
.tt-info-row span:first-child { color: var(--tt-slate); font-weight: 600; }
.tt-info-row span:last-child { color: var(--tt-muted); }
.tt-info-actions { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.tt-info-actions a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--tt-slate); font-weight: 600; font-size: 13.5px;
  background: var(--tt-bg); border-radius: 10px; padding: 10px 14px;
}
.tt-info-actions a i { color: var(--tt-blue); width: 16px; text-align: center; }
.tt-info-actions a:hover { background: #eef2f7; }

/* Plate grids - reused for "ways to reach us", "how we help", do/don't
   lists, and cross-page resource links */
.tt-plate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tt-plate {
  background: var(--tt-card); border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius); box-shadow: var(--tt-shadow);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tt-plate:hover, .tt-plate:focus-within { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(35,42,51,0.08), 0 14px 30px rgba(35,42,51,0.12); }
.tt-plate .tt-icon-badge {
  width: 42px; height: 42px; border-radius: 11px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.tt-plate.tt-tone-blue .tt-icon-badge { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep)); }
.tt-plate.tt-tone-orange .tt-icon-badge { background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep)); }
.tt-plate.tt-tone-green .tt-icon-badge { background: linear-gradient(135deg, var(--tt-green), var(--tt-green-deep)); }
.tt-plate h3 { margin: 0; font-size: 16.5px; }
.tt-plate p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tt-muted); flex-grow: 1; }
.tt-plate a.tt-plate-link { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--tt-blue); }
.tt-plate a.tt-plate-link:hover { text-decoration: underline; }
.tt-plate-badge {
  position: absolute; top: 16px; right: 16px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  background: var(--tt-green); border-radius: 999px; padding: 3px 9px;
}

/* Stat strip - "11+ years / 59,682+ moves" style highlight row */
.tt-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 6px 0 24px; }
.tt-stat { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); padding: 22px; text-align: center; }
.tt-stat-value { display: block; font-size: 30px; font-weight: 800; color: var(--tt-blue); }
.tt-stat-label { display: block; font-size: 12px; color: var(--tt-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

/* Image-topped plate - service/category cards with a photo, reusing the
   plate grid's spacing but its own card shape since a plain .tt-plate has
   no image slot */
.tt-plate-img {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--tt-card); border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tt-plate-img:hover, .tt-plate-img:focus-visible { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(35,42,51,0.08), 0 14px 30px rgba(35,42,51,0.12); }
.tt-plate-img img { width: 100%; height: 170px; object-fit: cover; display: block; }
.tt-plate-img-body { padding: 16px 18px; }
.tt-plate-img-body h3 { margin: 0; font-size: 15px; color: var(--tt-slate); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tt-plate-img-body h3 i { color: var(--tt-blue); font-size: 12px; flex-shrink: 0; }

/* CTA / teaser panel - full-width gradient banner, tone via modifier class */
.tt-cta-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  border-radius: var(--tt-radius); padding: 30px 32px; color: #fff;
}
.tt-cta-panel.tt-cta-green { background: linear-gradient(135deg, var(--tt-green), var(--tt-green-deep)); }
.tt-cta-panel.tt-cta-blue { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep)); }
.tt-cta-panel.tt-cta-orange { background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep)); }
.tt-cta-panel h3 { margin: 0 0 6px; font-size: 20px; color: #fff; }
.tt-cta-panel p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.9); max-width: 480px; }
.tt-cta-panel .tt-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 22px; border-radius: 10px; flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15); transition: transform 0.15s ease;
}
.tt-cta-panel.tt-cta-green .tt-cta-btn { color: var(--tt-green-deep); }
.tt-cta-panel.tt-cta-blue .tt-cta-btn { color: var(--tt-blue-deep); }
.tt-cta-panel.tt-cta-orange .tt-cta-btn { color: var(--tt-orange-deep); }
.tt-cta-btn.tt-cta-btn-ghost {
  background: rgba(255,255,255,0.15); color: #fff; box-shadow: none;
  border: 1px solid rgba(255,255,255,0.5);
}
.tt-cta-btn:hover, .tt-cta-btn:focus-visible { transform: translateY(-2px); }

/* Testimonial grid - approved customer reviews */
.tt-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tt-testimonial-card {
  background: var(--tt-card); border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius); box-shadow: var(--tt-shadow);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.tt-testimonial-stars { color: var(--tt-orange); font-size: 14px; letter-spacing: 2px; }
.tt-testimonial-stars .fa-star-o { color: var(--tt-border); }
.tt-testimonial-msg { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--tt-ink); flex-grow: 1; }
.tt-testimonial-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--tt-muted); border-top: 1px dashed var(--tt-border); padding-top: 10px; }
.tt-testimonial-meta strong { color: var(--tt-slate); }
.tt-empty-note { color: var(--tt-muted); font-size: 14px; background: var(--tt-card); border: 1px dashed var(--tt-border); border-radius: var(--tt-radius); padding: 24px; text-align: center; }

/* Form (customer-feedback.php review submission) - decorative blurred
   corner blobs give the card a bit of premium polish without any JS or
   extra markup; children are lifted to z-index:1 to sit above them. */
.tt-form { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); padding: 32px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.tt-form::before, .tt-form::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; filter: blur(50px); opacity: 0.10; pointer-events: none; }
.tt-form::before { background: var(--tt-blue); top: -90px; right: -90px; }
.tt-form::after { background: var(--tt-orange); bottom: -90px; left: -90px; }
.tt-form > * { position: relative; z-index: 1; }
.tt-form-accent { height: 5px; margin: -32px -32px 0; background: linear-gradient(90deg, var(--tt-blue), var(--tt-green), var(--tt-orange)); }
/* .tt-info-head is normally a flex-basis:220px column inside the
   horizontal .tt-info-card layout - neutralize that sizing when it's
   reused as a plain header inside .tt-form's *column* flex direction,
   where flex-basis/min-width would otherwise be read as height. */
.tt-form .tt-info-head { flex: 0 0 auto; min-width: 0; }
.tt-field { display: flex; flex-direction: column; gap: 6px; }
.tt-field label { font-size: 13px; font-weight: 600; color: var(--tt-slate); }
.tt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tt-form input[type="text"], .tt-form input[type="email"], .tt-form input[type="tel"],
.tt-form input[type="number"], .tt-form select, .tt-form textarea {
  border: 1px solid var(--tt-border); border-radius: 10px; padding: 11px 13px;
  font-size: 14px; font-family: inherit; color: var(--tt-ink); background: #fff; width: 100%;
}
.tt-form input:focus, .tt-form select:focus, .tt-form textarea:focus {
  outline: 2px solid var(--tt-blue); outline-offset: 1px; border-color: var(--tt-blue);
}
.tt-form textarea { resize: vertical; min-height: 110px; }

/* Colored icon accents inside inputs/selects - a bit of field-to-field
   color variety instead of one flat gray form */
.tt-field-icon { position: relative; }
.tt-field-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; }
/* Specificity must strictly beat the base `.tt-form input[type="..."]`
   rule above (0,2,1) regardless of source order - its shorthand
   `padding: 11px 13px` would otherwise reset padding-left and pull the
   icon back under the input text. Repeating the type attribute here
   pushes this to (0,3,1). */
.tt-form .tt-field-icon input[type="text"],
.tt-form .tt-field-icon input[type="email"],
.tt-form .tt-field-icon input[type="tel"],
.tt-form .tt-field-icon input[type="number"],
.tt-form .tt-field-icon select { padding-left: 40px; }
.tt-field-icon.tt-icon-blue > i { color: var(--tt-blue); }
.tt-field-icon.tt-icon-green > i { color: var(--tt-green); }
.tt-field-icon.tt-icon-orange > i { color: var(--tt-orange); }

.tt-form-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep)); color: #fff;
  border: none; border-radius: 10px; padding: 13px 20px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; align-self: flex-start;
  box-shadow: 0 8px 20px rgba(247,148,30,0.30);
}
.tt-form-submit:hover, .tt-form-submit:focus-visible { filter: brightness(1.05); transform: translateY(-1px); }
.tt-form-note { font-size: 12.5px; color: var(--tt-muted); margin: 0; }
.tt-form-note a { color: var(--tt-blue); text-decoration: none; font-weight: 600; }
.tt-form-note a:hover { text-decoration: underline; }
.tt-form-alert { border-radius: 10px; padding: 14px 16px; font-size: 13.5px; margin-bottom: 4px; }
.tt-form-alert.tt-alert-success { background: #eaf7ec; color: var(--tt-green-deep); border: 1px solid #bfe6c4; }
.tt-form-alert.tt-alert-error { background: #fdf1e4; color: var(--tt-orange-deep); border: 1px solid #f6d5ab; }
.tt-form-alert ul { margin: 0; padding-left: 18px; }

/* Honeypot - hidden from real users, catches basic bots */
.tt-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Warm panel behind the star rating so it stands out from the plain
   white fields around it */
.tt-star-panel {
  background: linear-gradient(135deg, #fff6ea, #fffaf2); border: 1px solid #f6d5ab;
  border-radius: 12px; padding: 16px 18px;
}

/* Star rating input - CSS-only, no JS. Radio inputs in reverse DOM order
   (5..1) + flex row-reverse displays them 1..5 left-to-right while the
   ~ sibling selector lights up everything "before" the hovered/checked
   star in visual order. */
.tt-star-input { border: none; margin: 0; padding: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.tt-star-input legend { width: 100%; font-size: 13px; font-weight: 600; color: var(--tt-slate); margin-bottom: 2px; padding: 0; }
.tt-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tt-star-input label { cursor: pointer; font-size: 30px; line-height: 1; color: var(--tt-border); transition: color 0.1s ease; }
.tt-star-input input:checked ~ label,
.tt-star-input label:hover,
.tt-star-input label:hover ~ label { color: var(--tt-orange); }
.tt-star-input input:focus-visible + label { outline: 2px solid var(--tt-blue); outline-offset: 2px; border-radius: 4px; }
.tt-star-input label { transition: color 0.1s ease, transform 0.1s ease; }
.tt-star-input label:hover { transform: scale(1.15); }

/* Success banner - sits above the form after a submission; the form
   itself always stays visible so another review can be submitted right
   away without an extra click. */
.tt-success-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #eaf7ec, #f4fbf1);
  border: 1px solid #bfe6c4; border-radius: var(--tt-radius);
  padding: 20px 24px;
}
.tt-thankyou-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--tt-green), var(--tt-green-deep));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: 0 8px 18px rgba(57,181,74,0.3);
}
.tt-success-banner h3 { margin: 0 0 4px; font-size: 16.5px; color: var(--tt-green-deep); }
.tt-success-banner p { margin: 0; font-size: 13.5px; color: var(--tt-slate); }

/* Icon link list inside a .tt-plate (contact-us.php's Sales/Support
   plates) - a fresh class rather than reusing .tt-info-actions, since
   that one carries a flex-basis meant for .tt-info-card's row layout
   which would misbehave inside a .tt-plate's column layout. */
.tt-plate-links { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tt-plate-links a {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--tt-slate); font-weight: 600; font-size: 12.5px;
  background: var(--tt-bg); border-radius: 8px; padding: 8px 12px;
}
.tt-plate-links a i { color: var(--tt-blue); width: 14px; text-align: center; flex-shrink: 0; }
.tt-plate-links a:hover { background: #eef2f7; }

/* Medium outline button - used for the standalone Trustpilot link */
.tt-btn-outline {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  border: 1.5px solid var(--tt-border); color: var(--tt-slate); font-weight: 700; font-size: 14px;
  padding: 11px 20px; border-radius: 10px; background: #fff;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tt-btn-outline i { color: #00b67a; }
.tt-btn-outline:hover, .tt-btn-outline:focus-visible { border-color: #00b67a; color: #00b67a; transform: translateY(-2px); }

/* Guideline plates - highlighted colored links into the two reviewer
   guide pages, shown above the review form */
.tt-guide-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 4px; }
.tt-guide-link {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border-radius: 12px; padding: 14px 16px; color: #fff;
  box-shadow: 0 1px 2px rgba(35,42,51,0.08), 0 8px 18px rgba(35,42,51,0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tt-guide-link:hover, .tt-guide-link:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(35,42,51,0.10), 0 14px 26px rgba(35,42,51,0.16); }
.tt-guide-link.tt-tone-blue { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep)); }
.tt-guide-link.tt-tone-orange { background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep)); }
.tt-guide-link-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.tt-guide-link-text { flex-grow: 1; }
.tt-guide-link-text span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.tt-guide-link-text strong { display: block; font-size: 14px; }
.tt-guide-link-arrow { flex-shrink: 0; opacity: 0.85; }

/* Category filter tabs (faqs.php) - pill row above the accordion */
.tt-cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tt-cat-tab {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: #fff; border: 1px solid var(--tt-border); color: var(--tt-slate);
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tt-cat-tab:hover { border-color: var(--tt-blue); color: var(--tt-blue); }
.tt-cat-tab.active { background: var(--tt-blue); border-color: var(--tt-blue); color: #fff; }
.tt-cat-tab .tt-cat-count { opacity: 0.7; font-weight: 500; }

/* FAQ accordion - CSS handles the icon rotation, a tiny script (faq.js)
   toggles the [hidden] attribute and aria-expanded so it also degrades
   to "all questions visible" if JS fails to load. */
.tt-accordion { display: flex; flex-direction: column; gap: 12px; }
.tt-accordion-item {
  background: var(--tt-card); border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); overflow: hidden;
}
.tt-accordion-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 18px 22px; font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--tt-slate);
}
.tt-accordion-btn .tt-accordion-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--tt-bg); color: var(--tt-blue);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tt-accordion-btn[aria-expanded="true"] .tt-accordion-icon {
  background: var(--tt-blue); color: #fff; transform: rotate(45deg);
}
.tt-accordion-panel { padding: 0 22px 20px; color: var(--tt-muted); font-size: 13.5px; line-height: 1.7; }
.tt-accordion-panel a { color: var(--tt-blue); font-weight: 600; text-decoration: none; }
.tt-accordion-panel a:hover { text-decoration: underline; }
.tt-accordion-meta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tt-green-deep); background: #eaf7ec; border-radius: 999px; padding: 3px 10px;
}

/* Public-facing pager (distinct from admin.css's .pager) */
.tt-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.tt-pager a, .tt-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--tt-border); color: var(--tt-slate); background: #fff;
}
.tt-pager a:hover { border-color: var(--tt-blue); color: var(--tt-blue); }
.tt-pager a.active { background: var(--tt-blue); border-color: var(--tt-blue); color: #fff; }

/* Consignment tracking page (packers-and-movers-tracking.php) */

/* Tighter section rhythm just around the search -> result -> promo flow,
   so a not-found/found result sits close to what triggered it instead of
   the generic 56px .tt-section padding stacking into a large gap. */
#result.tt-section { padding-bottom: 12px; }
.trk-promo-section { padding-top: 8px; padding-bottom: 48px; }

.trk-search-card {
  margin-top: 26px; max-width: 640px; background: var(--tt-card);
  border: 1px solid var(--tt-border); border-radius: var(--tt-radius);
  box-shadow: 0 1px 2px rgba(35,42,51,0.08), 0 14px 34px rgba(35,42,51,0.12);
  padding: 26px 28px; position: relative; overflow: hidden;
}
.trk-search-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--tt-blue), var(--tt-green), var(--tt-orange));
}
.trk-search-form { margin: 0; }
.trk-search-row { display: flex; gap: 10px; position: relative; }
.trk-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--tt-blue); font-size: 15px; pointer-events: none;
}
.trk-search-row input[type="text"] {
  flex: 1; min-width: 0; border: 1.5px solid var(--tt-border); border-radius: 10px;
  padding: 14px 16px 14px 42px; font-size: 15px; font-family: inherit; font-weight: 600;
  letter-spacing: 0.02em; color: var(--tt-ink); background: var(--tt-bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.trk-search-row input[type="text"]:focus { outline: none; border-color: var(--tt-blue); background: #fff; box-shadow: 0 0 0 3px rgba(27,117,188,0.12); }
.trk-search-btn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap;
  background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep)); color: #fff;
  border: none; border-radius: 10px; padding: 14px 26px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; box-shadow: 0 8px 20px rgba(247,148,30,0.30);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.trk-search-btn:hover, .trk-search-btn:focus-visible { filter: brightness(1.05); transform: translateY(-1px); }
.trk-search-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--tt-muted); display: flex; align-items: center; gap: 6px; }
.trk-search-hint i { color: var(--tt-blue); }
.trk-search-card .tt-trust-row { margin: 18px 0 0; }

.trk-status-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); overflow: hidden; margin-bottom: 20px; }
.trk-status-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 30px; color: #fff; position: relative; overflow: hidden; }
.trk-status-top::after {
  content: ""; position: absolute; top: -50%; right: -8%; width: 220px; height: 220px;
  background: rgba(255,255,255,0.10); border-radius: 50%; pointer-events: none;
}
.trk-status-top.trk-tone-blue { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep)); }
.trk-status-top.trk-tone-green { background: linear-gradient(135deg, var(--tt-green), var(--tt-green-deep)); }
.trk-status-top.trk-tone-orange { background: linear-gradient(135deg, var(--tt-orange), var(--tt-orange-deep)); }
.trk-status-top.trk-tone-red { background: linear-gradient(135deg, var(--tt-red), var(--tt-red-deep)); }
.trk-status-top > * { position: relative; z-index: 1; }
.trk-status-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.trk-status-no { font-size: 27px; font-weight: 800; letter-spacing: 0.04em; margin-top: 3px; }
.trk-status-customer { margin-top: 9px; font-size: 13px; opacity: 0.92; display: flex; align-items: center; gap: 6px; }
.trk-status-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.trk-pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; animation: trk-pulse 1.6s ease-in-out infinite; }
@keyframes trk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }

.trk-status-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 30px; border-bottom: 1px solid var(--tt-border); }
.trk-act-btn {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer;
  background: var(--tt-bg); border: 1px solid var(--tt-border); color: var(--tt-slate);
  font-weight: 600; font-size: 12.5px; font-family: inherit; padding: 9px 15px; border-radius: 8px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.trk-act-btn:hover, .trk-act-btn:focus-visible { border-color: var(--tt-blue); color: var(--tt-blue); background: var(--tt-blue-soft, #eef4fb); }
.trk-act-btn i { color: var(--tt-blue); }

.trk-progress { padding: 26px 30px 28px; }
.trk-progress-track { position: relative; display: flex; justify-content: space-between; padding-top: 15px; }
.trk-progress-track::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 4px; background: var(--tt-border); border-radius: 2px; }
.trk-progress-fill { position: absolute; top: 15px; left: 0; height: 4px; background: linear-gradient(90deg, var(--tt-green), var(--tt-green-deep)); border-radius: 2px; z-index: 1; transition: width 0.4s ease; }
.trk-progress-step { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.trk-progress-dot { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--tt-border); transition: all 0.2s ease; }
.trk-progress-step.done .trk-progress-dot { background: var(--tt-green); border-color: var(--tt-green); }
.trk-progress-step.active .trk-progress-dot { width: 17px; height: 17px; background: #fff; border-color: var(--tt-blue); box-shadow: 0 0 0 5px rgba(27,117,188,0.15); }
.trk-progress-label { font-size: 10.5px; font-weight: 600; color: var(--tt-muted); text-align: center; max-width: 84px; line-height: 1.3; }
.trk-progress-step.done .trk-progress-label { color: var(--tt-green-deep); }
.trk-progress-step.active .trk-progress-label { color: var(--tt-slate); font-weight: 700; }

.trk-route { display: flex; align-items: center; gap: 18px; background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); padding: 26px 28px; margin-bottom: 20px; }
.trk-route-city { flex: 0 0 auto; text-align: center; }
.trk-route-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 18px; margin: 0 auto 9px; box-shadow: 0 6px 16px rgba(35,42,51,0.18); }
.trk-route-icon.from { background: linear-gradient(135deg, var(--tt-blue), var(--tt-blue-deep)); }
.trk-route-icon.to { background: linear-gradient(135deg, var(--tt-green), var(--tt-green-deep)); }
.trk-route-city-name { font-weight: 700; font-size: 15.5px; color: var(--tt-slate); }
.trk-route-city-tag { font-size: 11px; color: var(--tt-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.trk-route-mid { flex: 1; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--tt-orange); }
.trk-route-mid > i.fa-truck { font-size: 22px; }
.trk-route-line { width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--tt-border) 0 8px, transparent 8px 14px); }
.trk-route-current {
  font-size: 12px; color: var(--tt-muted); white-space: nowrap;
  background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: 999px; padding: 6px 14px;
}
.trk-route-current strong { color: var(--tt-slate); }

.trk-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.trk-info-card { display: flex; align-items: flex-start; gap: 13px; background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 12px; box-shadow: var(--tt-shadow); padding: 16px 18px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.trk-info-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(35,42,51,0.08), 0 14px 28px rgba(35,42,51,0.10); }
.trk-info-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px; font-size: 15px; margin-top: 1px;
}
.trk-info-icon.trk-tone-blue { background: var(--tt-blue); color: #fff; }
.trk-info-icon.trk-tone-green { background: var(--tt-green); color: #fff; }
.trk-info-icon.trk-tone-orange { background: var(--tt-orange); color: #fff; }
.trk-info-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trk-info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tt-muted); }
.trk-info-value { font-size: 14px; font-weight: 600; color: var(--tt-slate); word-break: break-word; }
.trk-info-value a { color: var(--tt-blue); text-decoration: none; }
.trk-info-value a:hover { text-decoration: underline; }
.trk-span2 { grid-column: span 2; }

.trk-timeline-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: var(--tt-shadow); padding: 26px 28px; }
.trk-timeline-card h3 { display: flex; align-items: center; gap: 8px; font-size: 16.5px; margin: 0 0 20px; }
.trk-timeline-card h3 i { color: var(--tt-orange); }
.trk-timeline { position: relative; display: flex; flex-direction: column; gap: 24px; padding-left: 22px; }
.trk-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--tt-border); }
.trk-timeline-item { position: relative; }
.trk-timeline-dot { position: absolute; left: -22px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--tt-blue); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--tt-blue); }
.trk-timeline-dot.trk-tone-blue { background: var(--tt-blue); box-shadow: 0 0 0 2px var(--tt-blue); }
.trk-timeline-dot.trk-tone-green { background: var(--tt-green); box-shadow: 0 0 0 2px var(--tt-green); }
.trk-timeline-dot.trk-tone-orange { background: var(--tt-orange); box-shadow: 0 0 0 2px var(--tt-orange); }
.trk-timeline-dot.trk-tone-red { background: var(--tt-red); box-shadow: 0 0 0 2px var(--tt-red); }
.trk-timeline-item:first-child .trk-timeline-dot { width: 15px; height: 15px; left: -23px; top: 2px; box-shadow: 0 0 0 4px rgba(27,117,188,0.15); }
.trk-timeline-item:first-child .trk-timeline-dot.trk-tone-blue { box-shadow: 0 0 0 4px rgba(27,117,188,0.15); }
.trk-timeline-item:first-child .trk-timeline-dot.trk-tone-green { box-shadow: 0 0 0 4px rgba(57,181,74,0.15); }
.trk-timeline-item:first-child .trk-timeline-dot.trk-tone-orange { box-shadow: 0 0 0 4px rgba(247,148,30,0.15); }
.trk-timeline-item:first-child .trk-timeline-dot.trk-tone-red { box-shadow: 0 0 0 4px rgba(214,69,69,0.15); }
.trk-timeline-status { font-weight: 700; font-size: 14px; color: var(--tt-slate); display: flex; align-items: center; gap: 8px; }
.trk-timeline-latest {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--tt-green); border-radius: 999px; padding: 2px 8px;
}
.trk-timeline-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--tt-muted); margin-top: 4px; }
.trk-timeline-meta i { margin-right: 4px; }
.trk-timeline-remarks { font-size: 12.5px; color: var(--tt-muted); font-style: italic; margin-top: 6px; }

@media (max-width: 640px) {
  .tt-info-card { flex-direction: column; }
  .tt-cta-panel { flex-direction: column; align-items: flex-start; }
  .tt-field-row { grid-template-columns: 1fr; }
  .trk-search-card { padding: 20px; }
  .trk-search-row { flex-direction: column; }
  .trk-search-icon { display: none; }
  .trk-search-row input[type="text"] { padding-left: 16px; }
  .trk-status-top { flex-direction: column; align-items: flex-start; }
  .trk-status-badge { align-self: flex-start; }
  .trk-route { flex-direction: column; }
  .trk-route-line { display: none; }
  .trk-span2 { grid-column: span 1; }
  .trk-progress-label { max-width: 54px; font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-promo-card, .tt-plate, .tt-cta-btn, .tt-star-input label, .tt-btn-outline, .tt-guide-link, .tt-form-submit, .tt-accordion-icon, .tt-cat-tab, .trk-search-btn, .trk-act-btn { transition: none; }
  .tt-promo-card:hover, .tt-plate:hover, .tt-cta-btn:hover, .tt-star-input label:hover, .tt-btn-outline:hover, .tt-guide-link:hover, .tt-form-submit:hover, .trk-search-btn:hover, .trk-act-btn:hover { transform: none; }
  .trk-pulse { animation: none; }
  .trk-progress-fill { transition: none; }
  .trk-info-card { transition: none; }
  .trk-info-card:hover { transform: none; }
}