/**
 * Rahkar PrestaShop Login — storefront widget.
 *
 * Scoped entirely under .rkpsl so it cannot leak into the theme, and built from
 * CSS custom properties so a theme can restyle it by setting a handful of
 * values instead of fighting specificity. Nothing here sets a font family or a
 * brand colour: the widget should look like the shop it is installed in, so it
 * inherits both.
 *
 * @author    Rahkarnet <https://rahkarnet.com>
 * @copyright Rahkarnet
 */

.rkpsl {
  --rkpsl-gap: 0.75rem;
  --rkpsl-radius: 6px;
  --rkpsl-border: #d6d6d6;
  --rkpsl-error: #c0392b;
  --rkpsl-success: #1e874b;
  --rkpsl-notice: #8a6d1f;
  --rkpsl-muted: #6b6b6b;

  display: block;
  max-width: 24rem;
}

.rkpsl__pane {
  display: flex;
  flex-direction: column;
  gap: var(--rkpsl-gap);
}

.rkpsl__pane[hidden] {
  display: none;
}

.rkpsl__label {
  font-weight: 600;
  margin: 0;
}

.rkpsl__hint {
  margin: 0;
  color: var(--rkpsl-muted);
}

.rkpsl__input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rkpsl-border);
  border-radius: var(--rkpsl-radius);
  font: inherit;
  /* The number and the code are always Latin digits read left to right, even
     on a Persian page, so they are forced LTR rather than inheriting the
     paragraph direction — otherwise a partially typed number visually
     reorders as the shopper types it. */
  direction: ltr;
  text-align: left;
}

.rkpsl__input--code {
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 1.25rem;
}

.rkpsl__submit {
  align-self: flex-start;
}

.rkpsl__actions {
  display: flex;
  align-items: center;
  gap: var(--rkpsl-gap);
  flex-wrap: wrap;
}

.rkpsl__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.rkpsl__link[hidden] {
  display: none;
}

.rkpsl__timer {
  color: var(--rkpsl-muted);
  font-variant-numeric: tabular-nums;
}

.rkpsl__message {
  margin: 0;
  min-height: 1.25em;
}

.rkpsl__message[data-tone='error'] { color: var(--rkpsl-error); }
.rkpsl__message[data-tone='success'] { color: var(--rkpsl-success); }
.rkpsl__message[data-tone='notice'] { color: var(--rkpsl-notice); }

.rkpsl__submit[disabled],
.rkpsl__link[disabled] {
  opacity: 0.6;
  cursor: default;
}

.rkpsl-checkout__intro {
  margin-bottom: 1rem;
}

/* The widget is narrow by design on wide screens, but must fill a phone. */
@media (max-width: 480px) {
  .rkpsl { max-width: none; }
  .rkpsl__submit { align-self: stretch; }
}

/* ---- shared by every skin ---------------------------------------------- */

/* Step changes: the old pane fades out, the new one slides in. login.js adds
   these classes; a skin can restyle them but does not have to. */
.rkpsl__pane--leave {
  animation: rkpsl-leave 0.16s ease-in forwards;
  pointer-events: none;
}

.rkpsl__pane--enter {
  animation: rkpsl-enter 0.24s ease-out;
}

@keyframes rkpsl-leave {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes rkpsl-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* A request in flight: a small spinner in the button that sent it. */
.rkpsl__submit[aria-busy='true']::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.5em;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: rkpsl-spin 0.7s linear infinite;
}

@keyframes rkpsl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rkpsl__pane--leave,
  .rkpsl__pane--enter { animation: none; }
  .rkpsl__submit[aria-busy='true']::before { animation-duration: 2s; }
}