/*
 * TRANSORTER.BG - Customized Logistica Style CSS
 * Brand Color: Red/Red-Orange (Matches US Car Hero Image)
 */

/* ===== Design Tokens (ОБНОВЕНИ) ===== */
:root{
  --bg:#f5f7fb;         /* Светло сиво за светлите секции */
  --dark-bg: #12161F;  /* Тъмен цвят (като Logica) */
  --card:#ffffff;
  --ink:#101318;
  --muted:#5e6673;
  
  --brand:#E83A42;    /* Нов бранд цвят: Наситено Червено (като в US флага) */
  --brand-ink:#C62E33; /* По-тъмен вариант за hover */
  
  --line:#e6e9ef;
  --radius:16px;
  --shadow:0 6px 20px rgba(16,19,24,.06);
  --wrap:1180px;
  --white:#ffffff; 
}
@font-face{
  font-family:Inter;
  src:url("../fonts/Inter-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
html{scroll-behavior:smooth}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body{margin:0;background:var(--bg);color:var(--ink);
     font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:var(--wrap);margin:auto;padding:0 18px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--brand);color:#fff;font-weight:700; transition: background 0.2s ease;}
.btn:hover{background:var(--brand-ink)}

/* Добавен клас white за бутона в Hero */
.btn.white {
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--white);
    transition: background 0.2s ease, color 0.2s ease;
}
.btn.white:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--ink);
}

.btn--ghost{background:transparent;border:2px solid var(--brand);color:var(--brand); transition: all 0.2s ease;}
.btn--ghost:hover{background:var(--brand); color:#fff; border-color: var(--brand);}
h1{font-size:clamp(32px,4.5vw,56px);letter-spacing:-.02em;margin:0 0 12px; line-height: 1.1;} 
h2{font-size:clamp(18px,2.6vw,22px);color:var(--muted);margin:0 0 18px;font-weight:600}
h3{font-size:clamp(20px,2.4vw,26px);margin:0 0 14px}
p.lead{font-size:18px;color:var(--muted);max-width:75ch}
section{padding:54px 0}


/* =================================
 * Logica Theming (Dark Mode Adaptation)
 * ================================= */

/* ===== DARK SECTIONS (Logica Style) ===== */
.dark-section {
    background: var(--dark-bg);
    color: #fff;
}
.dark-section h1, .dark-section h3, .dark-section p.lead {
    color: var(--white);
}
.dark-section h2 {
    color: var(--brand); 
    font-weight: 700;
}
.dark-section .btn--ghost { 
    border-color: var(--white); 
    color: var(--white); 
}
.dark-section .btn--ghost:hover {
    background: var(--white);
    color: var(--dark-bg);
    border-color: var(--white);
}
.dark-section a:not(.btn) { color: var(--brand); } 


/* ===== Header/Navigation (Logica Style) ===== */
.main-header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 20px 0;
}
.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo a {
    color: var(--white);
    font-weight: 800;
    font-size: 24px;
    display: block;
}
/* Desktop Navigation */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}
.desktop-nav a {
    color: var(--white);
    font-weight: 500;
    transition: color 0.2s ease;
}
.desktop-nav a:hover {
    color: var(--brand);
}
.btn--contact { 
    background: var(--brand); 
    color: var(--white) !important; 
    padding: 8px 16px;
    border-radius: 8px;
}

/* Mobile Burger Menu Styles */
.menu-toggle {
    display: none; /* Скрито по подразбиране */
    cursor: pointer;
    font-size: 30px;
    color: var(--white);
    z-index: 110;
    line-height: 0;
}
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--dark-bg);
    z-index: 99;
    padding-top: 80px; 
    transform: translateX(100%); /* Скрито извън екрана */
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.mobile-nav.open {
    transform: translateX(0); /* Показване на екрана */
}
.mobile-nav a {
    color: var(--white);
    font-size: 24px;
    padding: 15px 0;
    display: block;
    width: 90%;
}
.mobile-nav .btn--contact {
    margin-top: 20px;
    padding: 12px 30px;
    font-size: 18px;
}
/* End Mobile Menu Styles */


/* ===== HERO (Full screen / Edge-to-Edge) ===== */
.hero-full {
  background: var(--dark-bg);
  padding: 0; 
  position: relative;
  min-height: 85vh; 
  display: flex;
  align-items: center;
}

