:root {
      --primary: #FECB37;
      --secondary: #6B052A;
      --text: #29232A;
      --white: #FFFFFF;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
    }

    .payment-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(30, 8, 17, 0.72);
      opacity: 1;
      visibility: visible;
      transition: opacity 180ms ease, visibility 180ms ease;
    }

    .payment-modal.is-closed {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .payment-modal__dialog {
      width: min(100%, 650px);
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      background: var(--white);
      border-top: 8px solid var(--primary);
      border-radius: 10px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
      transform: translateY(0);
      transition: transform 180ms ease;
    }

    .payment-modal.is-closed .payment-modal__dialog {
      transform: translateY(16px);
    }

    .payment-modal__header {
      padding: 28px 32px 22px;
      color: var(--white);
      background: var(--secondary);
    }

    .payment-modal__title {
    color: #FECB37;
      margin: 0 0 8px;
      font-size: clamp(1.6rem, 4vw, 2rem);
      line-height: 1.15;
    }

    .payment-modal__intro { margin: 0; line-height: 1.6; }

    .payment-modal__body { padding: 28px 32px 32px; }

    .payment-modal__section + .payment-modal__section {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid #E6DEE1;
    }

    .payment-modal__section h3 {
      margin: 0 0 10px;
      color: var(--secondary);
      font-size: 1.15rem;
      line-height: 1.4;
    }

    .payment-modal__section p { margin: 0; line-height: 1.65; }

    .payment-modal__button {
      display: block;
      width: 100%;
      margin-top: 28px;
      padding: 15px 24px;
      border: 2px solid var(--primary);
      border-radius: 6px;
      color: var(--secondary);
      background: var(--primary);
      font: inherit;
      font-size: 1.05rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
    }

    .payment-modal__button:hover,
    .payment-modal__button:focus-visible {
      color: var(--white);
      background: var(--secondary);
      border-color: var(--secondary);
    }

    .payment-modal__button:focus-visible {
      outline: 3px solid rgba(254, 203, 55, 0.5);
      outline-offset: 3px;
    }

    @media (max-width: 540px) {
      .payment-modal { padding: 16px; }
      .payment-modal__header,
      .payment-modal__body { padding: 24px 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .payment-modal,
      .payment-modal__dialog,
      .payment-modal__button { transition: none; }
    }