/**
 * Login widget: shared styles.
 *
 * Scoped entirely under .rahkar-login 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.
 *
 * The properties themselves are no longer declared here. They arrive on :root
 * from the shop's design tokens (Settings > Design tokens), which every control
 * of this plugin and of the add-on shares — so the login panel, the date picker
 * and the back-in-stock dialog cannot drift apart. Each usage still carries the
 * shipped value as a var() fallback, so the panel is never unstyled.
 *
 */

.rahkar-login {
  display: block;
  color: var(--rahkar-ink, inherit);
  max-width: 24rem;
}

/* Sizes include padding and border, whatever the theme does. Woodmart sets
   this globally; a theme that does not — most block themes — would otherwise
   push every full-width field out past the edge of its card by its padding. */
.rahkar-login,
.rahkar-login *,
.rahkar-login *::before,
.rahkar-login *::after {
  box-sizing: border-box;
}

.rahkar-login input,
.rahkar-login button {
  max-width: 100%;
  margin: 0;
}

.rahkar-login__pane {
  display: flex;
  flex-direction: column;
  gap: var(--rahkar-gap, 0.75rem);
}

.rahkar-login__pane[hidden] {
  display: none;
}

.rahkar-login__label {
  font-weight: 600;
  margin: 0;
}

.rahkar-login__hint {
  margin: 0;
  color: var(--rahkar-muted, #6b6b6b);
}

.rahkar-login__input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rahkar-border, #d6d6d6);
  border-radius: var(--rahkar-radius, 6px);
  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;
}

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

.rahkar-login__submit {
  align-self: flex-start;
}

.rahkar-login__actions {
  display: flex;
  align-items: center;
  gap: var(--rahkar-gap, 0.75rem);
  flex-wrap: wrap;
}

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

.rahkar-login__link[hidden] {
  display: none;
}

.rahkar-login__timer {
  color: var(--rahkar-muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
}

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

.rahkar-login__message[data-tone='error'] { color: var(--rahkar-error, #c0392b); }
.rahkar-login__message[data-tone='success'] { color: var(--rahkar-success, #1e874b); }
.rahkar-login__message[data-tone='notice'] { color: var(--rahkar-notice, #8a6d1f); }

.rahkar-login__submit[disabled],
.rahkar-login__link[disabled] {
  opacity: 0.6;
  cursor: default;
}

.rahkar-login-checkout__intro {
  margin-bottom: 1rem;
}

/* The widget is narrow by design on wide screens, but must fill a phone. */
@media (max-width: 480px) {
  .rahkar-login { max-width: none; }
  .rahkar-login__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. */
.rahkar-login__pane--leave {
  animation: rahkar-leave 0.16s ease-in forwards;
  pointer-events: none;
}

.rahkar-login__pane--enter {
  animation: rahkar-enter 0.24s ease-out;
}

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

@keyframes rahkar-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. */
.rahkar-login__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: rahkar-spin 0.7s linear infinite;
}

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

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

/* Buttons that are links in the classic skin. */
.rahkar-login__actions .rahkar-login__link {
  font-size: 0.9em;
}

/* ---- the standalone login page ------------------------------------------ */

/* Without header and footer the form is the whole page: a centred column on a
   plain background, the store logo above and a way back below. */
.rahkar-loginpage {
  min-height: 100vh;
  margin: 0;
  padding: 3rem 1rem;
  box-sizing: border-box;
  background: var(--rahkar-surface, #fff);
  color: var(--rahkar-ink, inherit);
}

.rahkar-loginpage__inner {
  max-width: 26rem;
  margin: 0 auto;
}

.rahkar-loginpage__logo {
  display: block;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.rahkar-loginpage__logo img {
  max-height: 3rem;
  max-width: 100%;
  height: auto;
}

.rahkar-loginpage__home {
  display: block;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
}

.rahkar-loginpage__preview {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #fff7e0;
  color: #7a5b00;
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 480px) {
  .rahkar-loginpage { padding: 1.25rem 1rem; }
}