/*
 * Cost Estimator front‑end stylesheet.
 *
 * Provides basic styling for the multi‑step form including progress
 * indicators, navigation controls and result display. These styles aim to
 * integrate cleanly with common WordPress themes without overriding
 * existing typography or layouts.
 */

.ce-form-wrapper {
    max-width: 600px;
    margin: 20px auto;
    padding: 0 10px;
    font-family: var(--ce-font-family);
}

/* CSS variables for primary colour and font family. These can be overridden
 * via JavaScript when global settings are applied. */
:root {
    --ce-primary-color: #2e86ab;
    --ce-font-family: inherit;
    --ce-progress-bg: #e9ecef;
    --ce-text-color: #555;
    --ce-result-bg: #f7f7f7;
}

/* Dark mode overrides when .ce-dark class is applied to the root element */
html.ce-dark {
    --ce-progress-bg: #333;
    --ce-primary-color: #0d6efd;
    --ce-text-color: #ddd;
    --ce-result-bg: #222;
}

/* Progress bar */
.ce-progress {
    position: relative;
    height: 10px;
    background-color: var(--ce-progress-bg);
    border-radius: 5px;
    margin-bottom: 20px;
}
.ce-progress-bar {
    height: 100%;
    background-color: var(--ce-primary-color);
    border-radius: 5px;
    transition: width 0.3s ease;
}
.ce-progress p {
    margin-top: 4px;
    font-size: 0.9rem;
    text-align: right;
    color: var(--ce-text-color);
}

/* RTL support: align progress text to the left in right‑to‑left languages */
html[dir="rtl"] .ce-progress p {
    text-align: left;
}

/* Navigation buttons */
.ce-navigation {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* RTL: navigation alignment should start from the left */
html[dir="rtl"] .ce-navigation {
    justify-content: flex-start;
}

/* Multi‑select group */
.ce-multi-select {
    margin-bottom: 15px;
}
.ce-multi-select p {
    margin-bottom: 8px;
    font-weight: 600;
}

/* Breakdown table */
.ce-breakdown {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
.ce-breakdown th,
.ce-breakdown td {
    padding: 6px 10px;
    border: 1px solid #ddd;
    text-align: left;
}
.ce-breakdown th {
    background-color: #f7f7f7;
    font-weight: 700;
}
.ce-breakdown td:last-child {
    text-align: right;
}

/* Result section */
.ce-result {
    text-align: center;
    margin-top: 20px;
    font-family: var(--ce-font-family);
}