/* ==========================================================================
   Yakupbaba – Premium in-store transaction experience
   Dark luxury theme • clean glassmorphism • gold glow • mobile-first flow
   ========================================================================== */

/* ------------------------------ CSS Reset -------------------------------- */
:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }
input, textarea { border: 0; outline: none; }
::selection { background: rgba(212,175,55,.26); color: #fff; }

/* ------------------------------ Theme ------------------------------------ */
:root{
  --black: #050505;
  --bg: #0b0b0b;
  --anth: #111111;
  --gray: #1a1a1a;
  --white: #F5F1E8;
  --off: #F5F1E8;
  --muted: rgba(245,241,232,.72);
  --muted2: rgba(245,241,232,.55);
  --gold: #D4AF37;
  --gold-soft: rgba(212,175,55,.18);
  --gold-strong: rgba(212,175,55,.34);
  --shadow-soft: 0 16px 50px rgba(0,0,0,.28);
  --shadow-xl: 0 38px 140px rgba(0,0,0,.48);
  --blur-strong: blur(22px);
  --blur: blur(16px);
  --ease: cubic-bezier(.2,.9,.2,1);

  /* Compact in-store UI */
  --header-pad-y: 10px;
  --page-pad-y: 16px;
  --control-h: 52px;
  --field-gap: 11px;
  --glass-pad: 22px;
  --radius-card: 26px;
}

/* ------------------------------ Base ------------------------------------- */
body{
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  font-size: 15px;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.16), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.05), transparent 18%),
    linear-gradient(180deg, #050505 0%, #111111 100%);
  color: var(--off);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

.container{
  width: min(1080px, calc(100% - 28px));
  margin-inline: auto;
}

.customer-app{
  line-height: 1.45;
}

/* ------------------------------ Motion ----------------------------------- */
@keyframes fadeInUp{
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatGlow{
  0%,100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-2px); filter: brightness(1.02); }
}
@keyframes toastIn{
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.animate-in{ animation: fadeInUp 580ms var(--ease) both; }

/* ------------------------------ Header ----------------------------------- */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,11,11,.58);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: var(--blur);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
}

.header--compact .header__inner{
  padding: var(--header-pad-y) 0;
}

.header--compact .brand{
  gap: 10px;
}

.header--compact .brand__mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(212,175,55,.08);
}

.header--compact .brand__name{
  font-size: .98rem;
}

.header--compact .brand__tagline{
  display: none;
}

.header--compact .lang{
  padding: 4px;
  gap: 4px;
}

.header--compact .lang__pill{
  height: 32px;
  min-width: 44px;
  padding: 0 11px;
  font-size: .82rem;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand__mark{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.24), transparent 56%),
    linear-gradient(135deg, rgba(212,175,55,.98), rgba(212,175,55,.22));
  border: 1px solid rgba(212,175,55,.32);
  box-shadow: 0 24px 80px rgba(212,175,55,.10);
  flex-shrink: 0;
}

.brand__mark--image{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  padding: 4px;
}

.brand__mark--image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.brand__mark--icon{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #0a0a0a;
}

.header--compact .brand__mark--image,
.header--compact .brand__mark--icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.lang-gate__brand .brand__mark--image,
.lang-gate__brand .brand__mark--icon{
  width: 36px;
  height: 36px;
}
.brand__name{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--white);
  line-height: 1.08;
}
.brand__tagline{
  font-size: .92rem;
  color: rgba(245,241,232,.66);
  margin-top: 2px;
}

.lang{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.lang--scroll{
  max-width: min(52vw, 320px);
  padding: 4px;
}

.lang__track{
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
}

.lang__track::-webkit-scrollbar{
  display: none;
}

.lang__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 38px;
  min-width: 46px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(245,241,232,.78);
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}

.lang__pill-flag{
  font-size: .95rem;
  line-height: 1;
}

.lang__pill-code{
  font-size: .74rem;
  letter-spacing: .06em;
}

.header--compact .lang--scroll{
  max-width: min(58vw, 280px);
}

.header--compact .lang__pill{
  height: 32px;
  min-width: 42px;
  padding: 0 8px;
}

.lang__pill:hover{ transform: translateY(-1px); }
.lang__pill.is-active{
  color: #0a0a0a;
  background: linear-gradient(135deg, rgba(212,175,55,.96), rgba(212,175,55,.60));
  box-shadow: 0 18px 55px rgba(212,175,55,.14);
}

/* ------------------------------ Language gate ---------------------------- */
.lang-gate-body{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lang-gate{
  position: relative;
  width: min(560px, 100%);
  margin: auto;
}

.lang-gate__glow{
  position: absolute;
  inset: -30% -15%;
  background:
    radial-gradient(circle at 50% 30%, rgba(212,175,55,.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.05), transparent 45%);
  pointer-events: none;
}

.lang-gate__card{
  position: relative;
  padding: 24px 22px 20px;
  border-radius: 22px;
  background: rgba(17,17,17,.72);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-xl);
  backdrop-filter: var(--blur-strong);
  text-align: center;
}

