/* ==========================================================================
   B2B.Web additions to the public design system
   --------------------------------------------------------------------------
   main.css / main.rtl.css are the front-end team's compiled output and stay
   byte-identical to their build. What the portal needs on top of them lives
   here, written only with the design system's own tokens and logical
   properties, so it holds in both directions. Loaded after main(.rtl).css.
   ========================================================================== */

/* Feedback/Modal ships Type=Confirmation (info) and Type=Success badges but
   no failure state; the portal's forms need one when a send fails. */
.edaat-modal__badge--error {
  background: var(--edaat-bg-error-subtle);
  color: var(--edaat-icon-error);
}

/* Complaint Escalation draws its help channels (mail, phone, SAMA Cares) as
   plain text; the portal keeps them actionable, as the previous page was,
   without changing how they read. */
.edaat-complaint-assistance__channel a {
  color: inherit;
  text-decoration: none;
}

.edaat-complaint-assistance__channel a:hover,
.edaat-complaint-assistance__channel a:focus-visible {
  text-decoration: underline;
}

/* The note under Complaint Number points at the contact form ("Link here"),
   which the design wrote as text. */
.edaat-form-column__note a {
  color: var(--edaat-text-link);
  text-decoration: underline;
}

/* Bill Inquiry keeps Google's real reCAPTCHA (Views/reCaptcha/ReCaptcha.cshtml).
   The design draws an "I'm not a robot" box for this screen, but a drawn box
   is not a captcha. The widget is Google's fixed 304x78 iframe and cannot be
   restyled; only the partial's own messages take the field-message type.
   The login column's on-demand captcha is the same partial. */
.edaat-inquiry__captcha,
.edaat-login__captcha,
.edaat-signup__captcha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--edaat-space-8);
}

.edaat-inquiry__captcha .field-validation-error,
.edaat-login__captcha .field-validation-error,
.edaat-signup__captcha .field-validation-error {
  font-size: var(--edaat-type-body-xs-size);
  line-height: var(--edaat-type-body-xs-line);
  color: var(--edaat-text-error);
}

/* Login: the server's answer under the fields (invalid credentials, an
   unverified account, the resend result), and the resend-activation line.
   The design has no failed-login state; the type is the field message's. */
.edaat-login__alert,
.edaat-login__resend {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
}

.edaat-login__alert {
  color: var(--edaat-text-error);
}

.edaat-login__alert--success {
  color: var(--edaat-text-success);
}

.edaat-login__resend {
  color: var(--edaat-text-secondary);
}

/* Invoice Details status badge: the design draws only the success state
   ("Exported"). The other invoice and bill states take the matching subtle
   fill and legible text tokens. */
.edaat-badge--warning {
  background-color: var(--edaat-bg-warning-subtle);
  color: var(--edaat-text-warning);
}

.edaat-badge--error {
  background-color: var(--edaat-bg-error-subtle);
  color: var(--edaat-text-error);
}

.edaat-badge--neutral {
  background-color: var(--edaat-bg-brand-subtle);
  color: var(--edaat-text-brand);
}

/* Invoice Details content the design has no frame for, but the previous page
   showed: the biller's conditions and terms, and the invoice's bills. Both sit
   in the design's own collapsible section, spaced like .edaat-section__details. */
.edaat-section__prose,
.edaat-section__table {
  margin-block-start: var(--edaat-space-24);
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-primary);
}

.edaat-section__prose p {
  margin-block: 0 var(--edaat-space-8);
}

.edaat-section__prose ul {
  margin: 0;
  padding-inline-start: var(--edaat-space-20);
}

.edaat-section__table .table {
  --bs-table-bg: transparent;
  font-size: inherit;
  color: inherit;
}

.edaat-section__table th {
  font-weight: 600;
  color: var(--edaat-text-secondary);
  white-space: nowrap;
}

/* a repeated bill's clause, under its description in the summary line
   (ViewBill's clause table); set like the line's spec labels */
