/* ==========================================================================
   Checkout: Feinschliff nach Layout Denis v8 (Desktop, Dropbox
   11-Relaunch 2025/1-Layouts/6-Checkout). Nur Optik – keine Funktion.
   Wird als letzte Datei von dopay.main geladen.
   ========================================================================== */

/* ── Warenkorb ───────────────────────────────────────────────────────────── */
/* Produktbild wie im Layout (Packung ca. 90 x 140 px): Das quadratische Bild
   wird seitlich beschnitten (weißer Rand), damit die Packung groß erscheint. */
body.path-pay .warenkorb table.cart td.column-1 img {
  width: 100px;
  height: 150px;
  max-height: none;
  object-fit: cover;
}
/* Spaltenbreiten wie im Layout: Mengen-Knöpfe mit Abstand zu den Preisen.
   Nur Desktop – bis 700 px stapelt bbdepot.css die Zellen. dopay.css begrenzt
   die Bildspalte sonst auf max. 87 px (D7). */
@media (min-width: 701px) {
  body.path-pay .warenkorb table.cart td.column-1 { width: 150px; max-width: none; }
  body.path-pay .warenkorb table.cart td.column-3 { width: 213px; }
  body.path-pay .warenkorb table.cart td.column-4 { width: 170px; }
  body.path-pay .warenkorb table.cart td.column-6 { width: 200px; }
}
/* "auf Lager" klein unter dem Titel */
body.path-pay .warenkorb table.cart .lagerinfo { font-size: 14px; }
.warenkorb table.cart tbody tr[class^="row-"] td {
  padding-top: 22px;
  padding-bottom: 22px;
}
.warenkorb .qty-stepper .qty-btn {
  width: 60px;
  height: 60px;
  font-size: 22px;
  background: #fff;
  border: 2px solid #dde3e8;
  border-radius: 3px;
}
.warenkorb .qty-stepper .menge {
  width: 64px;
  height: 60px;
  font-size: 17px;
}

/* ── Summen ──────────────────────────────────────────────────────────────── */
.warenkorbsummen #gutscheinswitch a,
.warenkorbsummen #gutscheinswitch a.green {
  color: var(--green, #2e9e3e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Gutscheinfeld + "Einlösen" in einer Zeile, rechtsbündig */
.warenkorbsummen .gutscheinform {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.warenkorbsummen .gutscheinform.show { display: flex; }
/* Zeile über beide Spalten; Symbol + Text und Formular rechtsbündig */
.warenkorbsummen .gutscheinzeile td { text-align: right; }
.warenkorbsummen .gutscheinzeile .gutscheinwrapper {
  float: none;
  display: inline-block;
  text-align: right;
  background: none;
  padding-left: 0;
}
/* Gutschein-Symbol direkt vor "Ich habe einen …" */
.warenkorbsummen .gutscheinzeile #gutscheinswitch {
  display: inline-block;
  padding-left: 31px;
  background: url(../bbdepot/gutschein.jpg) no-repeat 0 1px;
}
/* Theme setzt Textfelder auf /pay mit !important auf 100 % Breite */
body.path-pay .warenkorbsummen .gutscheinform #gutscheincode {
  width: 145px !important;
  max-width: 145px;
  margin: 0 !important;
  height: 36px;
  padding: 0 10px;
  border: 2px solid #c9d1d9;
  border-radius: 4px;
  font-size: 17px;
}
.warenkorbsummen .gutscheinform #gutscheineinloesen {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 3px;
  background: #416681;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}
.warenkorbsummen .gutscheinform #gutscheineinloesen:hover { background: #34546b; }
/* Summenzeilen: siehe css/summen.css (gemeinsam mit den Bestelldetails) */

/* Bemerkung: rechte Hälfte, kleiner Platzhalter wie im Layout */
#adress-form .bemerkung-wrapper { display: flex; justify-content: flex-end; }
body.path-pay #adress-form #bemerkung {
  width: 50% !important;
  max-width: none;
  min-width: 320px;
  border: 2px solid #c9d1d9;
  border-radius: 3px;
}
#adress-form #bemerkung::placeholder {
  font-style: normal;
  font-size: 14px;
  color: #6b7580;
  text-align: right;
}

/* ── Kaufart-Reiter ──────────────────────────────────────────────────────── */
#adress-form .gtabs .gtab { color: #212529; }
#adress-form .gtabs .gtab.active {
  background: #dfe4ea;
  color: #212529;
  font-weight: 600;
}

