/* /css/hkraft.css */
/* Global theme, inputs, tables, cards and the NEW compact progress bar to match the screenshot.
   NOTE: If you had an inline <style> block inside /progress_steps.inc.php, remove it to let these rules apply. */

/* ---- TYPO & COLORS ---- */
body, h1, h2, h3, h4, h5, h6, .display-4, .display-5 {
  font-family: 'Inter', Arial, Helvetica, sans-serif !important;
  color: #222222;
  letter-spacing: -0.5px;
}
body { background: #f2f6f8; min-height: 100vh; }

/* Headings */
h1, .display-4 { font-weight: 700; color: #1760a5; font-size: 2.5rem; letter-spacing: -1px; }
h2, .display-5, .section-title {
  color: #1181d3; font-weight: 600; font-size: 2rem; margin-top: 2.2em; margin-bottom: 1.3em; letter-spacing: -0.5px;
}
.section-title { font-size: 2rem; margin-bottom: 1.2rem; color: #397ab2; font-weight: 700; }

/* ---- LINKS & BUTTONS ---- */
a, .btn-link { color: #397ab2; text-decoration: underline; }
a:hover, .btn-link:hover { color: #397ab2; text-decoration: underline; }
.btn-primary, .bg-primary { background: #397ab2 !important; border-color: #1760a5 !important; color:#fff !important; }

/* ---- CARDS ---- */
.card {
  border-radius: 18px !important; border: none !important; box-shadow: 0 2px 8px rgba(23,96,165,0.07);
  background: #fff; transition: transform .2s, box-shadow .2s;
}
.card-header{
  border-radius: 18px 18px 0 0 !important; background:#e7f1ff !important; color:#1760a5 !important;
  font-size:1.20rem; font-weight:600; border:none !important; text-align:center; letter-spacing:-0.5px;
}

/* ---- PRODUCT BOX ---- */
.product-select-box{
  max-width:1050px; margin:48px auto 0; background:#fff; border-radius:14px; box-shadow:0 8px 24px #0001; padding:34px 16px 30px;
}
.product-header{ font-weight:700; font-size:2.1rem; color:#1a244b; }
.product-subheader{ font-size:1.12rem; color:#666; }

/* ---- ADDRESS SEARCH ---- */
.address-results{
  background:#fff; border-radius:10px; box-shadow:0 8px 24px #0001; margin-top:8px; max-height:320px; overflow-y:auto;
  border:1px solid #eee; position:absolute; width:100%; z-index:20;
}
.address-item{ padding:12px 18px; cursor:pointer; transition:background .2s; }
.address-item:hover, .address-item.selected{ background:#e6f0fc; }
@media (max-width:600px){ .search-box{ margin-top:20px; max-width:98vw; } }

/* ---- INPUTS ---- */
input, .form-control { border-radius:8px !important; border:1.5px solid #e2e8f0 !important; font-size:1rem; }
input:focus, .form-control:focus { border-color:#1760a5 !important; box-shadow:0 0 0 2px #1760a51a; }
::-webkit-scrollbar{ width:8px; background:#e7f1ff; }
::-webkit-scrollbar-thumb{ background:#bdd3ef; border-radius:8px; }

/* ---- TABLES ---- */
.table{
  border-radius:14px; overflow:hidden; background:#fff; margin-top:.8em; box-shadow:0 1px 4px rgba(23,96,165,0.06);
}
.table th, .table td{ background:#fff !important; font-size:1.07rem; vertical-align:middle; padding-top:.9em; padding-bottom:.7em; }
.table thead th{ background:#e7f1ff !important; color:#1760a5; border-bottom:2px solid #1760a5; font-weight:700; }
.table-striped>tbody>tr:nth-of-type(odd)>*{ background-color:#f2f6f8 !important; }

/* =======================================================================
   PROGRESS BAR (NEW, CLEAN – matches the screenshot)
   - Small numbered circles
   - Short, thin connectors
   - Active & completed = blue, future = gray
   ======================================================================= */
.hk-progress-bar { max-width: 980px; margin: 0 auto 1.75rem auto; }
.hk-progress-track { display:flex; justify-content:space-between; align-items:center; }
.hk-step { text-align:center; flex:1 1 0; position:relative; min-width:0; }
.hk-step a { color: inherit; text-decoration: none; display:block; }

/* Circles */
.hk-step-circle{
  width:34px; height:34px; border-radius:50%;
  margin:0 auto 8px; display:flex; align-items:center; justify-content:center;
  background:#dfe3e8; color:#5c6674; font-weight:700; font-size:.95rem;
}
.hk-step.active .hk-step-circle,
.hk-step.done   .hk-step-circle{ background:#1760a5; color:#fff; }

/* Labels */
.hk-step-label{ font-size:.98rem; color:#1a244b; font-weight:600; white-space:nowrap; }
.hk-step:not(.active):not(.done) .hk-step-label{ color:#6b7280; font-weight:500; }

/* Short left connector for each step except the first */
.hk-step::before{
  content:''; position:absolute; top:17px; left:calc(50% - 56px);
  width:48px; height:2px; background:#dfe3e8; display:none; border-radius:2px;
}
.hk-step:not(:first-child)::before{ display:block; }
.hk-step.done::before,
.hk-step.active::before{ background:#1760a5; }

/* Hover ring only for clickable finished steps */
.hk-step.done .hk-step-circle{ box-shadow:none; transition:box-shadow .12s; }
.hk-step.done .hk-step-circle:hover{ box-shadow:0 0 0 4px rgba(23,96,165,.18); }

/* Mobile */
@media (max-width:700px){
  .hk-progress-bar{ padding:0 8px; }
  .hk-step-circle{ width:28px; height:28px; font-size:.88rem; }
  .hk-step::before{ top:14px; left:calc(50% - 48px); width:40px; }
  .hk-step-label{ font-size:.9rem; }
}

/* ---- MISC COLORS/DETAILS ---- */
::-webkit-input-placeholder{ color:#b6b6c2; }
::-moz-placeholder{ color:#b6b6c2; }
:-ms-input-placeholder{ color:#b6b6c2; }
::placeholder{ color:#b6b6c2; }

/* ---- BRAND HEADER ---- */
.brand-header{ background:#fff; padding:18px 0 0 0; position:relative; }
.brand-logo-row{
  display:flex; align-items:center; justify-content:center; gap:32px; min-height:64px; padding-bottom:6px;
}
.brand-logo-row img{ max-height:48px; background:transparent; border:none; box-shadow:none; padding:0; }
.brand-deliveredby{ font-size:1.13rem; color:#666; font-weight:500; letter-spacing:.5px; margin:0 10px; }
.brand-underline{ height:1.5px; background:#e7e9f0; position:relative; left:50%; width:100vw; min-width:100vw; transform:translateX(-50%); margin:0; padding:0; border:none; z-index:2; }
.brand-underline2{ border-bottom:5px solid #fd5142; width:100vw; margin:0 -15vw 0 -15vw; }

@media (max-width:600px){
  .brand-logo-row{ gap:13px; min-height:38px; }
  .brand-logo-row img{ max-height:30px; }
}

/* ---- LIST GROUP HOVER ---- */
.list-group-item.active,
.list-group-item:active,
.list-group-item:hover,
.list-group-item:focus{
  background-color:#56ade2 !important; color:#fff !important; border-color:#56ade2 !important;
}
.list-group-item.active .text-muted,
.list-group-item:active .text-muted,
.list-group-item:hover .text-muted,
.list-group-item:focus .text-muted{ color:#e3f4fc !important; }

/* ---- FILTER BAR ---- */
.product-filter-bar{ display:flex; gap:18px; justify-content:center; align-items:center; margin-bottom:2.2rem; }
.filter-btn{
  background:#e9f2fb; color:#1760a5; border:1.5px solid #1760a5; border-radius:10px; padding:10px 24px; font-weight:600;
  margin:0 2px; cursor:pointer; transition:background .12s, color .11s;
}
.filter-btn.active, .filter-btn:active, .filter-btn:focus{ background:#1760a5; color:#fff; border-color:#1760a5; }
#filter-fritid{ vertical-align:middle; margin-right:7px; transform:scale(1.18); }

/* ---- ALTIBOX PRODUCT CARDS (kept) ---- */
body, .altibox-card, .altibox-title, .altibox-features, .altibox-desc, .altibox-badge, .altibox-price, .altibox-oldprice, .altibox-pricelabel{
  font-family:'Poppins', Arial, sans-serif !important;
}
.altibox-card{
  position:relative; background:#fff; border-radius:22px; box-shadow:0 5px 32px #b9f5ef2c; padding:30px 20px 24px;
  margin-bottom:34px; border:2.5px solid #baf5ef; min-height:420px; display:flex; flex-direction:column;
  transition:box-shadow .12s, border .14s; font-size:1.06rem;
}
.altibox-card.most-popular{ background:#eafee8; border-color:#59c459; }
.altibox-badge{
  position:absolute; top:22px; right:-35px; background:#fff; color:#237f1e; border:2px solid #59c459;
  padding:7px 30px; font-weight:600; font-size:1.07rem; border-radius:11px; transform:rotate(25deg); box-shadow:0 2px 10px #d8ffd8c5; z-index:9;
}
.altibox-title{ display:flex; align-items:center; gap:13px; font-size:1.28rem; font-weight:700; margin-bottom:5px; }
.prod-ikon{ display:inline-block; } .prod-ikon-wifi{ margin-left:7px; } .prod-ikon-tv{ margin-right:3px; } .altibox-title span{ display:inline-block; }
.altibox-priceblock{ display:flex; flex-direction:column; align-items:flex-end; margin-bottom:4px; margin-top:0; }
.altibox-oldprice{ color:#d32727; font-size:1.16rem; font-weight:700; text-decoration:line-through; margin-bottom:1px; letter-spacing:.03em; }
.altibox-price{ font-size:2.10rem; font-weight:700; color:#222; letter-spacing:-1px; }
.altibox-pricelabel{ font-size:1.08rem; color:#3a9e63; margin-left:6px; font-weight:600; }
.altibox-desc{ font-size:1.10rem; color:#444; margin-bottom:11px; }
.altibox-features{ list-style:disc inside; padding-left:2px; margin-bottom:11px; font-size:1.08rem; }
.altibox-features li{ font-size:1.08rem; margin-bottom:3px; line-height:1.35; }
.altibox-price-row{ display:flex; align-items:flex-end; justify-content:flex-end; gap:12px; margin-top:auto; margin-bottom:0; }
.btn-merinfo{
  background:#fff; color:#1976d2; border:1.5px solid #1976d2; border-radius:9px; font-weight:600; font-size:1.05rem;
  padding:6px 17px 6px 14px; margin-bottom:.5rem; box-shadow:0 1.5px 8px #1976d221; transition:background .1s, color .1s, box-shadow .12s;
}
.btn-merinfo i{ font-size:1.11rem; margin-right:6px; color:#1976d2; }
.btn-merinfo:hover, .btn-merinfo:focus{ background:#1976d2; color:#fff; box-shadow:0 5px 19px #1976d23d; }
.btn-merinfo:hover i, .btn-merinfo:focus i{ color:#fff; }

/* ---- LAYOUT HELPERS ---- */
:root { --hkblue:#0068A8; --hkblue-dark:#025081; }
.hide-mobile{ display:block; } @media (max-width:600px){ .hide-mobile{ display:none !important; } }
.selected-address{
  font-size:1.13rem; display:inline-block; background:#f4faff; border-radius:8px; padding:5px 13px 6px 12px; margin-bottom:4px; box-shadow:0 1px 6px #c8e0fd2a;
}
.velg-container{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin:20px 0 24px; }
.fiberetablering-boks{
  max-width:500px; margin-left:auto; margin-right:auto; margin-bottom:48px; margin-top:30px;
  box-shadow:0 2px 13px #bdd7f744; border:1.6px solid #bdd7f7; background:#fafdff;
}
@media (max-width:600px){
  body{ background:#e9f0f8 !important; }
  .fiberetablering-boks{ max-width:96vw; margin-bottom:64px; margin-top:22px; }
  .selected-address{ font-size:1.01rem; padding:5px 7px; margin-bottom:.7rem; }
}