/*
 * Thames Water Priority Services Register (PSR) - Modern Style Guide Reskin
 * Matches specs in tw_style-guide.pdf
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Noto+Sans:wght@400;600;700&display=swap');

/* ==========================================
   1. GLOBAL RESET & BASE STYLES
   ========================================== */
html, body {
    background-color: #F8F8F8 !important;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #333F48 !important;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   2. TYPOGRAPHY
   ========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif !important;
    color: #333F48 !important;
    font-weight: 700 !important;
}

.heading-large {
    font-size: 38px !important; /* Visual adaptation for web readability */
    line-height: 1.2 !important;
    color: #333F48 !important;
    border-bottom: none !important;
    margin-top: 0 !important; /* Adjusted for sitting inside the card */
    margin-bottom: 25px !important;
    padding-bottom: 0 !important;
}

@media (min-width: 641px) {
    .heading-large {
        font-size: 44px !important;
    }
}

.heading-medium {
    font-size: 28px !important;
    line-height: 1.3 !important;
    color: #333F48 !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

.heading-small {
    font-size: 22px !important;
    line-height: 1.4 !important;
    color: #333F48 !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

.body-text, p, li {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #333F48 !important;
}

/* ==========================================
   3. HEADER & NAVIGATION OVERRIDES
   ========================================== */
header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #EAEAEA !important;
    position: relative !important;
    z-index: 100 !important;
    display: block !important;
}

header .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

header .first {
    float: none !important;
}

header .second {
    float: none !important;
    text-align: right !important;
    color: #333F48 !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

header nav {
    display: none !important;
}

header .page-name {
    background-color: #dae6e2 !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    color: #333F48 !important;
    padding: 12px 0 !important;
    text-align: left !important;
    display: block !important;
}

header .second h1 {
    font-family: 'Nunito', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #333F48 !important;
    margin: 0 0 0px 0 !important;
    display: block !important;
}

header .second h2 {
    font-size: 16px !important;
    margin: 0 0 5px 0 !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
}

header .second div a {
    color: #3A7F1F !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

header .second div a:hover {
    text-decoration: underline !important;
}

header img {
    height: 80px !important;
    width: auto !important;
    display: block !important;
}

/* ==========================================
   4. FORM CARD CONTAINER
   ========================================== */
.page-body {
    background-color: #F8F8F8 !important;
    padding-top: 20px !important;
    padding-bottom: 60px !important;
}

/* Style the page container as the modern Form Card */
.page-body .container {
    position: relative !important; /* Context for absolute pagination layout */
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(51, 63, 72, 0.06) !important;
    border: 1px solid #EAEAEA !important;
    padding: 40px !important;
    max-width: 772px !important;
    margin: 0 auto 90px !important; /* Space bottom for buttons outside card */
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    .page-body .container {
        padding: 25px 15px !important;
        border-radius: 12px !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: auto !important;
        margin-bottom: 30px !important;
    }
    body:not(.start) .page-body .container {
        margin-bottom: 180px !important; /* More space for stacked buttons on mobile */
    }
}

/* Make the form-section transparent and unpadded */
.form-section {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* ==========================================
   5. FORM INPUTS & LABELS
   ========================================== */
.form-group {
    margin-bottom: 25px !important;
    border-left: none !important; /* Clear gov.uk element side borders */
    padding-left: 0 !important;
}

.form-label-bold, 
.form-label {
    font-family: 'Noto Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #333F48 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.form-group em,
.form-group div:not(.error-message):not(.multiple-choice) {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 15px !important;
    color: #333F48 !important;
    opacity: 0.8;
    margin-bottom: 8px;
    display: block;
    font-style: normal;
}

/* Inputs styling */
.form-control {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 16px !important;
    color: #333F48 !important;
    border: 1.5px solid #BBBBBB !important;
    border-radius: 8px !important;
    height: 48px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    background-color: #FFFFFF !important;
    width: 100% !important;
    max-width: 400px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus {
    outline: none !important;
    border-color: #3A7F1F !important;
    box-shadow: 0 0 0 3px rgba(58, 127, 31, 0.2) !important;
}

/* Textarea override */
textarea.form-control {
    height: auto !important;
    min-height: 120px !important;
}

/* Size limits per style guide specifications */
select.form-control,
.form-control-1-3 {
    max-width: 160px !important;
}

.form-control-3-4 {
    max-width: 400px !important;
}

/* ==========================================
   6. CUSTOM RADIO BUTTONS & CHECKBOXES
   ========================================== */
/* ==========================================
   6. CUSTOM RADIO BUTTONS & CHECKBOXES
   ========================================== */
/* Disable GOV.UK style pseudo-elements on multiple choice elements to prevent overlapping double icons */
.multiple-choice label::before,
.multiple-choice label::after {
    display: none !important;
    content: none !important;
}

/* Make custom inputs visible (override Gov.uk opacity: 0) */
.multiple-choice input {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Make Yes/No inline radios side-by-side inside rounded boxes */
fieldset.inline {
    display: block !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

fieldset.inline .multiple-choice {
    display: inline-flex !important;
    align-items: center !important;
    width: 136px !important;
    height: 60px !important; /* Matches screenshot height */
    border: 1.5px solid #BBBBBB !important;
    border-radius: 8px !important;
    padding: 0 !important; /* Set to 0 so the label can occupy the entire box space */
    margin-right: 12px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    background-color: #FFFFFF !important;
    position: relative !important;
    cursor: pointer !important;
    float: none !important;
    clear: none !important;
    transition: border-color 0.2s ease !important;
}

/* Custom styled radio button */
fieldset.inline .multiple-choice input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 14px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #BBBBBB !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

fieldset.inline .multiple-choice input[type="radio"]:checked {
    border-color: #333F48 !important;
}

/* Inside dot of the custom checked radio */
fieldset.inline .multiple-choice input[type="radio"]::after {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #333F48 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) !important;
}

fieldset.inline .multiple-choice input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1) !important;
}

fieldset.inline .multiple-choice label {
    font-family: 'Noto Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    color: #333F48 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 12px 0 48px !important; /* Move the padding here to make the whole card clickable */
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: padding 0.2s ease !important;
}

/* Checked styling for inline boxes - thick dark border from screenshot */
fieldset.inline .multiple-choice:has(input[type="radio"]:checked) {
    border: 3px solid #333F48 !important;
    background-color: #FFFFFF !important; /* no color shift */
}

fieldset.inline .multiple-choice:has(input[type="radio"]:checked) label {
    padding: 0 11px 0 47px !important; /* adjust for thicker border */
}

/* Fallback for active state when :has isn't supported */
fieldset.inline .multiple-choice input[type="radio"]:checked + label {
    font-weight: 700 !important;
}

/* Circumstance and Medical list checkboxes */
.form-section .multiple-choice {
    position: relative !important;
    padding: 8px 0 8px 38px !important; /* Remove borders, backgrounds, and align to left */
    margin-bottom: 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 24px !important;
    display: block !important;
    cursor: pointer !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
}

.form-section .multiple-choice input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: absolute !important;
    left: 0 !important; /* Align custom checkbox to the left border edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 2px solid #BBBBBB !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.form-section .multiple-choice input[type="checkbox"]:checked {
    border-color: #333F48 !important;
    background-color: #333F48 !important;
}

/* Custom checkmark check icon */
.form-section .multiple-choice input[type="checkbox"]::after {
    content: "" !important;
    display: block !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #FFFFFF !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: translate(-50%, -60%) rotate(45deg) scale(0) !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transition: transform 0.2s ease !important;
}

.form-section .multiple-choice input[type="checkbox"]:checked::after {
    transform: translate(-50%, -60%) rotate(45deg) scale(1) !important;
}

.form-section .multiple-choice label {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333F48 !important;
    cursor: pointer !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.form-section .multiple-choice:has(input[type="checkbox"]:checked) {
    border-color: transparent !important; /* No borders */
}

/* Highlight text of active items */
.form-section .multiple-choice input:checked + label {
    font-weight: 700 !important;
}

/* ==========================================
   7. BUTTONS (PRIMARY, SECONDARY, TERTIARY)
   ========================================== */
.button, 
.button:visited,
button.button {
    font-family: 'Nunito', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    height: 56px !important;
    border-radius: 30px !important;
    padding: 0 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* --- PRIMARY BUTTON --- */
.button,
.button.next,
.button.complete-registration,
.button.start,
.complete-registration {
    background-color: #3A7F1F !important;
    color: #FFFFFF !important;
    border: none !important;
}

.button:hover,
.button.next:hover,
.button.complete-registration:hover,
.button.start:hover,
.complete-registration:hover {
    background-color: #245812 !important;
    color: #FFFFFF !important;
}

.button:focus,
.button.next:focus,
.button.complete-registration:focus,
.button.start:focus,
.complete-registration:focus {
    background-color: #0E3006 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 5px #A2EB3C !important;
    outline: none !important;
}

.button:disabled,
.button.next:disabled,
.button.complete-registration:disabled,
.button.start:disabled,
.complete-registration:disabled,
.button[disabled] {
    background-color: #E6ECEF !important;
    color: #8E9DA6 !important;
    border: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* --- SECONDARY BUTTON --- */
.button.previous,
.previous,
.button.save-and-review,
.save-and-review {
    background-color: transparent !important;
    border: 2px solid #3A7F1F !important;
    color: #3A7F1F !important;
}

.button.previous:hover,
.previous:hover,
.button.save-and-review:hover,
.save-and-review:hover {
    background-color: transparent !important;
    border: 2px solid #245812 !important;
    color: #245812 !important;
}

.button.previous:focus,
.previous:focus,
.button.save-and-review:focus,
.save-and-review:focus {
    background-color: transparent !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
    box-shadow: 0 0 0 5px #A2EB3C !important;
    outline: none !important;
}

.button.previous:disabled,
.previous:disabled,
.button.save-and-review:disabled,
.save-and-review:disabled {
    background-color: #E6ECEF !important;
    color: #8E9DA6 !important;
    border: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* --- TERTIARY BUTTON --- */
.button-tertiary,
.tertiary {
    background-color: transparent !important;
    border: none !important;
    color: #3A7F1F !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    border-radius: 0 !important;
}

.button-tertiary:hover,
.tertiary:hover {
    background-color: transparent !important;
    color: #245812 !important;
    text-decoration: underline !important;
}

.button-tertiary:focus,
.tertiary:focus {
    background-color: transparent !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    color: #000000 !important;
    text-decoration: underline !important;
    padding: 4px 12px !important;
    outline: none !important;
}

.button-tertiary:disabled,
.tertiary:disabled {
    background-color: transparent !important;
    color: #8E9DA6 !important;
    text-decoration: underline !important;
    border: none !important;
    cursor: not-allowed !important;
}

/* ==========================================
   8. PAGINATION & ACTION ALIGNMENT
   ========================================== */
.pagination {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.pagination .form-group {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    flex-direction: row !important;
    margin-bottom: 0 !important;
}

/* Disable pseudo-elements inside pagination form-group to prevent them from becoming phantom flex items */
.pagination .form-group::before,
.pagination .form-group::after {
    display: none !important;
    content: none !important;
}

/* Explicit margin resets to ensure exact left/right alignment to boundaries */
.pagination .form-group button,
.pagination .form-group .button {
    margin: 0 !important;
}

/* If only one button is present, align it to the right boundary of the card */
.pagination .form-group button:only-child,
.pagination .form-group button:only-of-type,
.pagination .form-group a:only-child {
    margin-left: auto !important;
}

/* Landing/Start page: keep pagination static (inside the card) */
body.start .pagination {
    position: static !important;
    width: 100% !important;
    margin: 35px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.start .pagination .form-group {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* All other pages: place buttons outside and below the card container absolutely on the grey bg */
body:not(.start) .pagination {
    position: absolute !important;
    bottom: -80px !important; /* Place it outside/below the white card container */
    left: 0px !important; /* Pull left to cancel container's 40px left padding */
    right: 0px !important; /* Pull right to cancel container's 40px right padding */
    width: auto !important; /* Let it stretch automatically to the border edges of the card */
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@media (max-width: 640px) {
    /* Mobile responsive adjustments */
    body:not(.start) .pagination {
        position: absolute !important;
        bottom: -160px !important; /* Adjust for stacked buttons on mobile */
        left: 0 !important; /* Align with container inner contents for padding from screen edges */
        right: 0 !important;
        width: auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .pagination .form-group {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }
    
    .pagination .form-group button, 
    .pagination .form-group .button {
        width: 100% !important;
        margin: 8px 0 !important; /* 8px top/bottom gives 16px space between stacked buttons */
    }
}

/* ==========================================
   9. FOOTER SOLID BAND
   ========================================== */
footer {
    background-color: #007BBB !important;
    height: 100px !important;
    margin-top: 60px !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    position: relative !important;
    clear: both !important;
}

/* ==========================================
   10. MISCELLANEOUS COMPONENT STYLING
   ========================================== */
/* Error summary overrides */
.error-summary {
    border: 3px solid #D4351C !important;
    background-color: #FFFFFF !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    border-radius: 8px !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-weight: 700 !important;
    color: #D4351C !important;
    max-width: 772px;
    margin-left: auto;
    margin-right: auto;
}

.error-message {
    font-family: 'Noto Sans', sans-serif !important;
    color: #D4351C !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-top: 5px !important;
}

.form-group-error .form-control {
    border-color: #D4351C !important;
}