* { box-sizing: border-box; }
html, body { font-family: 'Segoe UI', Arial !important; }
body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: #0B4A8F; color: #fff; padding: 5px 0; }
html, body, div, span, table, th, td, input, select, button, label, p, b, strong { font-family: 'Segoe UI', sans-serif !important; font-size: 14px !important; line-height: 1.4; }
h1 { font-size: 24px !important; font-weight: 600; }
h2 { font-size: 22px !important; font-weight: 600; }
h3 { font-size: 18px !important; font-weight: 600; }
button, .btn-main, .btn-primary { font-size: 15px !important; font-weight: 600; }
.wrapper { max-width: 900px; margin: auto; background: #ffffff15; border: 1px solid #ffffff30; border-radius: 20px; padding: 3px 3px 3px 3px; backdrop-filter: blur(14px); }
.box { width: 100%; margin: 3px 0; padding: 3px 3px; background: #0B1E3A; border-radius: 10px; }

/* === ГОРНА ЛЕНТА И БУТОНИ === */
.top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.top-bar-mobile-row1 { display: flex; align-items: center; gap: 15px; }
.flags-wrap { display: flex; align-items: center; gap: 6px; }
.top-bar-mobile-row2 { display: flex; align-items: center; gap: 10px; }
.top-reset-btn { display: none !important; } /* Скрито на десктоп */

#title { margin: 0; font-size: 26px; }
.flag { width: 32px; height: 22px; cursor: pointer; border-radius: 2px; }
.flag:hover { border-color: #fff; }
.swap-btn { background: #4DA7FF; color: white; font-size: 20px; width: 38px; height: 38px; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; line-height: 20px; padding: 0; transition: background 0.2s; }
.swap-btn:hover { background: #1F8EEA; }

table { background: #081F45 !important; border-radius: 12px; color: white; border-collapse: separate; border-spacing: 0; }
th, td { background: #081F45 !important; color: white !important; padding: 5px 20px; border-radius: 14px; }
input { width: 100%; padding: 5px; border-radius: 10px; border: 1px solid #1B6EC1; background: #0F2F57; color: #fff; }
.axle-select { width: 50%; padding: 5px; border-radius: 10px; background: #0F2F57; border: 1px solid #1B6EC1; color: white; font-size: 15px; }
.axle-box { width: 60px; padding: 8px; margin-right: 8px; margin-bottom: 8px; border-radius: 8px; background: #0F2F57; border: 1px solid #1B6EC1; color: white; font-size: 16px; text-align: center; }

.table-and-buttons { display: flex; align-items: center; gap: 35px; margin-bottom: 3px; }
.btn-main, .btn-export, .btn-reset, .btn-clear { padding: 6px 6px; font-size: 14px; border: none; border-radius: 10px; color: #fff; cursor: pointer; font-weight: 600; margin-top: 3px; transition: background 0.2s; }
.btn-main, .btn-export { background: #4DA7FF; }
.btn-main:hover, .btn-export:hover { background: #1F8EEA; }
.btn-reset { background: #ff5757; }
.btn-reset:hover { background: #ff2f2f; }
.btn-clear { background: #ff9c27; }
.btn-clear:hover { background: #ff7b00; }

.buttons-column .unified-btn { height: 30px !important; min-width: 110px !important; font-size: 14px !important; padding: 0px 0px !important; }
.buttons-column { display: flex; flex-direction: column; gap: 0px !important; margin-top: -5px !important; margin-left: -30px !important; }

.results { background: #081F45; border: 1px solid #1B6EC1; padding: 8px; border-radius: 14px; margin-top: 0px; min-height: 60px; }
.result-line { margin: 6px 0; font-size: 15px; }
.red-title { font-size: 17px; font-weight: 700; color: #DA2C43; margin-top: 10px; }

.history-box { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; display: block; margin-top: 5px; background: #081F45; border: 1px solid #1B6EC1; border-radius: 14px; padding: 10px; }
.entry { padding: 7px 0; border-bottom: 1px solid #1B6EC1; font-size: 13px; }
.history-extras{opacity:0.8;margin-left:6px;}
.entry:last-child { border-bottom: none; }

.route-section { margin-top: 0px; background: #081F45; border-radius: 16px; border: 1px solid #1B6EC1; padding: 10px 10px 10px 10px; }
.route-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 0px; }
.route-row > div { flex: 1 1 200px; }
.route-label { font-size: 13px; margin-bottom: 4px; opacity: 0.9; }
.route-intro { font-size: 13px; opacity: 0.9; margin: 0 0 10px 0; }
#routeResult { margin-top: 10px; font-size: 14px; line-height: 1.4; }
#altRoutes { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; line-height: 1.4; color: #fff; }

#map { width: 100%; height: 360px; margin-top: 10px; border-radius: 12px; border: 1px solid #1B6EC1; overflow: hidden; }
.route-dot { width: 10px; height: 10px; border-radius: 50%; background: #4DA7FF; }
.route-dot.red { background: #DA2C43; }
.blocked-box { margin-top: 12px; background: #092F5D; border: 1px solid #1B6EC1; border-radius: 12px; padding: 10px 14px; font-size: 13px; }
footer { text-align: center; margin-top: 30px; padding: 10px 20px; opacity: 0.85; }

/* БУТОН ЗА КОПИРАНЕ НА МАРШРУТ */
.btn-copy-route { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; font-size: 12px !important; font-weight: 600; background: #1B6EC1; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s; line-height: 1.4; }

/* БУТОНИ ЗА МЕЖДИННИ ТОЧКИ */
.via-controls { display: flex; gap: 5px; align-items: flex-end; justify-content: flex-start; }
.btn-icon { background: #1B6EC1; color: white; border: none; border-radius: 8px; cursor: pointer; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; padding: 0; transition: all 0.2s ease; }
.btn-icon svg { width: 18px; height: 18px; stroke: #fff; transition: stroke 0.2s; }
.btn-icon:hover { background: #4DA7FF; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.btn-icon:active { transform: translateY(1px); box-shadow: none; }
.btn-add { background: #28a745; }
.btn-add:hover { background: #218838; }
.btn-remove { background: #DA2C43; }
.btn-remove:hover { background: #ff5757; }

/* LEAFLET POPUP */
.leaflet-popup-pane { z-index: 1100 !important; }
.leaflet-popup-content { margin: 10px 12px !important; }
.custom-popup { text-align: left; color: #333; font-family: 'Segoe UI', sans-serif; min-width: 150px; }
.custom-popup strong { font-size: 14px; display: block; border-bottom: 1px solid #ddd; padding-bottom: 6px; margin-bottom: 8px; color: #0B1E3A; }
.custom-popup-btns { display: flex; flex-direction: column; gap: 5px; }
.custom-popup-btn { border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; text-align: left; display: flex; align-items: center; gap: 8px; transition: background 0.2s, transform 0.1s; color: white; width: 100%; }
.custom-popup-btn:active { transform: scale(0.97); }
.custom-popup-btn.btn-start { background: #4DA7FF; }
.custom-popup-btn.btn-start:hover { background: #1F8EEA; }
.custom-popup-btn.btn-end { background: #DA2C43; }
.custom-popup-btn.btn-end:hover { background: #b02336; }
.custom-popup-btn.btn-via { background: #FFA500; }
.custom-popup-btn.btn-via:hover { background: #e69500; }

/* TOMSELECT CSS */
.ts-control, .ts-wrapper.single.input-active .ts-control { background: #0F2F57 !important; border: 1px solid #1B6EC1 !important; color: #fff !important; border-radius: 10px !important; padding: 8px 12px !important; box-shadow: none !important; min-height: 35px !important; }
.ts-control input { color: #fff !important; }
.ts-control input::placeholder { color: #888 !important; }
.ts-wrapper.single .ts-control:after { border-color: #4DA7FF transparent transparent transparent !important; }
.ts-wrapper.single.dropdown-active .ts-control:after { border-color: transparent transparent #4DA7FF transparent !important; }
.ts-dropdown { background: #0F2F57 !important; border: 1px solid #1B6EC1 !important; border-radius: 8px !important; color: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; margin-top: 4px !important; z-index: 9999 !important; }
.ts-dropdown .option { padding: 8px 12px !important; color: #fff !important; cursor: pointer; }
.ts-dropdown .active, .ts-dropdown .option:hover { background: #1B6EC1 !important; color: #fff !important; }
.ts-wrapper .item { color: #fff !important; }

/* ИНТЕРАКТИВНИ ПРЕПЯТСТВИЯ (ПУЛСАЦИЯ) */
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(218, 44, 67, 0.8); }
  70% { box-shadow: 0 0 0 12px rgba(218, 44, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(218, 44, 67, 0); }
}
.obstacle-marker div {
  animation: pulse-red 1.2s infinite;
  font-size: 12px;
}

/* =============================
   INLINE LOGIN GATE (WP users)
   ============================= */
.pcg-overlay{ position: fixed; inset: 0; z-index: 999999; display: flex; align-items: flex-start; justify-content: center; padding: 18px 12px; background: #0B4A8F; }
.pcg-card{ width: min(900px, 100%); margin-top: 18px; background: #ffffff15; border: 1px solid #ffffff30; border-radius: 20px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.pcg-card-inner{ background: #0B1E3A; border-radius: 12px; padding: 14px; }
.pcg-title{ margin: 0 0 10px 0; font-size: 20px !important; font-weight: 700; }
.pcg-login-table{ width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.pcg-login-table th, .pcg-login-table td{ padding: 10px 12px; vertical-align: middle; border-radius: 0 !important; }
.pcg-login-table tr:first-child th{ border-top-left-radius: 14px !important; }
.pcg-login-table tr:first-child td{ border-top-right-radius: 14px !important; }
.pcg-login-table tr:last-child th{ border-bottom-left-radius: 14px !important; }
.pcg-login-table tr:last-child td{ border-bottom-right-radius: 14px !important; }
.pcg-login-table th{ width: 38%; white-space: nowrap; font-weight: 600; }
.pcg-login-table td{ width: 62%; }
.pcg-login-table input{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.pcg-actions{ display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pcg-actions .btn-main{ flex: 1 1 160px; margin-top: 0 !important; }
.pcg-msg{ margin-top: 10px; font-size: 14px !important; opacity: 0.95; }
.pcg-msg.error{ color: #ffb3b3; }
.pcg-msg.ok{ color: #b7ffcc; }

/* ====================================================
   📱 ПЪЛНА МОБИЛНА ОПТИМИЗАЦИЯ
   ==================================================== */
@media (max-width: 768px) {
  body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .wrapper { padding: 15px 10px; border-radius: 0; border-left: none; border-right: none; }
  
  .top-bar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 15px; }
  .top-bar-mobile-row1 { width: 100%; display: flex; align-items: center; justify-content: space-between; }
  
  #title { font-size: 16px !important; text-align: left; flex: 1; line-height: 1.2; margin: 0; padding-right: 10px; }
  .flags-wrap { display: flex; flex-shrink: 0; gap: 8px; }
  .flag { width: 36px; height: 26px; }

  .top-bar-mobile-row2 { width: 100%; display: flex; gap: 10px; flex-direction: row; }
  .top-bar-mobile-row2 button { flex: 1; margin: 0; height: 44px; font-size: 15px !important; display:flex; align-items:center; justify-content:center; }
  .top-reset-btn { display: flex !important; } 
  
  .desktop-only-buttons { display: none !important; } 
  .swap-btn-wrap { display: none !important; } 

  input.table-input, .ts-control { font-size: 16px !important; min-height: 44px; }
  
  .btn-main, .btn-export, .btn-reset, .btn-clear, .btn-icon { 
    min-height: 44px; 
    display: flex; align-items: center; justify-content: center; 
    width: 100%; margin-top: 10px; 
  }

  .table-and-buttons { flex-direction: column; gap: 5px; }

  table { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    margin-bottom: 10px;
  }
  th { 
    padding: 6px 2px; 
    font-size: 11px !important; 
    white-space: normal; 
    text-align: center;
    word-wrap: break-word;
  }
  td { padding: 6px 2px; text-align: center; }
  input.table-input { font-size: 15px !important; padding: 6px 2px; text-align: center; }
  
  #map { height: 50vh !important; min-height: 300px; z-index: 1; }
  
  .route-row > div { flex: 1 1 100%; min-width: 100%; }
  .via-controls { flex-direction: row; margin-top: 8px; }
  .btn-icon { width: 44px; margin-top: 0; }

  @media (hover: none) {
    .btn-main:hover, .btn-export:hover { background: #4DA7FF; }
    .btn-reset:hover { background: #ff5757; }
    .btn-clear:hover { background: #ff9c27; }
    .btn-icon:hover { transform: none; box-shadow: none; }
  }
}

@media (max-width: 480px) {
  #title { font-size: 16px !important; }
  .results { font-size: 13px; }
  .entry { font-size: 11px; }
  .box, .route-section, .table-and-buttons { margin-bottom: 2px !important; }
  #routeResult, #altRoutes, #blockedSegmentsBox, #axleResult { margin-bottom: 2px !important; }
  .pcg-card{ padding: 10px; border-radius: 16px; }
  .pcg-card-inner{ padding: 12px; }
  .pcg-login-table th{ width: 42%; white-space: normal; }
}