/* =========================
   CSS پایه و متغیرها
========================= */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #64748b;
  --success: #16a34a;
  --warning: #eab308;
  --danger: #dc2626;
  --background: #f8fafc;
  --surface: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border: #e2e8f0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
  --radius: 12px;
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --header-height: 70px;
}

[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --secondary: #94a3b8;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --background: #0f172a;
  --surface: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --border: #334155;
}

/* Reset و پایه‌ها */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif; }
body { background: var(--background); color: var(--text-primary); min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; transition: var(--transition); line-height:1.6; }

/* =========================
   Header و Actions
========================= */
.header { background: var(--surface); box-shadow: var(--shadow-sm); padding:0.75rem 1rem; position:sticky; top:0; z-index:10000; height:var(--header-height); transition: var(--transition);}
.header-content { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:0.75rem; height:100%;}
.logo { display:flex; align-items:center; gap:0.5rem; font-weight:700; font-size:1.1rem; color:var(--primary); flex-shrink:0; max-width:50%; }
.logo-icon { font-size:1.35rem; color:#f97316; flex-shrink:0; }
.header-actions { display:flex; gap:0.4rem; align-items:center; overflow-x:auto; white-space:nowrap; padding:0.25rem 0; flex-wrap:nowrap; scrollbar-width:thin; max-width:50%; }
.header-actions::-webkit-scrollbar { height:3px; }
.header-actions::-webkit-scrollbar-track { background:transparent; }
.header-actions::-webkit-scrollbar-thumb { background:var(--secondary); border-radius:3px; }

.theme-toggle,.install-btn{padding:.5rem .7rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition);border:1px solid var(--border);min-height:38px;flex-shrink:0;background:var(--primary);color:#fff}
.theme-toggle:hover,.install-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.2)}
.theme-toggle i,.install-btn i{font-size:1rem}

/* =========================
   Main container و Cardها
========================= */
.main-container { flex:1; display:flex; flex-direction:column; max-width:1200px; margin:0 auto; width:100%; padding:1rem; gap:1rem; }
.card { background: var(--surface); border-radius:var(--radius); box-shadow: var(--shadow-sm); padding:1.25rem; transition: var(--transition); animation:fadeIn 0.3s ease; width:100%; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-title { font-size:1.1rem; font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; color:var(--text-primary);}
.card-title i { font-size:1.2rem; }

/* =========================
   Map container و Mode selector
========================= */
.map-container { position:relative; height:400px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); width:100%; }
#map { height:100%; width:100%; z-index:1; }

.mode-selector { position:absolute; top:1rem; right:1rem; z-index:1000; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-md); display:flex; overflow:hidden; border:1px solid var(--border);}
.mode-btn {padding:.45rem .6rem;font-size:.85rem;font-weight:500;color:var(--text-primary);background:var(--surface);border:none;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease;}
.mode-btn.active {background:var(--primary);color:#fff;}
.mode-btn:hover {background:var(--primary);color:#fff;transform:translateY(-1px);}

/* =========================
   Location info
========================= */
.location-info { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1.5rem; width:100%; }
.location-box { padding:1rem; border-radius:var(--radius); background:var(--background); border:1px solid var(--border); transition:var(--transition); position:relative; width:100%; }
.location-label { font-size:0.85rem; color:var(--text-secondary); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.location-text { font-weight:500; min-height:1.5rem; color:var(--text-primary); word-break:break-word; }
.lock-status { margin-right:auto; font-size:0.75rem; color:var(--secondary); display:flex; align-items:center; gap:0.25rem; }

/* Buttons */
.action-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem;width:100%}
.btn{padding:.8rem .9rem;border-radius:var(--radius);border:none;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.85rem;min-height:44px;width:100%;transition:var(--transition)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.2)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:var(--success);transform:translateY(-2px);box-shadow:0 4px 12px rgba(22,163,74,.2)}
.btn-warning{background:var(--warning);color:#fff}
.btn-warning:hover{background:var(--warning);transform:translateY(-2px);box-shadow:0 4px 12px rgba(234,179,8,.3)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger);transform:translateY(-2px);box-shadow:0 4px 12px rgba(220,38,38,.3)}
.btn i{font-size:1rem}

/* Install & Theme Buttons */
.install-btn,.theme-toggle{padding:.5rem .7rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition);border:1px solid var(--border);min-height:38px;flex-shrink:0}
.install-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
.install-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.3)}
.theme-toggle{background:var(--background);color:var(--text-primary)}
.theme-toggle:hover{background:var(--surface);box-shadow:0 2px 6px rgba(0,0,0,.05)}
.theme-toggle i,.install-btn i{font-size:1rem}

