/**
 * Level Description Styles
 * For Pro and Free membership descriptions on checkout pages, sidebars, etc.
 *
 * Enqueue this in functions.php or include via Customizer > Additional CSS
 */

/* ==========================================================================
   PRO LEVEL DESCRIPTION
   ========================================================================== */

.level-desc-pro {
    background: linear-gradient(135deg, #fffdf8 0%, #fff9eb 100%);
    border: 2px solid #d4a853;
    border-radius: 16px;
    padding: 28px;
    position: relative;
    max-width: 420px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.level-desc-pro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #d4a853 0%, #e8c068 50%, #d4a853 100%);
    border-radius: 14px 14px 0 0;
}

.level-desc-pro-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.level-desc-pro-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #d4a853 0%, #b8923d 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.3);
}

.level-desc-pro-icon i {
    color: white;
    font-size: 20px;
}

.level-desc-pro-title {
    flex: 1;
}

.level-desc-pro-title h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a472a;
}

.level-desc-pro-title .price-tag {
    font-size: 0.9rem;
    color: #b8923d;
    font-weight: 600;
}

.level-desc-pro-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.level-desc-pro-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: #444;
    border-bottom: 1px solid rgba(212, 168, 83, 0.15);
}

.level-desc-pro-features li:last-child {
    border-bottom: none;
}

.level-desc-pro-features li i {
    color: #d4a853;
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.level-desc-pro-footer {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px dashed rgba(212, 168, 83, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6b5d3e;
}

.level-desc-pro-footer i {
    color: #4CAF50;
}

/* Pro Compact Variant */
.level-desc-pro.compact {
    padding: 20px;
}

.level-desc-pro.compact .level-desc-pro-icon {
    width: 40px;
    height: 40px;
}

.level-desc-pro.compact .level-desc-pro-title h3 {
    font-size: 1.1rem;
}

.level-desc-pro.compact .level-desc-pro-features li {
    padding: 6px 0;
    font-size: 0.85rem;
}


/* ==========================================================================
   FREE LEVEL DESCRIPTION
   ========================================================================== */

.level-desc-free {
    background: linear-gradient(135deg, #f8faf8 0%, #eef5ee 100%);
    border: 2px solid #c8e6c9;
    border-radius: 16px;
    padding: 28px;
    position: relative;
    max-width: 420px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.level-desc-free::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4CAF50 0%, #66BB6A 50%, #4CAF50 100%);
    border-radius: 14px 14px 0 0;
}

.level-desc-free-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.level-desc-free-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4CAF50 0%, #43A047 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
}

.level-desc-free-icon i {
    color: white;
    font-size: 20px;
}

.level-desc-free-title {
    flex: 1;
}

.level-desc-free-title h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a472a;
}

.level-desc-free-title .price-tag {
    font-size: 0.9rem;
    color: #4CAF50;
    font-weight: 600;
}

.level-desc-free-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.level-desc-free-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: #444;
    border-bottom: 1px solid rgba(76, 175, 80, 0.12);
}

.level-desc-free-features li:last-child {
    border-bottom: none;
}

.level-desc-free-features li i {
    color: #4CAF50;
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.level-desc-free-footer {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px dashed rgba(76, 175, 80, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #5a6d5a;
}

.level-desc-free-footer i {
    color: #d4a853;
}

.level-desc-free-footer a {
    color: #b8923d;
    font-weight: 600;
    text-decoration: none;
}

.level-desc-free-footer a:hover {
    text-decoration: underline;
}

/* Free Compact Variant */
.level-desc-free.compact {
    padding: 20px;
}

.level-desc-free.compact .level-desc-free-icon {
    width: 40px;
    height: 40px;
}

.level-desc-free.compact .level-desc-free-title h3 {
    font-size: 1.1rem;
}

.level-desc-free.compact .level-desc-free-features li {
    padding: 6px 0;
    font-size: 0.85rem;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .level-desc-pro,
    .level-desc-free {
        padding: 22px 18px;
        max-width: 100%;
    }

    .level-desc-pro-icon,
    .level-desc-free-icon {
        width: 42px;
        height: 42px;
    }

    .level-desc-pro-title h3,
    .level-desc-free-title h3 {
        font-size: 1.15rem;
    }

    .level-desc-pro-features li,
    .level-desc-free-features li {
        font-size: 0.85rem;
    }
}