.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.hero-bg-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* Overlay върху снимката за по-добър контраст на текста */
.hero-bg-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65); 
    z-index: 5;
}


.hero-content {
  position: relative;
  z-index: 10; 
  padding: 120px 18px; 
  text-align: left; 
}
.hero-content h1 { max-width: 800px; }
.hero-content h2 { max-width: 700px; }
.hero-content p.lead { color: #ccc; max-width: 65ch; }


/* KPI adjustments for dark section */
.hero-content .kpis {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    justify-content: flex-start;
}
.hero-content .kpi {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    padding: 10px 15px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.hero-content .kpi:hover {
    background: rgba(232, 58, 66, 0.5); /* Brand color hover */
}

/* Share/Referral Button container in Hero */
.share-container {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    align-items: center;
}
.btn-share {
    background: none;
    border: none;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
    padding: 0; 
    margin-left: 15px; 
}
.btn-share:hover {
    color: var(--brand);
}


/* Tiles: Секцията, която съдържа плочките, трябва да е без горен паддинг */
.tiles-section { padding-top: 0; margin-top: 0; padding-bottom: 54px; } 

/* ===== Service tiles (Dashboard Button Style) - 7 колони ===== */
.tiles{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr)); /* 7 колони на най-голям десктоп */
  gap:16px; 
  margin-top:0; 
  position: relative;
  z-index: 5;
  margin-top: -35px;
}
.tile{
    background:var(--card);
    border:1px solid var(--line); 
    border-radius:14px; 
    padding:15px 10px; 
    text-align:center;
    box-shadow: 0 4px 18px rgba(0,0,0,.1); 
    transition: all 0.3s ease;
    min-height: 120px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
	  position: relative; /* Важно: За да позиционираме етикета спрямо плочката */
    overflow: hidden; /* За да не излиза етикетът при анимация на плочката */
}
.tile:hover {
    transform: translateY(-3px); 
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
}
.tile img{width:36px;height:36px;display:block;margin:0 auto 8px} 
.tile .t{font-weight:800; font-size: 14px; margin-top: 5px;} 
.tile .s{font-size:12px;color:var(--brand); font-weight: 600; margin-top: 3px;} 


/* Етикет "НОВО" */
.new-tile .tile-label {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--brand); /* Червен фон */
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 0 16px 0 8px; /* Горна дясна част закръглена */
    transform: translateY(-100%); /* Скриваме го, за да го покажем с трансформ */
    /* Визуален ефект: Издърпване на място */
    animation: slideInLabel 0.5s forwards 0.3s;
}

@keyframes slideInLabel {
    to {
        transform: translateY(0);
    }
}

/* ===== Intro & SVG Integration (Grid layout) ===== */
.intro-grid {
    display: grid; 
    grid-template-columns: 3fr 1fr; 
    gap: 40px; 
    align-items: center;
}
.intro p{margin:0}

/* ===== Partners strip (зарежда логата) ===== */
.partners{display:flex;gap:24px;flex-wrap:wrap;align-items:center; justify-content: space-around;}
.partners img{height:34px;opacity:.7;filter:grayscale(1);transition:opacity .2s, filter .2s; width: auto}
.partners img:hover{opacity:1; filter: grayscale(0);}

/* ===== Feature grid (alternating) ===== */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.feature .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.feature .media img{width:100%;height:auto;border-radius:var(--radius);display:block}

/* Стил за feature card-ове в тъмна секция (Full-Width Feature) */
.dark-section .feature .card {
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    color: var(--white);
}
.dark-section .feature .card h3 { 
    color: var(--brand); 
}
.dark-section .feature .card p { 
    color: #ccc; 
}
.dark-section .feature .media img {
    opacity: 0.8;
}

/* ===== Stories (Logica News/Blog style) ===== */
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.story{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; box-shadow: var(--shadow);}
.story img{width:100%;height:auto;aspect-ratio:16/9;display:block}
.story .box{padding:14px;} 

/* ===== Form & Map ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
label{display:block;font-size:13px;margin:10px 0 6px;color:var(--muted)}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit; box-sizing: border-box;}
textarea{min-height:120px;resize:vertical}
.map{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.map img{display:block;width:100%;height:auto}

/* =================================
 * CALCULATOR STYLES
 * ================================= */
