.lens-option { text-align:center; cursor:pointer; transition:transform 0.2s, opacity 0.2s; }
.lens-option:hover { transform:scale(1.05); }
.lens-option input { display:none; }
.lens-option input:checked + img { border:3px solid #4CAF50; }

.eyesight-btn {
    position: relative;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    background: #f9f9f9;
    transition: all 0.3s ease;
    text-align: center;
    color: #333;
    width: 150px;
}

.eyesight-btn:hover {
    border-color: #4CAF50;
    background: #e8f5e9;
}

.eyesight-btn input {
    display: none;
}

.eyesight-btn:has(input:checked) {
    border-color: white;
    background: black;
    color: #fff;
}

.eyesight-selection,
#lens-options,
#prescription-section .prescription-methods,
#enter-number-fields,
#upload-prescription {
    background: #f4f4f4;
    padding: 20px;
}

#lens-selection h3 {
    font-size: 18px;
    margin-bottom: 0px;
}

.lens-title {
    padding-bottom: 10px;
}

.lens-name {
    color: #242424;
    text-align: center;
    margin-bottom: 0px;
}

.lens-name span {
    color: #d15d14;
    display: block;
    font-weight: 600;
}

#lens-selection {
    margin-bottom: 10px;
}

.eyesight-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#lens-options {
    display: none;
    margin-top: 15px;
}

#prescription-section {
    display: none;
    margin-top: 20px;
}

#final-price {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #4CAF50;
    display: none;
}

.lens-images {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.lens-images img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

#enter-number-fields {
    display: none;
    margin-top: 15px;
}

.lense-number-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lense-pd-field {
    display: block;
    margin-top: 10px;
}

#upload-prescription {
    display: none;
    margin-top: 15px;
}

/* ── SPH/CYL Surcharge Note ────────────────────────────────── */
.prescription-surcharge-note {
    background: #fff8e1;
    border-left: 4px solid #f5a623;
    padding: 10px 14px;
    margin: 12px 0 14px 0;
    border-radius: 4px;
    font-size: 13px;
    color: #5a3e00;
    line-height: 1.5;
}

.prescription-surcharge-note strong {
    font-weight: 700;
    display: block;
}

/* ── Surcharge Breakdown (shown under final price) ──────────── */
#surcharge-breakdown {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #d15d14;
    background: #fff3e0;
    border: 1px dashed #f5a623;
    border-radius: 4px;
    padding: 8px 12px;
    line-height: 1.8;
}

/* ── Price Includes Box ─────────────────────────────────────── */
.price-includes-box {
    background: #f8f8f8;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #4CAF50;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.price-includes-box .includes-label {
    flex: 1;
}

.price-includes-box .includes-price {
    font-size: 18px;
    font-weight: 700;
    color: #4CAF50;
    text-align: right;
}

.includes-details {
    font-size: 14px;
    color: #555;
    margin-bottom: 3px;
}

.price-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}