/*
 * Ervye Keycloak login theme — design system.
 *
 * Source of truth: apps/web/tailwind.config.ts. Color tokens MUST stay
 * in lockstep with the main app so a user crossing /auth → / never
 * sees a visual seam.
 *
 * Class naming: BEM-ish, prefixed `ervye-`. We do NOT rely on
 * PatternFly classes shipped with Keycloak's parent theme (.pf-c-*
 * etc.) — those drag PatternFly styles we don't want and break the
 * cream/coral palette. We use logical CSS properties throughout
 * (padding-inline, margin-inline, etc.) so RTL is correct without
 * a separate stylesheet.
 */

/* ============================================================
   Design tokens — mirror apps/web/tailwind.config.ts brand palette.
   These MUST stay in lockstep with the Tailwind tokens so the user
   never sees a visual seam crossing /auth/* into the React app.
   ============================================================ */
:root {
  /* Brand — deep crimson primary, matches Tailwind brand-500 */
  --ervye-coral:        #3B0510;  /* brand-500 — primary buttons, CTAs */
  --ervye-coral-hover:  #33040E;  /* brand-600 — hover */
  --ervye-coral-active: #2B030B;  /* brand-700 — active */
  --ervye-coral-soft:   rgba(168, 46, 74, 0.10);  /* brand-400 @ 10% */
  --ervye-coral-ring:   rgba(168, 46, 74, 0.18);  /* brand-400 @ 18% — focus halo */

  /* Accent — brand-400 for highlights / coral-soft fills */
  --ervye-accent:       #A82E4A;  /* brand-400 — accents, danger, focus */

  /* Charcoal text + UI */
  --ervye-plum:         #221516;  /* charcoal-700 — primary text, headings */
  --ervye-plum-soft:    #5A4547;  /* warm medium — descriptions */
  --ervye-plum-mute:    #8D7D7F;  /* warm gray — placeholders, disabled */

  /* Surfaces */
  --ervye-canvas:       #F4F4F1;  /* taupe-100 — page bg, warm off-white */
  --ervye-card:         #FFFFFF;  /* white — card surface */
  --ervye-input:        #FFFFFF;  /* white — input bg */
  --ervye-elevated:     #FAF9F8;  /* taupe-50 — hover surface */

  /* Borders — taupe scale, warm neutrals */
  --ervye-border:       #EDEBE8;  /* taupe-200 — soft borders */
  --ervye-border-soft:  #F4F4F1;  /* taupe-100 — subtle dividers */
  --ervye-border-strong:#E1DBD7;  /* taupe-300 — strong borders, inputs */

  /* Semantic */
  --ervye-success:      #4D9E70;
  --ervye-success-bg:   #EAF4EC;
  --ervye-warning:      #CFA04D;
  --ervye-warning-bg:   #FBF3E1;
  --ervye-error:        #A82E4A;  /* danger = brand-400 — consistent with app */
  --ervye-error-bg:     #FDF2F4;  /* brand-50 */
  --ervye-info:         #5990B8;
  --ervye-info-bg:      #EAF1F7;

  /* Geometry — match Tailwind defaults (rounded-xl = 12px) */
  --ervye-radius-sm:    10px;
  --ervye-radius:       12px;
  --ervye-radius-lg:    16px;
  /* Shadows tinted with charcoal-700 (rgba(34, 21, 22, …)) — never cold black */
  --ervye-shadow-sm:    0 1px 2px rgba(34, 21, 22, 0.06);
  --ervye-shadow:       0 6px 24px rgba(34, 21, 22, 0.10);
  --ervye-shadow-lg:    0 12px 48px rgba(34, 21, 22, 0.14);

  /* Type — sans for body, "logo" font for the Ervye wordmark.
     ZT Neue Ralewe is the brand display font; it falls back gracefully
     to Georgia (warm serif) on systems that don't have it. The body
     stack is the standard system-font chain that always resolves to
     sans-serif on every modern OS without external loads. */
  --ervye-font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --ervye-font-arabic:  'Noto Sans Arabic', 'Geeza Pro', 'Tahoma', -apple-system, 'Segoe UI', sans-serif;
  --ervye-font-logo:    'ZT Neue Ralewe', Georgia, 'Times New Roman', serif;
}