#mini-calculator {
    background: var(--card);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    margin-top: 30px;
    margin-bottom: 30px;
}
#calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: flex-end;
}
#calc-grid .mf-input-wrapper {
    margin-bottom: 0;
}
#calculator-result {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    background: #f0f4f9;
    border: 1px solid var(--line);
}
#calculator-result p {
    margin: 5px 0;
    color: var(--ink);
}
#calculator-result strong {
    color: var(--brand);
    font-size: 1.2em;
}


/* =================================
 * SHARE MODAL STYLES (REQUIRED FIX)
 * ================================= */

.modal-overlay {
    display: none; 
    position: fixed;
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); 
    justify-content: center;
    align-items: flex-start; /* Променено от center на flex-start, за да стои по-горе */
    backdrop-filter: blur(5px);
    padding-top: 50px; /* Добавен padding отгоре, за да не е залепен за ръба */
}
.modal-overlay.open {
    display: flex; 
}
.modal-content {
    background-color: var(--card);
    /* margin: 10vh auto; (ПРЕМАХНАТО В ПОЛЗА НА flex-start и padding-top) */
    padding: 30px;
    border-radius: var(--radius);
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* Намаляваме padding-ите за по-компактен изглед, тъй като съдържанието е по-малко */
    padding: 25px; 
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.close-button {
    color: var(--muted);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.close-button:hover {
    color: var(--brand);
}
.referral-code-box input {
    margin-top: 5px;
}

/* Social Share Buttons */
.social-share-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.social-btn {
    flex: 1;
    padding: 10px 5px;
    text-align: center;
    border-radius: 8px;
    color: var(--white) !important;
    font-weight: 700;
    transition: opacity 0.2s;
}
.social-btn:hover {
    opacity: 0.8;
}
.facebook-btn { background-color: #3b5998; }
.instagram-btn { background-color: #e4405f; }
.tiktok-btn { background-color: #000; } 


/* =================================
 * Responsive Design
 * ================================= */

@media (min-width: 1025px) {
    .hero-content {
         padding: 150px 18px;
    }
}
/* Скриваме бургер и мобилно меню на десктоп */
@media (min-width: 901px) {
    .menu-toggle, .mobile-nav { display: none !important; }
    .desktop-nav { 
        display: flex; /* Уверяваме се, че десктоп навигацията се вижда */
        align-items: center;
    } 
}
/* 7 колони на по-голям десктоп */
@media (min-width: 1401px) {
     .tiles{grid-template-columns:repeat(7,minmax(0,1fr))}
}
/* 5 колони на среден десктоп (Default layout) */
@media (max-width: 1400px) and (min-width: 901px) {
    .tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media (max-width:900px){
  /* Header adjustments for mobile */
  .desktop-nav { display: none; } 
  .menu-toggle { display: block; } /* Показваме бургер иконата */
  
  .hero-full { min-height: 60vh; }
  .hero-content { text-align: center; }
  .hero-content .kpis { justify-content: center; }
  .share-container { justify-content: center; flex-wrap: wrap; }
  
  /* Layouts */
  .feature,.contact-grid{grid-template-columns:1fr}
  .stories{grid-template-columns:1fr 1fr}
  
  /* Tiles - 3 колони на мобилен */
  .tiles{grid-template-columns:repeat(3,1fr)}
  
  /* Intro Grid застава на 1 колона */
  .intro-grid {
    grid-template-columns: 1fr !important; 
    gap: 20px !important;
    text-align: center;
  }
  
  /* Calculator Responsive */
  #calc-grid {
      grid-template-columns: 1fr;
  }

  /* Footer Mobile */
    footer .footer-columns {
        display: flex !important;
        flex-direction: column;
        text-align: center;
    }
    footer .footer-columns > div {
        margin-top: 20px;
    }
    .contact-grid .map {
        order: -1; 
    }

    /* Модален прозорец на мобилен */
    .modal-content {
        margin: 5% 10px;
    }
}
@media (max-width:620px){
  .tiles{grid-template-columns:1fr 1fr}
  .stories{grid-template-columns:1fr}
  .mobile-nav { width: 100%; align-items: center; }
}

/* Уточнение за Hero Content padding (от вашия последен HTML) */
.slide-buttons, .hero-content p.lead, .hero-content h1, .hero-content h2 {
	padding: 2px 12px;
}