/* ======================================================
   AUTOSERVISI APP — FULL LIGHTER REPLACEMENT
====================================================== */

:root{
  --as-bg:#102447;
  --as-bg-2:#0d2141;
  --as-bg-3:#15305d;
  --as-surface:#183158;
  --as-surface-2:#223b64;
  --as-surface-3:#33476d;
  --as-card:#536179;
  --as-card-2:#4a5770;
  --as-line:rgba(255,255,255,.14);
  --as-line-strong:rgba(255,255,255,.22);
  --as-text:#f4f8ff;
  --as-text-soft:rgba(255,255,255,.84);
  --as-title:#ffffff;
  --as-primary:#3b82f6;
  --as-primary-2:#2563eb;
  --as-primary-3:#1d4ed8;
  --as-accent:#8dff1f;
  --as-success:#22c55e;
  --as-warning:#f59e0b;
  --as-danger:#ef4444;
  --as-shadow-sm:0 8px 20px rgba(0,0,0,.14);
  --as-shadow-md:0 18px 44px rgba(0,0,0,.18);
  --as-shadow-lg:0 28px 70px rgba(0,0,0,.22);
  --as-radius-sm:14px;
  --as-radius:20px;
  --as-radius-lg:28px;
  --as-max:1200px;
  --as-ease:cubic-bezier(.22,.8,.2,1);
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:linear-gradient(180deg,#0e2344 0%, #11284d 45%, #15305d 100%) !important;
  color:var(--as-text) !important;
  font-family:Arial, Helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6{
  color:var(--as-title);
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
}

.app-content,
.app-container,
main,
.page-content,
.content,
.content-area{
  background:transparent !important;
}

.app-content{
  min-height:100vh;
  padding:0 !important;
}

.app-container{
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* ======================================================
   RESET STARIH OVERLAYA / VIDEO / MRLJA
====================================================== */

.as-page::before,
.as-page::after,
.as-category-page::before,
.as-category-page::after,
.as-show::before,
.as-show::after,
.as-section::before,
.as-section::after,
.as-item::before,
.as-item::after,
.as-card::before,
.as-card::after,
.as-scard::before,
.as-scard::after,
.venetian-wrapper::before,
.venetian-wrapper::after,
.galaxy-dust,
.stardust,
.as-bg-video,
.as-bg-video-overlay{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.venetian-wrapper{
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
  position:static !important;
}

.as-page *,
.as-category-page *,
.as-show *{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.as-page .blur,
.as-page .overlay,
.as-page .glass,
.as-category-page .blur,
.as-category-page .overlay,
.as-show .blur,
.as-show .overlay{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
}

/* ======================================================
   GLOBAL WRAPPERS
====================================================== */

.as-page,
.as-category-page,
.as-show{
  width:100%;
  min-height:100vh;
  position:relative;
  color:var(--as-text);
  background:#b89c9c!important
}

.as-page{
  padding:18px 0 90px;
}

.as-category-page,
.as-show{
  padding:20px 0 70px;
}

.as-container{
  max-width:var(--as-max);
  margin:0 auto;
  padding:0 18px;
  position:relative;
  z-index:2;
}

/* ======================================================
   NAVIGACIJA
====================================================== */

.as-nav-wrap{
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(17,40,77,.96);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.as-nav{
  max-width:var(--as-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  gap:14px;
}

.as-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--as-title);
  font-weight:900;
}

.as-brand img{
  height:34px;
  width:auto;
  border-radius:10px;
}

.as-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.as-links a{
  color:rgba(255,255,255,.84);
  font-weight:800;
  font-size:14px;
  padding:10px 14px;
  border-radius:999px;
  transition:all .22s var(--as-ease);
}

.as-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
}

.as-links a.is-active{
  color:#fff;
  background:rgba(59,130,246,.30);
  border:1px solid rgba(93,156,255,.45);
}

.as-cta{
  background:linear-gradient(135deg,var(--as-primary),var(--as-primary-2));
  color:#fff !important;
  padding:11px 16px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(37,99,235,.22);
}

.as-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(37,99,235,.28);
}

.as-burger{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--as-shadow-sm);
}

/* ======================================================
   INDEX / HOME
====================================================== */

.as-center{
  min-height:auto;
  display:flex;
  flex-direction:column;
  align-items:center !important;
  justify-content:center;
  text-align:center !important;
  padding:10px 0 16px;
}

.as-main-logo{
  width:200px !important;
  height:200px !important;
  object-fit:contain !important;
  display:block;
  margin:0 auto 14px auto !important;
  filter:none !important;
}

.as-site-title{
  font-size:clamp(2rem, 5vw, 4rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-0.03em;
  margin:0 0 10px;
  color:var(--as-title);
}

.as-hero-subtitle{
  max-width:900px;
  margin:0 auto 18px;
  font-size:17px;
  line-height:1.65;
  color:#FFF!important;
}

.as-big-btn{
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px 24px;
  font-size:16px;
  font-weight:900;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--as-primary),var(--as-primary-2));
  box-shadow:0 18px 44px rgba(37,99,235,.22);
  transition:transform .22s var(--as-ease), box-shadow .22s var(--as-ease);
}

.as-big-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 50px rgba(37,99,235,.28);
}