.edaat-summary__clause {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--edaat-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* the expired-bill label next to the actions (InvoicePartialViews/_PayNow) */
.edaat-summary__expired {
  margin: 0;
  font-size: var(--edaat-type-body-sm-size);
  line-height: var(--edaat-type-body-sm-line);
  color: var(--edaat-text-error);
}

/* Registration: a field switched off because the other ID type is in use
   (only one NationalID / NationalityId posts), and the derived, never-chosen
   nationality type. The design has no disabled state; the fill is its
   disabled-control token. */
.edaat-field__control:has(> input:disabled),
.edaat-field__control:has(> select:disabled) {
  background-color: var(--edaat-control-bg-disabled);
}

.edaat-field__control > input:disabled,
.edaat-field__control > select:disabled {
  cursor: not-allowed;
  color: var(--edaat-text-secondary);
}

/* The registration forms keep native <select>s (they post, validate and are scripted: country -> city,
   IBAN -> bank). The browser draws their open list with the text against the edge. Where the browser
   supports a customizable select (appearance: base-select), the open list takes the design's dropdown
   (.edaat-select__list / __option: 1px border, radius 12, rows 36 tall with 8/12 padding). The closed
   field is unchanged - the control still draws the border, padding and chevron. Other browsers keep
   their own list. */
@supports (appearance: base-select) {
  .edaat-field__control > select,
  .edaat-field__control > select::picker(select) {
    appearance: base-select;
  }

  .edaat-field__control > select {
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  /* the field draws its own chevron */
  .edaat-field__control > select::picker-icon {
    display: none;
  }

  /* the list opens under the whole field (not just the text area of the select), at its full width;
     anchor-scope keeps each field's list on its own field */
  .edaat-field__control:has(> select) {
    anchor-name: --edaat-select-field;
    anchor-scope: --edaat-select-field;
  }

  .edaat-field__control > select::picker(select) {
    position-anchor: --edaat-select-field;
    inline-size: anchor-size(inline);
    margin-block-start: var(--edaat-space-4);
    padding: 0;
    max-block-size: 220px;
    background: var(--edaat-bg-page);
    border: 1px solid var(--edaat-border-subtle);
    border-radius: var(--edaat-radius-12);
    box-shadow: none;
  }

  .edaat-field__control > select option {
    min-block-size: 36px;
    padding: var(--edaat-space-8) var(--edaat-space-12);
    border-radius: var(--edaat-radius-6);
    font-size: var(--edaat-type-body-sm-size);
    line-height: var(--edaat-type-body-sm-line);
    color: var(--edaat-text-heading);
    cursor: pointer;
  }

  .edaat-field__control > select option:hover,
  .edaat-field__control > select option:focus-visible {
    background: var(--edaat-bg-subtle);
    outline: none;
  }

  .edaat-field__control > select option:checked {
    background: var(--edaat-bg-brand-subtle);
    color: var(--edaat-text-brand);
    font-weight: 500;
  }

  .edaat-field__control > select option::checkmark {
    display: none;
  }
}

/* Date picker additions (edaat-datepicker.js, marked B2B.Web): the year
   steppers either side of the month ones, and days after data-date-max. */
.edaat-datepicker__navs {
  display: inline-flex;
  gap: 2px;
}

.edaat-datepicker__day:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
}

/* An OTP dialog's countdown, inside the code field (client registration's
   Absher step, the biller login's two-factor step) */
.edaat-signup__timer,
.edaat-otp__timer {
  align-self: center;
  margin-inline-start: auto;
  padding-inline-start: var(--edaat-space-8);
  font-size: var(--edaat-type-body-sm-size);
  font-variant-numeric: tabular-nums;
  color: var(--edaat-text-secondary);
  direction: ltr;
}

/* A registration step is focused when the wizard moves to it, so a screen
   reader announces it; it is not a control, so it takes no focus ring. */
.edaat-reg__fields[tabindex="-1"]:focus {
  outline: none;
}