/* Arabic locale uses the Arabic-aware stack (Noto Sans Arabic supports
   Latin too, so mixed strings render correctly). */
html[lang="ar"] {
  font-family: var(--ervye-font-arabic);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

/*
 * !important on font-family + background here is intentional. KC's
 * parent theme inheritance can inject base rules at unpredictable
 * times via stylesCommon (PatternFly CSS resets). Anchoring our
 * core typography + canvas with !important guarantees our brand wins
 * regardless of what loads before us. We use !important sparingly —
 * only on rules that are root-level visual identity.
 */
html, body {
  margin: 0;
  padding: 0;
  /* Literal hex (not var) for the same defensive reason as the button. */
  background: #F4F4F1 !important;
  color: #221516;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.ervye-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/*
 * Link colors use the pink accent (--ervye-accent / #A82E4A), NOT the
 * burgundy CTA color. Two-tone system: burgundy for solid buttons,
 * pink for every text-level interactive (links, focus rings, hover).
 * Mirrors apps/web's `text-brand-400` link styling.
 */
a { color: var(--ervye-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--ervye-accent); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible {
  outline: 2px solid var(--ervye-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   Layout shell
   ============================================================ */
.ervye-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  width: 100%;
  position: relative;
}

.ervye-card {
  width: 100%;
  max-width: 440px;
  background: var(--ervye-card);
  border: 1px solid var(--ervye-border);
  border-radius: var(--ervye-radius-lg);
  box-shadow: var(--ervye-shadow);
  padding: 2.5rem 2.25rem;
}

@media (max-width: 480px) {
  .ervye-card {
    padding: 1.75rem 1.25rem;
    border-radius: var(--ervye-radius);
  }
  .ervye-shell { padding: 1rem; }
}

/* ============================================================
   Header (logo + locale switcher)
   ============================================================ */
.ervye-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.ervye-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ervye-plum);
}
.ervye-brand:hover { text-decoration: none; color: var(--ervye-plum); }

/* Wordmark — same h1 the React /fr/login renders. Literal values
   (no var) for max determinism against any cascade or var-resolution bugs. */
.ervye-brand-name {
  font-family: 'ZT Neue Ralewe', Georgia, 'Times New Roman', serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #A82E4A !important;
  line-height: 1 !important;
}

/* ---- Locale switcher ---- */
.ervye-locale-wrapper {
  position: relative;
}

.ervye-locale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: 1px solid var(--ervye-border);
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ervye-plum);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ervye-locale-toggle:hover {
  background: rgba(168, 46, 74, 0.06);
  border-color: var(--ervye-accent);
  color: var(--ervye-accent);
}
.ervye-locale-toggle svg { transition: transform .15s ease; }
.ervye-locale-wrapper.is-open .ervye-locale-toggle svg { transform: rotate(180deg); }

.ervye-locale-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--ervye-border);
  border-radius: var(--ervye-radius-sm);
  box-shadow: var(--ervye-shadow);
  margin: 0;
  padding: 0.25rem;
  list-style: none !important; /* override base ul list-style: disc */
  display: none !important;    /* hidden by default; toggled open via .is-open */
  z-index: 50;
}
.ervye-locale-wrapper.is-open .ervye-locale-list { display: block !important; }

.ervye-locale-list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: var(--ervye-plum);
  font-size: 0.875rem;
}
.ervye-locale-list a:hover {
  background: rgba(168, 46, 74, 0.08);
  color: var(--ervye-accent);
  text-decoration: none;
}
.ervye-locale-list a[aria-current="true"] {
  background: var(--ervye-coral-soft);   /* brand-400 @ 10% — pink tint */
  color: var(--ervye-accent);
  font-weight: 600;
}

