/*
 * QrCheckout shared payment-page styles.
 * Lifted from the Vercel/Next.js prototype (wero-payconiq), originally
 * authored as Tailwind utilities. Hand-converted here because this project
 * does not have a Tailwind build step.
 *
 * Both _LayoutWero.cshtml and _LayoutPayconiq.cshtml reference this file.
 * The brand-specific bits (which logos appear, h1/button copy) are NOT here —
 * they live in the layouts and the page itself.
 */

/* ---------- Fonts ------------------------------------------------------- */

@font-face {
  font-display: swap;
  font-family: "GT Walsheim Wero";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/GT-Walsheim-wero-Regular.B6B2d_Jf.woff2") format("woff2"),
       url("/fonts/GT-Walsheim-wero-Regular.CNk_0lnx.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "GT Walsheim Wero";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/GT-Walsheim-wero-Medium.R-EbgYmp.woff2") format("woff2"),
       url("/fonts/GT-Walsheim-wero-Medium.B1mWTHPe.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "GT Walsheim Wero";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/GT-Walsheim-wero-Black.B7aObPLX.woff2") format("woff2"),
       url("/fonts/GT-Walsheim-wero-Black.D6lOF19Y.woff") format("woff");
}

/* ---------- Tokens ------------------------------------------------------ */

:root {
  --page-bg: #F7F7F7;
  --ink: #1C1C1C;
  --ink-muted: #3D3A45;
  --border: #1D1C1C;
  --card-bg: #fff48d;        /* pale yellow */
  --beneficiary-bg: rgba(255, 255, 255, 0.7);
  --input-bg: #f9fafb;

  --font-sans: "GT Walsheim Wero", ui-sans-serif, system-ui, -apple-system,
               blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
}

/* ---------- Reset / base ------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
}
p { margin: 0; }

img, svg { display: block; max-width: 100%; height: auto; }

/* ---------- Page layout ------------------------------------------------- */

.page {
  min-height: 100dvh;
  background: var(--page-bg);
  color: var(--ink);
}

.page-main {
  margin-inline: auto;
  display: flex;
  min-height: 100dvh;
  width: 100%;
  max-width: 42rem;     /* tailwind max-w-2xl */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;   /* py-8 px-4 */
}

@media (min-width: 640px) {
  .page-main { padding: 2.5rem 1.5rem; } /* sm:py-10 sm:px-6 */
}

/* ---------- Logo header ------------------------------------------------- */

.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  width: 100%;
}

.logo-row .logo-arrow {
  color: rgba(28, 28, 28, 0.4);
  flex-shrink: 0;
}

.logo-row .logo-payconiq { width: 160px; height: 48px; }
.logo-row .logo-wero-secondary { width: 75px;  height: 26px; margin-inline: 0.75rem; }
.logo-row .logo-wero-primary   { width: 100px; height: 35px; }

@media (min-width: 640px) {
  .logo-row .logo-payconiq        { width: 212px; height: 64px; }
  .logo-row .logo-wero-secondary  { margin-inline: 1.25rem; }
}

.logo-row.center { justify-content: center; }

/* ---------- Yellow card ------------------------------------------------- */

.pay-card {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  padding: 1.5rem;          /* p-6 */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;             /* space-y-5 */
}

@media (min-width: 640px) {
  .pay-card { padding: 2.5rem; }   /* sm:p-10 */
}

.pay-card .headline { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.25rem; }
.pay-card .headline h1 {
  font-size: 1.875rem;        /* text-3xl */
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pay-card .headline p {
  font-size: 1rem;            /* text-base */
  line-height: 1.375;
  letter-spacing: -0.02em;
  color: rgba(28, 28, 28, 0.8);
}

@media (min-width: 640px) {
  .pay-card .headline h1 { font-size: 2.25rem; }      /* sm:text-4xl */
  .pay-card .headline p  { font-size: 1.125rem; }     /* sm:text-lg */
}

.pay-card .body {
  border-top: 1px solid rgba(29, 28, 28, 0.2);
  padding-top: 1.25rem;        /* pt-5 */
  display: flex;
  flex-direction: column;
  gap: 1rem;                   /* space-y-4 */
}

.pay-card .body h2 {
  font-size: 1.25rem;          /* text-xl */
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (min-width: 640px) {
  .pay-card .body h2 { font-size: 1.5rem; }   /* sm:text-2xl */
}

/* ---------- Beneficiary card ------------------------------------------- */

.beneficiary-card {
  border: 1px solid var(--border);
  background: var(--beneficiary-bg);
  padding: 1rem;               /* p-4 */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                /* space-y-3 */
}

.beneficiary-card .field { display: flex; flex-direction: column; gap: 0.125rem; }
.beneficiary-card .field-label {
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  color: var(--ink-muted);
}
.beneficiary-card .field-value {
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.beneficiary-card .field-value.small { font-size: 0.875rem; line-height: 1.375; }

/* ---------- Form / amount input ---------------------------------------- */

.pay-form { display: flex; flex-direction: column; gap: 1.25rem; }

.amount-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--input-bg);
  padding: 0.75rem 1rem;       /* py-3 px-4 */
  border: 1px solid var(--border);
}

.amount-input .currency {
  font-size: 1.125rem;
  color: rgba(28, 28, 28, 0.5);
}

.amount-input input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.amount-input input::placeholder { color: rgba(28, 28, 28, 0.3); }

/* Keyboard focus indicator for the amount input. `outline: none` above strips
   the browser default; `:focus-visible` puts it back for keyboard navigation
   only (mouse clicks don't trigger it). Required for WCAG 2.1 AA. */
.amount-input:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- Submit button ---------------------------------------------- */

.pay-submit {
  width: 100%;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: #ffffff;
  padding: 1rem 1rem;          /* py-4 */
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px var(--border);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.pay-submit:hover:not(:disabled) {
  box-shadow: 0 1px var(--border);
  transform: translateY(2px);
}

/* Keyboard focus indicator for the submit button. Same WCAG 2.1 AA rationale
   as the amount input above. `:focus-visible` so the ring only shows up for
   keyboard navigation, not mouse clicks. */
.pay-submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.pay-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 0 3px var(--border);
}