:root{
            --bg:#f6f7f8;
            --card:#f6f7f8;
            --text:#111827;
            --muted:#6b7280;
            --border:#e5e7eb;
            --accent:#111827;
            --warning:#f59e0b1a;
            --radius:16px;
            --shadow:0 8px 24px rgba(0,0,0,.06);
        }
        *{box-sizing:border-box}
        body{
            margin:0;
            background:white;
            color:var(--text);
            font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
            display:flex; justify-content:center; padding:32px;
        }
        .wrap{width:min(680px, 100%);}
        header{
            display:flex; align-items:center; justify-content:space-between;
            margin-bottom:18px;
        }
        /* PayID logo look */
        .brand{
            display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
        }
        .paid-btn {
            background-color: #4a3aff;
            color: #fff;
            width: 100%;
            margin-top: 20px;
            font-weight: 600;
            font-size: 18px;
            padding: 14px 28px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            transition: background-color 0.2s ease, transform 0.1s ease;
        }
        .paid-btn:hover {
            background-color: #3b2ed9;
        }
        .paid-btn:active {
            transform: translateY(1px);
        }
        .brand .mark{
            width:38px; height:38px; border-radius:10px; background:#111;
            display:grid; place-items:center; color:#fff;
        }
        .brand .mark svg{display:block}
        .brand .name{font-size:28px}
        .timer{
            font-weight:700; font-size:28px; letter-spacing:.5px;
            display: flex;
            flex-direction: column;
        }

        .card{
            background: var(--bg);
            background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
            padding:4px 18px; margin-bottom:18px;
        }
        .lead{color:var(--muted); margin:0 0 14px; font-size:17px}
        .fields{display:flex; flex-direction:column; gap:14px}
        .field{
           padding:14px 0;
            border-bottom:1px solid var(--border);
        }

        .field:last-child {
            border: none;
        }
        .field-row{
            display:flex; align-items:center; justify-content:space-between; gap:14px;
        }
        .label{font-size:16px; color:var(--muted); margin-bottom:4px}
        .value{font-weight:700; font-size:20px; word-break:break-all}
        .copy-btn, .copy-done{
            width:38px; height:38px; display:grid; place-items:center;
            cursor:pointer;
            border: none;
            background: transparent;
        }
    
        .copy-btn:hover{background:#f9fafb}
        .copy-btn:active{transform:translateY(1px)}

        .notice{
            padding:16px 8px; display:flex; align-items:flex-start;
            flex-direction: column;
            gap: 4px;
        }
        .notice .dot{
            min-width: 20px;
            height: 20px;
            color: white;
            font-size: 13px;
            border-radius:999px; display:grid; place-items:center;
            background:#f59e0b; border:1px solid #f59e0b66;
        }
        .notice strong{display:block; margin-bottom:2px}
        @media (max-width:460px){
            body{
                padding:15px;
            }
            .timer{font-size:24px}
            .value{font-size:20px}
            .card, .notice {
                border-radius: 8px;
            }
        }

        .timer-label {
            color: var(--muted);
            font-size: 16px;
            letter-spacing: 0;
        }

        #timer {
            text-align: right;
            font-size: 30px;
        }

        .notice-description {
            display: flex;
            gap: 8px;
                font-size: 19px;
        }

        .notice-icon {
            display: flex;
            gap: 8px;
        }

        .logo {
            width: 100px;
        }
        
        
        .loader, .loader:before, .loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}
.loader {
  color: #4a3aff;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
  40% { box-shadow: 0 2.5em 0 0 }
}

.step-main-form-container-loader {
        background: #00000059;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    height: 600px;
    max-height: 864px;
    max-width: 768px;
    margin: 40px auto 0;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

#page-loader-container .step-info-section-loader {
    background: transparent;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

#page-loader-container {
    background: #4a3aff;
    background: linear-gradient(
        120deg,
        #4a3aff 0%,
        #4a3aff 40%,
        #6d5fff 50%,
        #4a3aff 60%,
        #4a3aff 100%
    );

    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    z-index: 1;
    position: relative;
}

.field-pay-id, .field-amount {
    cursor: pointer;
}

#payment-done {
        font-size: 24px;
    min-height: 75px;
}