/* =========================================================================
   CUSTOMER PRICING — Deep Space + Glassmorphism (sidebar + price cards)
   ========================================================================= */

/* ================== DESIGN TOKENS ================== */
:root{
  /* Deep Space paleta */
  --bg-deep-space: #0d1b2a;
  --surface-glass-1: rgba(23, 43, 65, 0.60);  /* kontejneri / sidebar */
  --surface-glass-2: rgba(13, 27, 42, 0.70);  /* inputi */
  --surface-glass-3: rgba(13, 27, 42, 0.80);  /* tabovi */

  --text-primary:   #e0e1dd;
  --text-secondary: #a9d6e5;
  --text-muted-ds:  #778da9;  /* deep-space muted */

  --accent-primary:        #4caee5;   /* plavi akcenat */
  --accent-primary-hover:  #5bc0f7;
  --accent-success:        #2ecc71;
  --accent-danger:         #e74c3c;

  --border-color:        rgba(169, 214, 229, 0.25);
  --border-color-hover:  rgba(76, 175, 229, 0.6);
  --border-color-focus:  var(--accent-primary);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm:    0 4px 15px rgba(0,0,0,.20);
  --shadow-md:    0 8px 32px rgba(0,0,0,.30);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,.30);

  /* Glass kit varijable (za price kartice) */
  --bg-deep:           #0b1530;
  --glass-bg:          rgba(255,255,255,.10);
  --glass-br:          rgba(255,255,255,.18);
  --glass-bg-hover:    rgba(255,255,255,.12);
  --glass-br-hover:    rgba(255,255,255,.26);
  --text-bright:       #f8fafc;
  --text-soft:         #cbd5e1;
  --text-muted:        #90a0bf;
  --accent-yellow:     #facc15; /* cena/akcenat na kartici */
  --ok:                #22c55e;
  --danger:            #ef4444;
  --chip-bg:           rgba(0,0,0,.45);
  --chip-br:           rgba(255,255,255,.22);
  --biz-bg:            rgba(255,255,255,.85);
  --biz-text:          #0b1530;
}