/* ============================================================
   Title + subtitle
   ============================================================ */
.ervye-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ervye-plum);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}

.ervye-subtitle {
  color: var(--ervye-plum-soft);
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
}

.ervye-content {
  margin-top: 1.25rem;
}

/* "Logging in as" block (KC's another-way / step-up flow) */
.ervye-known-user {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--ervye-elevated);
  border: 1px solid var(--ervye-border-soft);
  border-radius: var(--ervye-radius-sm);
  margin-bottom: 1rem;
}
.ervye-avatar-wrapper { display: flex; align-items: center; gap: 0.75rem; }
.ervye-avatar {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ervye-coral); color: #fff;
  border-radius: 999px; font-weight: 600;
}
.ervye-known-user-label { font-size: 0.75rem; color: var(--ervye-plum-mute); margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }
.ervye-known-user-name  { font-size: 0.9375rem; color: var(--ervye-plum); margin: 0; font-weight: 500; }

/* ============================================================
   Forms
   ============================================================ */
form { margin: 0; }

.ervye-form { display: flex; flex-direction: column; gap: 1rem; }

.ervye-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ervye-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ervye-plum);
}
.ervye-label .ervye-required {
  color: var(--ervye-coral);
  margin-inline-start: 2px;
}

/* Match every input KC ships with this CSS — class-based AND tag-based */
.ervye-input,
.pf-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select {
  width: 100%;
  height: 44px;
  background: var(--ervye-input);
  border: 1px solid var(--ervye-border-strong);
  border-radius: var(--ervye-radius-sm);
  padding: 0.625rem 0.875rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ervye-plum);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ervye-input::placeholder,
input::placeholder {
  color: var(--ervye-plum-mute);
}

/* Pink accent on hover/focus — same color as links so the interactive
   surface reads as one consistent shade. The CTA-button burgundy is
   reserved exclusively for solid primary buttons. */
.ervye-input:hover,
.pf-c-form-control:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover { border-color: var(--ervye-accent); }

.ervye-input:focus,
.pf-c-form-control:focus,
input:focus,
select:focus {
  outline: none;
  border-color: var(--ervye-accent);
  box-shadow: 0 0 0 3px var(--ervye-coral-ring);
  background: var(--ervye-input);
}

.ervye-input:disabled,
input:disabled {
  background: var(--ervye-elevated);
  color: var(--ervye-plum-mute);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Field error */
.ervye-field.has-error .ervye-input,
.ervye-input[aria-invalid="true"] { border-color: var(--ervye-error); }
.ervye-field-error {
  font-size: 0.8125rem;
  color: var(--ervye-error);
  margin: 0;
}

/* Helper text */
.ervye-field-hint {
  font-size: 0.8125rem;
  color: var(--ervye-plum-mute);
}

/* Password reveal toggle (used by base login.ftl) */
.pf-c-input-group { display: flex; }
.pf-c-input-group input { border-end-end-radius: 0; border-start-end-radius: 0; }
.pf-c-input-group button {
  border-start-end-radius: var(--ervye-radius-sm);
  border-end-end-radius: var(--ervye-radius-sm);
  border: 1px solid var(--ervye-border-strong);
  border-inline-start: 0;
  background: var(--ervye-input);
  padding: 0 0.875rem;
  cursor: pointer;
  color: var(--ervye-plum-soft);
}
.pf-c-input-group button:hover { background: var(--ervye-elevated); color: var(--ervye-plum); }

/* Checkbox (Remember me, T&Cs, etc.) */
.ervye-checkbox-wrapper,
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ervye-plum);
  margin: 0;
}
.ervye-checkbox-wrapper input[type="checkbox"],
.checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--ervye-accent);  /* pink check fill */
  margin: 0;
  cursor: pointer;
}
.ervye-checkbox-wrapper label,
.checkbox label { cursor: pointer; }

