.checkout-workspace,
.order-summary {
  min-width: 0;
}

.inline-card-panel {
  display: grid;
  gap: 18px;
  margin: 4px 0 22px;
  padding: 22px;
  border: 1px solid #d8c6a3;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdfa 0%, #f8f3e9 100%);
  box-shadow: 0 18px 40px rgba(44, 34, 18, 0.06);
}

.inline-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.inline-card-heading > div:last-child {
  display: grid;
  gap: 4px;
}

.inline-card-heading strong {
  font-size: 1.08rem;
}

.inline-card-heading small { color: var(--muted); }

.inline-card-mark {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bx-success-bg);
  color: var(--bx-success);
  font-weight: 900;
}

.inline-card-panel [data-card-fields] {
  display: grid;
  gap: 16px;
}

.inline-card-panel .full { width: 100%; }

.inline-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.inline-card-panel .field input,
.inline-card-panel .field textarea {
  min-height: 58px;
  border-radius: 14px;
  border-color: var(--bx-control-line);
  background: var(--bx-bg2);
  color: var(--bx-text);
}

.inline-card-panel .field input::placeholder {
  color: var(--bx-muted);
  opacity: 1;
}

.inline-card-panel .field input:focus,
.inline-card-panel .field textarea:focus {
  border-color: var(--bx-focus);
  box-shadow: none;
}

/* Keep the shared floating action away from active payment fields. */
body:has(.inline-card-panel:focus-within) .brox-scroll-top[data-visible="true"] {
  visibility: hidden;
  pointer-events: none;
}

.inline-masked-card {
  display: grid;
  gap: 5px;
  padding: 18px;
  border-radius: 16px;
  background: radial-gradient(circle at top left, #272316 0%, #171611 55%, #090909 100%);
  color: #fff;
  box-shadow: 0 20px 34px rgba(0,0,0,.18);
}

.inline-masked-card span,
.inline-masked-card small { color: #d9d1c2; }
.inline-masked-card strong { font-size: 1.25rem; letter-spacing: .12em; }

.inline-card-message {
  padding: 13px 15px;
  border-radius: 12px;
  background: #fbe8e8;
  border: 1px solid #efcaca;
  color: #842727;
  font-weight: 600;
}

html.web-dark .inline-card-panel {
  border-color: var(--line);
  background: var(--bx-panel2);
}

html.web-dark .inline-masked-card {
  border: 1px solid var(--line);
  background: #101216;
}

html.web-dark .inline-card-message {
  background: #351c1c;
  color: #ffc0c0;
}

@media (max-width: 620px) {
  .inline-card-panel { padding: 16px; }
  .inline-card-grid { grid-template-columns: 1fr 1fr; }
  .inline-card-grid .field:last-child { grid-column: 1 / -1; }
}

.card-number-wrap,.cvv-wrap{position:relative}.card-number-wrap input{padding-right:112px!important}.detected-card-brand{position:absolute;right:12px;top:50%;transform:translateY(-50%);min-width:74px;text-align:center;font-size:.78rem;font-weight:900;letter-spacing:.02em;color:var(--bx-text)}.detected-card-brand[data-brand="visa"]{font-style:italic;font-size:.95rem}.cvv-wrap input{padding-right:48px!important}.cvv-hint{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--bx-panel2);color:var(--bx-muted);font-size:.78rem;font-weight:900;cursor:help}
@media(max-width:620px){.card-number-wrap input{padding-right:88px!important}.detected-card-brand{min-width:58px;font-size:.7rem}}