/* Capymapa — виджет планировщика сонгтео (маршруты тук-туков).
 * Извлечено 21.08.2026 из WPCode-сниппетов 3156 (RU) / 4740 (EN) 1-в-1,
 * без правок логики. CSS общий для RU и EN (сверено диффом — идентичны).
 * Используется на /ru/marshruty-tuk-tukov-pattaya/ и /en/songthaew-routes/.
 */
 #cap-planner{
   /* ===== ДИЗАЙН-ТОКЕНЫ (общие с виджетом курсов) — имена прежние, значения из capymapa-tokens.css ===== */
   --ink:var(--cm-ink) !important; --ink-soft:var(--cm-ink-soft) !important; --ink-faint:var(--cm-ink-faint) !important;
   --teal:var(--cm-teal-500) !important; --teal-deep:var(--cm-teal-700) !important; --teal-tint:var(--cm-teal-50) !important;
   --gold:var(--cm-amber-500) !important; --gold-tint:var(--cm-amber-50) !important; --gold-deep:var(--cm-amber-800) !important;
   --good:var(--cm-good) !important; --bad:var(--cm-bad) !important; --grab:#00b14f !important;
   --card:var(--cm-surface) !important; --line:var(--cm-line) !important; --line-soft:var(--cm-line-soft) !important;
   --bg1:var(--cm-teal-50) !important; --bg2:var(--cm-line-soft) !important;
   --radius:var(--cm-r-lg) !important; --radius-sm:var(--cm-r-md) !important;
   --shadow:var(--cm-sh-2) !important;
   --shadow-lg:var(--cm-sh-3) !important;
   font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
   color:var(--ink) !important; display:block !important; width:100% !important;
   max-width:1320px !important; margin:18px auto !important; padding:0 !important;
   -webkit-font-smoothing:antialiased !important; text-rendering:optimizeLegibility !important;
 }
 #cap-planner *{box-sizing:border-box !important; margin:0 !important; padding:0 !important;}
 #cap-planner .num{font-variant-numeric:tabular-nums !important;}
 /* ===== ОБОЛОЧКА ===== */
 #cap-planner .cap-wrap{
   position:relative !important; border-radius:var(--cm-r-xl) !important; padding:clamp(14px,3vw,40px) !important;
   background:
     radial-gradient(120% 90% at 8% 0%, rgba(2,183,189,.10), transparent 42%),
     radial-gradient(120% 90% at 100% 10%, rgba(247,148,0,.12), transparent 40%),
     linear-gradient(160deg, var(--bg1), var(--bg2)) !important;
   border:1px solid #e3ebe9 !important; overflow:hidden !important;
 }
 /* ===== ШАПКА (мобиле — компактно, в одну строку) ===== */
 #cap-planner .cap-head{display:flex !important; justify-content:space-between !important; align-items:center !important; gap:10px !important; flex-wrap:nowrap !important; margin-bottom:14px !important;}
 #cap-planner .cap-brand{display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important;}
 #cap-planner .cap-brand svg{width:30px !important; height:30px !important; display:block !important; flex-shrink:0 !important; filter:drop-shadow(0 6px 10px rgba(11,130,117,.25)) !important;}
 #cap-planner .cap-eyebrow{display:none !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.14em !important; color:var(--teal-deep) !important; text-transform:uppercase !important;}
 #cap-planner .cap-brand b{font-family:"Unbounded",sans-serif !important; font-weight:700 !important; font-size:16px !important; letter-spacing:-.02em !important; display:block !important; white-space:nowrap !important;}
 #cap-planner .cap-fare{flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; gap:6px !important; background:#fff !important; border:1px solid var(--cm-amber-300) !important; color:var(--gold-deep) !important; padding:6px 11px !important; border-radius:999px !important; font-size:12px !important; font-weight:800 !important; box-shadow:var(--shadow) !important; white-space:nowrap !important;}
 #cap-planner .cap-fare span{font-variant-numeric:tabular-nums !important;}
 /* ===== ГЕРОЙ-ТЕКСТ ===== */
 /* ===== ГЕРОЙ-ТЕКСТ (на мобиле скрыт — карта важнее) ===== */
 #cap-planner .cap-hero{display:none !important;}
 #cap-planner h1{font-family:"Unbounded",sans-serif !important; font-weight:800 !important; font-size:clamp(25px,3.4vw,40px) !important; line-height:1.05 !important; letter-spacing:-.03em !important; max-width:16ch !important; margin-bottom:10px !important;}
 #cap-planner h1 em{font-style:normal !important; color:var(--teal-deep) !important;}
 #cap-planner .cap-sub{font-size:15px !important; color:var(--ink-soft) !important; max-width:54ch !important; line-height:1.55 !important;}
 /* ===== СЕТКА: карта-герой + панель ===== */
 #cap-planner .cap-body{display:grid !important; grid-template-columns:1fr !important; grid-template-areas:"trip" "map" "output" !important; gap:16px !important;}
 #cap-planner .cap-trip{grid-area:trip !important;}
 #cap-planner .cap-map{grid-area:map !important;}
 #cap-planner .cap-output{grid-area:output !important;}
 /* ===== ТЁМНЫЙ ФИРМЕННЫЙ БЛОК ВВОДА ===== */
 #cap-planner .cap-trip{
   background:linear-gradient(165deg,var(--cm-deep-1),var(--cm-deep-2)) !important; border-radius:var(--radius) !important;
   padding:clamp(15px,3vw,22px) !important; color:#eaf4f2 !important; box-shadow:var(--shadow-lg) !important;
   position:relative !important; overflow:hidden !important;
 }
 #cap-planner .cap-trip::before{content:"" !important; position:absolute !important; right:-70px !important; top:-70px !important; width:240px !important; height:240px !important; border-radius:50% !important; background:radial-gradient(circle,rgba(2,183,189,.34),transparent 70%) !important; pointer-events:none !important;}
 #cap-planner .cap-fld{position:relative !important; z-index:1 !important;}
 #cap-planner .cap-fld+.cap-fld{margin-top:14px !important;}
 #cap-planner .cap-fld small{display:block !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#7fd6cb !important; margin-bottom:8px !important;}
 #cap-planner .cap-seg{display:flex !important; gap:8px !important;}
 #cap-planner .cap-seg button{flex:1 !important; min-height:44px !important; border:1px solid rgba(255,255,255,.16) !important; background:rgba(255,255,255,.07) !important; border-radius:var(--radius-sm) !important; color:#eaf4f2 !important; font:700 14px/1 "Manrope",sans-serif !important; cursor:pointer !important; transition:.18s !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important;}
 #cap-planner .cap-seg button:hover{background:rgba(255,255,255,.12) !important;}
 #cap-planner .cap-seg button.on{background:var(--teal) !important; border-color:var(--teal) !important; color:#04262a !important; box-shadow:0 8px 20px -8px rgba(2,183,189,.7) !important;}
 #cap-planner .cap-seg button:focus-visible{outline:2px solid #7fd6cb !important; outline-offset:2px !important;}
 #cap-planner .cap-hint{font-size:12px !important; color:#9fc4bd !important; line-height:1.5 !important; margin-top:8px !important;}
 #cap-planner .cap-gpsnote{font-size:12px !important; color:#f0c674 !important; line-height:1.45 !important; margin-top:9px !important;}
 #cap-planner .cap-gpsnote:empty{margin-top:0 !important;}
 #cap-planner .cap-select{position:relative !important;}
 #cap-planner .cap-select select{
   width:100% !important; min-height:48px !important; appearance:none !important; -webkit-appearance:none !important;
   background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:var(--radius-sm) !important;
   color:#fff !important; font:700 16px/1.2 "Manrope",sans-serif !important; padding:12px 44px 12px 15px !important; cursor:pointer !important; transition:.18s !important;
   background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%237fd6cb' stroke-width='1.7' fill='none' stroke-linecap='round'/></svg>") !important;
   background-repeat:no-repeat !important; background-position:right 15px center !important;
 }
 #cap-planner .cap-select select:focus-visible{outline:none !important; border-color:var(--teal) !important; background-color:rgba(255,255,255,.12) !important;}
 #cap-planner .cap-select select option{color:var(--ink) !important; font-weight:600 !important;}
 /* ===== КАРТА (герой) ===== */
 #cap-planner .cap-map{position:relative !important; border-radius:var(--radius) !important; overflow:hidden !important; border:1px solid var(--line) !important; box-shadow:var(--shadow) !important; height:56vh !important; height:56svh !important; min-height:340px !important; background:#dfeae8 !important;}
 #cap-planner .cap-map .mapboxgl-ctrl-group{border-radius:12px !important; overflow:hidden !important;}
 #cap-planner .cap-err{position:absolute !important; inset:0 !important; display:grid !important; place-items:center !important; text-align:center !important; padding:32px !important; background:var(--bg1) !important; font-size:14px !important; color:var(--ink-soft) !important; line-height:1.55 !important;}
 #cap-planner .cap-err b{color:var(--ink) !important; display:block !important; font-family:"Unbounded",sans-serif !important; font-size:16px !important; margin-bottom:8px !important;}
 #cap-planner .cap-err code{background:#fff !important; border:1px solid var(--line) !important; border-radius:6px !important; padding:1px 6px !important; font-size:12px !important;}
 /* ===== ЛЕГЕНДА ===== */
 #cap-planner .cap-legend{display:flex !important; flex-wrap:wrap !important; gap:9px !important; margin-top:16px !important;}
 #cap-planner .cap-lg{display:inline-flex !important; align-items:center !important; gap:7px !important; background:#fff !important; border:1px solid var(--line) !important; border-radius:999px !important; padding:6px 11px !important; font-size:11.5px !important; font-weight:600 !important; color:var(--ink-soft) !important;}
 #cap-planner .cap-lg i{width:16px !important; height:3px !important; border-radius:2px !important; display:inline-block !important;}
 #cap-planner .cap-note{font-size:11px !important; color:var(--ink-faint) !important; line-height:1.55 !important; margin-top:16px !important; padding-top:14px !important; border-top:1px solid var(--line) !important;}
 #cap-planner .cap-note b{color:var(--ink-soft) !important;}
 /* ===== БИЛЕТ (результат) ===== */
 #cap-planner .ticket{margin-top:2px !important; background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; overflow:hidden !important; box-shadow:var(--shadow) !important;}
 #cap-planner .ticket__top{padding:16px 18px 14px !important; background:linear-gradient(120deg,var(--teal-tint),#fff) !important; border-bottom:1px dashed #cfe6e1 !important;}
 #cap-planner .ticket__fare{font-family:"Unbounded",sans-serif !important; font-size:18px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--teal-deep) !important; font-variant-numeric:tabular-nums !important;}
 /* «живая цифра» — тариф в билете, обновляется при пересчёте маршрута */
 #cap-planner .live{display:inline-flex !important; align-items:baseline !important; position:relative !important;}
 #cap-planner .live .d{display:inline-block !important; overflow:hidden !important; height:1.1em !important; line-height:1.1em !important;}
 #cap-planner .live .d i{display:block !important; font-style:normal !important; transition:transform .26s var(--cm-ease) !important;}
 #cap-planner .live.flash::after{content:"" !important; position:absolute !important; inset:-4px -6px !important; border-radius:8px !important; background:var(--cm-teal-100) !important; z-index:-1 !important; animation:cap-fl .9s var(--cm-ease) forwards !important;}
 @keyframes cap-fl{0%{opacity:.85} 100%{opacity:0}}
 #cap-planner .ticket__sum{font-size:12.5px !important; color:var(--ink-soft) !important; font-weight:600 !important; margin-top:3px !important;}
 #cap-planner .leg{display:flex !important; gap:13px !important; padding:14px 18px !important; align-items:flex-start !important;}
 #cap-planner .leg+.leg{border-top:1px solid var(--line-soft) !important;}
 #cap-planner .leg__dot{width:11px !important; height:11px !important; border-radius:50% !important; margin-top:4px !important; flex-shrink:0 !important; border:2px solid #fff !important; box-shadow:0 0 0 1.5px currentColor !important;}
 #cap-planner .leg__sq{width:11px !important; height:11px !important; margin-top:4px !important; flex-shrink:0 !important; border:2px solid currentColor !important; border-radius:4px !important; background:#fff !important;}
 #cap-planner .leg__b{font-weight:800 !important; font-size:14px !important; line-height:1.3 !important; color:var(--ink) !important;}
 #cap-planner .leg__s{font-size:12.5px !important; color:var(--ink-soft) !important; line-height:1.5 !important; margin-top:3px !important;}
 #cap-planner .leg__dist{font-size:11px !important; font-weight:700 !important; color:var(--ink-faint) !important; font-variant-numeric:tabular-nums !important; margin-top:4px !important;}
 /* предупреждения — золотой акцент */
 #cap-planner .warn{margin:0 18px 16px !important; background:var(--gold-tint) !important; border:1px solid #f3dca0 !important; color:var(--gold-deep) !important; border-radius:12px !important; padding:11px 13px !important; font-size:12.5px !important; line-height:1.5 !important; font-weight:600 !important;}
 /* подсказка «молчите» — бирюзовая карточка */
 #cap-planner .silence{margin:14px 18px 18px !important; background:var(--teal-tint) !important; border:1px solid #c2e8e1 !important; color:var(--teal-deep) !important; border-radius:14px !important; padding:13px 15px !important; font-size:12.5px !important; line-height:1.55 !important; font-weight:600 !important;}
 #cap-planner .silence b{color:var(--ink) !important; font-weight:800 !important;}
 /* спонсорские «по пути» — деликатный золотой */
 #cap-planner .stops{margin:0 18px 16px !important;}
 #cap-planner .stops__h{font-size:12px !important; font-weight:800 !important; color:var(--ink) !important; margin-bottom:9px !important; display:flex !important; align-items:center !important; gap:7px !important;}
 #cap-planner .stop{display:flex !important; align-items:center !important; gap:11px !important; border:1px solid #f1e2bd !important; background:linear-gradient(180deg,#fffdf6,var(--gold-tint)) !important; border-radius:13px !important; padding:10px 12px !important; cursor:pointer !important; margin-bottom:8px !important; transition:.18s !important; text-decoration:none !important; color:inherit !important;}
 #cap-planner .stop:last-child{margin-bottom:0 !important;}
 #cap-planner .stop:hover{border-color:var(--gold) !important; transform:translateY(-1px) !important; box-shadow:0 10px 22px -14px rgba(185,130,26,.5) !important;}
 #cap-planner .stop__ic{width:30px !important; height:30px !important; border-radius:9px !important; background:#fff !important; border:1px solid #f1e2bd !important; display:grid !important; place-items:center !important; font-size:14px !important; flex-shrink:0 !important;}
 #cap-planner .stop__b{font-size:13.5px !important; font-weight:800 !important; color:var(--ink) !important;}
 #cap-planner .stop__s{font-size:11.5px !important; color:var(--ink-soft) !important; font-weight:600 !important; margin-top:1px !important;}
 #cap-planner .stop__go{margin-left:auto !important; color:var(--gold-deep) !important; font-weight:800 !important; font-size:18px !important;}
 /* Grab */
 #cap-planner .grab{display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; width:calc(100% - 36px) !important; margin:0 18px 18px !important; background:var(--grab) !important; color:#fff !important; border:none !important; border-radius:13px !important; padding:14px !important; font:800 14px/1 "Manrope",sans-serif !important; cursor:pointer !important; text-decoration:none !important; min-height:48px !important; transition:.18s !important;}
 #cap-planner .grab:hover{filter:brightness(.96) !important; transform:translateY(-1px) !important;}
 /* пусто / коротко */
 #cap-planner .empty{margin-top:2px !important; background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; overflow:hidden !important; box-shadow:var(--shadow) !important;}
 #cap-planner .empty__t{padding:18px !important; font-size:13.5px !important; color:var(--ink-soft) !important; line-height:1.55 !important; font-weight:600 !important;}
 /* ===== Маркеры на карте ===== */
 #cap-planner .mk{width:28px !important; height:28px !important; cursor:grab !important;}
 #cap-planner .mk i{display:block !important; width:28px !important; height:28px !important; border-radius:50% 50% 50% 3px !important; border:3px solid #fff !important; box-shadow:0 5px 14px rgba(10,34,48,.45) !important; transform:rotate(-45deg) !important;}
 #cap-planner .admk{width:22px !important; height:22px !important; border-radius:7px !important; background:var(--gold) !important; border:2px solid #fff !important; box-shadow:0 2px 7px rgba(10,34,48,.35) !important; display:grid !important; place-items:center !important; font-size:11px !important; cursor:pointer !important;}
 #cap-planner .dotmk{width:10px !important; height:10px !important; border-radius:50% !important; background:var(--ink) !important; border:2px solid #fff !important; box-shadow:0 1px 4px rgba(10,34,48,.35) !important;}
 /* живая точка GPS (навигатор) */
 #cap-planner .gpsdot{width:22px !important; height:22px !important; position:relative !important;}
 #cap-planner .gpsdot__core{position:absolute !important; inset:5px !important; border-radius:50% !important; background:#2563eb !important; border:2.5px solid #fff !important; box-shadow:0 1px 6px rgba(37,99,235,.75) !important;}
 #cap-planner .gpsdot__pulse{position:absolute !important; inset:0 !important; border-radius:50% !important; background:#2563eb !important; opacity:.30 !important; animation:cap-gpspulse 1.8s ease-out infinite !important;}
 @keyframes cap-gpspulse{0%{transform:scale(.5); opacity:.45} 100%{transform:scale(2.3); opacity:0}}
 /* кнопка «Я тут» (вернуть камеру при слежении) */
 #cap-planner .cap-recenter{position:absolute !important; left:12px !important; bottom:46px !important; z-index:5 !important; display:none; align-items:center !important; gap:6px !important; background:#fff !important; color:var(--teal-deep) !important; border:1px solid var(--line) !important; border-radius:999px !important; padding:9px 14px !important; font:800 13px/1 "Manrope",sans-serif !important; box-shadow:0 8px 20px -8px rgba(10,34,48,.45) !important; cursor:pointer !important;}
 #cap-planner .cap-recenter:hover{background:var(--bg1) !important;}
 /* подсказка «своя точка» прячется, когда пуста */
 #cap-planner .cap-hint:empty{display:none !important;}
 /* ===== ДЕСКТОП: карта-герой почти во всю ширину экрана ===== */
 @media(min-width:900px){
   /* выходим за узкую контент-колонку темы (Listeo/Elementor) */
   #cap-planner{width:auto !important; max-width:none !important; margin-left:calc(50% - 46vw) !important; margin-right:calc(50% - 46vw) !important;}
   #cap-planner .cap-eyebrow{display:block !important;}
   #cap-planner .cap-brand{gap:11px !important;}
   #cap-planner .cap-brand svg{width:34px !important; height:34px !important;}
   #cap-planner .cap-brand b{font-size:17px !important; margin-top:-1px !important;}
   #cap-planner .cap-fare{padding:8px 14px !important; font-size:13px !important; gap:7px !important;}
   /* заголовок-«герой» скрыт и на десктопе — в центре карта и управление */
   #cap-planner .cap-head{margin-bottom:14px !important;}
   #cap-planner .cap-body{
     grid-template-columns:360px 1fr !important;
     grid-template-rows:auto 1fr !important;
     grid-template-areas:"trip map" "output map" !important;
     gap:18px !important;
     height:clamp(600px,84vh,940px) !important;
   }
   #cap-planner .cap-map{height:100% !important; min-height:0 !important;}
   #cap-planner .cap-output{min-height:0 !important; overflow-y:auto !important; padding-right:4px !important;}
 }
 @media(prefers-reduced-motion:reduce){
   #cap-planner *{transition:none !important;}
   #cap-planner .gpsdot__pulse{animation:none !important;}
   #cap-planner .live.flash::after{animation:none !important;}
 }