/* Optimized CSS with CSS Custom Properties */
:root {
    --primary-blue: #00008B;
    --secondary-blue: #000066;
    --border-color: #dee2e6;
    --bg-light: #f8f9fa;
    --text-muted: #666;
    --border-radius: 5px;
    --spacing: 20px;
    --transition: all 0.3s ease;
    --shadow-hover: 0 4px 15px rgba(0,0,0,0.1);
    --shadow-focus: 0 0 0 0.25rem rgba(0, 0, 139, 0.25);
}

/* Base styles */
* { box-sizing: border-box; }

/* Common button styles */
.btn-primary, .btn-test, .select-test, .select-package {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    transition: var(--transition);
}

.btn-primary:hover, .btn-test:hover {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
    color: white;
}

/* Accordion styles */
.steps-accordion .accordion-item { border: none; margin-bottom: 15px; }
.steps-accordion .step-header { 
    color: white; 
    background-color: var(--primary-blue); 
    padding: 15px; 
    border: none; 
}
.steps-accordion .step-header::after { filter: brightness(0) invert(1); }
.steps-accordion .accordion-button:not(.collapsed).step-header { 
    color: white; 
    background-color: var(--secondary-blue); 
    box-shadow: none; 
}
.steps-accordion .accordion-body, .accordion-body { 
    background-color: #fff; 
    border: 1px solid var(--border-color); 
    border-top: none; 
    border-radius: 0 0 var(--border-radius) var(--border-radius); 
    padding: 25px; 
}
.accordion-item { 
    margin-bottom: 10px; 
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius); 
}
.accordion-button { 
    background-color: var(--bg-light); 
    color: #333; 
    font-weight: 500; 
}
.accordion-button:not(.collapsed) { 
    background-color: #e7f1ff; 
    color: var(--primary-blue); 
}

/* Text styles */
.welcome-text, .info-text { color: var(--text-muted); line-height: 1.6; }
.privacy-link { color: var(--primary-blue); text-decoration: none; }
.privacy-link:hover { text-decoration: underline; }
.select-prompt { color: #333; font-weight: 500; margin-top: var(--spacing); }

/* Test buttons */
.test-buttons { display: flex; flex-wrap: nowrap; gap: 8px; margin: var(--spacing) 0; overflow-x: auto; }
.btn-test { 
    color: white; 
    border: 2px solid var(--primary-blue); 
    padding: 8px 12px; 
    border-radius: var(--border-radius); 
    font-weight: 500; 
    flex: 1 1 0; 
    min-width: 140px; 
    text-align: center; 
    white-space: nowrap; 
    font-size: 0.85rem;
}
.btn-test.active { 
    background-color: white; 
    color: var(--primary-blue); 
    border: 2px solid var(--primary-blue); 
}

/* Test details */
.test-details-container { 
    background-color: #fff; 
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius); 
    padding: var(--spacing); 
    margin-top: var(--spacing); 
}
.test-details { display: none; }
.test-details.active { display: block; }
.test-details h4 { color: var(--primary-blue); margin-bottom: 15px; }
.test-details .price, .price { 
    font-size: 1.1em; 
    font-weight: bold; 
    color: var(--primary-blue); 
    margin: 15px 0; 
}

/* Form sections with shared styles */
.eligibility-section, .collection-section, .consent-section { 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    padding: 0; 
    margin-top: 30px; 
    background-color: #fff; 
}
.eligibility-header, .collection-header, .consent-header { 
    border-radius: 8px 8px 0 0; 
    margin-bottom: 0; 
}
.eligibility-question { 
    padding: var(--spacing); 
    border-bottom: 1px solid #f0f0f0; 
}
.eligibility-question:last-child { border-bottom: none; }

/* Collection specific styles */
.collection-option { 
    transition: var(--transition); 
    cursor: pointer;
    position: relative;
}
.collection-option:hover { 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-hover); 
}
.collection-option input[type="radio"]:checked + label {
    color: var(--primary-blue);
    font-weight: 600;
}
.center-options { 
    margin-top: 15px; 
    padding-top: 15px; 
    border-top: 1px solid #eee; 
}

/* Time slots */
.time-slots { margin-top: 15px; }
.time-slot { 
    padding: 8px 12px; 
    margin: 2px; 
    border: 1px solid #ddd; 
    background: #fff; 
    transition: all 0.2s ease; 
}
.time-slot:hover:not(:disabled) { 
    background-color: #e7f1ff; 
    border-color: var(--primary-blue); 
}
.time-slot.selected { 
    background-color: var(--primary-blue) !important; 
    border-color: var(--primary-blue) !important; 
    color: white !important; 
}
.time-slot:disabled { 
    background-color: #f8f9fa; 
    color: #6c757d; 
    border-color: #dee2e6; 
    cursor: not-allowed; 
}

