/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ── Subscription plan badge (navbar) ──────────────────────────────────── */
.nav-sub-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.nav-sub-badge:hover                  { opacity: 1; filter: brightness(1.15); }
.sub-badge-pro,      .sub-badge-pro:hover      { background: #007bff; color: #fff !important; }
.sub-badge-business, .sub-badge-business:hover { background: #1a1a2e; color: #fff !important; }
.sub-badge-free,     .sub-badge-free:hover     { background: #e0e0e0; color: #666 !important; }

/* ── Subscription page ─────────────────────────────────────────────────── */
.sub-no-plan {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}
.sub-no-plan h5 { margin: 16px 0 6px; color: #444; }
.sub-no-plan p  { margin-bottom: 20px; }

.sub-plan-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    height: 100%;
}
.sub-plan-header {
    padding: 24px 24px 24px;
    color: #fff;
}
.sub-plan-starter  .sub-plan-header { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); }
.sub-plan-pro      .sub-plan-header { background: linear-gradient(135deg, #007bff 0%, #0056d6 100%); }
.sub-plan-business .sub-plan-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
.sub-plan-name   { font-size: 0.85rem; font-weight: 600; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.sub-plan-price  { display: flex; align-items: flex-end; gap: 3px; line-height: 1; }
.sub-plan-currency { font-size: 1.1rem; font-weight: 700; padding-bottom: 4px; }
.sub-plan-amount   { font-size: 2.8rem; font-weight: 800; }
.sub-plan-cycle    { font-size: 0.8rem; opacity: 0.7; padding-bottom: 6px; }
.sub-plan-body     { background: #fff; padding: 20px 24px 24px; }
.sub-plan-row      { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.88rem; }
.sub-plan-row:last-of-type { border-bottom: none; }
.sub-plan-label    { color: #888; }
.sub-plan-val      { font-weight: 600; color: #333; }
.sub-plan-expiry-warn { margin-top: 10px; font-size: 0.8rem; color: #fd7e14; font-weight: 600; }
.sub-plan-price-row { display: flex; align-items: center; justify-content: space-between; }
@keyframes sub-btn-pulse { 0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 0 0 0 rgba(255,255,255,0.6); } 50% { box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 0 0 7px rgba(255,255,255,0); } }
.sub-plan-upgrade-btn { display: inline-block; padding: 8px 18px; background: #fff !important; color: #007bff !important; border: none; border-radius: 20px; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.3px; text-decoration: none !important; white-space: nowrap; animation: sub-btn-pulse 3s ease-in-out infinite; }
.sub-plan-upgrade-btn:hover { opacity: 0.88; color: #007bff !important; text-decoration: none !important; animation: none; box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.sub-plan-features { list-style: none; padding: 0; margin: 10px 0 0; }
.sub-plan-features li { font-size: 0.83rem; color: #555; padding: 4px 0; display: flex; align-items: center; gap: 7px; }
.sub-plan-features li.sub-feature-disabled { color: #bbb; }
.sub-feat-check { color: #28a745; font-weight: 700; font-size: 0.9rem; }

.sub-usage-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    height: 100%;
}
.sub-usage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin-bottom: 14px;
}
.sub-usage-nums { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.sub-usage-used { font-size: 2.2rem; font-weight: 800; color: #1a1a2e; line-height: 1; }
.sub-usage-sep  { font-size: 1.1rem; color: #ccc; }
.sub-usage-max  { font-size: 1.1rem; color: #888; }
.sub-usage-bar-wrap {
    background: #f0f0f0;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}
.sub-usage-bar  { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.sub-usage-pct  { font-size: 0.75rem; color: #aaa; }
.sub-usage-note { font-size: 0.78rem; color: #bbb; margin-top: 4px; }

/* Bootstrap modal-backdrop in fade (transitioning) state has opacity:0 but still
   intercepts all clicks. This prevents invisible backdrops from freezing the page. */
.modal-backdrop.fade:not(.show) {
    pointer-events: none;
}