/* ================== GLOBAL ================== */
body{
  background-color: var(--bg-deep-space);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{ color: var(--text-primary)!important; font-weight: 600; }

/* ================== PAGE BANNER ================== */
.page-banner{
  position:relative; background-size:cover; background-position:center;
  padding:100px 0; text-align:center; overflow:hidden;
}
.page-banner::before{ content:''; position:absolute; inset:0; background:inherit; filter:blur(5px) saturate(.8); z-index:1; }
.page-banner-bg{ position:absolute; inset:0; background:linear-gradient(135deg, rgba(13,27,42,.7), rgba(23,43,65,.85)); z-index:2; }
.page-banner h1,.page-banner .breadcrumb{ position:relative; z-index:3; }
.page-banner h1{ font-size:3rem; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.breadcrumb{ background:transparent; padding:0; }
.breadcrumb-item a{ color:var(--text-secondary); text-decoration:none; transition:color .3s; }
.breadcrumb-item a:hover{ color:var(--text-primary); }
.breadcrumb-item.active{ color:var(--text-muted-ds); }

/* ================== PAGE CONTENT WRAP ================== */
.page-content{ background-color: var(--bg-deep-space)!important; padding:60px 0; }
.page-content .container{
  background: var(--surface-glass-1)!important; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.1); padding:40px;
}

/* ================== SIDEBAR (kao u oglasi.css) ================== */
.user-sidebar{
  background: var(--surface-glass-1)!important; border:1px solid rgba(255,255,255,.1)!important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius: var(--radius-md)!important; padding:15px!important;
}
.user-sidebar ul, .user-sidebar ol{ list-style:none; padding-left:0; margin:0; }
.user-sidebar ul li{ margin-bottom:6px; }
.user-sidebar ul li a{
  background: rgba(85,98,120,.41)!important; color:#fff!important; padding:12px 15px!important;
  border-radius:12px!important; font-weight:600!important; display:flex; align-items:center; gap:12px;
  text-decoration:none; border-left:3px solid transparent; transition:all .3s!important;
}
.user-sidebar ul li a:hover{
  background: rgba(76,175,229,.15)!important; color:var(--text-primary)!important;
  border-left-color: var(--accent-primary); transform: translateY(-2px);
}
.user-sidebar ul li a.active{
  background: linear-gradient(135deg, var(--accent-primary), #3a97c9)!important;
  color: var(--text-primary)!important; box-shadow:0 4px 15px rgba(76,175,229,.2)!important;
  transform: translateY(-2px);
}

/* ================== FORM ELEMENTS (ako budu na stranici) ================== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
textarea, .select2-container--default .select2-selection--single{
  background-color: var(--surface-glass-2)!important; color: var(--text-primary)!important;
  border:1px solid var(--border-color)!important; padding:12px 15px!important; font-size:16px!important;
  border-radius: var(--radius-sm)!important; box-shadow: var(--shadow-inset); transition: all .25s;
  height:auto!important;
}
input:hover, textarea:hover, .select2-container--default .select2-selection--single:hover{
  border-color: var(--border-color-hover)!important;
}
input:focus, textarea:focus, .select2-container--open .select2-selection--single{
  border-color: var(--border-color-focus)!important; outline:none!important;
  box-shadow: 0 0 15px rgba(76,175,229,.2), var(--shadow-inset);
}
input::placeholder, textarea::placeholder{ color: var(--text-muted-ds)!important; opacity:1; }

/* ================== BUTTONS ================== */
.btn, button{
  color: var(--text-primary)!important; border:none; padding:12px 25px; font-size:16px; font-weight:600;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: all .25s; cursor:pointer; text-decoration:none;
}
.btn:hover, button:hover{ transform: translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.3); }
.btn-primary, button[type="submit"]{ background: linear-gradient(135deg, var(--accent-primary), #3a97c9)!important; }
.btn-primary:hover, button[type="submit"]:hover{ background: linear-gradient(135deg, var(--accent-primary-hover), var(--accent-primary))!important; }
.btn-success{ background: var(--accent-success)!important; }
.btn-danger{  background: var(--accent-danger)!important; }
.btn-outline-primary{ color:#e5ecff!important; border:1px solid rgba(255,255,255,.35)!important; background:transparent!important; }
.btn-outline-primary:hover{ background: rgba(255,255,255,.08)!important; }

/* ================== TABS (parts/cars/all/biznis) ================== */
.parts-category-tabs{
  display:flex; flex-wrap:wrap; gap:10px; background: var(--surface-glass-3);
  padding:10px; border-radius: var(--radius-md); margin-bottom:30px;
  border:1px solid rgba(255,255,255,.1);
}
.parts-category-tabs a{
  flex-grow:1; text-align:center; padding:10px 15px; color:var(--text-secondary)!important;
  border-radius: var(--radius-sm); font-weight:500; transition: all .25s; background:transparent!important;
  border:1px solid transparent;
}
.parts-category-tabs a:not(.active):hover{
  background: rgba(76,175,229,.15)!important; color: var(--text-primary)!important; transform: translateY(-2px);
}
.parts-category-tabs a.active{
  background: linear-gradient(135deg, var(--accent-primary), #3a97c9)!important; color: var(--text-primary)!important;
  font-weight:700; box-shadow:0 4px 15px rgba(76,175,229,.2)!important; transform: translateY(-2px);
}

/* ================== PRICE GRID & CARDS (radi i za .pricing .card i za .fp-card) ================== */

/* Grid kao na “Full Glass Kit” */
.front-results{ background: var(--bg-deep); padding:36px 0 48px; }
.fp-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:576px){ .fp-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:992px){ .fp-grid{ grid-template-columns:repeat(3,1fr);} }

/* Glass kartica (varijanta za .fp-card) */
.fp-card{
  position:relative; overflow:hidden; border-radius:16px; background:var(--glass-bg); border:1px solid var(--glass-br);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; display:flex; flex-direction:column;
}
.fp-card::before,.fp-card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:.25s; }
.fp-card::before{ background:linear-gradient(130deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.06) 35%,rgba(255,255,255,0) 60%); transform:translateX(-20%); }
.fp-card::after{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 34px rgba(0,0,0,.45); }
.fp-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.55); background:var(--glass-bg-hover); border-color:var(--glass-br-hover); }
.fp-card:hover::before{ opacity:1; transform:translateX(0); }
.fp-card:hover::after{ opacity:1; }

