/**
 * Hlavička vernostného programu — stav bodov, popup košík, Pridaj blok.
 *
 * Hodnoty sú prevzaté z D7 global.css:
 *   tlačidlá   #05b496, hover #F57921, border-radius 0 14px,
 *              text-transform uppercase, padding 8px 12px   (riadky 1587–1613)
 *   texty      biele                                        (riadky 2157–2168)
 *   odstupy    margin-right 30px medzi blokmi               (riadky 1656, 1695)
 *
 * Poznámka k poradiu: D7 mal všetky štyri bloky float: right, čo obracia
 * vizuálne poradie proti DOM. V D11 je regiónom flex riadok, poradie riešia
 * váhy blokov (vlna9_6), takže sa tu float nepoužíva.
 */

/* --- riadok blokov v hlavičke -------------------------------------------- */

.dm-branding__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.dm-branding__action .block {
  margin: 0;
}

/* --- Pridaj blok / Pravidlá ---------------------------------------------- */

.dm-pridaj-blok ul {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-pridaj-blok li {
  display: inline-block;
}

.dm-pridaj-blok p {
  margin: 0;
}

.dm-pridaj-blok a,
.dm-kosik__btn {
  text-decoration: none;
}

.dm-pridaj-blok a {
  display: inline-block;
  width: auto;
  padding: 8px 12px;
  border: none;
  border-radius: 0 14px;
  background-color: #05b496;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.dm-pridaj-blok a:hover,
.dm-pridaj-blok a:focus {
  background-color: #f57921;
  color: #fff;
}

/* --- stav bodov ---------------------------------------------------------- */

#block-duluxmaliar-stav-bodov {
  text-align: center;
  color: #fff;
}

#block-duluxmaliar-stav-bodov h2,
#block-duluxmaliar-stav-bodov .block-title {
  margin: 0;
  color: #fff;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.2;
}

.dm-stav-bodov {
  display: block;
  white-space: nowrap;
}

.dm-stav-bodov__hodnota {
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
}

/* --- košík --------------------------------------------------------------- */

.dm-kosik {
  position: relative;
  display: inline-block;
  /* Priestor, cez ktorý myš prejde z ikonky na panel bez zatvorenia. */
  padding-bottom: 12px;
  margin-bottom: -12px;
}

.dm-kosik__ikona {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}

.dm-kosik__ikona:hover,
.dm-kosik__ikona:focus {
  color: #f57921;
}

.dm-kosik__svg {
  width: 42px;
  height: 42px;
  display: block;
}

.dm-kosik__pocet {
  font-size: 16px;
  font-weight: 400;
  color: inherit;
}

/* Rozbalenie je čisto CSS — blok nepotrebuje JavaScript. */
.dm-kosik__obsah {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 100%;
  right: 0;
  width: 355px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid #e2e2e2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  text-align: left;
  color: #333;
}

.dm-kosik:hover .dm-kosik__obsah,
.dm-kosik:focus-within .dm-kosik__obsah {
  display: block;
}

