/*
================================================================================
| ROOBUX - NEW DESIGN SYSTEM v3.0 | dashboard-packages.css (Desktop-Only)
================================================================================
| Styles for the new dashboard-packages.html page.
|
| MODIFICATIONS:
| - [FIX] Added border-only glow override to package cards.
| - [FIX] Reduced padding and font sizes in .package-card for a
|   more compact, smaller design as requested.
================================================================================
*/

/* --- 1. Balance Header Card --- */
.balance-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    position: relative;
    overflow: hidden;
}
.balance-header-card::before {
    display: none; /* No hover glow on this one */
}
.balance-info h4 {
    margin: 0 0 4px 0;
    color: var(--color-text-primary);
    font-size: 1.125rem;
}
.balance-info .balance-amount {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}
.balance-info .balance-note {
    margin: 4px 0 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}
.balance-action {
    flex-shrink: 0;
    margin-left: var(--space-lg);
}

/* --- 2. Investment Form Card --- */
.invest-form.card {
    padding: var(--space-xl);
    display: flex;
    gap: var(--space-xl);
}
.invest-form.card::before {
    display: none; /* No hover glow */
}
.invest-form-grid {
    flex: 1; /* Takes up 1 part */
    display: flex;
    flex-direction: column;
}
.invest-form-grid .btn {
    margin-top: auto; /* Pushes button to the bottom */
}
.invest-details {
    flex: 2; /* Takes up 2 parts */
    background: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}
.details-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-muted);
    font-weight: 500;
}
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}
.detail-item span {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}
.detail-item strong {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.detail-item .text-success { color: var(--color-success) !important; }
.detail-item .text-primary { color: var(--color-primary) !important; }

.form-error {
    color: var(--color-error);
    background: var(--color-error-light);
    border: 1px solid var(--color-error);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
    text-align: center;
    font-weight: 500;
    font-size: 0.9rem;
}

/* --- 3. Packages Grid (Dashboard Theme) --- */
.packages-grid-title {
    color: var(--color-text-primary);
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.package-card {
    /* Uses .card style from main.css */
    display: flex;
    flex-direction: column;
    padding: 0; /* Override .card padding */
    text-align: center;
    transition: all var(--transition-medium);
}

/* --- MODIFICATION: Added glow fix --- */
.package-card::before {
    display: none; /* Disable the background glow */
}
/* --- END MODIFICATION --- */

.package-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}
.package-card.popular {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}
.popular-badge {
    position: absolute;
    top: -1px;
    right: var(--space-xl);
    background: var(--color-primary);
    color: white;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 2;
}
.package-card-header {
    /* MODIFICATION: Reduced padding */
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}
.package-card-header h3 {
    /* MODIFICATION: Reduced font size */
    font-size: 1.5rem; 
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}
.price-range {
    font-size: 1rem; /* Reduced */
    color: var(--color-text-secondary);
}
.package-card-body {
    /* MODIFICATION: Reduced padding */
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.daily-return {
    /* MODIFICATION: Reduced font size */
    font-size: 2.75rem; 
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    line-height: 1;
    text-shadow: 0 0 15px var(--color-accent-glow);
}
.daily-return span {
    font-size: 1rem; /* Reduced */
    font-weight: 500;
    color: var(--color-text-secondary);
}
.total-return {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}
.package-card-body ul {
    list-style: none;
    padding: var(--space-lg) 0;
    margin: var(--space-lg) 0;
    border-top: 1px solid var(--color-border);
    flex-grow: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.package-card-body li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}
.package-card-body li::before {
    content: '✓';
    color: var(--color-success);
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}
.package-card-footer {
    /* MODIFICATION: Reduced padding */
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-main);
}
.package-card-footer .btn-invest {
    /* Green "Invest" button for this page */
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverted);
    font-weight: 700;
}
.package-card-footer .btn-invest:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text-inverted);
    box-shadow: var(--shadow-glow-accent);
}

/* --- 4. Confirmation Modal (re-using styles) --- */
.summary-panel {
    background: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
}
.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.summary-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-md) 0;
    border-bottom: 1px dashed var(--color-border);
    gap: var(--space-md);
}
.summary-list li:last-child {
    border-bottom: none;
}
.summary-list .label {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.summary-list .value {
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 1rem;
    text-align: right;
    word-break: break-all;
    flex-grow: 1;
}
.alert-warning {
    background-color: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
}