/* Forgot password row: input above + link below or to-the-side */
.ervye-input-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

/* ============================================================
   Buttons
   ============================================================ */
/*
 * Primary button. !important on appearance + background + color + border
 * because KC's PatternFly stylesheets and various browser user-agent
 * styles set these on submit buttons with high specificity. Anchoring
 * the brand color guarantees the button is always recognizably Ervye
 * regardless of what else is loaded.
 *
 * Selector list also targets bare `button[type="submit"]` so even
 * inherited KC base templates that don't add the .ervye-btn class get
 * the brand treatment. .ervye-btn--secondary opt-out is below.
 */
.ervye-btn,
button[type="submit"]:not(.ervye-btn--secondary):not(.ervye-link-button):not(.pf-c-button.pf-m-secondary),
input[type="submit"]:not(.ervye-btn--secondary),
.pf-c-button.pf-m-primary,
.pf-c-button.pf-m-block,
input[type="submit"].pf-c-button,
input[type="submit"].btn,
button[type="submit"].btn-primary {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Hardcoded literal hex (no CSS variable) so the value applies even
     in browsers / contexts where var() resolution fails for any reason. */
  background: #3B0510 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(34, 21, 22, 0.10);
  transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.ervye-btn:hover,
button[type="submit"]:not(.ervye-btn--secondary):not(.ervye-link-button):not(.pf-c-button.pf-m-secondary):hover,
input[type="submit"]:not(.ervye-btn--secondary):hover,
.pf-c-button.pf-m-primary:hover,
input[type="submit"].pf-c-button:hover,
input[type="submit"].btn:hover,
button[type="submit"].btn-primary:hover {
  background: var(--ervye-coral-hover) !important;
  box-shadow: 0 4px 14px rgba(226, 109, 92, 0.25);
}
.ervye-btn:active,
button[type="submit"]:not(.ervye-btn--secondary):not(.ervye-link-button):not(.pf-c-button.pf-m-secondary):active,
input[type="submit"]:not(.ervye-btn--secondary):active,
.pf-c-button.pf-m-primary:active,
input[type="submit"].btn:active {
  background: var(--ervye-coral-active) !important;
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(71, 45, 48, 0.15);
}
.ervye-btn:disabled,
input[type="submit"]:disabled {
  background: var(--ervye-plum-mute);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}
.ervye-btn:focus-visible,
input[type="submit"]:focus-visible {
  outline: 2px solid var(--ervye-coral);
  outline-offset: 2px;
}

/* Secondary button (e.g. "Cancel", "Try another way") */
.ervye-btn--secondary,
.pf-c-button.pf-m-secondary {
  background: transparent;
  color: var(--ervye-plum);
  border: 1px solid var(--ervye-border-strong);
  box-shadow: none;
}
.ervye-btn--secondary:hover,
.pf-c-button.pf-m-secondary:hover {
  background: var(--ervye-elevated);
  border-color: var(--ervye-accent);
  color: var(--ervye-accent);
  box-shadow: none;
}

/* Link button — visually a link, behaves like a button */
.ervye-link-button {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--ervye-accent);
  cursor: pointer;
  text-decoration: none;
}
.ervye-link-button:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--ervye-accent); }

.ervye-link {
  font-size: 0.875rem;
  color: var(--ervye-accent);
  font-weight: 600;
}

/* Try-another-way form sits under the main flow, smaller */
.ervye-try-another {
  margin-top: 1rem;
  text-align: center;
}
.ervye-try-another button { font-size: 0.875rem; }

/* ============================================================
   Social login buttons (rendered when an IdP federation is set up)
   ============================================================ */
#kc-social-providers ul,
.ervye-social {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#kc-social-providers li,
.ervye-social li { margin: 0; }

#kc-social-providers a,
.ervye-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 44px;
  background: #fff;
  border: 1px solid var(--ervye-border-strong);
  border-radius: var(--ervye-radius-sm);
  color: var(--ervye-plum);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
}
#kc-social-providers a:hover,
.ervye-social a:hover {
  border-color: var(--ervye-accent);
  background: var(--ervye-elevated);
  color: var(--ervye-accent);
  text-decoration: none;
}

