html, body {
    background: #ffffff !important;
    color: #111827 !important;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BOJE
   Bela: #ffffff
   Plava: #2563eb
   Crvena: #ef4444
   Tamni tekst: #111827
   Sivi tekst: #6b7280
   Svetla pozadina: #f9fafb
*/

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f9fafb;
    color: #111827;
    min-height: 100vh;
}

/* HEADER */

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 8%;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    border-top: 3px solid transparent;
    border-image: linear-gradient(to right, #ef4444, #ffffff, #2563eb) 1;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111827;
    display: flex;
    align-items: center;
}

.logo-accent-blue { color: #2563eb; }
.logo-accent-red  { color: #ef4444; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-nav a {
    text-decoration: none;
    color: #4b5563;
    font-size: 0.95rem;
    padding: 6px 10px;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.main-nav a:hover {
    color: #111827;
    background: #eff6ff;
}

.btn-outline {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #2563eb;
    color: #2563eb !important;
    font-weight: 500;
    background: #ffffff;
}

/* BUTTONS */

.btn-primary,
.btn-secondary,
.btn-danger {
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    gap: 6px;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
}

.btn-secondary {
    background: #ffffff;
    color: #111827;
    border: 3px solid #e5e7eb;
}

.btn-danger {
    background: #ef4444;
    color: #ffffff;
}

/* Mala sekundarna dugmad */
.btn-secondary-small{
    padding:4px 10px;
    font-size:0.8rem;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    color:#111827;
    cursor:pointer;
}

/* PDF dugme (globalno) */
.pdf-btn{
    background:#2563eb;
    color:#ffffff !important;
    border-color:#2563eb;
}
.pdf-btn:hover{
    background:#1e40af;
}

/* SEKCIJE */

.section {
    padding: 40px 8% 60px;
    background: #f9fafb;
}

.section h2 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 1.7rem;
}

.section-subtitle {
    text-align: center;
    margin-top: -14px;
    margin-bottom: 24px;
    font-size: 0.95rem;
    color: #6b7280;
}

.section-subtitle-left{
    text-align:left;
    margin-top:6px;
    margin-bottom:0;
}

/* FOOTER */

.main-footer {
    text-align: center;
    padding: 16px 8%;
    font-size: 0.85rem;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

/* ================================
   DASHBOARD – KOMPONENTE
   ================================ */

.section-inner{
    max-width:1200px;
    margin:0 auto;
}

.small-text{
    font-size:.85rem;
    color:#374151;
}

.pill-info{
    font-size:.82rem;
    color:#6b7280;
    line-height:1.35;
}

/* Box */
.card-box{
    background:#ffffff;
    border-radius:16px;
    padding:1.35rem 1.5rem;
    box-shadow:0 10px 28px rgba(15,23,42,0.08);
    margin-top:1.2rem;
}

/* Statistika */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
    margin-top:1rem;
}

.stat-card{
    background:#ffffff;
    border-radius:14px;
    padding:0.85rem 1rem;
    border:1px solid #e5e7eb;
}

.stat-card .stat-label{
    font-size:.78rem;
    color:#6b7280;
}

.stat-card .stat-value{
    font-size:1.35rem;
    font-weight:700;
    margin-top:0.12rem;
    color:#2563eb;
}

.stat-badge{
    display:inline-block;
    margin-top:0.35rem;
    padding:0.12rem 0.55rem;
    border-radius:999px;
    font-size:.7rem;
    font-weight:600;
}
.sb-active{background:#dcfce7;color:#166534}
.sb-paused{background:#fef3c7;color:#92400e}
.sb-expired{background:#fee2e2;color:#b91c1c}

/* Search row */
.search-row{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    align-items:center;
}

.search-row input[type="text"]{
    padding:.45rem .8rem;
    border-radius:999px;
    border:1px solid #d1d5db;
    font-size:.88rem;
}

/* Admin table wrapper */
.admin-table-wrapper{
    width:100%;
    overflow-x:auto;
    margin-top:0.85rem;
}

/* Admin table */
.admin-table{
    width:100%;
    border-collapse:collapse;
    min-width:520px;
}

.admin-table th,.admin-table td{
    padding:0.6rem 0.7rem;
    border-bottom:1px solid #e5e7eb;
    font-size:.92rem;
    vertical-align:middle;
}

.admin-table th{
    background:#f3f5ff;
    font-weight:800;
}

/* actions col */
.actions-col{width:54px;}
.actions-cell{text-align:center;white-space:nowrap;}

/* row actions button */
.btn-row-actions{
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(15,23,42,0.08);
}
.btn-row-actions:hover{background:#eff6ff}

/* status badge */
.status-badge{
    display:inline-block;
    padding:0.22rem 0.65rem;
    border-radius:999px;
    font-size:.75rem;
    font-weight:800;
    color:#fff;
}
.status-active{background:#22c55e}
.status-paused{background:#fb923c}
.status-expired{background:#ef4444}

/* pagination */
.pagination{
    margin-top:0.9rem;
    display:flex;
    gap:0.45rem;
    flex-wrap:wrap;
    font-size:.9rem;
}
.pagination a,.pagination span{
    padding:0.3rem 0.65rem;
    border-radius:999px;
    border:1px solid #e5e7eb;
    text-decoration:none;
    color:#374151;
    background:#fff;
}
.pagination .active-page{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}

/* ================================
   MODAL (global)
   ================================ */
.action-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
}
.action-modal.open{display:flex;}

.action-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,0.45);
    backdrop-filter:blur(6px);
}

.action-modal-content{
    position:relative;
    background:#ffffff;
    border-radius:18px;
    padding:1.2rem 1.15rem;
    max-width:420px;
    width:92%;
    box-shadow:0 20px 60px rgba(15,23,42,0.35);
    z-index:1001;
}

.action-modal-title{
    margin-bottom:0.4rem;
    font-size:1.12rem;
    font-weight:900;
}

.action-modal-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:0.55rem;
    margin-top:0.9rem;
    margin-bottom:1rem;
}

.btn-modal{
    flex:1 1 48%;
    padding:10px 12px;
    border-radius:14px;
    font-size:0.9rem;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    color:#111827;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    font-weight:700;
}
.btn-modal:hover{background:#eff6ff;}

.btn-modal-danger{
    background:#fee2e2;
    border-color:#fecaca;
    color:#b91c1c;
}
.btn-modal-danger:hover{background:#fecaca;}

/* close btn */
.action-modal-close{
    border-radius:14px !important;
}

/* ===============================
   COMPANY FORM MODAL (ADD/EDIT)
   =============================== */
.company-form-modal{
    max-width:560px;
    padding:1.25rem 1.15rem;
}

.company-form-modal h3{
    font-size:1.25rem;
    margin-bottom:.25rem;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.75rem .9rem;
    margin-top:0.9rem;
}

.form-grid label{
    font-size:.78rem;
    font-weight:800;
    color:#4b5563;
    margin-bottom:.25rem;
    display:block;
}

.form-grid input{
    width:100%;
    padding:.62rem .78rem;
    border-radius:14px;
    border:1px solid #d1d5db;
    font-size:.95rem;
    background:#f9fafb;
    transition:border-color .15s, box-shadow .15s, background-color .15s;
}

.form-grid input:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 2px rgba(37,99,235,.18);
    background:#fff;
}

.full-btn{
    width:100%;
    margin-top:.9rem;
    border-radius:14px;
    padding:.85rem 1rem;
    font-weight:800;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .main-header {
        padding-inline: 5%;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .section { padding:24px 5% 40px; }
    .section-inner{ padding:0; }

    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:600px){
    .form-grid{grid-template-columns:1fr;}
    .action-modal-content{width:94%;}
    .admin-table{min-width:460px;}
}
/* ================================
   ✅ MODAL responsive – FIX mobile
   ================================ */
.action-modal-content{
    /* ostaje sve tvoje, ali dodaj ove linije (ili override) */
    width: min(720px, 92vw);
    max-height: calc(100vh - 24px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ✅ Primarno dugme u modalu (isto kao Novo vozilo) */
.btn-modal-primary{
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff !important;
    border: 1px solid #2563eb;
}
.btn-modal-primary:hover{
    filter: brightness(0.95);
}

/* ✅ Mobile: sve u jednu kolonu + dugmad full width */
@media (max-width: 520px){
    .action-modal-content{
        width: 94vw;
        padding: 14px;
        border-radius: 14px;
    }
    .action-modal-buttons{
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .btn-modal,
    .btn-primary,
    .btn-secondary,
    .btn-secondary-small{
        width: 100%;
        justify-content: center;
    }
    .form-grid{
        grid-template-columns: 1fr !important;
    }
}

/* ================================
   ✅ TOOLBAR – vozila (dugmad ista)
   ================================ */
.vehicles-toolbar{
    display:flex;
    gap:.6rem;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.vehicles-search{
    display:flex;
    gap:.6rem;
    align-items:center;
    flex-wrap:wrap;
    margin:0;
}

/* isti izgled dugmadi svuda */
.btn-fixed{
    min-height:40px;         /* usklađeno sa tvojim btn paddingom */
    padding:10px 18px;       /* isto kao .btn-primary/.btn-secondary */
    font-size:0.95rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
}

/* lepši input (kao ranije) */
.vehicles-search input[type="text"]{
    height:40px;                 /* isto kao dugmad */
    padding:0 14px;
    border-radius:999px;
    border:1px solid #d1d5db;
    font-size:.95rem;
    background:#ffffff;
    min-width:280px;
    box-shadow:0 2px 10px rgba(15,23,42,0.06);
    transition:border-color .15s, box-shadow .15s;
}

.vehicles-search input[type="text"]:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 2px rgba(37,99,235,.18), 0 2px 10px rgba(15,23,42,0.06);
}

@media (max-width:600px){
    .vehicles-search input[type="text"]{
        min-width:0;
        flex:1;
    }
}

/* mobile: sve lepo u jednom redu/2 reda bez "skakanja" */
@media (max-width:600px){
    .vehicles-toolbar{
        justify-content:flex-start;
        width:100%;
    }

    .vehicles-search{
        width:100%;
    }

    .vehicles-search input[type="text"]{
        flex:1;
        min-width:0;
    }
}
/* ================================
   ✅ TOOLBAR – vozila (OVERRIDE)
   stavi NA KRAJ style.css
   ================================ */

.vehicles-toolbar{
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.vehicles-search{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
  margin:0;
}

/* dugmad uvek ista (desktop + mob) */
.btn-fixed{
  height:40px;
  padding:0 18px;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* ✅ INPUT – lepši (override i na .search-row ako ga negde koristiš) */
.vehicles-search input[type="text"],
.search-row input[type="text"]{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #d1d5db;
  font-size:.95rem;
  background:#ffffff;
  min-width:280px;
  box-shadow:0 2px 10px rgba(15,23,42,0.06);
  transition:border-color .15s, box-shadow .15s;
}

.vehicles-search input[type="text"]:focus,
.search-row input[type="text"]:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.18), 0 2px 10px rgba(15,23,42,0.06);
}

@media (max-width:600px){
  .vehicles-toolbar{ justify-content:flex-start; width:100%; }
  .vehicles-search{ width:100%; }
  .vehicles-search input[type="text"],
  .search-row input[type="text"]{
    min-width:0;
    flex:1;
  }
}

/* ================================
   STATISTIKA – klik filter + aktivno stanje
   ================================ */

.stats-bars{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
}

.stats-bar-row{
  display:grid;
  grid-template-columns:260px 1fr 64px;
  gap:12px;
  align-items:center;
}

@media(max-width:720px){
  .stats-bar-row{ grid-template-columns:1fr; }
}

.stats-bar-label{
  font-weight:700;
}

.stats-bar-track{
  height:12px;
  background:#eef2ff;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #e5e7eb;
}

.stats-bar-fill{
  height:100%;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  border-radius:999px;
}

.stats-bar-val{
  text-align:right;
  font-weight:900;
  color:#2563eb;
}

/* klikabilni red */
.stats-bar-link{
  text-decoration:none;
  color:inherit;
  border-radius:14px;
  padding:6px;
  margin:-6px;
  transition:background .15s, box-shadow .15s;
}

.stats-bar-link:hover{
  background:#f8fafc;
}

/* aktivan filter */
.stats-bar-active{
  outline:2px solid rgba(37,99,235,.25);
  background:#f8fafc;
}

/* ✅ Label iznad segmented – isti stil kao seg-btn */
.form-grid label.seg-label{
  font-size: .95rem;
  font-weight: 800;
  color: #0f172a;
}

/* ================================
   LOGO – E-VOZILO
   ================================ */

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#111827;
}

.logo img{
    height:40px;
    width:auto;
    display:block;
}

/* tekst ispod auta u SVG-u */
.logo-text{
    font-size:0.85rem;
    font-weight:800;
    letter-spacing:0.08em;
}

/* MOBILE – logo manji */
@media(max-width:600px){
    .logo img{
        height:30px;
    }
}

.service-card{
    border-radius:14px;
    box-shadow:0 6px 18px rgba(15,23,42,0.08);
    border:1px solid #e5e7eb;
    background:#fff;
}

/* ================================
   HAMBURGER NAV – SAFE OVERRIDE
   ================================ */

/* layout samo unutar headera */
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

/* hamburger dugme */
.nav-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#ffffff;
    cursor:pointer;
    padding:8px;
}

.nav-toggle span{
    display:block;
    height:2px;
    margin:6px 0;
    background:#111827;
    border-radius:2px;
}






/* 📱 MOBILE */
@media (max-width: 768px){

    .nav-toggle{ display:block; }

    .main-nav{
        display:none; /* zatvoreno */
        position:absolute;
        top:100%;
        right:0;
        left:0;
        margin-top:10px;
        flex-direction:column;
        background:#ffffff;
        border:1px solid #e5e7eb;
        border-radius:16px;
        box-shadow:0 20px 40px rgba(15,23,42,0.12);
        overflow:hidden;
        z-index:999;

        /* ✅ DODATO: više prostora dole posle Logovanja/Odjave */
        padding-bottom: 40px;
    }

    .main-nav.open{ display:flex; }

    .main-nav a{
        padding:14px 18px;
        border-bottom:1px solid #f1f5f9;
    }

    .main-nav a:last-child{
        border-bottom:none;
    }

    /* ✅ DODATO: skloni ružan plavi krug oko Logovanja/Odjave (.btn-outline) */
    .main-nav .btn-outline:focus,
    .main-nav .btn-outline:focus-visible{
        outline:none;
        box-shadow:none;
    }

    /* anchor za absolute meni */
    .header-inner{
        position:relative;
    }
}









/* 🔧 FIX: logo normalne veličine dok je hamburger aktivan */
@media (max-width: 900px){
    .logo img{
        height:40px; /* isto kao desktop */
    }
}

/* ☰ poravnanje – preporučeno */
.header-inner{
    justify-content:space-between;
}

/* ✅ Mobile header: logo levo, hamburger desno */
@media (max-width: 900px){
  .main-header .section-inner.header-inner{
    width: 100%;
    max-width: none;     /* ukida 1200px limit samo za header na mobu */
    margin: 0;           /* ukida centriranje */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .main-header .logo{
    margin-right: auto;  /* gura sve ostalo udesno */
  }

  .main-header .nav-toggle{
    margin-left: auto;   /* ☰ skroz desno */
  }
}
/* ================================
   LOGO – veći (desktop + mobile)
   ================================ */

.logo img{
    height: 76px;      /* promeni po želji: 52–60px */
    width: auto;
}



/* ================================
   LANDING (index.php) – scoped
   ================================ */
.page-landing .hero{
  padding: 60px 8% 40px;
  background: #f9fafb;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
}

.page-landing .hero h1{
  font-size: 2.3rem;
  line-height: 1.15;
  margin-bottom: 12px;
}

.page-landing .hero p{
  color: #4b5563;
  line-height: 1.6;
  font-size: 1.05rem;
  max-width: 62ch;
}

.page-landing .hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.page-landing .hero-tags span{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  font-weight:600;
  font-size:.9rem;
  color:#111827;
}

.page-landing .hero-image{ display:flex; justify-content:flex-end; }

.page-landing .hero-phone{
  width: min(420px, 100%);
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.10);
  overflow:hidden;
}

.page-landing .hero-phone-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-bottom:1px solid #e5e7eb;
  background:#f9fafb;
}
.page-landing .hero-phone-dot{ width:10px;height:10px;border-radius:999px;background:#ef4444; }
.page-landing .hero-phone-logo{ font-weight:900; letter-spacing:.04em; color:#111827; }

.page-landing .hero-phone-card{
  padding: 14px 16px;
  border-bottom:1px solid #f1f5f9;
}
.page-landing .hero-phone-card:last-child{ border-bottom:none; }
.page-landing .hero-phone-card h3{ font-size: 1.02rem; margin-bottom: 6px; }
.page-landing .hero-phone-card p{ font-size:.95rem; color:#6b7280; margin:0; }

/* trust bar */
.page-landing .stats-bar{
  padding: 18px 8%;
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.page-landing .stat-item{
  padding: 10px 14px;
  border-radius: 16px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
}
.page-landing .stat-value{ font-weight: 900; color:#2563eb; font-size: 1.1rem; }
.page-landing .stat-label{ margin-top:4px; color:#6b7280; font-size:.92rem; line-height:1.35; }

/* cards */
.page-landing .cards-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.page-landing .card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.06);
}
.page-landing .card-number{
  display:inline-flex;
  width:34px;height:34px;
  align-items:center;justify-content:center;
  border-radius:999px;
  background:#eff6ff;
  color:#2563eb;
  font-weight:900;
  margin-bottom:10px;
}
.page-landing .card p{ color:#6b7280; line-height:1.6; }

@media (max-width: 900px){
  .page-landing .hero{
    grid-template-columns: 1fr;
    padding: 34px 5% 24px;
  }
  .page-landing .hero-image{ justify-content:flex-start; }
  .page-landing .stats-bar{
    padding: 14px 5%;
    grid-template-columns: 1fr;
  }
  .page-landing .cards-row{ grid-template-columns: 1fr; }
}

/* ================================
   KONTAKT (kontakt.php) – FIX forme i layouta
   radi samo na landing stranicama
   ================================ */

/* Kontakt layout: umesto da se oslanja na .cards-row grid, ovde ga pretvorimo u 2 kolone */
.page-landing .contact-wrap{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:18px;
  align-items:start;
}

@media (max-width: 900px){
  .page-landing .contact-wrap{
    grid-template-columns: 1fr;
  }
}

/* Stil za auth-form na kontaktu */
.page-landing .auth-form label{
  display:block;
  font-size:.85rem;
  font-weight:800;
  color:#4b5563;
  margin:10px 0 6px;
}

.page-landing .auth-form input[type="text"],
.page-landing .auth-form input[type="email"],
.page-landing .auth-form input[type="tel"],
.page-landing .auth-form textarea{
  width:100%;
  padding:.70rem .85rem;
  border-radius:14px;
  border:1px solid #d1d5db;
  background:#ffffff;
  font-size:1rem;
  transition:border-color .15s, box-shadow .15s;
}

.page-landing .auth-form textarea{
  min-height:120px;
  resize:vertical;
}

.page-landing .auth-form input:focus,
.page-landing .auth-form textarea:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.18);
}

/* Submit dugme lepo i full width */
.page-landing .auth-form .btn-primary{
  width:100%;
  margin-top:12px !important;
}

/* AUTH FORME (login/kontakt) – uključi i password */
.page-landing .auth-form input[type="text"],
.page-landing .auth-form input[type="email"],
.page-landing .auth-form input[type="tel"],
.page-landing .auth-form input[type="password"],
.page-landing .auth-form textarea,
.page-landing .auth-form select{
  width:100%;
  padding:.70rem .85rem;
  border-radius:14px;
  border:1px solid #d1d5db;
  background:#ffffff;
  font-size:1rem;
  transition:border-color .15s, box-shadow .15s;
  box-sizing:border-box;
}

.page-landing .auth-form input:focus,
.page-landing .auth-form textarea:focus,
.page-landing .auth-form select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.18);
}

/* ================================
   LOGIN SWITCH – segmented control
   ================================ */

.login-switch{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  background:#f1f5f9;
  padding:6px;
  border-radius:999px;
  margin-bottom:18px;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}

.login-switch-btn{
  flex:1;
  text-align:center;
  padding:10px 14px;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:700;
  text-decoration:none;
  color:#334155;
  background:transparent;
  transition:all .2s ease;
  white-space:nowrap;
}

/* aktivni tab */
.login-switch-btn.active{
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#ffffff;
  box-shadow:0 6px 18px rgba(37,99,235,.35);
}

/* hover (desktop) */
@media (hover:hover){
  .login-switch-btn:not(.active):hover{
    background:#e2e8f0;
  }
}

/* 📱 mobile tweak */
@media (max-width: 480px){
  .login-switch{
    max-width:100%;
  }
  .login-switch-btn{
    font-size:0.9rem;
    padding:9px 10px;
  }
}

/* Centriranje login kartice (radi i desktop i mob) */
.auth-center{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:center;
}

@media (max-width: 900px){
  .auth-center{
    padding:0 5%;
  }
}

/* MINI TRUST – BOTTOM (premium, diskretno) */
.trust-bottom{
  margin-top: 60px;
  padding: 40px 20px;
  border-top: 1px solid #e5e7eb;
  background: linear-gradient(
    180deg,
    rgba(37, 99, 235, 0.04),
    rgba(255, 255, 255, 0)
  );
}

.trust-bottom__wrap{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.trust-bottom__item{
  text-align: center;
  min-width: 160px;
}

.trust-bottom__value{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.trust-bottom__label{
  margin-top: 4px;
  font-size: 14px;
  color: #475569;
}

.trust-bottom__divider{
  width: 1px;
  height: 46px;
  background: linear-gradient(
    180deg,
    transparent,
    #e5e7eb,
    transparent
  );
}

/* Mobile */
@media (max-width: 768px){
  .trust-bottom__wrap{
    flex-direction: column;
    gap: 18px;
  }

  .trust-bottom__divider{
    width: 60px;
    height: 1px;
  }
}

/* Counter polish */
.trust-bottom__value{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease;
  position: relative;
}

/* plus znak (ako želiš) */
.trust-bottom__value::after{
  content: "+";
  margin-left: 2px;
  font-weight: 800;
  color: #2563eb;
}

/* kada krene animacija */
.trust-bottom__value.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ✅ STATISTIKA – GREEN varijanta */
.stats-bar-fill.green{
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.stats-bar-val.green{
  color: #16a34a;
}

/* ================================
   SECTION H1 – centriraj naslove (O nama, Cenovnik, Kontakt…)
   ================================ */
.page-landing .section h1{
  text-align: center;
  margin-bottom: 14px;
  font-size: 1.9rem;
  line-height: 1.15;
}