/* HK Core — Moja garaža. Scoped under .hkc. Fonts (Aleo + Merriweather Sans)
   are served globally by Breakdance. Matched to hitraketna.si dark theme. */
.hkc{
  --ink:#F3EEE6; --mut:#ABA399; --am:#d9962b; --amd:#f0ad44;
  --card:#232019; --card2:#2c281f; --ln:#3a342b; --on:#16120c;
  --steel:#9aa7b5; --warn:#E2676A; --field:#2a2620;
  --disp:'Aleo',Georgia,serif; --body:'Merriweather Sans',system-ui,sans-serif;
  font-family:var(--body); color:var(--ink); line-height:1.55; max-width:1080px; margin:0 auto;
}
.hkc *{ box-sizing:border-box; }

/* --- shared bits --- */
.hkc-eyebrow{ font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--mut); margin:0 0 8px; }
.hkc-eyebrow.am{ color:var(--am); }
.hkc-title{ font-family:var(--disp); font-weight:800; font-size:clamp(28px,4vw,40px); line-height:1.08; margin:0 0 10px; color:var(--ink); }
.hkc-sub{ font-size:16px; color:var(--mut); margin:0; max-width:640px; }

.hkc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:15px; padding:12px 20px; border-radius:10px; cursor:pointer; border:1.5px solid transparent; text-decoration:none; line-height:1; transition:background .15s,color .15s; }
/* color forced with !important so the theme's amber <a> link colour can't
   turn the filled button's label amber-on-amber (it did on the account page). */
.hkc a.hkc-btn, .hkc button.hkc-btn{ text-decoration:none; }
.hkc .hkc-btn-fill{ background:var(--am); border-color:var(--am); color:var(--on) !important; }
.hkc .hkc-btn-fill:hover{ background:var(--amd); border-color:var(--amd); color:var(--on) !important; }
.hkc .hkc-btn-out{ background:transparent; border-color:var(--am); color:var(--amd) !important; }
.hkc .hkc-btn-out:hover{ background:rgba(217,150,43,.12); color:var(--amd) !important; }
.hkc-linkbtn{ background:none; border:0; color:var(--amd); font-family:var(--disp); font-weight:700; font-size:14px; cursor:pointer; padding:0; text-decoration:none; }
.hkc-linkbtn:hover{ text-decoration:underline; }

/* busy / loading state on the clicked control while an AJAX action runs */
.hkc .hkc-loading{ position:relative; color:transparent !important; pointer-events:none; }
.hkc .hkc-loading::after{
  content:""; position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border:2px solid var(--am); border-top-color:transparent; border-radius:50%;
  animation:hkc-spin .6s linear infinite;
}
.hkc .hkc-btn-fill.hkc-loading::after{ border-color:var(--on); border-top-color:transparent; }
.hkc .hkc-busy{ opacity:.55; pointer-events:none; }
@keyframes hkc-spin{ to{ transform:rotate(360deg); } }
.hkc-in{ width:100%; background:var(--field); border:1px solid var(--ln); border-radius:10px; color:var(--ink); font-family:var(--body); font-size:16px; padding:13px 16px; }
.hkc-in:focus{ outline:none; border-color:var(--am); }
.hkc-msg{ font-size:14px; color:var(--mut); margin:14px 0 0; min-height:20px; }
.hkc-msg.err{ color:var(--warn); }
.hkc-msg.ok{ color:var(--amd); }

/* --- login --- */
.hkc-login{ max-width:460px; margin:20px auto; background:var(--card); border:1px solid var(--ln); border-radius:16px; padding:28px; }
.hkc-login-email, .hkc-login-code{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.hkc-login-email .hkc-in, .hkc-login-code .hkc-in{ flex:1 1 200px; }
.hkc-login-code{ align-items:center; }
/* the [hidden] attribute must beat display:flex above, so the code step stays
   hidden until "Pošlji kodo" is clicked */
.hkc-login-email[hidden], .hkc-login-code[hidden]{ display:none; }

/* --- header --- */
.hkc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.hkc-head-right{ display:flex; align-items:center; gap:16px; }
.hkc-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--ln); border-radius:20px; padding:8px 16px; font-family:var(--disp); font-weight:700; font-size:14px; color:var(--ink); }
.hkc-chip-soon{ background:transparent; border-style:dashed; color:var(--mut); font-weight:400; }

/* --- grid + cards --- */
.hkc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
/* a single bike spans the full width instead of sitting in a half column */
.hkc-grid > .hkc-card:only-child{ grid-column:1 / -1; }
.hkc-empty{ grid-column:1/-1; color:var(--mut); background:var(--card); border:1px solid var(--ln); border-radius:14px; padding:22px; }
.hkc-card{ background:var(--card); border:1px solid var(--ln); border-radius:18px; padding:26px 28px; }
.hkc-card.status-due{ border-color:rgba(226,103,106,.5); }

.hkc-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:16px; }
.hkc-bike-name{ font-family:var(--disp); font-weight:800; font-size:24px; margin:0; color:var(--ink); }
.hkc-conds{ display:flex; gap:6px; flex-shrink:0; }
.hkc-cond{ background:transparent; border:1px solid var(--ln); color:var(--mut); font-family:var(--disp); font-weight:700; font-size:13px; padding:6px 12px; border-radius:15px; cursor:pointer; }
.hkc-cond.on{ background:var(--am); border-color:var(--am); color:var(--on); }

