/* *****************************************************

    ** Custom Stylesheet special styles for 3.7 version **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Billing cycle buttons */
.billingcycle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.billingcycle-card {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: inherit;
    padding: 14px 16px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
}
.billingcycle-card:hover { border-color: rgba(255,255,255,0.35); transform: translateY(-1px); }
.billingcycle-card.active { box-shadow: 0 0 0 2px #4da3ff inset; border-color: #4da3ff; }
.billingcycle-card .billingcycle-price { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.billingcycle-card .billingcycle-period { font-size: 13px; opacity: .8; margin-bottom: 8px; }
.billingcycle-card .billingcycle-discount { font-size: 13px; font-weight: 600; color: #b8ffd2; opacity: .9; }