.lang-gate__brand{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.lang-gate__brand .brand__mark{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex-shrink: 0;
}

.lang-gate__brand .brand__name{
  font-size: 1rem;
}

.lang-gate__brand .brand__tagline{
  font-size: .72rem;
  margin-top: 1px;
}

.lang-gate__brand .brand__name{
  text-align: left;
}

.lang-gate__brand .brand__tagline{
  text-align: left;
}

.lang-gate__head{
  margin-bottom: 16px;
}

.lang-gate__icon{
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1;
}

.lang-gate__title{
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  background: linear-gradient(135deg, #fff 0%, rgba(245,241,232,.9) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lang-gate__subtitle{
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted);
}

.lang-gate__choices{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.lang-choice{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 104px;
  padding: 12px 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}

.lang-choice:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.08);
  box-shadow: 0 22px 60px rgba(212,175,55,.12);
}

.lang-choice__flag{
  font-size: 1.55rem;
  line-height: 1;
}

.lang-choice__label{
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.lang-choice__go{
  margin-top: 2px;
  font-size: .68rem;
  line-height: 1.3;
  color: var(--muted2);
}

.lang-gate__hint{
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(245,241,232,.42);
}

@media (max-width: 520px){
  .lang-gate__choices{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px){
  .lang-gate__card{
    padding: 20px 16px 18px;
  }
  .lang-choice{
    min-height: 96px;
  }
  .lang-choice__label{
    font-size: .86rem;
  }
}

/* ------------------------------ RTL (Arabic) ----------------------------- */
.customer-app--rtl,
[dir="rtl"] .customer-app{
  text-align: right;
}

[dir="rtl"] .brand{
  flex-direction: row-reverse;
}

[dir="rtl"] .brand__text,
[dir="rtl"] .lang-gate__brand .brand__name,
[dir="rtl"] .lang-gate__brand .brand__tagline{
  text-align: right;
}

[dir="rtl"] .label{
  flex-direction: row-reverse;
}

[dir="rtl"] .iban-row{
  flex-direction: row-reverse;
}

[dir="rtl"] .header__inner{
  flex-direction: row-reverse;
}

[dir="rtl"] .payment-card .check{
  right: auto;
  left: 20px;
}

[dir="rtl"] .header--compact .payment-card .check{
  left: 16px;
}

@media (prefers-reduced-motion: reduce){
  .animate-in{ animation: none; }
  .lang-gate__glow{ animation: none; }
}

/* ------------------------------ Layout ----------------------------------- */
.customer-app .page{
  padding: var(--page-pad-y) 0 28px;
}

.page{ padding: 42px 0 56px; }
.layout{
  display:grid;
  grid-template-columns: minmax(240px, 34%) minmax(0, 66%);
  gap: 22px;
  align-items: start;
}

.left{
  display:grid;
  gap: 16px;
  padding-top: 0;
}

.customer-app .left__info{
  display: none;
}

.left__info{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.left__eyebrow{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: rgba(245,241,232,.62);
}
.left__subtitle{
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(245,241,232,.78);
  max-width: 320px;
}

.visual-card{
  position: relative;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(19,19,19,.96), rgba(6,6,6,.96));
  box-shadow: var(--shadow-xl);
}
.visual-card__scene{
  position:absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,.08), transparent 12%),
    radial-gradient(circle at 82% 18%, rgba(212,175,55,.14), transparent 10%),
    radial-gradient(circle at 46% 60%, rgba(255,255,255,.06), transparent 12%),
    linear-gradient(160deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.visual-card__scene::before{
  content: '';
  position:absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.60));
}
.visual-card__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 15%, rgba(212,175,55,.08), transparent 24%),
              radial-gradient(circle at 70% 32%, rgba(255,255,255,.06), transparent 18%);
  pointer-events:none;
}
.visual-card__copy{
  position:absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.visual-card__eyebrow{
  margin: 0 0 12px;
  color: rgba(245,241,232,.72);
  font-size: .96rem;
  letter-spacing: .02em;
}
.visual-card__heading{
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.5px;
  font-weight: 800;
  color: #fff;
}

.card{
  position: sticky;
  top: 58px;
}

.customer-app .card{
  top: 52px;
}

.glass{
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: var(--blur-strong);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.glass::before{
  content:"";
  display:block;
  height: 6px;
  background: linear-gradient(90deg, rgba(212,175,55,.96), rgba(212,175,55,.22));
}
.glass__body{ padding: 42px; }

.customer-app .glass__body{
  padding: var(--glass-pad);
}

.form__title{
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.3px;
  color: rgba(255,255,255,.96);
}
.customer-app .form__title{
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.form__subtitle{
  margin: 0 0 24px;
  color: rgba(245,241,232,.68);
  line-height: 1.65;
  font-size: 1rem;
}

.customer-app .form__subtitle{
  margin-bottom: 14px;
  font-size: .88rem;
  line-height: 1.5;
}

.field{ margin-bottom: 18px; }
.customer-app .field{
  margin-bottom: var(--field-gap);
}
.label{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 650;
  color: rgba(245,241,232,.84);
  letter-spacing: .08px;
}
.customer-app .label{
  margin-bottom: 7px;
  font-size: .88rem;
}
.label__hint{
  font-size: .78rem;
  font-weight: 550;
  color: var(--muted2);
  letter-spacing: 0;
}
.control{
  height: 68px;
  width: 100%;
  border-radius: 22px;
  padding: 0 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: box-shadow 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
  appearance: none;
}

.customer-app .control{
  height: var(--control-h);
  border-radius: 16px;
  padding: 0 14px;
  font-size: .95rem;
}
.control::placeholder{ color: rgba(245,241,232,.40); }
.control:focus{
  border-color: rgba(212,175,55,.65);
  box-shadow:
    0 0 0 8px rgba(212,175,55,.10),
    0 20px 60px rgba(212,175,55,.08);
}
.error{
  margin-top: 10px;
  font-size: .95rem;
  color: rgba(255,150,150,.96);
  font-weight: 650;
}

.payment-options{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.payment-card{
  border-radius: 22px;
  padding: 18px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 90px rgba(0,0,0,.20);
  cursor: pointer;
  position: relative;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
  min-height: 118px;
}
.payment-card strong{
  font-size: .95rem;
}
.payment-card small{
  font-size: .72rem;
  line-height: 1.35;
}
.payment-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 100px rgba(0,0,0,.24);
}
.payment-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px; height:1px;
}
.payment-card .check{
  position:absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(245,241,232,.18);
  font-weight: 800;
  transition: transform 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.payment-card .icon{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}
.payment-card strong{
  display:block;
  font-weight: 800;
  letter-spacing: -.3px;
  color: rgba(255,255,255,.96);
  font-size: 1.05rem;
}
.payment-card small{
  display:block;
  margin-top: 8px;
  color: rgba(245,241,232,.64);
  line-height: 1.35;
}
.payment-card.selected,
.payment-card:has(input:checked){
  border-color: rgba(212,175,55,.72);
  background: rgba(212,175,55,.14);
  box-shadow:
    0 28px 100px rgba(212,175,55,.12),
    0 24px 90px rgba(0,0,0,.22);
  transform: translateY(-2px);
}
.payment-card.selected::after,
.payment-card:has(input:checked)::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 25% 25%, rgba(212,175,55,.18), transparent 40%);
  pointer-events:none;
}
.payment-card.selected .check,
.payment-card:has(input:checked) .check{
  border-color: rgba(212,175,55,.55);
  background: rgba(212,175,55,.18);
  color: #fff;
  transform: scale(1.04);
}

.btn-primary{
  width: 100%;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(212,175,55,.98), rgba(212,175,55,.62));
  color: #0a0a0a;
  font-weight: 700;
  letter-spacing: .35px;
  cursor: pointer;
  box-shadow: 0 30px 110px rgba(212,175,55,.14);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), filter 180ms var(--ease), opacity 180ms var(--ease);
  appearance: none;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 36px 125px rgba(212,175,55,.16);
  filter: brightness(1.02);
}
.btn-primary:active{
  transform: translateY(0);
}
.btn-primary:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.customer-app .btn-primary{
  height: 54px;
  border-radius: 16px;
  font-size: .95rem;
}

