/* =============================================================
   SUNDAY SUPPER — Global buttons & inputs
   Matches homepage .ss-btn CTAs and underline field style.
   ============================================================= */

:root {
  --button-border-thickness: 0px;
  --button-border-opacity: 0%;
  --button-border-radius: 0;
  --button-shadow-opacity: 0%;
  --button-shadow-offset-x: 0px;
  --button-shadow-offset-y: 0px;
  --button-shadow-blur: 0px;

  --input-border-thickness: 0px;
  --input-border-opacity: 100%;
  --input-border-radius: 0px;
  --input-border-radius-outset: 0px;
  --input-shadow-opacity: 0%;
  --input-shadow-offset-x: 0px;
  --input-shadow-offset-y: 0px;
  --input-shadow-blur: 0px;
}

/* ---- CTAs (homepage ss-btn + theme .button) ---- */
/* Anchor CTAs use .ss-btn not .button — override base a:not(.button) link color */
a.ss-btn,
a.ss-btn:hover {
  text-decoration: none;
}

a.ss-btn:not(.ss-btn--yellow),
a.ss-btn:not(.ss-btn--yellow):hover {
  color: var(--ss-white);
}

a.ss-btn--yellow,
a.ss-btn--yellow:hover {
  color: var(--ss-red);
}

.ss-btn,
.button:not(.button--link):not(.button--icon),
.shopline-element-buy-now {
  --color-button-text: 255, 255, 255;
  --color-button-background: 240, 78, 40;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-space-3);
  /* Vertical padding is nudged (more top, less bottom) to compensate for the
     display font sitting high in its line box, which otherwise leaves an
     optical gap under the uppercase text. Tight line-height trims the box. */
  padding: calc(10px + 0.07em) 10px calc(10px - 0.07em);
  font-family: var(--ss-font-display);
  font-size: 46px;
  font-weight: var(--ss-font-weight-black);
  line-height: 0.76;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ss-white);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background-color: var(--ss-orange);
  border: none;
  /* border-radius: var(--ss-radius-sm); */
  box-shadow: none;
  transition:
    transform 0.12s ease,
    filter 0.15s ease;
}

.ss-btn__label {
  display: block;
}

/* Keep Sunday CTA arrow perfectly centered with the text */
.ss-btn .ss-arrow {
  display: block;
  flex: none;
  align-self: center;
  margin: 0;

  /* Match arrow height to text line-height for true vertical centering */
  width: 34px;
  height: 23px;
}

/* Orange / primary (default) */
.ss-btn:not(.ss-btn--green):not(.ss-btn--yellow):hover,
.button:not(.button--link):not(.button--icon):not(.button--secondary):not(
    :disabled
  ):hover,
.shopline-element-buy-now:hover {
  color: var(--ss-white);
  background-color: var(--ss-orange);
  opacity: 1;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Green — white text, lighten on hover (design .btn--green) */
.ss-btn--green,
.button--secondary:not(.button--link):not(.button--icon) {
  --color-button-text: 255, 255, 255;
  --color-button-background: 41, 151, 75;
  color: var(--ss-white);
  background-color: var(--ss-green);
}

.ss-btn--green:hover,
.button--secondary:not(.button--link):not(.button--icon):not(:disabled):hover {
  color: var(--ss-white);
  background-color: var(--ss-green);
  opacity: 1;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Yellow — red text, lighten on hover (design .btn--yellow) */
.ss-btn--yellow {
  --color-button-text: 176, 47, 52;
  color: var(--ss-red);
  background-color: var(--ss-yellow);
}

.ss-btn--yellow:hover {
  color: var(--ss-red);
  background-color: var(--ss-yellow);
  opacity: 1;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.ss-btn--sm {
  font-size: var(--ss-font-size-base);
  padding: calc(var(--ss-space-2) + 0.07em) var(--ss-space-4)
    calc(var(--ss-space-2) - 0.07em);
}

.button:not(.button--link):not(.button--icon)::after,
.button--secondary:not(.button--link):not(.button--icon)::after,
.shopline-element-buy-now::after {
  display: none;
  content: none;
}

.button:not(.button--link):not(.button--icon):not(:disabled):active::after,
.button--secondary:not(.button--link):not(.button--icon):not(
    :disabled
  ):active::after {
  animation: none;
}

.button--link {
  font-family: var(--ss-font-body);
  font-weight: var(--ss-font-weight-bold);
  text-transform: none;
  letter-spacing: normal;
  color: var(--ss-red);
  --color-button-text: 176, 47, 52;
}

.button:not(.button--link):not(.button--icon) .button__spinner,
.button.loading:not(.button--link):not(.button--icon) .loading--rotator {
  color: var(--ss-white);
}

.button--secondary:not(.button--link):not(.button--icon) .button__spinner,
.button--secondary.loading:not(.button--link):not(.button--icon)
  .loading--rotator {
  color: var(--ss-white);
}

/* ---- Global input focus / active states ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="number"]:focus-visible,
input[type="date"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ss-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Text fields (.field) — orange underline ---- */
.field {
  background-color: transparent;
}

/* Subtle tint while a field is focused so the active field stands out. */
.field:focus-within {
  background-color: rgba(240, 78, 40, 0.06);
}

.field::after {
  inset-block-start: auto;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: none;
  border: none;
  border-block-end: 2px solid var(--ss-orange);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.field:hover::after {
  border-block-end-width: 2px;
  border-block-end-color: var(--ss-orange);
}

/* Clearer focus: thicken the underline so focused fields read distinctly. */
.field:focus-within::after {
  border-block-end-width: 3px;
  border-block-end-color: var(--ss-orange);
}

.field--error::after {
  border-block-end-color: var(--ss-red);
}

.field__input {
  font-family: var(--ss-font-body);
  font-size: var(--ss-font-size-base);
  color: var(--ss-color-text);
}

.field__label {
  font-family: var(--ss-font-body);
  color: var(--ss-color-text-muted);
}

.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus,
.field__input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px var(--ss-cream) inset !important;
  -webkit-text-fill-color: var(--ss-color-text);
}

/* ---- Selects — match underline fields ---- */
theme-select {
  font-family: var(--ss-font-body);
  font-size: var(--ss-font-size-base);
  color: var(--ss-color-text);
  background-color: transparent;
}

theme-select::before {
  display: none;
  content: none;
}

theme-select::after {
  inset-block-start: auto;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: none;
  border: none;
  border-block-end: 2px solid var(--ss-orange);
  border-radius: 0;
  box-shadow: none;
}

theme-select:hover::after,
theme-select:focus-within::after,
theme-select[open]::after {
  border-block-end-width: 2px;
  border-block-end-color: var(--ss-orange);
  box-shadow: none;
}

theme-select > select {
  font-family: var(--ss-font-body);
  font-size: var(--ss-font-size-base);
  color: var(--ss-color-text);
  background-color: transparent;
  border-radius: 0;
}

/* ---- Quantity stepper ---- */
theme-input-number {
  border: 2px solid var(--ss-orange);
  border-radius: var(--ss-radius-sm);
  background-color: transparent;
}

theme-input-number::before,
theme-input-number::after {
  display: none;
  content: none;
}

theme-input-number button[name="minus"],
theme-input-number button[name="plus"] {
  color: var(--ss-orange);
}

theme-input-number input[type="number"] {
  font-family: var(--ss-font-body);
  font-weight: var(--ss-font-weight-bold);
}