/* Page styles for card onboarding. Brand tokens/fonts come from ../../brand/ */

html {
  direction: rtl;
}

body {
  direction: rtl;
  font-family: var(--font-brand);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.45;
  text-align: right;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../../brand/patterns/bone-texture.svg");
  background-size: 900px;
  background-position: center top;
  opacity: 0.07;
}

.page {
  width: min(1080px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 2rem 0 3.5rem;
  overflow-x: clip;
}

.brand {
  direction: rtl;
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  text-decoration: none;
}

.logo-mark {
  width: min(200px, 58vw);
  height: auto;
  display: block;
}

h1 {
  margin: 0 0 0.65rem;
  color: var(--color-text);
  font-size: clamp(1.65rem, 5vw, 2.1rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.lede {
  margin: 0 auto;
  max-width: 26rem;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  direction: rtl;
  text-align: center;
}

.lede bdi,
.trust bdi {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Three trust facts under the lede: icon + one line each, start-aligned */
.trust {
  list-style: none;
  margin: 1rem auto 0;
  padding: 0;
  max-width: 26rem;
  direction: rtl;
  text-align: right;
}

/* Two even lines on a phone instead of a line plus one orphan word */
.trust li > span {
  text-wrap: balance;
}

.trust li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 0.55rem;
  color: var(--color-text-secondary);
  font-size: 0.98rem;
  line-height: 1.45;
}

.trust li:last-child {
  margin-bottom: 0;
}

.trust__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  fill: none;
  stroke: var(--midnight-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* ——— Layout: one centred scene at every width ——— */
.layout {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 0;
}

/* ——— Form bubble: the original blob artwork, traced and drawn by bubble.js ———
   bubble.js sets the bubble's padding so the content box sits on the blob's safe band and
   stretches only the blob's straight side runs when the content is taller than the art. */
.form-scene {
  position: relative;
  width: min(440px, 100%);
  direction: rtl;
  text-align: right;
  margin: 0;
}

.bubble {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.bubble__art {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  pointer-events: none;
}

.bubble__grass-front {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4; /* above the dog */
  width: 100%;
  pointer-events: none;
}

.bubble__inner {
  position: relative;
  z-index: 2;
  /* short states (done, invalid link) sit in the middle of the band, not at its top */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The lying dog rests on the grass, inside the blob's empty lower part (below the content band). */
.form-scene__dog {
  display: block;
  position: absolute;
  z-index: 3;
  left: 50%;
  /* bottom is set by bubble.js (DOG_BASE_ROW) */
  width: 58%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

#payment_form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.field {
  margin-bottom: 0.55rem;
  max-width: 100%;
}

label {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.95rem;
  direction: rtl;
  text-align: right;
  overflow-wrap: anywhere;
}

.meta {
  margin: 0 0 0.45rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.status {
  min-height: 0;
  margin: 0.55rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.status:empty {
  display: none;
  margin: 0;
}

.status.is-error {
  color: var(--color-danger);
}

.status.is-ok {
  color: var(--color-success);
}

/* Form is invisible (but laid out) until the link state is known */
#payment_form.is-pending {
  visibility: hidden;
}

/* Result / problem panels replace the form */
.notice {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-text);
  text-align: center;
}

.notice p {
  margin: 0;
}

.notice__title {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.3;
}

.notice__text {
  margin-top: 0.35rem !important;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.notice a {
  color: var(--color-accent);
  font-weight: 700;
}

.notice--ok .notice__title {
  color: var(--color-success);
}

.notice--ok .notice__title::before {
  content: "✓ ";
}

.notice--error .notice__title {
  color: var(--color-danger);
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

/* 44px tap target; the Tranzila iframe is centred inside */
.hf-box {
  display: flex;
  align-items: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 0.85rem;
  border: 1.5px solid rgba(27, 20, 100, 0.22);
  border-radius: 12px;
  background: var(--white);
  box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.hf-box iframe {
  display: block;
  width: 100%;
  background: transparent !important;
  max-height: 36px !important;
}

.hf-box:focus-within {
  border-color: var(--midnight-blue);
  box-shadow: 0 0 0 3px rgba(27, 20, 100, 0.14);
  background: var(--white);
}

.hf-box.hosted-fields-invalid {
  border-color: var(--color-danger-soft);
}

.hf-box.hosted-fields-valid {
  border-color: var(--midnight-blue);
}

.error {
  min-height: 0;
  margin-top: 0.15rem;
  color: var(--color-danger);
  font-size: 0.8rem;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  margin: 0.6rem auto 0;
  padding: 0.55rem 1.35rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--midnight-blue);
  color: var(--white);
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.cta__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: cta-spin 0.8s linear infinite;
}

.cta.is-busy .cta__spinner {
  display: inline-block;
}

.cta.is-busy {
  cursor: progress;
}

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

.cta:disabled {
  background: #2f3f78;
  color: rgba(255, 255, 255, 0.9);
  cursor: not-allowed;
}

.cta:not(:disabled):hover {
  background: var(--dark-slate-blue-2);
}

.cta:not(:disabled):active {
  transform: translateY(1px);
}

@media (max-width: 480px) {
  .lede {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.55;
  }

  .row {
    gap: 0.55rem;
  }

  .logo-mark {
    width: min(170px, 64vw);
  }

  .field {
    margin-bottom: 0.4rem;
  }

  label {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
  }

  .hf-box {
    padding: 0 0.7rem;
  }
}