/* "or" divider between primary form and social login */
.ervye-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--ervye-plum-mute);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ervye-divider::before, .ervye-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ervye-border);
}

/* ============================================================
   Alerts
   ============================================================ */
.ervye-alert,
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--ervye-radius-sm);
  border: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0 0 1rem;
}
.ervye-alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.ervye-alert-text { flex: 1; }

.ervye-alert--error,    .alert.alert-error    { background: var(--ervye-error-bg);   border-color: var(--ervye-error);   color: var(--ervye-error); }
.ervye-alert--warning,  .alert.alert-warning  { background: var(--ervye-warning-bg); border-color: var(--ervye-warning); color: #8B6A2D; }
.ervye-alert--success,  .alert.alert-success  { background: var(--ervye-success-bg); border-color: var(--ervye-success); color: var(--ervye-success); }
.ervye-alert--info,     .alert.alert-info,
.ervye-alert--identity_provider_login_failure,
.alert.alert-identity_provider_login_failure  { background: var(--ervye-info-bg);    border-color: var(--ervye-info);    color: var(--ervye-info); }

/* ============================================================
   Info section (sub-card area below the form)
   ============================================================ */
.ervye-info,
#kc-info-wrapper {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ervye-border-soft);
  font-size: 0.875rem;
  color: var(--ervye-plum-soft);
  text-align: center;
}
.ervye-info p,
#kc-info-wrapper p { margin: 0; }

/* ============================================================
   Footer
   ============================================================ */
.ervye-footer {
  width: 100%;
  padding: 1.5rem 1.25rem 2rem;
  text-align: center;
}
.ervye-footer-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--ervye-plum-mute);
  letter-spacing: 0.02em;
}
.ervye-footer-link { color: var(--ervye-plum-soft); }
.ervye-footer-link:hover { color: var(--ervye-accent); text-decoration: none; }
.ervye-footer-divider { color: var(--ervye-plum-mute); opacity: 0.4; }

/* ============================================================
   PatternFly + base theme overrides
   ============================================================ */
/* Hide PatternFly's noisy header — we render our own */
#kc-header { display: none; }

/* Center the KC content wrapper */
.login-pf-page { background: transparent !important; }
.login-pf body  { background: transparent !important; }

/* KC's form group spacing */
.form-group { margin-bottom: 1rem; }
.control-label, .pf-c-form__label { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--ervye-plum); }
.help-block { font-size: 0.8125rem; color: var(--ervye-plum-mute); margin-top: 0.25rem; }

/* "Try another way" / chooser */
#kc-form-options { margin-top: 0.5rem; }
.kc-form-buttons { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.kc-form-buttons input,
.kc-form-buttons button { width: 100%; }

/* TOTP / WebAuthn-specific code from base */
#kc-otp-credential-list, .kc-credential-list, #kc-form-webauthn { margin: 1rem 0; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   RTL (Arabic). Logical properties handle most of this; these
   tweaks fix the few KC patterns that use directional values.
   ============================================================ */
html[dir="rtl"] .ervye-card { text-align: right; }
html[dir="rtl"] .ervye-locale-toggle svg { transform: scaleX(-1); }
html[dir="rtl"] .ervye-locale-wrapper.is-open .ervye-locale-toggle svg { transform: scaleX(-1) rotate(180deg); }
html[dir="rtl"] .pf-c-input-group input { border-radius: 0 var(--ervye-radius-sm) var(--ervye-radius-sm) 0; }
html[dir="rtl"] .pf-c-input-group button { border-radius: var(--ervye-radius-sm) 0 0 var(--ervye-radius-sm); border-inline-end: 0; border-inline-start: 1px solid var(--ervye-border-strong); }