.dm-kosik__zoznam {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tmavý riadok položky — presne ako D7 popup. */
.dm-kosik__polozka {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #2f2f2f;
  color: #fff;
  font-size: 13px;
  border-bottom: 1px solid #1f1f1f;
}

.dm-kosik__mnozstvo {
  flex: 0 0 auto;
  min-width: 26px;
}

.dm-kosik__nazov {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-kosik__cena {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.dm-kosik__paticka {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 10px 12px;
  background: #fff;
}

/* Dve rovnaké tlačidlá v pätičke popupu — podľa D7 hlavičky.
   Tvar prevzatý z D7 global.css 1587–1613: 0 14px, uppercase, 8px 12px. */
.dm-kosik__btn {
  display: inline-block;
  padding: 8px 12px;
  border: none;
  border-radius: 0 14px;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.dm-kosik__btn--kosik {
  background: #05b496;
}

.dm-kosik__btn--objednavka {
  background: #f57921;
}

.dm-kosik__btn:hover,
.dm-kosik__btn:focus {
  color: #fff;
}

.dm-kosik__btn--kosik:hover,
.dm-kosik__btn--kosik:focus {
  background: #f57921;
}

.dm-kosik__btn--objednavka:hover,
.dm-kosik__btn--objednavka:focus {
  background: #05b496;
}

.dm-kosik__prazdny {
  margin: 0;
  padding: 14px 12px;
  color: #777;
  font-size: 13px;
}

/* --- mobil --------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .dm-branding__action {
    flex-wrap: wrap;
    gap: 12px;
  }

  .dm-kosik__obsah {
    width: 300px;
  }
}


/* ========================================================================
 * Priebeh pokladnice — 5 krokov (D7 commerce_checkout_progress)
 * ===================================================================== */

.commerce-checkout-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 18px;
  text-transform: uppercase;
}

.commerce-checkout-progress li {
  display: inline-flex;
  align-items: center;
  color: #999;
  white-space: nowrap;
}

.commerce-checkout-progress li a {
  color: #05b496;
  text-decoration: none;
}

.commerce-checkout-progress li a:hover,
.commerce-checkout-progress li a:focus {
  color: #f57921;
  text-decoration: underline;
}

.commerce-checkout-progress li.visited {
  color: #05b496;
}

.commerce-checkout-progress li.active {
  color: #f57921;
  font-weight: 700;
}

/* ========================================================================
 * Nákupný košík (/cart) — tabuľka podľa D7
 * ===================================================================== */

.commerce-order-item-views-form table,
.view-commerce-cart-form table {
  width: 100%;
  margin: 0 0 16px;
  background: #fff;
  border-collapse: collapse;
}

.view-commerce-cart-form th,
.view-commerce-cart-form td {
  padding: 10px 12px;
  border-bottom: 1px solid #ececec;
  vertical-align: middle;
  text-align: left;
}

.view-commerce-cart-form th {
  border-bottom: 2px solid #05b496;
  color: #333;
  font-weight: 700;
  text-transform: none;
}

/* Ceny a súčty vpravo, ako v D7. */
.view-commerce-cart-form .views-field-unit-price__number,
.view-commerce-cart-form .views-field-total-price__number,
.view-commerce-cart-form td.price {
  text-align: right;
  white-space: nowrap;
}

.view-commerce-cart-form a {
  color: #05b496;
  text-decoration: none;
}

.view-commerce-cart-form a:hover {
  color: #f57921;
  text-decoration: underline;
}

.dm-kosik-mnozstvo {
  width: 70px;
  max-width: 70px;
}

/* Súčet pod tabuľkou. */
.line-item-summary,
.commerce-order-total-summary {
  padding: 0 12px 12px;
  text-align: right;
}

.line-item-total-label {
  margin-right: 8px;
  font-weight: 700;
}

.line-item-total-raw {
  font-weight: 700;
  white-space: nowrap;
}

/* Tlačidlá košíka — D7 tvar 0 14px, uppercase. */
.dm-kosik-akcia {
  margin-right: 10px;
  padding: 8px 12px !important;
  border: none !important;
  border-radius: 0 14px !important;
  background-color: #05b496 !important;
  color: #fff !important;
  text-transform: uppercase;
}

.dm-kosik-akcia:hover,
.dm-kosik-akcia:focus {
  background-color: #f57921 !important;
  color: #fff !important;
}

/* Objednávka je hlavná akcia — oranžová ako v hlavičke. */
#edit-checkout.dm-kosik-akcia {
  background-color: #f57921 !important;
}

#edit-checkout.dm-kosik-akcia:hover,
#edit-checkout.dm-kosik-akcia:focus {
  background-color: #05b496 !important;
}


/* ========================================================================
 * Pokladnica — kroky Objednávka a Skontrolovať objednávku
 * ===================================================================== */

.commerce-checkout-flow fieldset,
.commerce-checkout-flow .fieldgroup {
  margin: 0 0 24px;
  padding: 0;
  border: none;
}

.commerce-checkout-flow legend {
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  float: none;
}

.commerce-checkout-flow .checkout-help {
  margin: 0 0 16px;
  color: #666;
}

/* Tabuľka obsahu košíka na pokladnici. */
.dm-checkout-kosik table,
.checkout-review table {
  width: 100%;
  margin: 0 0 12px;
  background: #fff;
  border-collapse: collapse;
}

.dm-checkout-kosik th,
.dm-checkout-kosik td {
  padding: 10px 12px;
  border-bottom: 1px solid #ececec;
  text-align: left;
  vertical-align: middle;
}

.dm-checkout-kosik th {
  border-bottom: 2px solid #05b496;
  font-weight: 700;
}

.dm-checkout-kosik .views-align-right,
.dm-checkout-kosik .price {
  text-align: right;
  white-space: nowrap;
}

.dm-checkout-kosik .commerce-price-formatted-components {
  width: auto;
  margin-left: auto;
}

.dm-checkout-kosik .component-title {
  padding-right: 16px;
  font-weight: 700;
}

.dm-checkout-kosik .component-total {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* Tabuľka bodov v kroku platby. */
.dm-body-tabulka {
  width: auto;
  min-width: 320px;
  margin: 12px 0;
  background: #fff;
  border-collapse: collapse;
}

.dm-body-tabulka th {
  padding: 8px 12px;
  border-bottom: 2px solid #05b496;
  text-align: left;
}

.dm-body-tabulka td {
  padding: 6px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.dm-body-tabulka td + td {
  text-align: right;
  white-space: nowrap;
}

.dm-body-hlaska {
  margin: 8px 0 0;
}

/* Súhlas s pravidlami. */
.commerce-checkout-flow .form-type-checkbox label a {
  color: #05b496;
}

.commerce-checkout-flow .form-type-checkbox label a:hover {
  color: #f57921;
}

/* „Zrušiť“ a „Späť“ vykresľuje Commerce ako odkaz — v D7 to bolo tlačidlo. */
.commerce-checkout-flow .form-actions a,
.commerce-checkout-flow .link--previous {
  display: inline-block;
  margin-right: 10px;
  padding: 8px 12px;
  border-radius: 0 14px;
  background-color: #9a9a9a;
  color: #fff !important;
  text-decoration: none;
  text-transform: uppercase;
}

.commerce-checkout-flow .form-actions a:hover,
.commerce-checkout-flow .link--previous:hover {
  background-color: #f57921;
}