.customer-app .error{
  margin-top: 6px;
  font-size: .85rem;
}

.customer-app .glass::before{
  height: 4px;
}

/* ------------------------------ Social follow ---------------------------- */
.social-follow{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.social-follow__title{
  margin: 0 0 12px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,241,232,.62);
}

.social-follow__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.social-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}

.social-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.35);
  background: rgba(212,175,55,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}

.social-btn__icon{
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.social-btn__icon svg{
  display: block;
  color: #fff;
}

.social-btn--web .social-btn__icon svg{
  color: #111;
}

.social-btn__label{
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255,255,255,.94);
}

.social-btn--ig .social-btn__icon{
  background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af);
  color: #fff;
}

.social-btn--tiktok .social-btn__icon{
  background: linear-gradient(135deg, #25f4ee, #111 48%, #fe2c55);
  color: #fff;
}

.social-btn--web .social-btn__icon{
  background: linear-gradient(135deg, rgba(212,175,55,.95), rgba(212,175,55,.35));
  color: #111;
}

.social-btn--wa .social-btn__icon{
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
}

@media (min-width: 520px){
  .social-follow__grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .social-btn{
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 12px 8px;
    min-height: 72px;
  }
  .social-btn__label{
    font-size: .74rem;
  }
}

.result{
  border-radius: 34px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: var(--blur-strong);
  box-shadow: var(--shadow-xl);
  overflow:hidden;
  animation: fadeInUp 520ms var(--ease) both;
}
.result::before{
  content:"";
  display:block;
  height: 6px;
  background: linear-gradient(90deg, rgba(212,175,55,.96), rgba(212,175,55,.14));
}
.result__body{ padding: 42px; }
.result__icon{
  width: 58px;
  height: 58px;
  border-radius: 22px;
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.36);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 30px 120px rgba(212,175,55,.10);
  margin-bottom: 16px;
  animation: floatGlow 3.6s var(--ease) infinite;
}
.result__title{
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 820;
  letter-spacing: -.28px;
  color: rgba(255,255,255,.96);
}
.result__text{
  margin: 0;
  color: rgba(245,241,232,.72);
  line-height: 1.6;
  font-size: 1.05rem;
}
.result__notice{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,.28);
  background: rgba(212,175,55,.08);
  color: rgba(255,255,255,.9);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
}
.result-section{
  margin-top: 28px;
  padding-top: 8px;
}
.result-section__title{
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 750;
  color: rgba(255,255,255,.94);
}
.result-section__hint{
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: rgba(245,241,232,.65);
  line-height: 1.5;
}
.result--warning{
  border-color: rgba(212,175,55,.18);
  background: rgba(255,255,255,.05);
}