/* =========================
   Route section و Instructions
========================= */
.route-section{ display:none; }
.route-info{ background:var(--background); border-radius:var(--radius); padding:1rem; margin-bottom:1rem; border:1px solid var(--border); width:100%; }
.route-summary{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.route-details{ max-height:150px; overflow-y:auto; width:100%; }
.instruction-item{ padding:0.7rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:0.5rem; width:100%; transition:var(--transition);}
.instruction-item.active{ background:var(--primary); color:white; border-radius:var(--radius);}

/* =========================
   Voice & Audio Controls
========================= */
.audio-controls{ display:flex; gap:0.8rem; align-items:center; flex-wrap:wrap; width:100%; }
.voice-toggle{ display:flex; align-items:center; gap:0.5rem; }
.switch{ position:relative; display:inline-block; width:48px; height:22px;}
.switch input{ opacity:0; width:0; height:0;}
.slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--secondary); transition:.4s; border-radius:22px;}
.slider:before{ position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; background:white; transition:.4s; border-radius:50%; }
input:checked + .slider{ background:var(--primary);}
input:checked + .slider:before{ transform:translateX(26px);}

/* =========================
   Toast و Loading
========================= */
.toast{ position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(100px); background:var(--surface); color:var(--text-primary); padding:0.75rem 1.5rem; border-radius:var(--radius); box-shadow:var(--shadow-md); opacity:0; z-index:2000; border:1px solid var(--border); max-width:90%; text-align:center; width:auto; transition:var(--transition);}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0);}
.loading{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:3000; opacity:0; visibility:hidden; color:white; gap:1rem; transition:var(--transition);}
.loading.active{ opacity:1; visibility:visible; }
.loading-spinner{ width:40px; height:40px; border:4px solid rgba(255,255,255,0.3); border-radius:50%; border-top-color:white; animation:spin 1s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg); }}

/* =========================
   Current location & Lock
========================= */
.current-location-btn{ position:absolute; bottom:1rem; left:1rem; z-index:1000; background:var(--surface); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); border:none; cursor:pointer; color:var(--text-primary); transition:var(--transition); font-size:1rem; }
.current-location-btn:hover{ background:var(--primary); color:white; transform:scale(1.1);}
.lock-indicator{ position:absolute; top:1rem; left:1rem; z-index:1000; background:var(--surface); padding:0.5rem 0.7rem; border-radius:var(--radius); box-shadow:var(--shadow-md); display:flex; align-items:center; gap:0.4rem; font-size:0.8rem; color:var(--text-secondary); border:1px solid var(--border); max-width:160px; }

/* =========================
   Driver Position Section
========================= */
.driver-position-section{ display:none; width:100%; }
.driver-position-section .collapsible-content{ padding:1.6rem; display:flex; flex-direction:column; gap:1.5rem; }
.driver-position-info{ display:grid; grid-template-columns:1fr; gap:1rem; width:100%; }
.driver-position-section .location-box{ padding:1rem; border-radius:var(--radius); background:var(--background); border:1px solid var(--border);}
.driver-position-section .action-buttons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.8rem; margin-top:1.5rem; width:100%; }
.driver-position-section .btn{ padding:0.9rem 1rem; font-size:0.85rem; min-height:44px; display:flex; align-items:center; justify-content:center; gap:0.4rem; border:none; border-radius:var(--radius); cursor:pointer; transition:var(--transition); }

/* =========================
   Tabs و Collapsibles و Links
========================= */
.route-tabs, .combined-tabs, .share-tabs{ display:flex; border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:1rem; overflow:hidden; border:1px solid var(--border); width:100%; }
.route-tab, .combined-tab, .share-tab{ flex:1; padding:0.7rem; text-align:center; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.4rem; font-weight:500; font-size:0.85rem; min-width:0; transition:var(--transition);}
.route-tab.active, .combined-tab.active, .share-tab.active{ background:var(--primary); color:white;}
.tab-content, .link-content{ display:none; width:100%; }
.tab-content.active, .link-content.active{ display:block; }
.link-info{ background:var(--background); border-radius:var(--radius); padding:1rem; margin-bottom:1rem; border:1px solid var(--border); width:100%; }
.link-url{ font-family:monospace; padding:0.7rem; background:var(--surface); border-radius:calc(var(--radius)-4px); margin-bottom:0.7rem; word-break:break-all; border:1px dashed var(--border); color:var(--text-primary); font-size:0.8rem; width:100%; }
.link-stats{ display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-secondary); flex-wrap:wrap; gap:0.4rem; width:100%; }
.link-actions{ display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; width:100%; }

/* =========================
   Collapsible
========================= */
.collapsible{ overflow:hidden; max-height:60px; transition:max-height 0.3s ease-out; width:100%; }
.collapsible.active{ max-height:1000px; }
.collapsible-header{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; width:100%; }
.collapsible-icon{ transition:transform 0.3s ease;}
.collapsible.active .collapsible-icon{ transform:rotate(180deg);}
.collapsible-content{ padding-top:1rem; display:none; width:100%;}
.collapsible.active .collapsible-content{ display:flex; flex-direction:column; gap:1rem; }

/* =========================
   Animations و Scrollbar
========================= */
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes slideIn{ from{opacity:0; transform:translateX(-10px);} to{opacity:1; transform:translateX(0);} }
.fade-in{ animation:fadeIn 0.5s ease forwards;}
.pulse{ animation:pulse 2s infinite; }
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);} }

::-webkit-scrollbar{ width:4px; height:4px; }
::-webkit-scrollbar-track{ background:var(--background); border-radius:10px; }
::-webkit-scrollbar-thumb{ background:var(--secondary); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--primary); }

