/* ============================================================
   BESTELLUNG – Rechnungsknopf und Zustimmung
   (Marc, 04.10.2026, nach einem Kauf auf Rechnung)
   ------------------------------------------------------------
   Danke-Seite, Konto → Bestellungen und Konto → Bestellung
   ansehen. Die Klassen setzt WooCommerce (woocommerce-button
   button invoice – „invoice" ist der Schlüssel des Knopfs) bzw.
   Inklusio_Bestellansicht (ink-zustimmung-ja). Farben nur über
   --ink-Variablen; einzig #fff für die Schrift auf dem Knopf.
   Handy-Regeln nur in @media (max-width: 47.99em).

   Seit 19.10.2026 (Marc): In der Bestelltabelle (Konto →
   Bestellungen, .woocommerce-orders-table) sind „Anzeigen" und
   „Rechnung herunterladen" ein ruhiges Paar runder Umrissknöpfe,
   die Rechnung nur durch Mint-700 erkennbar; dazu die Leiste
   über der Tabelle (Inklusio_Bestellliste). Danke-Seite und
   Bestellansicht behalten den grün gefüllten Knopf unten.

   Ebenfalls 19.10.2026 (Marc): „Zurück" und „Weiter" unter der
   Tabelle (WooCommerce: .woocommerce-pagination, grau und eckig)
   haben dieselbe Form wie „Anzeigen" – sie stehen in denselben
   Regeln wie dieses (unten, Block „Seitenknöpfe"). Gelten nur
   dort, wo eine Bestelltabelle davor steht
   (.woocommerce-orders-table ~ .woocommerce-pagination); die
   Seitenwechsel anderer Konto-Seiten bleiben unberührt.
   ============================================================ */

/* ------------------------------------------------------------
   „Rechnung herunterladen" – grünlich hervorgehoben.
   Weisse Schrift auf Mint-700 6,25:1, auf Mint-800 (Hover, Fokus)
   9,00:1. Mint-500 wie bei den anderen Mint-Knöpfen käme nur auf
   2,93:1, Mint-600 auf 4,21:1 – beides zu wenig für Text.
   „body" vorn: WooCommerce und JobHive färben .button grau, und
   das globale a:hover (inklusio.css) machte die Schrift orange.
   ------------------------------------------------------------ */
body a.woocommerce-button.button.invoice,
body a.woocommerce-button.button.invoice:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ink-space-2);
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  border: 1.5px solid var(--ink-mint-700);
  border-radius: var(--ink-radius-pill);
  background: var(--ink-mint-700);
  color: #fff;
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--ink-dur-fast) var(--ink-ease-soft),
    border-color var(--ink-dur-fast) var(--ink-ease-soft);
}

/* Symbol „Herunterladen" (Font Awesome 5, von HivePress auf jeder Seite geladen);
   die zweite content-Zeile nimmt es aus dem Namen für Screenreader. */
body a.woocommerce-button.button.invoice::before {
  content: "\f019";
  content: "\f019" / "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.95em;
}

body a.woocommerce-button.button.invoice:hover,
body a.woocommerce-button.button.invoice:focus-visible {
  background: var(--ink-mint-800);
  border-color: var(--ink-mint-800);
  color: #fff;
}