.hkc-odo-label{ display:block; font-family:var(--disp); font-weight:700; letter-spacing:.12em; font-size:11px; color:var(--steel); margin:0 0 8px; }
.hkc-odo-row{ display:flex; gap:12px; align-items:stretch; }
.hkc-odo-field{ position:relative; flex:0 0 auto; width:200px; }
.hkc-odo-input{ width:100%; background:var(--field); border:1px solid var(--ln); border-radius:10px; color:var(--ink); font-family:var(--disp); font-weight:700; font-size:20px; padding:12px 44px 12px 16px; }
.hkc-odo-input:focus{ outline:none; border-color:var(--am); }
.hkc-odo-field span{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--mut); font-size:14px; }
.hkc-help{ font-size:13.5px; color:var(--mut); margin:12px 0 0; }

.hkc-metric{ display:flex; align-items:center; gap:14px; margin:20px 0 14px; }
.hkc-km{ font-family:var(--disp); font-weight:800; font-size:56px; line-height:1; color:var(--amd); }
.status-due .hkc-km{ color:var(--warn); }
.hkc-km-unit{ font-size:16px; color:var(--mut); line-height:1.25; }

.hkc-bar{ height:10px; border-radius:5px; background:var(--card2); overflow:hidden; }
.hkc-bar span{ display:block; height:100%; border-radius:5px; background:var(--am); }
.status-due .hkc-bar span{ background:var(--warn); }
.hkc-statusline{ font-size:14px; color:var(--steel); margin:12px 0 0; }
.status-due .hkc-statusline{ color:var(--warn); font-weight:600; }
.hkc-remind{ font-size:13px; color:var(--mut); margin:8px 0 0; }

.hkc-divider{ height:1px; background:var(--ln); margin:20px 0 16px; }
.hkc-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.hkc-last{ font-size:13px; color:var(--mut); }
.hkc-actions{ display:flex; gap:12px; }
.hkc-actions .hkc-btn{ font-size:14px; padding:11px 16px; }

.hkc-more{ margin-top:14px; }
.hkc-more summary{ cursor:pointer; color:var(--mut); font-size:13px; font-family:var(--disp); font-weight:700; }
.hkc-more-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; }
.hkc-more-row label{ font-size:14px; color:var(--mut); display:flex; align-items:center; gap:8px; }
.hkc-kmweek{ width:80px; background:var(--field); border:1px solid var(--ln); border-radius:8px; color:var(--ink); font-family:var(--disp); font-weight:700; padding:7px 10px; }

/* --- add bike --- */
.hkc-add{ margin-top:24px; border:1.5px dashed var(--ln); border-radius:14px; padding:18px 22px; }
.hkc-add-plus{ display:block; text-align:center; font-family:var(--disp); font-weight:700; color:var(--mut); cursor:pointer; }
.hkc-add-fields{ display:none; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.hkc-add.open .hkc-add-fields{ display:grid; }
.hkc-add.open .hkc-add-plus{ color:var(--ink); margin-bottom:4px; }
.hkc-add-fields input, .hkc-add-fields select{ background:var(--field); border:1px solid var(--ln); border-radius:10px; color:var(--ink); font-family:var(--body); font-size:15px; padding:12px 14px; }
.hkc-add-fields .hkc-btn{ grid-column:1/-1; }

@media (max-width:820px){
  .hkc-grid{ grid-template-columns:1fr; }
  .hkc-add-fields{ grid-template-columns:1fr; }
  .hkc-odo-field{ flex:1 1 auto; width:auto; }
}

/* ===================================================================
   WooCommerce "My Account" sidebar navigation — brand styling.
   Outside .hkc, so literal brand colours are used. Loaded on the
   account page via hkc_enqueue_on_account().
   =================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0 0 6px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:11px 16px; border-radius:10px; text-decoration:none;
  font-family:'Aleo',Georgia,serif; font-weight:700; font-size:15px;
  color:#ABA399; border:1px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  color:#F3EEE6; background:#232019; border-color:#3a342b;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  color:#16120c !important; background:#d9962b; border-color:#d9962b;
}
/* the logout item set a little apart */
.woocommerce-account .woocommerce-MyAccount-navigation li--logout,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
  margin-top:14px; padding-top:14px; border-top:1px solid #3a342b;
}
.woocommerce-account .woocommerce-MyAccount-navigation li--logout a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
  color:#9aa7b5;
}

/* Desktop: narrower account sidebar (~35% default reduced ~40% -> ~21%),
   content column takes the rest. */
@media (min-width:821px){
  .woocommerce-account .woocommerce-MyAccount-navigation{ width:21% !important; }
  .woocommerce-account .woocommerce-MyAccount-content{ width:75% !important; }
}

.hkc-nav-select{
  display:none; width:100%; box-sizing:border-box; cursor:pointer;
  color:#F3EEE6; border:1px solid #3a342b; border-radius:10px;
  font-family:'Aleo',Georgia,serif; font-weight:700; font-size:16px;
  padding:13px 42px 13px 16px; -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:#2a2620 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f0ad44' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 15px center;
}
.hkc-nav-select:focus{ outline:none; border-color:#d9962b; }

/* Mobile: stack nav above content (both full width) and swap the link list for
   a compact dropdown so the menu no longer eats the top of the page. */
@media (max-width:820px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{ width:100% !important; float:none !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation{ margin:0 0 22px; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul{ display:none; }
  .hkc-nav-select{ display:block; }
}

/* Smaller section/address headings inside the account content (e.g. "Naslov
   plačnika", "Naslov dostave"), without shrinking the garage's own headings. */
.woocommerce-account .woocommerce-MyAccount-content h2:not(.hkc-title),
.woocommerce-account .woocommerce-MyAccount-content h3:not(.hkc-bike-name){
  font-size:22px !important; line-height:1.2 !important; margin-bottom:10px !important;
}