/* ── E-Mail + Häkchen ────────────────────────────────────────────────────── */
body.path-pay #adress-form .payemail #email {
  width: 340px !important;
  max-width: 100%;
  height: 50px;
  border-width: 2px;
  border-radius: 3px;
}
#adress-form .agbnewsblock .checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid #9d9d9c;
  border-radius: 3px;
}
#adress-form .agbnewsblock .checkmark.required { border-color: #b32d2f; }
#adress-form .agbnewsblock .container input:checked ~ .checkmark { border-color: var(--green, #2e9e3e); }
#adress-form .agbnewsblock .container .checkmark:after { left: 6px; top: 2px; }

/* ── Zahlungsarten: ohne Rahmen je Anbieter, schmalere Knöpfe ────────────── */
#adress-form .expressbox { border: 2px solid #416681; border-radius: 2px; }
#adress-form #KlarnaPayButtonContainer,
#adress-form #AmazonPayButtonContainer,
#adress-form #paypalCheckoutContainerOutter {
  border: 0;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
#adress-form .klarna-direct-btn,
#adress-form #AmazonPayButton {
  width: 100%;
  height: 54px;
  margin-bottom: 8px;
}
#adress-form .klarna-pay-button-text,
#adress-form .amazon-pay-button-text,
#adress-form .paypal-button-text,
#adress-form .paymentbox .instruction {
  font-size: 13px;
  color: #333;
}
#adress-form .paymentselection .info { white-space: nowrap; }

/* ── Lieferadresse ───────────────────────────────────────────────────────── */
/* Rahmen um den ganzen Abschnitt (wie Zahlungsarten) */
#adress-form .payadress-inner { border: 2px solid #416681; border-radius: 2px; }
#adress-form .adressbox input[type="text"],
#adress-form .adressbox input[type="tel"],
#adress-form .adressbox select,
#adress-form .adressbox .selectize-input {
  max-width: 520px;
  height: 50px;
  font-size: 17px;
  border: 2px solid #c9d1d9;
  border-radius: 3px;
  box-sizing: border-box;
}
#adress-form .adressbox .selectize-control { width: 520px; max-width: 100%; margin-left: 0; margin-right: 0; }
/* Platzhalter nicht großschreiben ("Firmenname (optional)") */
#adress-form input.capitalize::placeholder { text-transform: none; }
#adress-form .lieferart-tab {
  width: 140px;
  height: 78px;
  font-size: 15px;
  border-width: 2px;
}
#adress-form .lieferart-tab svg { width: 32px; height: 32px; }
#adress-form .abweichende-rechnungsadresse-titel {
  margin: 24px 0 18px;
  text-align: center;
}

/* ── Kaufen ──────────────────────────────────────────────────────────────── */
#adress-form .upperpaybuttonwrapper { border: 2px solid #416681; border-radius: 2px; }
#adress-form .paybuttonwrapper .info { color: #333; }

/* Handy: drei Zellen nebeneinander (je ca. 1/3) – Mengen-Knöpfe kleiner */
@media (max-width: 700px) {
  .warenkorb .qty-stepper .qty-btn { width: 38px; height: 38px; font-size: 18px; }
  .warenkorb .qty-stepper .menge { width: 30px; height: 38px; font-size: 16px; }
}
@media (max-width: 767px) {
  body.path-pay #adress-form #bemerkung { width: 100% !important; min-width: 0; }
  .warenkorb table.cart td.column-1 img { width: 80px; }
}

/* Löschen-X rechtsbündig unter dem Plus-Knopf */
body.path-pay .warenkorb table.cart .mengen-wrapper {
  width: max-content;
  max-width: none;
  margin-left: auto;
}
body.path-pay .warenkorb table.cart .cartdelete {
  margin: 10px 0 0 auto;
}

/* Länderauswahl (selectize) wie die übrigen Felder */
#adress-form .adressbox .selectize-control.single .selectize-input {
  display: flex;
  align-items: center;
  padding: 0 40px 0 13px;
}

/* PayPal ohne Rahmen (wie Klarna/Amazon, Layout v8) */
#adress-form #paypalCheckoutContainer { border: 0; }

/* Links in den Häkchen-Texten (AGB, Widerrufsrecht, Datenschutz): dunkel und
   unterstrichen wie im Layout */
#adress-form .agbnewsblock a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* "Abweichende Rechnungsadresse verwenden" unterstrichen wie ein Link */
#adress-form .abweichende-rechnungsadresse-toggle .label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Amazon-Pay-Logo optisch mittig: Die Buchstaben belegen nur das obere Drittel
   des Logos (darunter Unterlängen und das Lächeln) – geometrisch zentriert
   wirkt die Schrift ca. 5 px zu hoch. */
#adress-form .amazon-direct-btn .amazon-pay-logo img {
  transform: translateY(4px);
}