/* Shared presentation only: never override hidden, disabled or flow state. */
body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) {
  --rental-focus: #006171;
}
body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--rental-focus);
  outline-offset: 3px;
}
body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) :is(.notice,.checkout-notice,[role="status"],[role="alert"]) {
  overflow-wrap: anywhere;
}
body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) :is(button,.btn) {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) :is(.top-row,.pay-head,.customer-toplinks) a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  text-underline-offset: .2em;
}
body:is(.watly-entry,.customer-auth,.payment-setup) .footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 3px;
  text-underline-offset: .2em;
}
body.customer-auth :is(input[type="email"],input[type="password"]) {
  min-height: 48px;
  font-size: 16px;
}
body.customer-auth .auth-next-step {
  margin: 0 0 18px;
  color: #405e66;
  font-size: .95rem;
  line-height: 1.6;
}
body.customer-auth #passwordMatch { line-height: 1.5; }
body.payment-setup { background: #f7fcfd; color: #12333c; }
body.payment-setup .primary { background: #006f7f; }
body.payment-setup :is(.pay-head a,.small-btn) { color: #005b66; }
body.payment-setup .small-btn.danger { color: #a63232; }
body.payment-setup .small-btn { min-height: 44px; }
body.payment-setup :is(.method-meta,.payment-info p,.lead) { line-height: 1.6; }
body.payment-setup .pay-head { flex-wrap: wrap; }
body.watly-entry .compact-details > summary { min-height: 48px; }
body.watly-entry .dropdown-chevron { flex-shrink: 0; }
@media (max-width: 47.99rem) {
  /* Decorative copy must not push the next real action off a phone screen. */
  body.watly-entry .watly-entry-visual { display: none; }
}
@media (max-width: 360px) {
  body.watly-entry .watly-entry-copy .stack { grid-template-columns: minmax(0,1fr); }
  body.customer-auth .top-row { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) * {
    scroll-behavior: auto !important;
  }
}

/* Product identity shared with watly.de. Do not recolor payment-provider buttons,
   warnings, errors, disabled actions or change any flow visibility. */
body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) {
  --rental-product-turquoise: #60CAD6;
  --rental-product-turquoise-hover: #26BCC7;
  --rental-product-ink: #102C36;
  --rental-product-link: #0B6773;
}
body:is(.watly-entry,.customer-auth) .hero,
body.checkout-body .checkout-hero {
  border-color: var(--rental-product-link);
  background: var(--rental-product-turquoise);
  color: var(--rental-product-ink);
  box-shadow: none;
}
body:is(.watly-entry,.customer-auth) .hero :is(h1,h2,p),
body.checkout-body .checkout-hero :is(h1,h2,p),
body.checkout-body .checkout-hero > p:not(.checkout-eyebrow),
body.checkout-body .checkout-progress li {
  color: var(--rental-product-ink);
}
body:is(.watly-entry,.customer-auth) .hero::after,
body.checkout-body .checkout-hero::after {
  content: none;
}
body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) :is(.btn.btn-primary,button.btn-primary,.btn.primary):not(:disabled):not([aria-disabled="true"]):not(.danger):not(.btn-danger),
body.payment-setup button.primary:not(:disabled):not([aria-disabled="true"]):not(.danger) {
  border-color: var(--rental-product-link);
  background: var(--rental-product-turquoise);
  color: var(--rental-product-ink);
  box-shadow: none;
}
@media (hover: hover) {
  body:is(.watly-entry,.customer-auth,.payment-setup,.checkout-body) :is(.btn.btn-primary,button.btn-primary,.btn.primary):not(:disabled):not([aria-disabled="true"]):not(.danger):not(.btn-danger):hover,
  body.payment-setup button.primary:not(:disabled):not([aria-disabled="true"]):not(.danger):hover {
    background: var(--rental-product-turquoise-hover);
    color: var(--rental-product-ink);
  }
}
body.checkout-body .checkout-topbar,
body.customer-auth .top-row,
body.payment-setup .pay-head {
  border-bottom: 3px solid var(--rental-product-turquoise);
}