.fp-body{ padding:14px 16px; color:var(--text-bright); display:flex; flex-direction:column; height:100%; }
.fp-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px; }
.fp-title{ color:#fff; font-weight:800; margin-bottom:8px; line-height:1.2; }
.fp-price{ font-weight:800; font-size:1.15rem; color:var(--accent-yellow); }
.fp-feat{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.92rem; color:#a9b4ca; }
.fp-feat i{ color:var(--ok); margin-right:6px; }
.fp-feat .x{ color:var(--danger); }
.fp-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:.82rem; color:var(--text-muted); gap:10px; }

.badge-chip{
  font-size:.75rem; font-weight:700; padding:.22rem .62rem; border-radius:999px; background:var(--chip-bg);
  border:1px solid var(--chip-br); color:#fff; display:inline-flex; align-items:center; gap:.35rem;
}
.btn-glass{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08)); padding:.55rem .85rem;
  font-weight:600; text-decoration:none; transition: transform .15s, box-shadow .2s, opacity .15s;
}
.btn-glass:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.25); color:#fff; }
.btn-glass--sm{ padding:.4rem .7rem; font-size:.9rem; }
.btn-glass--dark{ border-color:rgba(11,21,48,.25); color:var(--biz-text); background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.35)); }

/* Biznis kartica (svetla) */
.pkg--business{ background:var(--biz-bg); color:var(--biz-text); border:1px solid rgba(11,21,48,.24); }
.pkg--business .fp-title, .pkg--business .fp-feat li, .pkg--business .fp-price{ color:var(--biz-text)!important; }
.pkg--business .badge-chip{ background:rgba(11,21,48,.12); color:var(--biz-text); border:1px solid rgba(11,21,48,.28); }
.pkg--business .fp-foot{ color:#233a73; } .pkg--business .btn-glass{ color:var(--biz-text); }
.ribbon-biz{
  position:absolute; top:14px; left:-42px; transform:rotate(-20deg); background:var(--bg-deep); color:var(--accent-yellow);
  font-weight:800; letter-spacing:.04em; padding:6px 48px; box-shadow:0 6px 18px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.25);
}

/* --- VARIJANTA ZA POSTOJEĆI MARKUP: .pricing .card (Bootstrap kartice u Control Panelu) --- */
.pricing .card{
  border-radius:16px; background:var(--glass-bg); border:1px solid var(--glass-br);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,.35); transition:.2s;
}
.pricing .card:hover{ transform:translateY(-3px); background:var(--glass-bg-hover); border-color:var(--glass-br-hover); box-shadow:0 16px 40px rgba(0,0,0,.55); }
.pricing .card-title{ font-weight:800; letter-spacing:.3px; }
.pricing .card-price{ font-weight:800; color:var(--accent-yellow); }
.pricing .card-price .period{ display:block; font-size:.9rem; color:var(--text-soft); margin-top:4px; }
.pricing .fa-ul li{ margin-bottom:6px; color:#dbe1ee; }
.pricing .fa-ul .fa-check{ color:var(--ok); }
.pricing .fa-ul .fa-times{ color:var(--danger); }

/* ================== KREDITI GRID ================== */
.credits-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:576px){ .credits-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:992px){ .credits-grid{ grid-template-columns:repeat(3,1fr);} }
.credit-icon{ width:40px; height:40px; object-fit:contain; opacity:.95; }

/* ================== UTILITIES ================== */
.hr-soft{ border:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); margin:20px 0; }
.text-muted-soft{ color:#9fb3c8; }
.opacity-75{ opacity:.75; }
.hidden{ display:none!important; }

/* ================== INPUT FILE & TABELA ================== */
input[type="file"]{ color: var(--text-secondary); }
input[type="file"]::file-selector-button{
  background-color:#415a77; color: var(--text-primary); border:none; padding:8px 12px; border-radius: var(--radius-sm);
  cursor:pointer; transition: background-color .3s;
}
input[type="file"]::file-selector-button:hover{ background-color: var(--text-muted-ds); }
.table{ width:100%; margin-bottom:1rem; color:#fff!important; }

/* ================== RESPONSIVE TWEAKS ================== */
@media (max-width:575.98px){
  .fp-foot{ flex-direction:column; align-items:flex-start; gap:8px; }
  .fp-top{  flex-direction:column; align-items:flex-start; gap:6px; }
}