/* Reloadly Frontend Styles */
.reloadly-gift-cards { display: grid; gap: 20px; }
.reloadly-cols-2 { grid-template-columns: repeat(2, 1fr); }
.reloadly-cols-3 { grid-template-columns: repeat(3, 1fr); }
.reloadly-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .reloadly-cols-3, .reloadly-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .reloadly-cols-2, .reloadly-cols-3, .reloadly-cols-4 { grid-template-columns: 1fr; }
}

.reloadly-card-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    background: #fff;
}
.reloadly-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.reloadly-card-img img { width:100%; height:160px; object-fit:cover; }
.reloadly-card-body { padding: 14px; }
.reloadly-card-title { margin:0 0 6px; font-size:15px; }

.reloadly-brand {
    display:inline-block; background:#ede9fe; color:#5b21b6;
    font-size:11px; padding:2px 8px; border-radius:99px; margin-right:4px;
}
.reloadly-country-badge {
    display:inline-block; background:#e0f2fe; color:#0369a1;
    font-size:11px; padding:2px 8px; border-radius:99px;
}
.reloadly-denoms { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.reloadly-denom {
    background:#f3f4f6; border:1px solid #d1d5db;
    padding:3px 10px; border-radius:6px; font-size:12px; cursor:pointer;
}
.reloadly-denom:hover { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.reloadly-range { font-size:13px; color:#6b7280; margin:6px 0; }
.reloadly-price { font-weight:700; font-size:18px; color:#7c3aed; margin:8px 0; }
.reloadly-add-to-cart { width:100%; text-align:center; display:block; }

/* Checkout fields */
.reloadly-checkout-section {
    background: linear-gradient(135deg,#ede9fe,#dbeafe);
    border: 1px solid #c4b5fd;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.reloadly-checkout-section h3 { margin-top:0; color:#5b21b6; }
.reloadly-checkout-section h4 { margin:12px 0 6px; }

/* Top-up widget */
.reloadly-topup-form {
    background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    padding:24px; max-width:480px;
}
.reloadly-topup-form h3 { margin-top:0; color:#5b21b6; }
.reloadly-form-group { margin-bottom:16px; }
.reloadly-form-group label { display:block; font-weight:600; margin-bottom:6px; }
.reloadly-form-group select,
.reloadly-form-group input[type=tel] {
    width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; font-size:15px;
}
.reloadly-phone-row { display:flex; gap:8px; }
.reloadly-phone-row input { flex:1; }
.reloadly-amounts-grid { display:flex; flex-wrap:wrap; gap:8px; }
.reloadly-amount-btn {
    background:#f3f4f6; border:2px solid #d1d5db;
    padding:8px 16px; border-radius:8px; cursor:pointer; font-weight:600;
}
.reloadly-amount-btn.selected { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.reloadly-operator-tag {
    background:#d1fae5; color:#065f46;
    padding:8px 14px; border-radius:8px; font-weight:600; display:inline-block;
}
.reloadly-checkout-btn { margin-top:12px; display:block; text-align:center; }
.reloadly-error { color:#dc2626; background:#fee2e2; padding:10px; border-radius:8px; }
.reloadly-spinner {
    display:inline-block; width:16px; height:16px;
    border:2px solid #e5e7eb; border-top-color:#7c3aed;
    border-radius:50%; animation:rl-spin .6s linear infinite;
}
@keyframes rl-spin { to { transform:rotate(360deg); } }

/* Balance widget */
.reloadly-balance-widget {
    background:#ede9fe; border:1px solid #c4b5fd; border-radius:8px;
    padding:14px 18px; display:inline-block;
}
.reloadly-balance-widget h4 { margin:0 0 8px; color:#5b21b6; }