/* Ravel+ subscription page */

/*
 * Pricing cards use bright rank backgrounds in light mode.
 * Keep the dark-theme rendering untouched, but switch the foreground to
 * dark text and restore semantic status colours for better readability.
 */
body.lightmode .card-pricing.rank .card-title,
body.lightmode .card-pricing.rank .specification-list li .name-specification,
body.lightmode .card-pricing.rank .price,
body.lightmode .card-pricing.rank .card-price .text {
    color: #111213 !important;
}

body.lightmode .card-pricing.rank .specification-list li {
    border-bottom-color: rgba(17, 18, 19, 0.2) !important;
}

body.lightmode .card-pricing.rank .specification-list li .status-specification .green {
    color: #19733a !important;
}

body.lightmode .card-pricing.rank .specification-list li .status-specification .red {
    color: #b42318 !important;
}

body.lightmode .card-pricing.rank .btn-light {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #111213 !important;
}

.ravel-plus-dashboard .ravel-plus-eyebrow,
.ravel-plus-dashboard .ravel-plus-stat-label,
.ravel-plus-dashboard .ravel-plus-period-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
}

.ravel-plus-dashboard .ravel-plus-period-label {
    opacity: .82;
}

.ravel-plus-dashboard .ravel-plus-stat-card {
    min-height: 132px;
}

.ravel-plus-dashboard .ravel-plus-stat-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ravel-plus-dashboard .ravel-plus-stat-value {
    margin: .35rem 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
}

.ravel-plus-dashboard .ravel-plus-stat-value-small {
    font-size: 1.45rem;
}

.ravel-plus-dashboard .ravel-plus-stat-caption {
    font-size: .9rem;
    opacity: .72;
}

.ravel-plus-dashboard .ravel-plus-total-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 225, 122, .18);
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 214, 102, .10), transparent 34%),
        radial-gradient(circle at 88% 100%, rgba(142, 233, 255, .07), transparent 32%),
        rgba(255, 255, 255, .025);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 0 22px rgba(255, 214, 102, .05);
}

.ravel-plus-dashboard .ravel-plus-total-card::after {
    content: '';
    position: absolute;
    top: -70%;
    left: -25%;
    width: 35%;
    height: 240%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
    pointer-events: none;
}

.ravel-plus-dashboard .ravel-plus-total-values {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.ravel-plus-dashboard .ravel-plus-bonus--dashboard {
    margin-top: 0;
    padding: .5rem .85rem;
    font-size: 1.12rem;
    box-shadow: 0 0 18px rgba(255, 214, 102, .16);
}

.ravel-plus-dashboard .ravel-plus-history-note {
    max-width: 850px;
    font-size: .82rem;
    line-height: 1.45;
    opacity: .58;
}

.ravel-plus-dashboard .ravel-plus-history-table th,
.ravel-plus-dashboard .ravel-plus-history-table td {
    vertical-align: middle;
}

.ravel-plus-dashboard .ravel-plus-history-table th {
    border-top: 0;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.lightmode .ravel-plus-dashboard .ravel-plus-stat-card,
body.lightmode .ravel-plus-dashboard .ravel-plus-total-card,
body.lightmode .ravel-plus-dashboard .ravel-plus-history-card {
    color: #111213;
}

body.lightmode .ravel-plus-dashboard .ravel-plus-total-card {
    border-color: rgba(168, 112, 18, .24);
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 193, 56, .14), transparent 34%),
        radial-gradient(circle at 88% 100%, rgba(86, 181, 210, .10), transparent 32%),
        rgba(255, 255, 255, .76);
}

body.lightmode .ravel-plus-dashboard .text-muted {
    color: #5c6268 !important;
}