/* Profile section */
.profile-section, .patient-info-section { 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    padding: 0; 
    margin-top: 30px; 
    background-color: #fff; 
}
.profile-header, .patient-info-header { 
    border-radius: 8px 8px 0 0; 
    margin-bottom: 0; 
}
.personal-info-section, .data-protection-section, .doctor-section,
.basic-health-section, .gender-section, .lifestyle-section { 
    padding: var(--spacing); 
}
.data-protection-section .alert { 
    margin: 0; 
    border-radius: 6px; 
}
#otherCitizenshipField, .other-sex-specification, #dietOtherField { 
    margin-left: 1.5rem; 
    margin-top: 0.5rem; 
}
.doctor-section h4, .gender-section h5, .lifestyle-section h5 { 
    color: var(--primary-blue); 
    border-bottom: 2px solid var(--primary-blue); 
    padding-bottom: 8px; 
}
.female-questions, .hormone-details, .surgery-details { 
    margin-top: 15px; 
    padding: 15px; 
    background-color: var(--bg-light); 
    border-radius: var(--border-radius); 
}

/* Consent section */
.consent-item { 
    padding: var(--spacing); 
    border-bottom: 1px solid #f0f0f0; 
}
.consent-item:last-of-type { border-bottom: none; }
.consent-text { margin: 0; line-height: 1.6; }
.consent-confirmation { 
    padding: var(--spacing); 
    background-color: var(--bg-light); 
    border-top: 1px solid var(--border-color); 
}
.signature-section { padding: var(--spacing); }
.signature-pad { 
    border: 2px dashed #ccc; 
    border-radius: var(--border-radius); 
    cursor: crosshair; 
}
.signature-pad:hover { border-color: var(--primary-blue); }
#signatureCanvas { border: none; }
.signer-type { margin-top: 15px; }
.selected-test-name, .test-purpose { 
    color: var(--primary-blue); 
    font-weight: 600; 
}

/* Package options */
.package-options { margin: var(--spacing) 0; }
.package-summary { 
    background-color: var(--bg-light); 
    padding: 15px; 
    border-radius: var(--border-radius); 
    margin: var(--spacing) 0; 
}

/* Form controls */
.form-check { margin-bottom: 10px; }
.form-check-group { margin-top: 10px; }
.form-check-inline { margin-right: var(--spacing); }
.form-check-label { cursor: pointer; user-select: none; }
.form-check-input:checked { 
    background-color: var(--primary-blue); 
    border-color: var(--primary-blue); 
}
.form-check-input:focus { 
    border-color: #4d4d9a; 
    box-shadow: var(--shadow-focus); 
}

/* Alerts and warnings */
.hormone-warning, .hrc-cancer-warning, .onco-cancer-warning { 
    margin: var(--spacing); 
    margin-top: 0; 
}
.alert { border-radius: 6px; }

/* Button sizes */
#nextButton { min-width: 120px; }
.select-test, .select-package { min-width: 150px; }

/* Utility classes */
.text-danger { color: #dc3545 !important; }
.fw-bold { font-weight: 600 !important; }

/* Responsive design and performance optimizations */
@media (max-width: 768px) {
    .test-buttons { gap: 5px; }
    .btn-test { min-width: 110px; padding: 6px 8px; font-size: 0.75rem; }
    .container { padding: 0 15px; }
    .steps-accordion .accordion-body { padding: 15px; }
    .personal-info-section, .data-protection-section, .doctor-section, 
    .basic-health-section, .gender-section, .lifestyle-section,
    .consent-item, .signature-section { padding: 15px; }
}

.test-buttons, .time-slots { will-change: transform; }
.collection-option, .time-slot, .btn-test { will-change: transform, box-shadow; }

/* Family member add/remove button styles */
.family-member-entry {
    position: relative;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;
}

.family-member-entry:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.add-family-member {
    background-color: transparent;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    font-weight: 500;
    transition: var(--transition);
}

.add-family-member:hover {
    background-color: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
}

.remove-family-member {
    border: 1px solid #dc3545;
    color: #dc3545;
    transition: var(--transition);
}

.remove-family-member:hover {
    background-color: #dc3545;
    color: white;
    transform: translateY(-1px);
}

.family-member-entry h6 {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Button icons */
.add-family-member i,
.remove-family-member i {
    margin-right: 0.25rem;
}