/* --- VARIABLES --- */
:root {
    --calc-pip-green: #58a809;
    --pip-light-bg: #f0f2f5;
    --pip-border: #cbd5e0;
}

/* --- CONTAINERS --- */
.pip-calc-section { 
    padding: 40px 15px; 
    background: var(--pip-light-bg); 
    font-family: Arial, sans-serif; 
}

.pip-calc-card { 
    background: #fff; 
    max-width: 1200px; 
    margin: 0 auto; 
    border-radius: 20px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    overflow: hidden; 
}

.pip-calc-header { 
    background: var(--pip-dark); 
    color: #fff; 
    padding: 5px; 
    text-align: center; 
}


.pip-table-container { padding: 5px 25px 15px 25px; }

/* --- GRID SYSTEM (6 COLUMNS) --- */
.pip-grid-header, 
.pip-grid-row {
    display: grid;
    /* Selection, Displays, Weeks, PIP Weeks, Unit Price, Saving % */
    grid-template-columns: 120px 1.2fr 1.2fr 1fr 1.2fr 1fr;
    gap: 15px;
    padding: 5px;
    align-items: start;
}


.pip-grid-header {
    border-bottom: 2px solid #eee;
    color: #111;    
    text-align: center;
}

.pip-grid-header .sub-label{
    font-weight: 100;
}

.pip-comparison-block { border-bottom: 1px solid #f0f2f5; padding: 3px 0; }
.pip-option-label { font-weight: 800; font-size: 1.3rem; color: var(--pip-dark); padding-top: 10px; }

/* --- INPUTS & OUTPUTS --- */
.pip-main-input, 
.pip-read-only-display {
    width: 100%; padding: 8px 0px; border: 2px solid var(--pip-border);
    border-radius: 10px; font-size: 1.4rem; font-weight: bold; box-sizing: border-box;
    text-align: center; display: block;
}

.pip-read-only-display { background: #edf2f7; border-color: transparent; color: #4a5568; }
.pip-volume-box { background: #f0fdf4 !important; border: 2px solid var(--calc-pip-green) !important; color: var(--calc-pip-green) !important; }

/* Dynamic Result Columns */
.pip-unit-green,
.pip-save-percent { 
    font-size: 1.6rem; 
    font-weight: 900;
    text-align: center;
    padding-top: 12px; 
}

.sub-label { display: block; font-size: 11px; color: #9aa0a6; text-transform: none; margin-top: 4px; }

.pip-range { width: 100%; cursor: pointer; accent-color: var(--calc-pip-green); margin: 12px 0 0 0; }

/* --- SUBMIT BUTTON --- */
.pip-submit-btn { 
    width: 100%; padding: 15px; border: none; border-radius: 12px; 
    background: var(--pip-purple); color: #fff; font-size: 1.5rem; font-weight: bold; 
    cursor: pointer; display: block; margin: 15px auto 0; transition: 0.2s;
}
.pip-submit-btn:hover { background: #600060; transform: translateY(-2px); }

/* --- RESPONSIVE --- */
@media (max-width: 950px) {
    .pip-grid-header { display: none; }
    .pip-grid-row { grid-template-columns: 1fr; text-align: center; }
    .pip-unit-green, .pip-save-percent { padding-top: 0; margin-bottom: 10px; }
}


.pip-calc-header {
    display: flex;
    flex-direction: column; /* Stacks on mobile */
    align-items: center;    
    text-align: center;
    padding: 20px;
    gap: 15px;
}

/* Keeps Title & Subtitle together */
.header-text-group {
    display: block; 
}

.payment-icons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.creditcard {
    height: 30px; /* Adjust to match your existing icons */
    width: auto;
}

/* PC Layout Switch - Keeps your original text sizes */
@media (min-width: 992px) {
    .pip-calc-header {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center; /* Centers icons vertically with the text block */
        text-align: left;
    }
    
    .header-payment {
        text-align: right;
    }

    .payment-icons {
        justify-content: flex-end;
    }
}