.iban-card{
  margin-top: 22px;
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(212,175,55,.38);
  background: rgba(212,175,55,.10);
}
.iban-holder-block{
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(212,175,55,.22);
}
.iban-holder-label{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(245,241,232,.55);
  margin-bottom: 6px;
}
.iban-holder-name{
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,.96);
  line-height: 1.35;
}
.iban-row{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.iban{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 760;
  letter-spacing: .35px;
  color: rgba(255,255,255,.96);
  word-break: break-word;
  line-height: 1.3;
  font-size: 1.05rem;
}
.copy{
  height: 48px;
  border-radius: 20px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(245,241,232,.92);
  font-weight: 650;
  letter-spacing: .25px;
  cursor:pointer;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
  appearance: none;
}
.copy:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
}

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display:none;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: var(--blur);
  box-shadow: 0 36px 130px rgba(0,0,0,.55);
  color: rgba(245,241,232,.92);
  letter-spacing: .2px;
  font-weight: 600;
}
.toast.is-show{
  display:block;
  animation: toastIn 220ms var(--ease) both;
}

@media (max-width: 1024px){
  .layout{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .card{ position: static; }
  .glass__body, .result__body{ padding: 32px; }
  .customer-app .glass__body,
  .customer-app .result__body{
    padding: var(--glass-pad);
  }
  .customer-app .layout .card{
    order: -1;
  }
  .customer-app .layout .left{
    order: 1;
  }
  .customer-app .visual-card{
    min-height: 0;
    max-height: 200px;
  }
  .customer-app .visual-card__heading{
    font-size: 1.35rem;
  }
  .visual-card{ min-height: 280px; }
}

@media (max-width: 680px){
  .container{ width: min(1080px, calc(100% - 20px)); }
  .header__inner{ padding: 14px 0; }
  .header--compact .header__inner{
    padding: var(--header-pad-y) 0;
  }
  .brand__tagline{ display:none; }
  .customer-app .payment-options{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .customer-app .payment-card{
    padding: 12px 8px;
    min-height: 96px;
  }
  .payment-options{ grid-template-columns: 1fr; }
  .payment-card{ padding: 22px 20px; min-height: 128px; }
  .payment-card strong{ font-size: 1rem; }
  .payment-card small{ font-size: .78rem; }
  .glass__body, .result__body{ padding: 24px; }
  .customer-app .visual-card{
    display: none;
  }
  .visual-card__copy{ left: 16px; right: 16px; bottom: 18px; padding: 20px; }
  .visual-card__heading{ font-size: 2rem; }
}

@media (max-height: 780px){
  .customer-app .visual-card{
    display: none;
  }
  .customer-app .page{
    padding-top: 10px;
  }
}

@media (min-width: 1025px){
  .customer-app .layout{
    align-items: stretch;
  }
  .customer-app .visual-card{
    min-height: 0;
    height: 100%;
    max-height: min(520px, calc(100dvh - 120px));
  }
}