/* ============================================================
   НАСТРОЙКИ ВНЕШНЕГО ВИДА ПЛАНИРОВЩИКА МАРШРУТА (короткая версия)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap');

:root {
    --font-family: 'Inter', sans-serif;

    --font-size-address: 1rem;
    --font-size-address-mobile: 1rem;
    --font-size-route-data: 1rem;
    --font-size-route-data-mobile: 0.9rem;
    --font-size-icon: 30px;
    --font-size-icon-mobile: 24px;
    --font-size-calc-symbol: 30px;
    --font-size-calc-symbol-mobile: 30px;
    --font-size-bottom: 0.9rem;
    --font-size-bottom-mobile: 0.8rem;
    --font-size-back-arrow: 32px;
    --font-size-back-arrow-mobile: 28px;

    --panel-padding: 0.3rem 0.6rem 0.2rem 0.6rem;
    --panel-padding-mobile: 0.2rem 0.3rem 0.2rem 0.3rem;
    --container-padding: 0.3rem 0.6rem 0.2rem 0.6rem;
    --container-padding-mobile: 0.2rem 0.3rem 0.2rem 0.3rem;
    --control-gap: 0.3rem;
    --control-gap-mobile: 0.3rem;

    --btn-calc-size: 66px;
    --btn-calc-size-mobile: 57px;
    --indicator-size: 16px;
    --indicator-size-mobile: 14px;

    --map-border-radius: 8px;
    --map-border: 1px solid #ccc;
    --btn-border-radius: 8px;

    --color-from-icon: #28a745;
    --color-to-icon: #dc3545;
    --color-extra-icon: #007bff;
    --color-back-arrow: #007aff;

    --color-calc-bg: #28a745;
    --color-calc-bg-hover: #218838;
    --color-calc-fg: #ffffff;
    --color-calc-build-bg: #ffc107;
    --color-calc-build-bg-hover: #e0a800;
    --color-calc-build-fg: #212529;

    --color-icon-border: #ccc;
    --color-icon-active-border: #28a745;
    --color-icon-active-text: #28a745;

    --color-address: #000;
    --color-route-data: #000;
    --color-bottom-text: #666;
    --color-panel-bg: #fff;
    --color-panel-shadow: rgba(0,0,0,0.1);

    --color-clear-btn: #dc3545;
    --color-clear-btn-hover: #c82333;
    --color-clear-btn-disabled: #adb5bd;

    --indicator-border: rgba(0,0,0,0.1);
}