/*
 * Casa Möbel brand theming, loaded after govuk-frontend.min.css.
 * GOV.UK Frontend themes itself entirely off these CSS custom properties
 * (links, notification banners, the feedback component, …) so redefining
 * them here re-colours the whole app from GOV.UK's default blue to the
 * Casa Möbel brand red, with no need to touch individual component rules.
 * The header and footer are overridden separately below, to white.
 */
:root {
  --govuk-brand-colour: #ac0823;
  --govuk-link-colour: #ac0823;
  --govuk-link-hover-colour: #7a0519;
  --govuk-surface-background-colour: #fbebec;
  --govuk-surface-border-colour: #dba3a8;
  /* Left at white (not a brand tint): this paints the <html> canvas, which
     is what shows in the overscroll/rubber-band area above and below the
     page on trackpads and touch screens. */
  --govuk-template-background-colour: #fff;
}

/* Arial everywhere, instead of GOV.UK's GDS Transport. Unlike colour, GOV.UK
   Frontend has no font theming variable — every component hardcodes
   `font-family: GDS Transport, arial, sans-serif` directly on itself, so an
   inherited font-family on body/html would lose to those direct
   declarations. The universal selector matches every element directly too,
   putting this on equal footing — !important is what then wins it, and is
   genuinely warranted here since there's no supported override hook. */
* {
  font-family: Arial, sans-serif !important;
}

/* A brand-coloured tag, used where none of GOV.UK's fixed tag colours
   (red/green/turquoise/…) fit and the brand colour is more meaningful
   than an arbitrary one — e.g. "Confirmed" on the order list. */
.govuk-tag--brand {
  color: #7a0519;
  background-color: #f6dde0;
}

/* Header: white, carrying both brand marks side by side, with a thin
   brand-coloured accent line instead of a solid colour fill. The line sits
   on the centred width-container, not the full-bleed header, so it lines
   up with the page content below it rather than spanning edge to edge. */
.govuk-header {
  background: #fff;
  --govuk-text-colour: #0b0c0c;
}

.govuk-header__container.govuk-width-container {
  border-bottom: 1px solid var(--govuk-text-colour) ;
}

.app-header__link {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* GOV.UK's homepage-link draws a fake underline (a border) on hover/active —
   suppress it. On hover/focus, underline only the "Orders" label, not the
   logos (text-decoration on the link itself would either underline
   everything or, in most browsers, nothing at all once the logos become
   flex items — so it's applied to the label span directly instead). */
.app-header__link,
.app-header__link:hover,
.app-header__link:active,
.app-header__link:focus {
  border-bottom: none;
  margin-bottom: 0;
  text-decoration: none;
}

.app-header__link:hover .govuk-header__product-name,
.app-header__link:focus .govuk-header__product-name {
  text-decoration: underline;
}

.app-header__logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Cropped from a wide/short source lockup — same visual weight as the
   Casa Möbel mark next to it needs a touch more height. */
.app-header__logo--galaxus {
  height: 26px;
}

.govuk-header__product-name {
  font-size: 1.125rem;
}

.app-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.app-header__account {
  display: flex;
  align-items: center;
  gap: 15px;
}

.app-header__username {
  font-size: 0.875rem;
  color: var(--govuk-secondary-text-colour, #505a5f);
}

.app-header__logout-form {
  margin: 0;
}

.app-header__logout-button {
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--govuk-link-colour, #ac0823);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.app-header__logout-button:hover {
  color: var(--govuk-link-hover-colour, #7a0519);
}

.app-header__logout-button:focus {
  outline: 3px solid var(--govuk-focus-colour, #fd0);
  outline-offset: 2px;
}

/* Footer: plain white, no separating rule, and pinned to the bottom of the
   viewport on short pages via the .app-page-grow flex wrapper in base.html. */
body.govuk-template__body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-page-grow {
  flex: 1 0 auto;
}

.app-footer {
  flex-shrink: 0;
  background: #fff;
  border-top: none;
}

.app-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--govuk-text-colour);
  padding-top: 25px;
  font-size: 0.75rem;
}

.app-footer__environment {
  margin: 0;
}

.app-footer__environment-tag {
  font-size: 0.75rem;
  margin-right: 5px;
}

#send-dispatch-notif-btn {
  margin-top: 20px;
}

@media print {
  .app-no-print {
    display: none;
  }
}

/* "No arrival dates available yet" is checked — the per-item date fields
   below are ignored on submit, so grey the whole block out (GOV.UK already
   dims disabled inputs; this extends that to their labels/hints too). */
.app-arrival-date-fields--disabled {
  opacity: 0.5;
}