/* ============================================================
   TCE Transfer System — Frontend Styles
   Brand: teal #1a3d47 / #0d3d4e · gold #AE9A78 / #7A6440
   Namespace: tcetr-*  (fully isolated from legacy tcs-/tc-/tcv- classes)
============================================================ */

:root {
    --tcetr-teal: #1a3d47;
    --tcetr-teal-2: #0d3d4e;
    --tcetr-gold: #AE9A78;
    --tcetr-gold-2: #7A6440;
    --tcetr-ink: #1f2d33;
    --tcetr-muted: #64748b;
    --tcetr-border: #e4e8eb;
    --tcetr-bg-soft: #f6f9fa;
}

.tcetr-page, .tcetr-page * { box-sizing: border-box; }

/* ── Slim breadcrumb bar (replaces the old auto-banner) ─────── */
.tcetr-ctxbar { border-bottom: 1px solid var(--tcetr-border); }
.tcetr-ctxbar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; }
.tcetr-breadcrumb { font-size: 12.5px; color: var(--tcetr-muted); }
.tcetr-breadcrumb a { color: var(--tcetr-muted); text-decoration: none; }
.tcetr-breadcrumb a:hover { color: var(--tcetr-teal); }
.tcetr-bc-sep { margin: 0 7px; opacity: .5; }
.tcetr-bc-current { color: var(--tcetr-gold-2); font-weight: 600; }

/* ── Archive header (no hero image — plain, quiet) ───────────── */
.tcetr-archive-head { padding: 30px 0 6px; }
.tcetr-archive-title { font-size: 1.7em; font-weight: 800; color: var(--tcetr-teal); margin: 6px 0 8px; }
.tcetr-archive-subtitle { color: var(--tcetr-muted); font-size: .95em; max-width: 620px; margin: 0; }
.tcetr-archive-sub-title { font-size: 1.05em; font-weight: 800; color: var(--tcetr-teal); margin: 6px 0 14px; }

/* ── Browse by Category grid ─────────────────────────────── */
.tcetr-type-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 34px; }
.tcetr-type-card { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4/4.4; text-decoration: none; background: linear-gradient(135deg, var(--tcetr-teal), var(--tcetr-teal-2)); transition: transform .2s; }
.tcetr-type-card:hover { transform: translateY(-3px); }
.tcetr-type-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcetr-type-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tcetr-type-ph span { font-size: 40px; opacity: .85; }
.tcetr-type-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,25,30,.88) 0%, rgba(10,25,30,.1) 60%, transparent 78%); }
.tcetr-type-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; }
.tcetr-type-name { display: block; color: #fff; font-size: .85em; font-weight: 800; line-height: 1.25; margin-bottom: 2px; }
.tcetr-type-count { display: block; color: rgba(255,255,255,.7); font-size: .68em; }
.tcetr-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; color: var(--tcetr-gold-2); font-size: .75em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.3px;
}
.tcetr-eyebrow svg { color: var(--tcetr-gold); }

/* ── Page shell ───────────────────────────────────────────── */
.tcetr-page { padding: 36px 0 60px; color: var(--tcetr-ink); font-size: 15px; line-height: 1.65; }
.tcetr-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.tcetr-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 1.15em; font-weight: 700; color: var(--tcetr-teal);
    margin: 30px 0 14px;
}
.tcetr-section-title:first-child { margin-top: 0; }

/* ── Route strip ──────────────────────────────────────────── */
.tcetr-route {
    display: flex; align-items: center; gap: 14px;
    background: var(--tcetr-bg-soft); border: 1px solid var(--tcetr-border);
    border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; flex-wrap: wrap;
}
.tcetr-route-point { display: flex; align-items: center; gap: 10px; }
.tcetr-route-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.tcetr-dot-a { background: var(--tcetr-teal); }
.tcetr-dot-b { background: var(--tcetr-gold); }
.tcetr-route-label { display: block; font-size: .72em; color: var(--tcetr-muted); text-transform: uppercase; letter-spacing: .5px; }
.tcetr-route-name { display: block; font-weight: 700; color: var(--tcetr-ink); font-size: 1.02em; }
.tcetr-route-connector { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 100px; }
.tcetr-route-line { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--tcetr-border) 0 6px, transparent 6px 10px); }
.tcetr-route-mid { display: flex; gap: 10px; font-size: .78em; color: var(--tcetr-muted); white-space: nowrap; }