/* Fokusring: Mint-800 auf Sand-50 8,64:1. */
body a.woocommerce-button.button.invoice:focus-visible {
  outline: 2px solid var(--ink-mint-800);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Das „Ja" zur Zustimmung zum vorzeitigen Beginn: fett und rot.
   Nur dieses eine Feld – den Marker setzt der Server, und nur bei
   „Ja" (Inklusio_Bestellansicht::ja_markieren). --ink-red-700 hält
   auf allen hellen Flächen der Seite mindestens 5,09:1.
   ------------------------------------------------------------ */
.wc-block-components-additional-fields-list dd.ink-zustimmung-ja {
  color: var(--ink-red-700);
  font-weight: 700;
}

/* ------------------------------------------------------------
   Konto → Bestellungen: „Anzeigen" und „Rechnung herunterladen"
   als ruhiges Paar (19.10.2026, Vorschlag B). Gilt nur in der
   Tabelle; die Regeln oben bleiben für Danke-Seite und
   Bestellansicht. Spezifität (0,4,2) schlägt die Regel oben
   (0,3,1), .woocommerce a.button (0,2,1) und die Hover-Regeln
   des Themes. Nur .view und .invoice; „pay" und „cancel" bleiben
   WooCommerce-Standard.
   Kontraste (gerechnet): Graphit-800 auf Weiss 15,2:1; Mint-700
   auf Weiss 6,25:1, auf Sand-50 6,00:1; Mint-800 auf Mint-50
   8,33:1; Rand Graphit-400 auf Weiss 4,09:1 (Rand braucht 3:1).
   Die vier ersten Selektoren sind die Seitenknöpfe (Block
   „Seitenknöpfe" weiter unten); Spezifität (0,5,2).
   ------------------------------------------------------------ */
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous:visited,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next:visited,
body .woocommerce-orders-table a.woocommerce-button.button.view,
body .woocommerce-orders-table a.woocommerce-button.button.view:visited,
body .woocommerce-orders-table a.woocommerce-button.button.invoice,
body .woocommerce-orders-table a.woocommerce-button.button.invoice:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ink-space-2);
  min-height: 44px;
  margin: 0.25rem var(--ink-space-2) 0.25rem 0;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--ink-graphite-400);
  border-radius: var(--ink-radius-pill);
  background: transparent;
  color: var(--ink-graphite-800);
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-base);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: normal; /* WooCommerce (.my_account_orders .button) und die Regel oben setzen nowrap; erst ab 80em wieder einzeilig (unten). */
  text-align: center;
  transition:
    background-color var(--ink-dur-fast) var(--ink-ease-soft),
    border-color var(--ink-dur-fast) var(--ink-ease-soft),
    color var(--ink-dur-fast) var(--ink-ease-soft);
}

/* Breite Bildschirme: das Paar steht nebeneinander in einer Zeile. Darunter (Tablet, schmale
   Laptops neben der Kontonavigation) darf „Rechnung herunterladen" umbrechen und das Paar
   untereinander stehen – ohne Umbruch ragte die Tabelle bei 769 bis etwa 1100 px über den
   Inhaltsbereich und über den Bildschirmrand (gemessen, 19.10.2026). */
@media (min-width: 80em) {
  body table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
    white-space: nowrap;
  }

  body .woocommerce-orders-table a.woocommerce-button.button.view,
  body .woocommerce-orders-table a.woocommerce-button.button.invoice {
    white-space: nowrap;
    padding-inline: 0.8rem; /* etwas enger, damit das Paar nicht über die Inhaltsspalte hinausragt */
    margin-right: var(--ink-space-1);
  }
}

/* Tablet bis schmaler Laptop (769 bis 1024 px): Neben der Kontonavigation bleibt dem Inhalt weniger Platz
   (502 px bei 800 px Bildschirmbreite), als die fünf Spalten mindestens brauchen (rund 600 px). Statt über
   den Bildschirmrand zu ragen, scrollt die Tabelle dann in ihrem Bereich. Passt sie (ab etwa 1000 px),
   erscheint keine Leiste. WooCommerce schaltet bis 768 px selbst auf Karten um (Handy-Regeln unten). */