.as-big-btn.is-open{
  background:linear-gradient(135deg,#35548a,#274674);
}

.as-collapse{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transform:translateY(-8px);
  transition:grid-template-rows .4s var(--as-ease), opacity .24s ease, transform .24s ease;
}

.as-collapse > *{
  min-height:0;
  overflow:hidden;
}

.as-collapse.is-open{
  grid-template-rows:1fr;
  opacity:1;
  transform:none;
}

/* ======================================================
   SEKCIJE
====================================================== */

.as-section{
  background:linear-gradient(180deg,#102447 0%, #0d2141 100%) !important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--as-radius-lg);
  box-shadow:var(--as-shadow-md);
  padding:24px;
  overflow:visible;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.as-section + .as-section{
  margin-top:18px;
}

.as-section h2{
  color:var(--as-accent) !important;
  margin:0 0 10px;
  font-size:22px;
  font-weight:900;
}

.as-section p{
  color:rgba(255,255,255,.86) !important;
  margin:0 0 16px;
}

/* ======================================================
   TABOVI
====================================================== */

.as-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
  padding-bottom:0;
  border-bottom:none;
}

.as-tab-btn{
  appearance:none;
  -webkit-appearance:none;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:.2s;
}

.as-tab-btn i{
  margin-right:8px;
  color:#fff;
  opacity:1;
}

.as-tab-btn:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.as-tab-btn.active{
  background:linear-gradient(135deg,var(--as-primary),var(--as-primary-2));
  color:#fff;
  border-color:#68a3ff;
  box-shadow:0 10px 24px rgba(37,99,235,.30);
}

.as-tab-btn.active i{
  color:#fff;
}

/* ======================================================
   LISTA I KARTICE
====================================================== */

.as-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.as-item{
  position:relative;
  background:linear-gradient(180deg,#56627a 0%, #49556c 100%) !important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  transition:
    transform .28s var(--as-ease),
    box-shadow .28s var(--as-ease),
    border-color .28s var(--as-ease),
    background .28s var(--as-ease);
  overflow:hidden;
}

.as-item:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.24);
  background:linear-gradient(180deg,#5d6982 0%, #4f5c74 100%) !important;
}

.as-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.as-iconbox{
  width:62px;
  height:62px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#2f67d8 0%, #2559c7 100%) !important;
  border:1px solid rgba(125,175,255,.55);
  color:#fff !important;
  font-size:26px !important;
  flex:0 0 62px;
  box-shadow:0 10px 24px rgba(37,99,235,.28);
}

.as-iconbox i{
  color:#fff !important;
  font-size:24px !important;
  opacity:1 !important;
  display:block !important;
}

.as-title,
.as-item .as-title,
.as-card h3,
.as-scard-title,
.as-side h3,
.hours-day .day,
.row-content .value,
.as-breadcrumb .current{
  color:#fff !important;
}

.as-item .as-title{
  font-size:23px;
  font-weight:900;
  margin-bottom:6px;
  line-height:1.1;
}

.as-sub,
.as-item .as-sub,
.as-card p,
.as-scard-meta,
.as-scard-foot,
.hours-day .time,
.row-content a.value,
.as-address,
.as-address-full,
.row-content .label,
.as-breadcrumb a,
.as-breadcrumb,
.as-search-sub,
.as-progress-meta .muted{
  color:rgba(255,255,255,.86) !important;
}

.as-item .as-sub{
  font-size:15px;
  line-height:1.55;
}

.as-right{
  opacity:.92;
  color:#fff;
  font-size:18px;
}

.as-right i{
  color:#fff !important;
}

.as-list .as-item{
  opacity:0;
  transform:translateY(20px);
  animation:asFadeUp .5s ease forwards;
}

.as-list .as-item:nth-child(1){animation-delay:.05s;}
.as-list .as-item:nth-child(2){animation-delay:.10s;}
.as-list .as-item:nth-child(3){animation-delay:.15s;}
.as-list .as-item:nth-child(4){animation-delay:.20s;}
.as-list .as-item:nth-child(5){animation-delay:.25s;}
.as-list .as-item:nth-child(6){animation-delay:.30s;}
.as-list .as-item:nth-child(7){animation-delay:.35s;}
.as-list .as-item:nth-child(8){animation-delay:.40s;}

@keyframes asFadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ======================================================
   KATEGORIJE / GRID
====================================================== */

.as-cat-grid,
.as-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
  margin-top:16px;
}

.as-card,
.as-scard{
  text-decoration:none;
  color:#fff !important;
  background:linear-gradient(180deg,#203a62 0%, #183158 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  overflow:hidden;
  transition:transform .22s var(--as-ease), box-shadow .22s var(--as-ease), border-color .22s var(--as-ease);
  display:flex;
  flex-direction:column;
  box-shadow:var(--as-shadow-sm);
}

.as-card:hover,
.as-scard:hover{
  transform:translateY(-4px);
  box-shadow:var(--as-shadow-md);
  border-color:rgba(255,255,255,.20);
}

.as-card-body,
.as-scard-body{
  padding:18px;
}

/* ======================================================
   SHOW PAGE
====================================================== */

.as-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:22px;
  font-size:14px;
  background:rgba(255,255,255,.08);
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
}

.as-breadcrumb i{
  font-size:12px;
  color:rgba(255,255,255,.65);
}

.as-hero{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:24px;
  margin-bottom:26px;
}

.as-cover,
.as-side{
  background:linear-gradient(180deg,#183158 0%, #203a62 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  box-shadow:var(--as-shadow-md);
  padding:30px;
}

.as-side{
  align-self:start;
}

.as-info{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:24px;
}

.as-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.as-row i{
  width:20px;
  margin-top:2px;
  color:#9dc3ff;
}

.row-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.row-content .label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.row-content .value{
  font-size:16px;
  font-weight:700;
}

.row-content a.value{
  color:#b9d4ff !important;
}

.as-map-container{
  margin-bottom:20px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}

.as-map-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:15px;
}

.as-hours-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;
}