/* =========================
   Responsive
========================= */
@media (max-width:768px){
  :root{--header-height:60px;}
  .header-content{ gap:0.5rem; }
  .header-actions{ max-width:55%; justify-content:flex-end; }
  .logo{ max-width:45%; font-size:1rem; }
  .logo-icon{ font-size:1.2rem; }
  .action-buttons, .app-links{ grid-template-columns:1fr; }
  .audio-controls{ flex-direction:column; align-items:flex-start; }
  .map-container{ height:350px; }
  .route-summary{ flex-direction:column; gap:0.5rem; }
  .btn{ padding:0.7rem 0.8rem; font-size:0.8rem; min-height:42px; }
  .history-item{ flex-direction:column; gap:0.5rem; align-items:flex-start; }
  .history-actions{ align-self:flex-end; }
  .link-actions{ grid-template-columns:1fr; }
  .location-info{ grid-template-columns:1fr; }
  .mode-selector{ flex-direction:column; }
  .mode-btn{ padding:0.45rem 0.6rem; font-size:0.75rem; }
  .lock-indicator{ top:auto; bottom:4rem; font-size:0.75rem; max-width:140px; }
  .theme-toggle, .install-btn{ padding:0.4rem 0.6rem; font-size:0.8rem; min-height:36px; }
  .route-tab{ padding:0.8rem 0.6rem; font-size:0.85rem; min-width:100px; }
}

@media (max-width:480px){
  :root{--header-height:55px;}
  .main-container{ padding:0.5rem; }
  .card{ padding:1rem; }
  .header{ padding:0.5rem; }
  .logo{ font-size:0.9rem; }
  .logo-icon{ font-size:1.1rem; }
  .theme-toggle, .install-btn{ padding:0.35rem 0.5rem; font-size:0.75rem; min-height:34px; }
  .theme-toggle span, .install-btn span{ display:none; }
  .theme-toggle i, .install-btn i{ font-size:1rem; margin:0; }
  .route-tab{ padding:0.7rem 0.5rem; font-size:0.8rem; min-width:90px; }
  .route-tab span{ font-size:0.75rem; }
  .map-container{ height:300px; }
  .btn{ padding:0.6rem 0.7rem; font-size:0.75rem; min-height:40px; }
  .card-title{ font-size:1rem; }
  .location-box{ padding:0.8rem; }
  .location-label{ font-size:0.8rem; }
  .location-text{ font-size:0.85rem; }
  .combined-tab, .share-tab{ padding:0.6rem; font-size:0.8rem; }
  .link-url{ font-size:0.75rem; padding:0.6rem; }
  .link-stats{ font-size:0.75rem; }
}

@media (max-width:320px){
  .logo span{ display:none; }
  .logo{ max-width:40%; }
  .header-actions{ max-width:60%; gap:0.2rem; }
  .theme-toggle, .install-btn{ padding:0.3rem; }
  .route-tab{ min-width:80px; padding:0.6rem 0.4rem; }
  .route-tab i{ margin:0; }
  .route-tab span{ font-size:0.7rem; }
  .map-container{ height:280px; }
  .mode-btn{ padding:0.4rem; font-size:0.7rem; }
  .mode-btn span{ display:none; }
  .driver-position-section .collapsible-content{ padding:0.8rem; }
  .driver-position-section .btn{ font-size:0.75rem; padding:0.7rem 0.8rem; }
  .driver-position-section .btn span{ font-size:0.7rem; }
}

/* =========================
   Leaflet tweaks
========================= */
.leaflet-popup-content{ font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif; text-align:right; }
.leaflet-control-zoom{ margin-right:10px !important; }

@supports(-webkit-touch-callout:none){ .map-container{ height:380px; } }
@media(max-height:600px){ .map-container{ height:300px; } }
@media(max-width:768px) and (orientation:landscape){ .map-container{ height:250px; } .header{ position:relative; } }

/* =========================
   App Links - دسترسی به مسیر در نقشه
========================= */
.app-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 1.5rem;
    width: 100%;
}

.app-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: var(--radius);
    background-color: var(--background);
    border: 1px solid var(--border);
    transition: var(--transition);
    text-decoration: none;
    color: var(--text-primary);
    width: 100%;
}

.app-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.app-link-icon {
    font-size: 1.7rem;
    margin-bottom: 0.7rem;
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.app-link-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-align: center;
    font-size: 0.85rem;
}

.app-link-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .app-links { grid-template-columns: 1fr; }
}

/* =========================
   History - تاریخچه مسیرها
========================= */
.history-list {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 1rem;
    width: 100%;
}

.history-item {
    padding: 0.7rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    animation: slideIn 0.3s ease;
    width: 100%;
}

.history-item:hover {
    background-color: var(--background);
}

.history-actions {
    display: flex;
    gap: 0.4rem;
}

.history-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
    font-size: 0.95rem;
    padding: 0.25rem;
    border-radius: 4px;
}

.history-btn:hover {
    color: var(--primary);
    background-color: var(--background);
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    width: 100%;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Animation */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}


/* =========================
  pulse
========================= */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 2s infinite;
}