/* ZullPay extra styles */

html { scroll-behavior: smooth; }

.bg-grid {
    background-image:
      radial-gradient(rgba(236,72,153,0.15) 1px, transparent 1px),
      radial-gradient(rgba(244,63,94,0.10) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px;
    background-position: 0 0, 12px 12px;
}

.shadow-brand-soft {
    box-shadow: 0 12px 40px -10px rgba(236, 72, 153, 0.25);
}

.btn-primary {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    color: #fff;
    padding: .65rem 1.25rem;
    border-radius: 1rem;
    font-weight: 700;
    box-shadow: 0 12px 30px -10px rgba(236, 72, 153, 0.45);
    transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -10px rgba(236, 72, 153, 0.5); }

.card {
    background: #fff;
    border: 1px solid #fce7f3;
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 8px 24px -16px rgba(236,72,153,.25);
}

.input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: .65rem .9rem;
    border: 1px solid #fbcfe8;
    border-radius: .9rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
textarea.input {
    word-break: break-all;
    overflow-wrap: anywhere;
    resize: vertical;
}
.input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236,72,153,.18);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

table.zp { width: 100%; border-collapse: separate; border-spacing: 0; }
table.zp thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; padding: .75rem 1rem; text-align: left; background: #fff7fa; }
table.zp tbody td { padding: .85rem 1rem; border-top: 1px solid #fce7f3; font-size: .875rem; }
table.zp tbody tr:hover { background: #fff5f8; }

.spinner {
    border: 3px solid #fce7f3;
    border-top-color: #ec4899;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.glow-text {
    background: linear-gradient(135deg, #ec4899, #f43f5e, #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}