@media (min-width: 48.0625em) and (max-width: 64em) {
  body table.woocommerce-orders-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Die Rechnung: Mint-700 an Rand, Schrift und Symbol. */
body .woocommerce-orders-table a.woocommerce-button.button.invoice,
body .woocommerce-orders-table a.woocommerce-button.button.invoice:visited {
  border-color: var(--ink-mint-700);
  color: var(--ink-mint-700);
}

/* Hover und Tastaturfokus: Mint-50 als Grund, dunklerer Rand und dunklere Schrift. */
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous:hover,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous:focus-visible,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next:hover,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next:focus-visible,
body .woocommerce-orders-table a.woocommerce-button.button.view:hover,
body .woocommerce-orders-table a.woocommerce-button.button.view:focus-visible {
  background: var(--ink-mint-50);
  border-color: var(--ink-graphite-800);
  color: var(--ink-graphite-900);
}

body .woocommerce-orders-table a.woocommerce-button.button.invoice:hover,
body .woocommerce-orders-table a.woocommerce-button.button.invoice:focus-visible {
  background: var(--ink-mint-50);
  border-color: var(--ink-mint-800);
  color: var(--ink-mint-800);
}

/* Fokusring wie bisher: Mint-800 auf Sand-50 8,64:1. */
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous:focus-visible,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next:focus-visible,
body .woocommerce-orders-table a.woocommerce-button.button.view:focus-visible,
body .woocommerce-orders-table a.woocommerce-button.button.invoice:focus-visible {
  outline: 2px solid var(--ink-mint-800);
  outline-offset: 2px;
}

/* Das Overlay des Themes (.button::before: absolut, durchsichtig, Hover-Tönung) entfällt –
   der Grund kommt von oben. */
body .woocommerce-orders-table a.woocommerce-button.button.view::before {
  content: none;
}

/* Symbol „Herunterladen": im Textfluss und sichtbar. Das Theme legt es sonst als
   durchsichtige Fläche (position: absolute; opacity: 0) über den Knopf. */
body .woocommerce-orders-table a.woocommerce-button.button.invoice::before {
  content: "\f019";
  content: "\f019" / "";
  position: static;
  display: inline-block;
  opacity: 1;
  background: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.95em;
}

/* ------------------------------------------------------------
   Seitenknöpfe „Zurück" und „Weiter" unter der Bestelltabelle
   (19.10.2026). Die Form (rund, Umriss, 44 px, Farben, Hover,
   Fokusring) kommt aus den Regeln oben; hier nur die Anordnung
   und das Overlay. Zurück steht links, Weiter rechts – auch wenn
   nur einer der beiden da ist (erste und letzte Seite). Der
   Seitenwechsel anderer Konto-Seiten (ohne Bestelltabelle davor)
   bleibt WooCommerce-Standard.
   ------------------------------------------------------------ */
body .woocommerce-orders-table ~ .woocommerce-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ink-space-2);
  margin-top: var(--ink-space-4);
}

body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next {
  margin: 0;
  padding-inline: 1.5rem;
}

body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next {
  margin-left: auto;
}

/* Das Overlay des Themes (.button::before) entfällt wie bei „Anzeigen". */
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous::before,
body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next::before {
  content: none;
}

/* ------------------------------------------------------------
   Leiste über der Bestelltabelle (Inklusio_Bestellliste):
   Reihenfolge, Jahr, Nummer suchen. Grundlage sind die Regeln
   .ink-werkzeuge* in components.css; hier nur, was die Leiste
   zusätzlich braucht.
   ------------------------------------------------------------ */
.ink-werkzeuge--bestellungen {
  margin-bottom: var(--ink-space-5);
}

/* Tippziel 44 px auch für Auswahl und Suchfeld. */
.ink-werkzeuge--bestellungen select,
.ink-werkzeuge--bestellungen input[type="search"] {
  min-height: 44px;
}

/* „Übernehmen" als heller Umrissknopf (wie der Benachrichtigungsschalter, components.css): Das Theme
   legt über jeden Absendeknopf einen pink-gelben Verlauf mit weisser Schrift; diese Regel (0,3,0)
   ist spezifischer als alles, was das Theme dafür schreibt. Graphit-800 auf Weiss 15,2:1. */
