:root{
  --bg:#0B0F14;        /* Charcoal */
  --bg-2:#111720;      /* Graphite */
  --txt:#F2F5F8;       /* Soft white */
  --muted:#A9B3C1;
  --accent:#00D1FF;    /* Electric Blue */
  --accent-2:#33DEFF;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;height:auto;display:block}

.bk-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}

.bk-header{position:sticky;top:0;z-index:50;background:rgba(11,15,20,.7);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #151A21}
.bk-header .bk-wrap{display:flex;align-items:center;gap:20px;padding:14px 20px}
.bk-logo{font-weight:800;letter-spacing:.2px}
.accent{color:var(--accent)}

.bk-nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.bk-menu, .bk-menu-m, .plain{list-style:none;margin:0;padding:0}
.bk-menu li{display:inline-block;margin:0 10px}
.bk-cta{padding:10px 14px;border:1px solid var(--accent);border-radius:999px}
.bk-burger{display:none;background:none;border:0;width:42px;height:36px;position:relative}
.bk-burger span{position:absolute;left:8px;right:8px;height:2px;background:#cfefff}
.bk-burger span:nth-child(1){top:10px}
.bk-burger span:nth-child(2){top:17px}
.bk-burger span:nth-child(3){top:24px}

.bk-mobile{display:none;padding:12px 20px;border-bottom:1px solid #151A21}
.bk-mobile .full{display:block;margin-top:10px;text-align:center}

.hero{position:relative;overflow:hidden;border-bottom:1px solid #151A21}
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:360px;
  background: radial-gradient(1200px 320px at 35% 30%, rgba(0,209,255,.25), transparent 60%);
  pointer-events:none;
}
.hero-inner{padding:80px 0 60px}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 12px}
.lead{color:var(--muted);font-size:18px;margin:0 0 20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid #2a3747;color:#dff7ff;background:#141b25}
.bk-btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#03141b;border:0;box-shadow:0 8px 24px rgba(0,209,255,.25)}
.bk-btn.ghost{background:transparent;border-color:#2a3747}
.trust{display:flex;gap:16px;color:#9cb4c6;margin-top:14px;flex-wrap:wrap}

.section{padding:64px 0;border-top:1px solid #111720;border-bottom:1px solid #111720}
.section.alt{background:var(--bg-2)}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#0f141c;border:1px solid #1b2330;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card.featured{border-color:var(--accent)}

.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.device{background:#0f141c;border:1px dashed #223041;border-radius:12px;padding:14px;text-align:center;color:#b9c6d3}

.price-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.price{position:relative}
.price-amount{font-size:28px;margin:8px 0 14px}
.price .num{font-weight:800}
.save{color:#7ee7ff}

.switch{position:relative; display:inline-block; width:52px; height:28px; margin:0 10px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer; inset:0; background:#233141; border-radius:999px}
.slider:before{content:""; position:absolute; height:22px; width:22px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.switch input:checked + .slider:before{transform:translateX(24px)}

.faq details{border:1px solid #1b2330;border-radius:12px;padding:12px;margin:8px 0;background:#0f141c}
.faq summary{cursor:pointer}

.bk-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:10px}
.bk-form input, .bk-form button{border-radius:10px;border:1px solid #2a3747;padding:12px;background:#0f141c;color:#dff7ff}
.bk-form button{border:0;background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#03141b}

.grid-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.bk-footer{border-top:1px solid #151A21;padding:36px 0;background:#0B0F14}
.bk-bottom{text-align:center;color:#6f8194;padding-top:16px;border-top:1px solid #151A21;margin-top:24px}

@media (max-width: 980px){
  .cards-3, .devices, .grid-3{grid-template-columns:1fr}
  .bk-form{grid-template-columns:1fr}
  .bk-nav{display:none}
  .bk-burger{display:inline-block}
  .bk-mobile{display:block}
}

/* ==========================================
   WooCommerce checkout - Balkania tamni stil
========================================== */

.woocommerce-checkout form.checkout {
  background: #050915;
  border-radius: 26px;
  padding: 32px 34px 28px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);
  max-width: 980px;
  margin: 0 auto 64px;
}

.woocommerce-checkout h3 {
  color: #ffffff;
  margin-bottom: 14px;
}

.woocommerce form .form-row label {
  color: #cbd6f3;
  font-size: 13px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: #020714;
  border-radius: 12px;
  border: 1px solid #141a2a;
  padding: 10px 12px;
  font-size: 14px;
  color: #ffffff;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: #33b5ff;
  box-shadow: 0 0 0 1px rgba(51, 181, 255, 0.4);
  background: #050b1b;
}

.woocommerce-checkout ::placeholder {
  color: #6f7898;
}

.woocommerce-checkout .button.alt,
.woocommerce-checkout #place_order {
  width: 100%;
  border-radius: 999px;
  border: none;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: #33b5ff;
  color: #020613;
  box-shadow: 0 0 16px rgba(51, 181, 255, 0.55);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.woocommerce-checkout .button.alt:hover,
.woocommerce-checkout #place_order:hover {
  background: #55c6ff;
  box-shadow: 0 0 22px rgba(51, 181, 255, 0.8);
  transform: translateY(-1px);
}

/* Sakrij last_name polje */
.woocommerce-checkout .balkania-hidden-field {
  display: none !important;
}

/* MAC / app wrap da ne ostavlja rupe kad se sakrije preko JS-a */
.woocommerce-checkout .balkania-app-wrap,
.woocommerce-checkout .balkania-mac-wrap {
  transition: all 0.2s ease;
}

/* WooCommerce checkout – dark polja kao na test formi */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: #020714;
  border-radius: 12px;
  border: 1px solid #141a2a;
  padding: 10px 12px;
  color: #ffffff;
  outline: none;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: #33b5ff;
  box-shadow: 0 0 0 1px rgba(51, 181, 255, 0.4);
  background: #050b1b;
}

.woocommerce-checkout .input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: #6f7898;
}

/* Select2 (država) – tamna verzija */
.woocommerce-checkout .select2-container .select2-selection--single {
  background: #020714;
  border-radius: 12px;
  border: 1px solid #141a2a;
  height: auto;
}

.woocommerce-checkout
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
  color: #ffffff;
  line-height: 1.4;
}

.woocommerce-checkout
.select2-container--default
.select2-selection--single
.select2-selection__arrow b {
  border-color: #ffffff transparent transparent transparent;
}

/* Sakrij "Dostaviti na različitu adresu?" toggle */
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout .woocommerce-shipping-fields {
  display: none !important;
}

/* Woo cart – mobilni scroll ako je tabela preširoka */
@media (max-width: 768px) {
  .woocommerce-cart-form {
    overflow-x: auto;
  }

  .woocommerce-cart-form table.shop_table {
    min-width: 600px;
  }
}

/* Fix: Napomena (order_comments) da uvek bude tamna sa svetlim tekstom */
.woocommerce-checkout .woocommerce-additional-fields textarea#order_comments,
.woocommerce-checkout .woocommerce-additional-fields textarea,
.woocommerce-checkout textarea#order_comments {
  background: #020714 !important;
  color: #ffffff !important;
  border-radius: 12px;
  border: 1px solid #141a2a;
}

.woocommerce-checkout .woocommerce-additional-fields textarea#order_comments:focus,
.woocommerce-checkout .woocommerce-additional-fields textarea:focus,
.woocommerce-checkout textarea#order_comments:focus {
  background: #050b1b !important;
  color: #ffffff !important;
}