/* ── Pills ────────────────────────────────────────────────── */
.tcetr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tcetr-pill {
    background: #fff; border: 1px solid var(--tcetr-border); color: var(--tcetr-ink);
    padding: 7px 14px; border-radius: 20px; font-size: .82em; font-weight: 600;
}

/* ── Description ─────────────────────────────────────────── */
.tcetr-description { color: #4b5a63; margin-bottom: 10px; }
.tcetr-description p:last-child { margin-bottom: 0; }

/* ── Highlights ───────────────────────────────────────────── */
.tcetr-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tcetr-hl {
    background: rgba(174,154,120,.12); border: 1px solid rgba(174,154,120,.35);
    color: var(--tcetr-gold-2); padding: 6px 13px; border-radius: 20px; font-size: .8em; font-weight: 600;
}

/* ── Vehicle cards — large, stacked, rich (event-card style) ── */
.tcetr-vwrap { margin: 10px 0 6px; }
.tcetr-vstack { display: flex; flex-direction: column; gap: 16px; }
.tcetr-vcard {
    display: grid; grid-template-columns: 260px 1fr;
    border: 1.5px solid var(--tcetr-border); border-radius: 18px; overflow: hidden; background: #fff; position: relative;
}
.tcetr-vcard-rec { border-color: var(--tcetr-teal); box-shadow: 0 14px 32px rgba(26,61,71,.13); }
.tcetr-vtag {
    position: absolute; top: 14px; left: 14px; background: var(--tcetr-teal); color: #fff;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: 5px 12px; border-radius: 20px; z-index: 2; display: flex; align-items: center; gap: 5px;
}
.tcetr-vphoto { position: relative; background: radial-gradient(circle at 50% 55%, #eef3f4 0%, #e7edee 55%, #dfe7e9 100%); display: flex; align-items: center; justify-content: center; min-height: 190px; overflow: hidden; }
.tcetr-vphoto img { width: 100%; height: 100%; object-fit: cover; }
.tcetr-vphoto-emoji { font-size: 128px; line-height: 1; filter: drop-shadow(0 10px 14px rgba(26,61,71,.18)); transform: translateY(2px); }
.tcetr-vbody { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
.tcetr-vtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.tcetr-vbody h4 { font-size: 1.15em; color: var(--tcetr-teal); margin: 0 0 3px; }
.tcetr-vdesc { font-size: .83em; color: var(--tcetr-muted); }
.tcetr-vprice-block { text-align: right; flex-shrink: 0; }
.tcetr-vprice { font-size: 1.5em; font-weight: 800; color: var(--tcetr-teal); line-height: 1; display: block; }
.tcetr-vprice-block small { display: block; font-size: .68em; font-weight: 600; color: var(--tcetr-muted); margin-top: 3px; }
.tcetr-vdatarow { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; padding: 12px 0; border-top: 1px dashed var(--tcetr-border); border-bottom: 1px dashed var(--tcetr-border); }
.tcetr-vdatarow > div { display: flex; flex-direction: column; gap: 2px; }
.tcetr-vdatarow .k { font-size: .68em; text-transform: uppercase; letter-spacing: .4px; color: var(--tcetr-muted); }
.tcetr-vdatarow .v { font-size: .86em; font-weight: 700; color: var(--tcetr-ink); }
.tcetr-vbottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.tcetr-vfeats { display: flex; flex-wrap: wrap; gap: 6px; }
.tcetr-vfeats span { background: var(--tcetr-bg-soft); font-size: .72em; padding: 4px 10px; border-radius: 6px; color: #4b5a63; font-weight: 600; }
.tcetr-vnote { font-size: .78em; color: var(--tcetr-muted); margin-top: 12px; }
.tcetr-on-request { color: var(--tcetr-gold-2) !important; }
.tcetr-btn-book {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 22px; background: var(--tcetr-teal-2); color: #fff !important;
    border: none; border-radius: 10px; font-size: .85em; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: all .2s; text-decoration: none; flex-shrink: 0;
}
.tcetr-btn-book:hover { background: var(--tcetr-teal); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13,61,78,.3); color:#fff; }

/* ── Includes / Excludes — simple, like Packages ─────────── */
.tcetr-incexc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 26px; padding: 4px 0; }
.tcetr-incexc h4 { font-size: .8em; font-weight: 700; color: var(--tcetr-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; }
.tcetr-incexc ul { margin: 0; padding: 0; list-style: none; }
.tcetr-incexc li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: .89em; color: #3d4a51; }
.tcetr-ico { width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tcetr-inc .tcetr-ico { background: rgba(31,138,87,.12); color: #1f8a57; }
.tcetr-exc .tcetr-ico { background: rgba(201,75,75,.1); color: #c94b4b; }
.tcetr-exc li { color: #8b98a0; }

/* ── Notes ────────────────────────────────────────────────── */
.tcetr-notes {
    background: #fff8ec; border-left: 4px solid var(--tcetr-gold); border-radius: 0 10px 10px 0;
    padding: 14px 18px; margin-bottom: 24px; font-size: .87em; color: #6b5a3a;
}
.tcetr-notes strong { display: block; margin-bottom: 6px; color: var(--tcetr-gold-2); }

/* ── Gallery — main viewer + scrolling thumbnail strip ───── */
.tcetr-gal-main { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; background: var(--tcetr-bg-soft); margin-bottom: 10px; }
.tcetr-gal-main-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.tcetr-gal-main-img.is-active { opacity: 1; }
.tcetr-gal-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(10,25,30,.5); color: #fff; display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.tcetr-gal-nav:hover { background: rgba(10,25,30,.75); }
.tcetr-gal-prev { left: 12px; } .tcetr-gal-next { right: 12px; }
.tcetr-gal-count {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    background: rgba(10,25,30,.6); color: #fff; font-size: .72em; font-weight: 600;
    padding: 4px 10px; border-radius: 20px;
}
.tcetr-gal-thumbs { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 4px; scrollbar-width: thin; }
.tcetr-gal-thumbs::-webkit-scrollbar { height: 5px; }
.tcetr-gal-thumbs::-webkit-scrollbar-thumb { background: var(--tcetr-border); border-radius: 10px; }
.tcetr-gal-thumb {
    flex: 0 0 auto; width: 84px; height: 60px; border-radius: 9px; overflow: hidden;
    border: 2px solid transparent; padding: 0; cursor: pointer; opacity: .6; transition: all .2s; background: none;
}
.tcetr-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcetr-gal-thumb:hover { opacity: .85; }
.tcetr-gal-thumb.is-active { border-color: var(--tcetr-teal); opacity: 1; }

/* ── FAQ ──────────────────────────────────────────────────── */
.tcetr-faq-item { border-bottom: 1px solid var(--tcetr-border); }
.tcetr-faq-q {
    width: 100%; text-align: left; padding: 14px 0; background: none; border: none;
    font-size: .92em; font-weight: 600; color: var(--tcetr-teal); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: inherit;
}
.tcetr-faq-a { display: none; padding: 0 0 14px; font-size: .86em; color: var(--tcetr-muted); line-height: 1.7; }
.tcetr-faq-item.tcetr-faq-open .tcetr-faq-a { display: block; }
.tcetr-faq-item.tcetr-faq-open .tcetr-faq-q svg { transform: rotate(180deg); }
.tcetr-faq-q svg { transition: transform .2s; flex-shrink: 0; }

/* ── Attractions (auto-selected by location) ─────────────── */
.tcetr-attr-intro { font-size: .87em; color: var(--tcetr-muted); margin: -8px 0 16px; max-width: 640px; }
.tcetr-attr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.tcetr-attr-card { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4/4.6; text-decoration: none; background: linear-gradient(135deg,#c9a35a,#8a6a3a); }
.tcetr-attr-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcetr-attr-ph { position: absolute; inset: 0; }
.tcetr-attr-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,25,30,.92) 0%, rgba(10,25,30,.15) 55%, transparent 75%); }
.tcetr-attr-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; }
.tcetr-attr-name { color: #fff; font-size: .95em; font-weight: 800; line-height: 1.25; }

/* ── Related grid ─────────────────────────────────────────── */
.tcetr-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Sidebar booking card ─────────────────────────────────── */
.tcetr-sidebar { position: sticky; top: 90px; }
.tcetr-scard { background: #fff; border: 1px solid var(--tcetr-border); border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(26,61,71,.06); }
.tcetr-sprice-box {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    background: var(--tcetr-bg-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.tcetr-sprice-lbl { font-size: .82em; color: var(--tcetr-muted); font-weight: 600; }
.tcetr-sprice-box strong { font-size: 1.55em; color: var(--tcetr-teal); font-weight: 800; }
.tcetr-sprice-box small { font-size: .76em; color: var(--tcetr-muted); flex-basis: 100%; }
.tcetr-sroute { display: flex; align-items: center; gap: 7px; font-size: .88em; font-weight: 700; color: var(--tcetr-ink); margin-bottom: 6px; }
.tcetr-sroute svg { color: var(--tcetr-gold); flex-shrink: 0; }
.tcetr-smeta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78em; color: var(--tcetr-muted); margin-bottom: 18px; }

.tcetr-sbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.tcetr-sbtns-single { grid-template-columns: 1fr; }
.tcetr-btn-wa {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 16px; background: #25D366; color: #fff !important; border-radius: 10px;
    font-size: .85em; font-weight: 700; text-decoration: none; transition: all .2s;
}
.tcetr-btn-wa:hover { background: #1ebe5b; transform: translateY(-1px); color:#fff; }
.tcetr-sdivider { position: relative; text-align: center; margin: 18px 0; }
.tcetr-sdivider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--tcetr-border); }
.tcetr-sdivider span { position: relative; background: #fff; padding: 0 10px; font-size: .72em; color: var(--tcetr-muted); text-transform: uppercase; letter-spacing: .5px; }
.tcetr-strust { display: flex; flex-direction: column; gap: 12px; }
.tcetr-strust > div { display: flex; align-items: center; gap: 10px; }
.tcetr-strust strong { display: block; font-size: .82em; color: var(--tcetr-ink); }
.tcetr-strust small { color: var(--tcetr-muted); font-size: .74em; }

/* ── Card (archive / related) ─────────────────────────────── */
.tcetr-card {
    display: block; background: #fff; border: 1px solid var(--tcetr-border); border-radius: 14px;
    overflow: hidden; text-decoration: none; color: inherit; transition: all .22s;
    box-shadow: 0 2px 10px rgba(26,61,71,.04);
}
.tcetr-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(26,61,71,.14); color: inherit; }
.tcetr-card-media { position: relative; aspect-ratio: 4/2.6; background: var(--tcetr-bg-soft); overflow: hidden; }
.tcetr-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.tcetr-card:hover .tcetr-card-media img { transform: scale(1.07); }
.tcetr-card-media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 46px; }
.tcetr-card-badge {
    position: absolute; top: 12px; left: 12px; background: rgba(26,61,71,.85); backdrop-filter: blur(4px);
    color: #fff; font-size: .7em; font-weight: 700; padding: 5px 11px; border-radius: 20px;
}
.tcetr-card-body { padding: 16px 18px 18px; }
.tcetr-card-title { margin: 0 0 8px; font-size: 1.02em; font-weight: 700; color: var(--tcetr-ink); line-height: 1.35; }
.tcetr-card-route { display: flex; align-items: center; gap: 6px; font-size: .82em; color: var(--tcetr-muted); margin-bottom: 10px; }
.tcetr-card-route svg { color: var(--tcetr-gold); flex-shrink: 0; }
.tcetr-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .76em; color: var(--tcetr-muted); margin-bottom: 14px; }
.tcetr-card-meta span { display: flex; align-items: center; gap: 4px; }
.tcetr-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--tcetr-border); }
.tcetr-card-price span { display: block; font-size: .68em; color: var(--tcetr-muted); }
.tcetr-card-price strong { font-size: 1.05em; color: var(--tcetr-teal); }
.tcetr-card-price-req strong { color: var(--tcetr-gold-2); font-size: .85em; }
.tcetr-card-cta { display: flex; align-items: center; gap: 4px; font-size: .78em; font-weight: 700; color: var(--tcetr-teal); }

/* ── Archive ──────────────────────────────────────────────── */
.tcetr-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 30px 0; }
.tcetr-empty { text-align: center; color: var(--tcetr-muted); padding: 60px 0; }
.tcetr-archive-pagination { display: flex; justify-content: center; gap: 6px; padding: 20px 0 40px; }
.tcetr-archive-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
    padding: 0 10px; border-radius: 9px; border: 1.5px solid var(--tcetr-border); color: var(--tcetr-ink);
    font-size: .85em; font-weight: 600; text-decoration: none; transition: all .15s;
}
.tcetr-archive-pagination .page-numbers:hover { border-color: var(--tcetr-teal); color: var(--tcetr-teal); }
.tcetr-archive-pagination .page-numbers.current { background: var(--tcetr-teal-2); border-color: var(--tcetr-teal-2); color: #fff; }
.tcetr-archive-pagination .page-numbers.dots { border: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .tcetr-type-grid { grid-template-columns: repeat(3, 1fr); }
    .tcetr-incexc { grid-template-columns: 1fr; gap: 14px; }
    .tcetr-related-grid { grid-template-columns: repeat(2, 1fr); }
    .tcetr-archive-grid { grid-template-columns: repeat(2, 1fr); }
    .tcetr-attr-grid { grid-template-columns: repeat(2, 1fr); }
    .tcetr-vcard { grid-template-columns: 1fr; }
    .tcetr-vphoto { min-height: 150px; }
    .tcetr-vphoto-emoji { font-size: 90px; }
    .tcetr-sidebar { position: static; margin-top: 24px; }
}
@media (max-width: 640px) {
    .tcetr-type-grid { grid-template-columns: repeat(2, 1fr); }
    .tcetr-archive-title { font-size: 1.4em; }
    .tcetr-attr-grid { grid-template-columns: repeat(2, 1fr); }
    .tcetr-gal-main { aspect-ratio: 4/3; }
    .tcetr-gal-thumb { width: 68px; height: 50px; }
    .tcetr-related-grid { grid-template-columns: 1fr; }
    .tcetr-archive-grid { grid-template-columns: 1fr; }
    .tcetr-sbtns { grid-template-columns: 1fr; }
}

/* ── Custom / Multi-Stop Transfer page ───────────────────── */
.tcetr-custom-hero { max-width: 1200px; margin: 0 auto; padding: 40px 20px 10px; }
.tcetr-custom-hero h1 { font-size: 1.9em; font-weight: 800; color: var(--tcetr-teal); margin: 8px 0 12px; }
.tcetr-custom-hero p { color: var(--tcetr-muted); font-size: 1em; max-width: 760px; line-height: 1.7; }

.tcetr-custom-body { max-width: 1200px; margin: 0 auto; padding: 20px 20px 70px; display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; }

.tcetr-custom-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.tcetr-custom-steps > div { display: flex; gap: 14px; }
.tcetr-custom-steps span {
    width: 32px; height: 32px; border-radius: 50%; background: var(--tcetr-teal); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .88em; flex-shrink: 0;
}
.tcetr-custom-steps strong { display: block; color: var(--tcetr-ink); font-size: .95em; margin-bottom: 3px; }
.tcetr-custom-steps p { margin: 0; color: var(--tcetr-muted); font-size: .86em; }

.tcetr-custom-examples { display: grid; gap: 12px; }
.tcetr-custom-examples > div { background: var(--tcetr-bg-soft); border-radius: 12px; padding: 16px 18px; }
.tcetr-custom-examples strong { display: block; color: var(--tcetr-teal); font-size: .92em; margin-bottom: 4px; }
.tcetr-custom-examples p { margin: 0; color: var(--tcetr-muted); font-size: .85em; }

.tcetr-custom-side { position: sticky; top: 24px; }
.tcetr-custom-form-title { font-size: 1.05em; color: var(--tcetr-teal); margin: 0 0 4px; }
.tcetr-custom-form-sub { font-size: .8em; color: var(--tcetr-muted); margin: 0 0 18px; }

.tcetr-custom-stops { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.tcetr-custom-stop label { display: block; font-size: .74em; font-weight: 700; color: var(--tcetr-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.tcetr-custom-stop label span { text-transform: none; font-weight: 500; letter-spacing: 0; }
.tcetr-custom-stop input {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--tcetr-border); border-radius: 9px;
    font-family: inherit; font-size: .88em; color: var(--tcetr-ink);
}
.tcetr-custom-add-stop {
    background: none; border: 1.5px dashed var(--tcetr-border); color: var(--tcetr-teal);
    font-size: .82em; font-weight: 700; padding: 9px; border-radius: 9px; width: 100%;
    cursor: pointer; font-family: inherit; margin-bottom: 6px;
}
.tcetr-custom-add-stop:hover { border-color: var(--tcetr-teal); background: rgba(26,61,71,.04); }

@media (max-width: 991px) {
    .tcetr-custom-body { grid-template-columns: 1fr; }
    .tcetr-custom-side { position: static; }
}