.ink-werkzeuge--bestellungen .ink-btn.ink-btn--ghost[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.25rem;
  font-family: var(--ink-font-body);
  font-size: var(--ink-text-sm);
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  color: var(--ink-graphite-800);
  background: var(--ink-bg-elevated);
  background-image: none;
  border: 1.5px solid var(--ink-graphite-400);
  border-radius: var(--ink-radius-pill);
  box-shadow: none;
}

.ink-werkzeuge--bestellungen .ink-btn.ink-btn--ghost[type="submit"]:hover,
.ink-werkzeuge--bestellungen .ink-btn.ink-btn--ghost[type="submit"]:focus-visible {
  color: var(--ink-graphite-900);
  background: var(--ink-mint-50);
  border-color: var(--ink-graphite-800);
}

.ink-werkzeuge--bestellungen .ink-btn.ink-btn--ghost[type="submit"]:focus-visible {
  outline: 2px solid var(--ink-mint-800);
  outline-offset: 2px;
}

/* Hinweis unter dem Suchfeld und Zähler: je eine volle Zeile. Graphit-500 auf Sand-50 6,46:1. */
.ink-werkzeuge__hinweis,
.ink-werkzeuge--bestellungen .ink-werkzeuge__zaehler {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--ink-text-sm);
  color: var(--ink-graphite-500);
}

/* „Zurücksetzen" und „Auswahl zurücksetzen": Verweis in Mint-700, 44 px Tippziel. */
.ink-werkzeuge__zuruecksetzen,
.ink-werkzeuge__zuruecksetzen:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--ink-space-1);
  color: var(--ink-mint-700);
  font-size: var(--ink-text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ink-werkzeuge__zuruecksetzen:hover {
  color: var(--ink-mint-800);
}

.ink-werkzeuge__zuruecksetzen:focus-visible {
  outline: 2px solid var(--ink-mint-700);
  outline-offset: 2px;
}

.ink-werkzeuge__leer-weg {
  margin: 0 0 var(--ink-space-4);
}

@media (max-width: 47.99em) {
  /* Schmale Spalte in Konto → Bestellungen: umbrechen statt überstehen. */
  body a.woocommerce-button.button.invoice {
    white-space: normal;
    text-align: center;
  }

  /* Beide Knöpfe der Tabelle nebeneinander, wenn Platz ist, sonst untereinander.
     Die Zelle wird nur hier zum Flex-Container; auf dem Desktop bleibt sie Tabellenzelle.
     „table … tr td" vorn: WooCommerces Handy-Stylesheet setzt td auf display: block mit
     (0,2,3) – die Regel hier liegt mit (0,2,4) darüber. Die Beschriftung „Aktionen:" (::before)
     steht als eigene Zeile über den Knöpfen. */
  body table.woocommerce-orders-table tr td.woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ink-space-2);
  }

  body table.woocommerce-orders-table tr td.woocommerce-orders-table__cell-order-actions::before {
    flex: 0 0 100%;
    float: none;
  }

  body .woocommerce-orders-table a.woocommerce-button.button.view,
  body .woocommerce-orders-table a.woocommerce-button.button.invoice {
    flex: 1 1 9rem;
    margin: 0;
    white-space: normal;
    text-align: center;
  }

  /* Seitenknöpfe: nebeneinander, wenn Platz ist, sonst untereinander (wie das Paar oben). */
  body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous,
  body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next {
    flex: 1 1 9rem;
    text-align: center;
  }

  /* „Übernehmen" in der Leiste über die ganze Breite. */
  .ink-werkzeuge--bestellungen .ink-btn.ink-btn--ghost[type="submit"] {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 30em) {
  /* Wie die Gutschein-Knöpfe in mobil.css: auf dem schmalen Handy einer je Zeile, 48 px hoch. */
  body .woocommerce-orders-table a.woocommerce-button.button.view,
  body .woocommerce-orders-table a.woocommerce-button.button.invoice,
  body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--previous,
  body .woocommerce-orders-table ~ .woocommerce-pagination a.woocommerce-button.button.woocommerce-button--next {
    flex: 1 1 100%;
    min-height: 48px;
  }
}