/*
Theme Name: Active Fitness Vracar
Theme URI: https://fitnesvracar.rs
Author: ChatGPT
Author URI: https://fitnesvracar.rs
Description: Osnovna, čista WordPress tema za fitnes centar „Active Fitness Vračar“ sa Bootstrap 5 navigacijom, prilagođenim logoom, jednim menijem i bočnom trakom. Spremna za proširenja.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: active-fitness-vracar
Tags: bootstrap, responsive, blog, fitness, custom-logo
*/

/* Reset & osnove */
*{ box-sizing:border-box; }


:root{
      --blue:#0f3d56;
      --white: #ffffff;
      --light:#f6fafc;
      --ink:#1f2a33;
      --gold:#f1c40f;
      --muted:#3a4a55;
      --soft:#e9f0f4;
      --silver: #d9d9d9;
      --af-primary:#0f3d56;
      --af-accent:#88bf3f;
      --af-dark:#0b2431;
      --brand:#0f3d56;
      --zelena: #3da5a2;
      --teget: #2e3e69;
	  --tirkizna: #1e8a87;
	  --svetlozelena: #aedc98;
	  --crvena: #d70707;
    }
   
    body { scroll-padding-top: 76px;font-size: 18px; font-family: arial;font-weight: 500;}
    .navbar-brand img { height: 48px; max-height: 100%; }
    .btn-brand{ background:var(--brand); color:#fff; border:none; }
    .btn-brand:hover{ background:#154e70; color:#fff; }
    .btn-custom{ background-color: var(--brand); color: #fff; border:none; }
    .btn-custom:hover{ background:#154e70; color:#fff; }
    .text-brand{ color:var(--brand); }
    .navbar-brand img { height: 48px; max-height:100%; }
    #mainNav .nav-link {
      font-weight:600; 
      color:var(--brand); margin:0 10px; transition:.3s;
    }
    #mainNav .nav-link:hover { color:#14506f; text-decoration:underline; }
    #mainNav .nav-link.active { color:#0a2a3b; border-bottom:2px solid var(--brand); }
    .page-hero{
      background: linear-gradient(180deg,#f8fafb,#fff);
    }    
    .contact-card{ background:#fff; border:1px solid #eee; border-radius:12px; }
    .info-icon{
      width:42px; height:42px; border-radius:50%;
      display:inline-flex; align-items:center; justify-content:center;
      background:var(--brand); color:#fff; margin-right:.6rem;
    }
    .form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(15,61,86,.15); }
    .required::after{ content:" *"; color:#dc3545; }

    .btn-custom {
      background-color: #0f3d56;
      color: #fff;
      border: none;
      font-weight: bold;
    }

	.btn-custom a{
	color: white;
	text-decoration: none;
	}
    
    .btn-custom:hover {
      background-color: #14506f;
      color: #fff;
    }

    #mainNav .nav-link {
      font-weight: 600;
      color: #0f3d56;
      margin: 0 10px;
      transition: all 0.3s ease;
    }
    
    #mainNav .nav-link:hover {
      color: #14506f;
      text-decoration: underline;
    }
    #mainNav .nav-link.active {
      color: #0a2a3b;
      border-bottom: 2px solid #0f3d56;
    }

    .hero {
      background: linear-gradient(180deg, #f8f9fa, #ffffff);
    }
    .hero h1 {
      font-size: 2.2rem;
      font-weight: 700;
      color: #0f3d56;
    }
    .hero p {
      font-size: 1.1rem;
      color: #444;
    }

    .icon-circle {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: #7cb0af;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      color: #fff;
      font-size: 1.5rem;
    }
    
    .ap-strip {
    height: 8px;
}


.crvena{
background: var(--crvena);
}

.sivi-p p{
background: #e7e7e7;
    padding: 5%;
    font-size: 1.3rem;
position: relative;

}

.sivi-p span{
position: absolute;
    left: -24px;
    width: 50px;
    height: 50px;
    text-align: center;
    top: 40%;
    background: white;
    border: 2px solid black;
    padding: 8px;
    border-radius: 50%;
    display: inline-block;

}


.adresa-header{
width: 150px;
}

.kajron {
width: 100%;
height: 35px;
color: black;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
position: relative;
margin: 0px;
}

.kajron span {
font-size: 20px;
display: inline-block;
padding-left: 100%;
animation: kajron 16s linear;
font-weight: bold;
}

@keyframes kajron {
0%{ transform: translate(0, 0); }
100%{ transform: translate(-100%, 0); }
}

.stranica-header{
background: var(--teget);
color: white;
}

.stranica-header h1{
font-weight: bold;
padding: 2%;
}

.zelena{
background: var(--zelena);
color: white;
}

.teget{
background: var(--teget);
color: white;
}


.x2dugme{
padding: 1.5%;
border-radius: 15px;
}


.vazna-lista{
max-width: 90%;
width: 800px;
margin-left: auto !important;
margin-right: auto !important;
margin: 5%;
padding-left: 0;
}

.vazna-lista li{
background: #ebebeb;
    padding: 3%;
    font-weight: bold;
    margin: 5px;
    border-left: 3px solid var(--zelena);
    font-size: 1.4rem;
}

.vazna-lista li::marker{
content: "";
}

.centriran-sadrzaj{
width: 50%;
margin-left: auto;
margin-right: auto;
}

.polja-ikonice{
background: #3da5a2;
color: white;
padding: 2%;
}

.kvadrati-naslovna a,.krugovi-naslovna a{
display: initial;
text-decoration: none;
color: #0f3d56;
}

.kvadrati-naslovna i, .krugovi-naslovna i{
color: var(--tirkizna);
}

.krugovi-naslovna .p-4:hover,.card:hover{
background: #f9f9f9;
}

.premium{
background: linear-gradient(90deg, var(--gold), #ffd24a);
}

.standard{
background: var(--white);
}


.glavni-paketi .card{
overflow: hidden;
border-radius: 3%;
}

.glavni-paketi li{
margin-bottom: 10px;
color: black;
}

.glavni-paketi li i{
background: #0f3d56;
    padding: 3px;
    color: white !important;
    border-radius: 3px;
}

.ap-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 700;
    border: 0;
    color: #fff;
}var(--accent)

.ap-btn.ghost {
    background: #fff;
    color: #27495f;
    border: 2px solid #d7e4ec;
}

.ap-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--gold);
    color: #674d00;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
}

.accordion-button::after {
  content: '\f067'; /* Font Awesome plus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  transition: transform 0.3s ease;
  background-image: none;
}

.accordion-button:not(.collapsed)::after {
  content: '\f068'; /* Font Awesome minus */
  background-image: none;
  transform: none;
}


/*Dijagnostika*/

.stranica-cekirana-polja{
background: var(--teget);
color: white;
}


.equal-col {
            aspect-ratio: 4/3;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding-top: 1rem;
        }
        
        .col-item {
            padding-bottom: 1rem;
            color: white;            
        }
        
        
        .icon-circle {
            background: var(--tirkizna);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 0.5rem;
            width: 60px;
            height: 60px;
        }
        
        .icon-circle i {
            color: white;
            font-size: 1.5rem;
        }

.content-wrapper{
width: 100%;
min-height: 75%;
border-bottom: 1px solid #60709d;
}

.stranica-vodjeni .wp-block-column{
background: #e7e7e7;
    padding: 2%;
    border-radius: 5px;
}

.stranica-vodjeni .icon-circle{
background: #6eb9b6;
}

.stranica-vodjeni i {
  color: black;
}



.benefiti .wp-block-column{
background: #f5f5f5;
padding: 5%;
}

/*KVIZ BOL U LEĐIMA*/

 .kviz{
      --bg:#0f172a;        /* tamna pozadina */
      --card:#dcdcffd1;      /* kartica */
      --text:#152178;      /* osnovni tekst */
      --muted:#94a3b8;     /* sekundarni tekst */
      --accent:#4f53a4;    /* akcija */
      --accent-2:#4f53a4;  /* hover */
      --border:#1f2937;
    }
    *{box-sizing:border-box}
    .kviz .wrap{max-width:900px;margin:40px auto;padding:16px}
    .kviz .card{background:var(--soft);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
     .kviz .badge{background:#4f53a4;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color: white;}
    .kviz header h1{font-size:20px;margin:0;line-height:1.2}
	.kviz .centar{text-align: center;}
    .kviz .content{padding:24px}
    .kviz .progress{height:8px;background:var(--white);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin:10px 0 18px}
   .kviz .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s ease}
    .kviz .q-title{font-size: 18px;
    line-height: initial;color: black;margin:6px 0 16px}
   .kviz .options{display:grid;gap:10px}
   .kviz .opt{border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;background:var(--teget);color: white;font-weight: bold;}
   .kviz .opt:hover{border-color:#2a374b}
   .kviz .opt input{margin-top:3px}
   .kviz .opt label{cursor:pointer;display:block}
   .kviz .help{font-size: 18px;margin-top:12px;padding:12px;border-left:3px solid var(--accent);background:var(--zelena);border-radius:8px;color:white;display:none}
   .kviz .muted{color:var(--muted)}
   .kviz .actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
   .kviz .btn{appearance:none;border:none;background:var(--zelena);color:white;text-transform: uppercase;font-weight:700;padding:12px 18px;border-radius:0px;cursor:pointer;transition:transform .05s ease, background .2s ease}
   .kviz .btn:active{transform:translateY(1px)}
   .kviz .btn[disabled]{opacity:.5;cursor:not-allowed}
   .kviz .inputpolje{font-size: 18px;padding: 5px;width: 100%;max-width: 300px;margin-bottom: 10px}
   .kviz .ghost{background:#f1f1f1;color:var(--text);}
   .kviz .result{display:none}
   .kviz .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;margin:6px 6px 0 0;background: var(--teget);color: white;}
   .kviz .promo{margin-top:14px;font-size: 18px;background: var(--zelena);color: white;padding:16px;border:1px solid var(--border);border-radius:12px;}
   .kviz .kontakt{background: var(--teget);margin: 5px;}
   .kviz .header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
   .kviz .header .badge{background: var(--zelena);border:1px solid var(--border);padding:6px 10px;border-radius:9px;font-size:12px;color: white;}
  .kviz .header h1{font-size:20px;margin:0;line-height:1.2}
   .kviz .footer{padding:14px 24px;border-top:1px solid var(--border);display:block;justify-content:space-between;color:var(--muted)}

/* pitanja i odgovori */

.active-faq{
padding: 6%;
}

.pitanje {
white-space: pre-wrap;
background-color: var(--zelena);
color: var(--white);
font-weight: bold;
height: auto;
padding: 10px;
cursor: pointer;
border-radius: 0px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 20px;
transition: 0.4s;
text-transform: none;
margin-bottom: 3px
}

.otvoreno, .pitanje:hover {
background-color: #6ab3b1;
}

.pitanje:after {
content: '\002B';
color: --(white);
font-weight: bold;
float: right;
margin-left: 5px;
}

.otvoreno:after {
content: "\2212";
}

.odgovor {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

.odgovor p{
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
}
/* pitanja i odgovori */

.dodatno .pitanje{
background: #578299;
text-transform: uppercase;
color: white;
font-size: 1rem;
}

.utisci{
background: #ededed;
}



.slider-bg-naslovna{
background: #0a0a0a69;
padding: 5%;
border-radius: 30px;
}




/**/



/**/

 /* Fade background slider */
    .bg-slider {
      position: relative;
      overflow: hidden;
      min-height: 350px;
    }
    .bg-slider::before,
    .bg-slider::after,
    .bg-slider .slide {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      animation: fadeSlide 24s infinite;
    }
    .bg-slider::before {
      background-image: url('img/slajd-1.jpg');
      animation-delay: 0s;
    }
    .bg-slider::after {
      background-image: url('img/slajd-2.jpg');;
      animation-delay: 8s;
    }
    .bg-slider .slide {
      background-image: url('img/slajd-3.jpg');
      animation-delay: 16s;
    }
    @keyframes fadeSlide {
      0%   { opacity: 0; }
      8%   { opacity: 1; }
      30%  { opacity: 1; }
      38%  { opacity: 0; }
      100% { opacity: 0; }
    }

/*< SLIDER */

.sadrzaj{
margin: 5%;
}

.uvod{
font-size: 1.5rem;
font-style: italic;
width: 80%;
padding: 2%;
text-align: center;
margin-left: auto;
margin-right: auto;
}


.hero{
background: linear-gradient(135deg, #e7f2f8, #ffffff);
border-bottom: 1px solid var(--soft);
} 

.hero h1{
font-size: 2rem;
text-transform: uppercase;
}

.hero span{
color: #1e8a87;
}

.dugme-kontakt{
display: none;
}

.izbor-kontakta{
z-index: 9;
position: fixed;
bottom: 75px;
left: 10px;
width: 60px;
text-align: center;
display: none;
}

.izbor-kontakta div{
font-size: 35px;
color: white;
line-height: 2;
border-radius: 50%;
text-align: center;
background: #1b8986;
width: 60px;
height: 60px;
box-shadow: 1px 1px 2px 1px #2a2a2a;
vertical-align: middle;
margin-bottom: 12px;
}



.posts-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.post-item {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.post-thumbnail {
    flex: 0 0 30%;
    margin-right: 20px;
}

.post-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.post-content {
    flex: 1;
}

.post-title {
    font-size: 24px;
    margin: 0 0 10px;
}

.post-title a {
    text-decoration: none;
    color: #333;
}

.post-title a:hover {
    color: #0073aa;
}

.post-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.post-excerpt {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more {
    display: inline-block;
    text-decoration: none;
    color: #0073aa;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
}

.bez-margina.container-fluid{
--bs-gutter-x: initial !important;
overflow: hidden;
}

/*MOBILNI*/

@media screen and (max-width: 800px) {
   
    .navbar-nav{
    text-align: center;
    }
    
    .navbar-nav li{
    margin: 1px;
    border: 1px solid #e9e9e9;
    }
    
.dugme-kontakt{
z-index: 9999;
display: block;
position: fixed;
padding: 8px;
bottom: 10px;
left: 10px;
font-size: 35px;
color: white;
border-radius: 50%;
text-align: center;
background: var(--zelena);
width: 60px;
height: 60px;
box-shadow: 1px 1px 2px 1px #2a2a2a;
vertical-align: middle;
}

.dugme-kontakt i, .izbor-kontakta i{
font-size: 35px;
}


.hero h1 {
font-size: 1.5rem;
}

nav .container{
--bs-gutter-x: initial !important;
}

.navbar-collapse{
margin-top: 20px;
}

.equal-col {
aspect-ratio: auto;
}


.content-wrapper {
    padding-bottom: 45px;
}

.sadrzaj{
margin: 1%;
}

.centriran-sadrzaj{
width: 80%;
}

.uvod {
    font-size: 1.2rem;
    width: initial;
    padding: 2%;
}

 .kviz-pitanja .gdlr-core-container {
padding-left: 0px!important;
padding-right: 0px!important;
    }
.kviz-pitanja .gdlr-core-item-pdlr {
    padding-left: 0px;
    padding-right: 0px;
}

main{
overflow-x: hidden; 
}

.telefon-header{
color: var(--crvena);
}

.sivi-p p {;
    padding: 5%;
    font-size: 1.3rem;
    position: relative;
    margin-left: 8%;
    padding-left: 10%;
}

}