/* =====================================================================
 * ArduBox.cz — vlastní styly nad šablonou Flexor (nezasahují do style.css)
 * ===================================================================== */

/* --- Sekce funkcí (text + screenshot) --- */
.ab-feature { padding: 50px 0; }
.ab-feature .ab-text h3 { font-weight: 700; font-size: 28px; color: #2f3d4a; margin-bottom: 12px; }
.ab-feature .ab-text .ab-eyebrow { color: #47b475; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 13px; margin-bottom: 6px; }
.ab-feature .ab-text p { font-size: 18px; color: #556; margin-bottom: 0; }
.ab-feature .ab-text ul { list-style: none; padding: 0; margin: 16px 0 0; }
.ab-feature .ab-text ul li { padding: 4px 0 4px 28px; position: relative; color: #556; }
.ab-feature .ab-text ul li i { position: absolute; left: 0; top: 6px; color: #47b475; }

/* --- Screenshot / placeholder (rámeček jako okno aplikace) --- */
.ab-shot { position: relative; background: #fff; border: 1px solid #e6ebf1; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px rgba(47,61,74,.16); padding-top: 34px; transition: transform .3s, box-shadow .3s; }
.ab-shot:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(47,61,74,.22); }
.ab-shot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 34px; background: linear-gradient(#f7f9fb,#eef2f6); border-bottom: 1px solid #e9eef3; }
.ab-shot::after { content: ""; position: absolute; top: 12px; left: 16px; width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f; }
.ab-shot img { width: 100%; height: auto; display: block; }
.ab-shot .ab-shot-ph { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9fb0bf; text-align: center; padding: 24px; background: #f4f7fa; }
.ab-shot .ab-shot-ph i { font-size: 40px; margin-bottom: 8px; opacity: .7; }

/* --- CTA / ceník / karty --- */
.ab-cta { background: linear-gradient(135deg,#47b475,#37944f); color: #fff; border-radius: 14px; padding: 40px; text-align: center; }
.ab-cta h3 { color: #fff; font-weight: 700; }
.ab-cta .btn { font-weight: 600; }
.ab-price-card { border: 1px solid #e6ebf1; border-radius: 16px; padding: 32px; box-shadow: 0 16px 40px rgba(47,61,74,.10); background: #fff; }
.ab-price-head { text-align: center; border-bottom: 1px solid #eef2f6; padding-bottom: 18px; margin-bottom: 18px; }
.ab-price-free { font-size: 34px; font-weight: 800; color: #2f3d4a; }
.ab-price-free small { display: block; font-size: 15px; font-weight: 600; color: #47b475; }
.ab-incl { list-style: none; padding: 0; margin: 0; }
.ab-incl li { padding: 7px 0 7px 30px; position: relative; color: #445; }
.ab-incl li i { position: absolute; left: 0; top: 9px; color: #47b475; }
.ab-years { background: #f7faf8; border: 1px solid #e6f0ea; border-radius: 12px; padding: 16px 20px; }
.ab-years .ab-year-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #dde7e0; }
.ab-years .ab-year-row:last-child { border-bottom: 0; }

/* --- Formuláře / obsah podstránek --- */
.ab-form .form-group { margin-bottom: 14px; }
.ab-form label.req::after { content: " *"; color: #dc3545; }
.ab-content h2 { font-weight: 700; color: #2f3d4a; }
.ab-content h3 { font-weight: 700; color: #2f3d4a; margin-top: 24px; }
@media (max-width: 991px){ .ab-feature .ab-shot { margin-top: 24px; } }

/* --- Bazar: lišta Oblíbené/Košík, oblíbené srdíčko, košík --- */
.ab-bz-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.ab-bz-bar .btn { background: #fff; border: 1px solid #e6ebf1; color: #2f3d4a; font-weight: 600; padding: 8px 16px; }
.ab-bz-bar .btn.btn-success { background: #3cb46a; border-color: #3cb46a; color: #fff; }
.ab-bz-bar .badge { font-size: 13px; padding: 4px 9px; border-radius: 20px; margin-left: 6px; font-weight: 800; }
.ab-bz-bar .ab-fav-count { background: #e03131 !important; color: #fff !important; }

/* Košík v liště — výrazně vidět */
.ab-bar-kosik { margin-left: auto; background: #f59f00 !important; border-color: #f59f00 !important; color: #fff !important; box-shadow: 0 6px 16px rgba(245,159,0,.32); }
.ab-bar-kosik:hover { background: #e08a00 !important; border-color: #e08a00 !important; color: #fff !important; }
.ab-bar-kosik.btn-success { background: #f59f00 !important; border-color: #f59f00 !important; }
.ab-bar-kosik .badge { background: #fff !important; color: #e08a00 !important; font-weight: 800; }

/* Plovoucí srdíčko POUZE na kartách výpisu */
.ab-bz-card { position: relative; }
.ab-bz-card .ab-fav { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e6ebf1; background: #fff; color: #e03131; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: .2s; padding: 0; }
.ab-bz-card .ab-fav:hover { transform: scale(1.08); }
.ab-bz-card .ab-fav.on { background: #fff0f0; }
/* Tlačítko oblíbené v detailu (běžné tlačítko) */
.ab-fav.on { color: #e03131; border-color: #e03131; background: #fff5f5; }
.ab-add-kosik.added { background: #2fa15c !important; border-color: #2fa15c !important; }
.ab-bz-thumb-sm { width: 48px; height: 48px; border-radius: 8px; background: #f4f7fa; border: 1px solid #eef2f6; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #c3ccd6; flex-shrink: 0; }
.ab-bz-thumb-sm img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ab-kosik-remove { color: #c0392b; background: transparent; border: 0; cursor: pointer; padding: 4px 8px; }
.ab-kosik-remove:hover { color: #e03131; }

/* Položka v košíku — přehledně cena/ks, počet, cena celkem */
.ab-kosik-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eef2f6; }
.ab-kosik-info { flex: 1 1 auto; min-width: 0; }
.ab-kosik-name { font-weight: 600; color: #2f3d4a; }
.ab-kosik-unit { font-size: 13px; color: #8a98a5; }
.ab-kosik-unit strong { color: #3cb46a; }
.ab-kosik-field { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ab-kosik-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #aab4bd; margin-bottom: 3px; }
.ab-kosik-field .ab-kosik-qty { width: 76px; text-align: center; }
.ab-kosik-field-total { min-width: 96px; }
.ab-kosik-line { color: #2f3d4a; font-size: 16px; white-space: nowrap; }
.ab-kosik-subtotal { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 2px solid #eef2f6; font-size: 14px; }
.ab-kosik-subtotal-val { color: #2f3d4a; }

/* Souhrn košíku */
.ab-kosik-summary { background: #f7faf8; border: 1px solid #e1efe6; }
.ab-kosik-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.ab-kosik-summary-row + .ab-kosik-summary-row { border-top: 1px dashed #d7e6dd; }
.ab-kosik-summary .ab-kosik-total { font-size: 22px; font-weight: 800; color: #3cb46a; }
.ab-kosik-summary .ab-kosik-total-ks { font-size: 18px; font-weight: 700; color: #2f3d4a; }

@media (max-width: 575px) {
  .ab-kosik-item { flex-wrap: wrap; }
  .ab-kosik-info { flex-basis: 100%; }
}

/* --- Jednotné odsazení první sekce pod hlavičkou (header 70px je v toku) --- */
.ab-bz-top, .ab-top-section { margin-top: 0 !important; padding-top: 40px !important; }
/* Titulní zelený pruh právních/registračních stránek — kompaktní */
.ab-top-section { padding-bottom: 32px !important; }
/* Bílá obsahová sekce hned pod titulním pruhem — bez velké mezery */
.ab-doc-section { padding-top: 32px !important; }
.ab-bz-popis p { margin: 0 0 .6rem; }
.ab-bz-popis ul, .ab-bz-popis ol { margin: 0 0 .6rem 1.2rem; }

/* --- Bazar: tlačítka sdílení --- */
.ab-bz-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ab-share-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0; color: #fff; text-decoration: none; transition: transform .2s, opacity .2s; }
.ab-share-btn:hover { transform: translateY(-2px); color: #fff; opacity: .92; }
.ab-share-btn.fb { background: #1877f2; }
.ab-share-btn.x { background: #111111; }
.ab-share-btn.wa { background: #25d366; }
.ab-share-btn.copy { background: #6b7c8a; cursor: pointer; }

/* --- Bazar: náhled obrázku na kartě / v detailu --- */
.ab-bz-thumb { height: 150px; border-radius: 10px; background: #f4f7fa; border: 1px solid #eef2f6; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px; }
.ab-bz-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ab-bz-thumb .ab-bz-noimg { color: #c3ccd6; font-size: 42px; }
.ab-bz-detail-img { background: #f4f7fa; border: 1px solid #eef2f6; border-radius: 12px; padding: 12px; display: flex; align-items: center; justify-content: center; min-height: 220px; height: 100%; }
.ab-bz-detail-img img { max-width: 100%; max-height: 320px; object-fit: contain; }
.ab-bz-detail-img .ab-bz-noimg { color: #c3ccd6; font-size: 54px; }
.ab-bz-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; }
.ab-bz-amount { font-size: 30px; font-weight: 800; color: #3cb46a; }
.ab-bz-unit { font-size: 15px; font-weight: 600; color: #8a98a5; }
.ab-bz-stock { color: #5a6b78; margin-bottom: 14px; }
.ab-bz-spec { width: 100%; font-size: 14px; border-top: 1px solid #eef2f6; margin-top: 8px; }
.ab-bz-spec tr { border-bottom: 1px solid #f1f5f8; }
.ab-bz-spec th { text-align: left; color: #8a98a5; font-weight: 600; padding: 7px 12px 7px 0; vertical-align: top; width: 42%; }
.ab-bz-spec td { color: #2f3d4a; padding: 7px 0; }

/* --- Telefon (sekce Mobil) — bez „okenního" rámečku, stín je v PNG --- */
.ab-phone { text-align: center; }
.ab-phone img { max-height: 540px; width: auto; max-width: 100%; }
@media (max-width: 991px){ .ab-phone { margin-top: 24px; } }

/* --- Výrazné zelené CTA místo tmavého šablonového tlačítka --- */
.btn-get-started, a.btn-get-started {
  background: #3cb46a; color: #fff; border-radius: 50px; margin-left: 0;
  padding: 12px 34px; font-weight: 700; letter-spacing: .3px; border: 0;
  box-shadow: 0 8px 20px rgba(60,180,106,.35); transition: .3s;
}
.btn-get-started:hover, a.btn-get-started:hover { background: #2fa15c; color: #fff; transform: translateY(-2px); }
.btn-hero-ghost {
  display: inline-block; color: #fff; border: 2px solid rgba(255,255,255,.9);
  padding: 13px 30px; border-radius: 50px; margin-left: 10px; font-weight: 600; transition: .3s;
}
.btn-hero-ghost:hover { background: #fff; color: #2f3d4a; text-decoration: none; }

/* --- Tlačítko Bazar v hlavičce (oranžová) --- */
.nav-menu a.navbazar { background: #f59f00; padding: 8px 16px; margin-top: 7px; margin-left: 14px; border-radius: 4px; color: #fff; font-weight: 600; transition: .3s; }
.nav-menu a.navbazar:hover { background: #e08a00; color: #fff; }

/* --- Tlačítko Přihlásit se v hlavičce (jemné pozadí) --- */
.nav-menu a.navlogin { background: #eef2f6; padding: 8px 16px; margin-top: 7px; margin-left: 14px; border-radius: 4px; color: #2f3d4a; font-weight: 600; transition: .3s; }
.nav-menu a.navlogin:hover { background: #e2e8f0; color: #2f3d4a; }

/* --- Hero — vlastní vektorové pozadí, čitelný nadpis, zelené CTA --- */
#hero {
  height: 82vh;
  background: #0b3528 url('/website/assets/img/hero-ardubox.svg') center center / cover no-repeat;
  background-attachment: scroll;
}
#hero:before { background: linear-gradient(180deg, rgba(8,33,25,.55), rgba(8,33,25,.32)); }
#hero .container { padding-top: 64px; }
#hero h1 { font-size: 44px; line-height: 1.12; }
#hero h2 { font-size: 20px; max-width: 780px; margin: 0 auto 34px; }
#hero .btn-get-started {
  background: #3cb46a; color: #fff; border-radius: 50px;
  font-size: 18px; padding: 15px 42px; margin-left: 0;
  box-shadow: 0 10px 24px rgba(60,180,106,.45);
}
#hero .btn-get-started:hover { background: #2fa15c; color: #fff; }
@media (max-width: 575px){
  #hero h1 { font-size: 30px; line-height: 1.15; }
  #hero h2 { font-size: 17px; }
  #hero .btn-get-started, .btn-hero-ghost { display: block; width: 82%; margin: 8px auto; }
}