/* ============================================
   GLOBAL VARIABLES
============================================= */
:root {
    --brand: #0d6efd;
    --accent: #7fb069;
    --bg-soft: #e5edf6;
    --radius: 1.5rem;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ============================================
   BASE LAYOUT + TYPOGRAPHY
============================================= */
html,
body {
    background-color: var(--bg-soft);
    font-family: 'Swissra', 'Tahoma', system-ui, sans-serif;
    color: #222;
    scroll-behavior: smooth;
    font-weight: 700;
}

.fw-bold,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700 !important;
    font-family: Swissra, Tahoma, sans-serif;
}

/* Main container width */
main.container {
    max-width: 1100px;
}

/* ============================================
   CARDS
============================================= */
.soft-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #fff;
    border: none;
}

.card-header {
    background: transparent;
    border-bottom: none;
}

/* ============================================
   HEADER (LOGOS + TITLE)
============================================= */
.header-bar {
    background-color: #e5edf6;
}

.brand-logo-esped {
    max-height: 70px;
}

.brand-logo-sandoz {
    max-height: 32px;
}

.tool-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0056b9;
}

.tool-subtitle {
    font-size: 0.95rem;
    color: #43546d;
    /* font-family: sewissra, Tahoma, sans-serif; */
}

/* ============================================
   GENDER SELECTOR (FIXED & CLEAN)
============================================= */
.gender-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* Button container */
.gender-option {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: 1.5px solid #d9d9d9;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    min-width: 7rem;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Gender label text (normal state) */
.gender-option span {
    color: #1c59b5 !important;
    font-weight: 600;
}

/* Selected state — highlight */
.btn-check:checked+.gender-option {
    border: 3px solid #ffffff;
    background-color: #0a4fa7;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
}

/* Selected text becomes white */
.btn-check:checked+.gender-option span {
    color: #ffffff !important;
}

/* Gender image wrapper */
.gender-img-wrap {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* FINAL image size (your request) */
.gender-img {
    width: 38% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Hover */
.gender-option:hover {
    border-color: var(--accent);
    background-color: #f8fff8;
    transform: translateY(-1px);
}

/* ============================================
   FORM CARD (RIGHT SIDE)
============================================= */
.form-card {
    background-color: #0f57bb;
    color: #ffffff;
    padding: 1.2rem !important;
}

.form-card .form-label,
.form-card label,
.form-card .card-header .h5 {
    color: #ffffff;
}

/* Spacing fix for header + body */
.form-card .card-header {
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
}

.form-card .card-body {
    padding-top: 1.5rem !important;
}

/* White selects inside blue card */
/* Fix overlap between select text and native arrow in RTL */
.form-card .form-select {
    /* keep rounded pill etc. from before, just adjust padding */
    padding-right: 2rem;
    /* space for the label text on the right */
    padding-left: 2.8rem;
    /* extra space on the arrow side (left in RTL) */
    text-align: right;
    /* make sure text hugs the right side */

}


.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.invalid-feedback {
    margin-top: 0.35rem;
}

/* Buttons */
.btn {
    border-radius: 999px;
    font-weight: 600;
}

.btn-primary {
    background-color: #ffffff;
    color: #0056b9;
    border: none;
}

.btn-primary:hover {
    background-color: #f5f5f5;
    color: #00408a;
}

.btn-outline-secondary {
    background-color: #ffffff;
    color: #555;
    border: none;
}

.btn-outline-secondary:hover {
    background-color: #f8f8f8;
}

/* ============================================
   TIPS CARD (LEFT SIDE)
============================================= */
.tips-card {
    background-color: #0f57bb;
    color: #ffffff;
}

.tips-card .card-header h2 {
    color: #ffffff;
    font-family: Swissra, Tahoma, sans-serif;
}

.tips-card p {
    font-size: 1.05rem;
    /* font-family: sweissra, Tahoma, sans-serif; */
}

/* ============================================
   RESULTS PAGE
============================================= */
.result-summary-card {
    background-color: #0f57bb;
    color: #ffffff;
}

.summary-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1.6rem;
    border-radius: 999px;
    border: 2px solid #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
}

.result-summary-body ul li {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.result-summary-body strong {
    font-weight: 700;
}

.result-summary-body .btn-primary,
.result-summary-body .btn-outline-secondary {
    border-radius: 999px;
}

.result-chart-card {
    background-color: #ffffff;
}

/* Note text */
#note {
    color: #dfe9ff;
}

/* ============================================
   FOOTER
============================================= */
footer p {
    line-height: 1.4;
}

/* ============================================
   RESPONSIVE FIXES
============================================= */
@media (max-width: 767.98px) {
    .gender-group {
        flex-wrap: wrap;
    }

    .header-bar {
        text-align: center;
    }
}

/* Make إعادة ضبط and الرجوع للاختبار buttons white */
.btn-outline-secondary {
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    background-color: transparent !important;
}

/* Hover effect (still white) */
.btn-outline-secondary:hover {
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Add horizontal breathing space for summary buttons */
.result-summary-body .btn {
    margin-inline: 0.6rem;
}

#genderFeedback {
    display: none;
}

/* Improve right/left spacing inside the result summary card */
.result-summary-card .card-body {
    padding-right: 1.75rem !important;
    padding-left: 1.75rem !important;
}

/* Improve spacing for list items */
.result-summary-body ul li {
    text-align: right;
    /* Ensure perfect RTL alignment */
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
    line-height: 1.7;
}

/* Make احسب النتيجة like إعادة ضبط */
.btn-primary {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.result-summary-body strong {
    font-weight: 700 !important;
}

/* Fix TOP spacing (already added earlier, keeping it here for full clarity) */
.result-summary-card .card-body {
    padding-top: 2.2rem !important;
    padding-bottom: 2.2rem !important;
    /* NEW: bottom spacing */
}

/* Add spacing BELOW the list before buttons */
.result-summary-body ul {
    margin-bottom: 2rem !important;
}

/* Add spacing BELOW the buttons area */
.result-summary-body .btn {
    margin-bottom: 0.8rem !important;
}

/* Header logos */
.brand-logo {
    max-height: 60px;
}

.brand-logo-left {
    margin-right: 0;
}

.brand-logo-right {
    margin-left: 0;
}

/* Footer logos */
.footer-logo {
    max-height: 55px;
}

/* Reduce on mobile */
@media (max-width: 576px) {

    .brand-logo,
    .footer-logo {
        max-height: 45px;
    }
}