.hours-day{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  background:rgba(255,255,255,.08);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
}

.hours-day.closed .time{
  color:var(--as-danger) !important;
}

/* ======================================================
   FORME / AUTH / PANEL
====================================================== */

.as-auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px 18px;
  background:
    radial-gradient(880px 340px at 10% 0%, rgba(59,130,246,.10), transparent 56%),
    radial-gradient(720px 320px at 100% 0%, rgba(141,255,31,.04), transparent 52%),
    linear-gradient(180deg,#0e2344 0%, #11284d 100%);
}

.as-auth-card{
  width:min(100%, 470px);
  background:linear-gradient(180deg,#183158 0%, #203a62 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:32px;
  box-shadow:var(--as-shadow-lg);
  padding:28px;
}

.as-btn,
.as-btn-mini,
.as-btn-primary,
.as-btn-secondary,
.as-btn-ghost,
.as-btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:none;
  cursor:pointer;
  transition:all .22s var(--as-ease);
  font-weight:800;
}

.as-btn,
.as-btn-mini,
.as-btn-primary{
  padding:12px 18px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--as-primary),var(--as-primary-2));
  box-shadow:0 14px 28px rgba(37,99,235,.20);
}

.as-btn:hover,
.as-btn-mini:hover,
.as-btn-primary:hover{
  transform:translateY(-1px);
}

.as-btn-secondary{
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--as-shadow-sm);
}

.as-btn-ghost,
.as-btn-outline{
  padding:11px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--as-shadow-sm);
}

.as-input,
.as-field input,
.as-field textarea,
.as-field select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14) !important;
  background:#173055 !important;
  color:#fff !important;
  padding:12px 14px;
  outline:none;
  box-shadow:none;
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.55);
}

.as-input:focus,
.as-field input:focus,
.as-field textarea:focus,
.as-field select:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(104,163,255,.9) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.22) !important;
}

.as-field label{
  display:block;
  margin:0 0 7px;
  font-size:13px;
  color:#fff;
  font-weight:800;
}

/* ======================================================
   FOOTNOTE
====================================================== */

.as-footnote{
  text-align:center;
  margin-top:20px;
  font-size:13px;
  color:rgba(255,255,255,.74);
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 991px){
  .as-hero{
    grid-template-columns:1fr;
  }

  .as-side{
    order:-1;
  }
}

@media (max-width: 768px){
  .as-burger{
    display:flex;
  }

  .as-nav{
    flex-wrap:wrap;
  }

  .as-links{
    display:none;
    width:100%;
    flex-direction:column;
    gap:10px;
    padding:10px 0 4px;
  }

  .as-links.is-open{
    display:flex;
  }

  .as-links a,
  .as-cta{
    width:100%;
    text-align:center;
  }

  .as-tabs{
    gap:8px;
  }

  .as-tab-btn{
    padding:9px 14px;
    font-size:13px;
  }
}

@media (max-width: 600px){
  .as-container{
    padding:0 12px;
  }

  .as-main-logo{
    width:160px !important;
    height:160px !important;
  }

  .as-hero-subtitle{
    font-size:16px;
  }

  .as-big-btn{
    width:100%;
  }

  .as-section,
  .as-cover,
  .as-side{
    padding:18px;
  }

  .as-item{
    padding:18px 16px;
    border-radius:22px;
  }

  .as-left{
    gap:14px;
    align-items:flex-start;
  }

  .as-iconbox{
    width:54px;
    height:54px;
    flex-basis:54px;
    font-size:22px !important;
    border-radius:16px;
  }

  .as-iconbox i{
    font-size:20px !important;
  }

  .as-item .as-title{
    font-size:19px;
  }

  .as-sub,
  .as-item .as-sub{
    font-size:14px;
  }

  .as-tab-btn{
    padding:8px 12px;
    font-size:12px;
  }
}

@media (max-width: 380px){
  .as-site-title{
    font-size:2rem;
  }

  .as-tabs{
    gap:6px;
  }

  .as-tab-btn{
    padding:7px 10px;
    font-size:11px;
  }
}