/* ============================================================
   CCM / LEARNER.LINK PAPERFORM THEME
   ============================================================ */

:root {
    --ccm-navy: #1e3a5f;
    --ccm-blue: #2563eb;
    --ccm-blue-mid: #3d66c4;
    --ccm-blue-light: #eef4ff;

    --ccm-border: #ccd8e7;
    --ccm-border-hover: #9eb6d4;

    --ccm-text: #243447;
    --ccm-muted: #66788a;
}


/* ============================================================
   OVERALL FORM
   ============================================================ */

.Paperform_Container,
.Paperform__Container {
    color: var(--ccm-text);
    padding-top: 20px !important;
}


/* ============================================================
   QUESTION BLOCK SPACING
   ============================================================ */

.Paperform__QuestionBlock {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

.Paperform__Question + .Paperform__Question {
    margin-top: 8px !important;
}


/* ============================================================
   SECTION BREAK SPACING
   ============================================================ */

/*
   Keep Paperform's section/page break functionality while
   reducing excess whitespace between sections.
*/

.Paperform__PageBreak,
.Paperform__SectionBreak {
    margin-top: 8px !important;
    margin-bottom: 8px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    min-height: 0 !important;
}

.Paperform__PageBreak + .Paperform__QuestionBlock,
.Paperform__SectionBreak + .Paperform__QuestionBlock {
    margin-top: 0 !important;
}


/* ============================================================
   LEARNER.LINK HEADER
   ============================================================ */

.paperform-header {
    display: flex;
    width: 100%;

    margin: 0 0 18px 0;

    border-radius: 16px;
    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   HEADER — LOGO PANEL
   ============================================================ */

.paperform-logo-panel {
    width: 220px;
    min-width: 220px;

    background: #f7f9fc;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px 28px;
}

.paperform-logo {
    display: block;

    width: 100%;
    max-width: 165px;
    height: auto;
}


/* ============================================================
   HEADER — TITLE PANEL
   ============================================================ */

.paperform-title-panel {
    flex: 1;

    background: linear-gradient(
        135deg,
        #1e3a5f 0%,
        #2563eb 100%
    );

    padding: 24px 40px;

    color: #ffffff;

    position: relative;
    overflow: hidden;
}


/* Decorative upper-right circle */

.paperform-title-panel::before {
    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 240px;
    height: 240px;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}


/* Decorative lower circle */

.paperform-title-panel::after {
    content: "";

    position: absolute;

    bottom: -110px;
    left: 20%;

    width: 260px;
    height: 260px;

    background: rgba(255, 255, 255, 0.04);

    border-radius: 50%;
}

.paperform-header-content {
    position: relative;
    z-index: 2;
}


/* Header title */

.paperform-title {
    color: #ffffff !important;

    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;

    margin: 0 0 8px 0;
}


/* Header subtitle */

.paperform-subtitle {
    color: #ffffff !important;

    font-size: 15px;
    line-height: 1.5;

    max-width: 700px;

    opacity: 0.9;

    margin: 0;
}


/* ============================================================
   QUESTION CARDS
   ============================================================ */

.Paperform__Question {
    border-radius: 9px !important;
}


/* ============================================================
   QUESTION LABELS
   ============================================================ */

.LiveField__label,
.LiveField__label label {
    color: var(--ccm-text);
}


/* Helper / description text */

.LiveField__description,
.LiveField__hint {
    color: var(--ccm-muted);

    font-size: 13px;
    line-height: 1.45;
}


/* Required marker */

.LiveField__required {
    color: var(--ccm-blue);
}


/* ============================================================
   MULTIPLE CHOICE / RADIO OPTIONS
   ============================================================ */

/*
   Preserve Paperform's native internal layout so that
   radio circles remain in their normal right-hand position.
*/

.Choices__choice {
    background: rgba(255, 255, 255, 0.96) !important;

    border: 1px solid var(--ccm-border) !important;
    border-radius: 9px !important;

    min-height: 48px !important;

    display: block !important;

    padding-top: 13px !important;
    padding-bottom: 13px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 2px 5px rgba(30, 58, 95, 0.07),
        0 1px 2px rgba(30, 58, 95, 0.04) !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


/* Multiple choice hover */

.Choices__choice:hover {
    background: #ffffff !important;

    border-color: var(--ccm-border-hover) !important;

    box-shadow:
        0 3px 8px rgba(30, 58, 95, 0.10),
        0 1px 3px rgba(30, 58, 95, 0.05) !important;
}


/* Selected multiple choice */

.Choices__choice[aria-checked="true"],
[aria-checked="true"].Choices__choice {
    background: var(--ccm-blue-light) !important;

    border-color: var(--ccm-blue) !important;

    box-shadow:
        inset 0 0 0 1px rgba(37, 99, 235, 0.10),
        0 2px 6px rgba(37, 99, 235, 0.12) !important;
}


/* Choice text */

.Choices__label {
    color: var(--ccm-text) !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 20px !important;

    display: block !important;
}


/* Selected choice text */

.Choices__choice[aria-checked="true"] .Choices__label,
[aria-checked="true"].Choices__choice .Choices__label {
    color: var(--ccm-navy) !important;
}


/* ============================================================
   TEXT / EMAIL / TEXTAREA FIELDS
   ============================================================ */

.LiveField input,
.LiveField textarea {
    color: var(--ccm-navy) !important;
}


/* Default underline */

.LiveField input {
    border-bottom-color: #d8e0ea !important;
}


/* Focus */

.LiveField input:focus,
.LiveField textarea:focus {
    border-color: var(--ccm-blue) !important;
    outline: none !important;
}


/* Standard text field focus */

input[id^="field-text"]:focus {
    border-bottom-color: var(--ccm-blue) !important;
}


/* Placeholder */

.LiveField input::placeholder,
.LiveField textarea::placeholder {
    color: #98a7b8 !important;
    opacity: 1;
}


/* ============================================================
   DROPDOWN / SELECT
   ============================================================ */

/*
   IMPORTANT:
   Paperform retains complete control of the select's internal
   dimensions and vertical positioning.

   Only the visual appearance is changed here.
*/

.Select-control {
    background: #ffffff !important;

    border: 1px solid var(--ccm-border) !important;
    border-radius: 9px !important;

    box-shadow:
        0 2px 5px rgba(30, 58, 95, 0.05) !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}


/* Selected dropdown text */

.Select-value-label {
    color: var(--ccm-navy) !important;

    font-size: 15px !important;
    font-weight: 500 !important;
}


/* Placeholder */

.Select-placeholder {
    color: #8998a9 !important;

    font-size: 15px !important;
}


/* Arrow */

.Select-arrow {
    border-top-color: var(--ccm-muted) !important;
}


/* Hover */

.Select-control:hover {
    background: #ffffff !important;

    border-color: var(--ccm-border-hover) !important;
}


/* Focus / open */

.Select.is-focused .Select-control,
.Select.is-open .Select-control {
    background: #ffffff !important;

    border-color: var(--ccm-blue) !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10),
        0 3px 8px rgba(30, 58, 95, 0.08) !important;
}


/* ============================================================
   DROPDOWN MENU
   ============================================================ */

.Select-menu-outer {
    background: #ffffff !important;

    border: 1px solid var(--ccm-border) !important;
    border-radius: 9px !important;

    margin-top: 5px;

    overflow: hidden;

    box-shadow:
        0 10px 28px rgba(30, 58, 95, 0.14),
        0 3px 8px rgba(30, 58, 95, 0.06) !important;
}


/* Dropdown options */

.Select-option {
    background: #ffffff !important;

    color: var(--ccm-text) !important;

    font-size: 15px !important;
}


/* Hovered option */

.Select-option.is-focused {
    background: var(--ccm-blue-light) !important;

    color: var(--ccm-navy) !important;
}


/* Selected option */

.Select-option.is-selected {
    background: var(--ccm-blue) !important;

    color: #ffffff !important;
}


/* ============================================================
   YES / NO BUTTONS
   ============================================================ */

.YesNo {
    gap: 8px;
}

.YesNo__button {
    background: rgba(255, 255, 255, 0.96) !important;

    color: var(--ccm-text) !important;

    border: 1px solid var(--ccm-border) !important;
    border-radius: 9px !important;

    min-height: 48px !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow:
        0 2px 5px rgba(30, 58, 95, 0.06) !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


/* Yes / No hover */

.YesNo__button:hover {
    background: #ffffff !important;

    border-color: var(--ccm-blue) !important;

    color: var(--ccm-navy) !important;
}


/* Selected Yes / No */

.YesNo__button.btn-primary,
.YesNo__button[aria-checked="true"] {
    background: linear-gradient(
        135deg,
        var(--ccm-navy) 0%,
        var(--ccm-blue) 100%
    ) !important;

    border-color: var(--ccm-blue) !important;

    color: #ffffff !important;

    box-shadow:
        0 3px 8px rgba(37, 99, 235, 0.18) !important;
}


/* ============================================================
   FILE UPLOADS
   ============================================================ */

.File .btn-raised,
.MultipleFiles .BtnV2--raised {
    border-radius: 9px !important;
}

.File .btn-raised:hover,
.MultipleFiles .BtnV2--raised:hover {
    border-color: var(--ccm-blue) !important;
}

.MultipleFiles__file {
    border-radius: 8px !important;
}


/* ============================================================
   DATE FIELDS
   ============================================================ */

.PaperDateInput-container,
.PaperDateInput__wrapper {
    border-radius: 9px !important;
}


/* ============================================================
   TIME FIELDS
   ============================================================ */

.PaperTime,
.PaperTime__time,
.PaperTime__button {
    border-radius: 9px !important;
}


/* ============================================================
   VALIDATION ERRORS
   ============================================================ */

.LiveField__error {
    font-size: 12px;
    margin-top: 5px;
}


/* ============================================================
   SUBMIT BUTTON
   ============================================================ */

.submit,
button[type="submit"],
.GuidedModeInstructions__container--submit button {
    background: linear-gradient(
        135deg,
        var(--ccm-navy) 0%,
        var(--ccm-blue) 100%
    ) !important;

    color: #ffffff !important;

    border: none !important;
    border-radius: 9px !important;

    box-shadow:
        0 4px 12px rgba(30, 58, 95, 0.18) !important;

    font-weight: 600 !important;

    transition:
        filter 0.15s ease,
        box-shadow 0.15s ease;
}


/* Submit hover */

.submit:hover,
button[type="submit"]:hover,
.GuidedModeInstructions__container--submit button:hover {
    filter: brightness(1.05);

    box-shadow:
        0 6px 16px rgba(30, 58, 95, 0.24) !important;
}


/* ============================================================
   PAGINATION / QUESTIONS TO GO
   ============================================================ */

.Pagination,
.Pagination__bar,
.Pagination__container {
    border-radius: 9px !important;
    overflow: hidden;
}

.Pagination__btn {
    border-radius: 9px !important;
}

.Pagination__btn--previous {
    background: #ffffff !important;

    color: var(--ccm-navy) !important;

    border: 1px solid var(--ccm-border) !important;
}

.Pagination__btn--next {
    background: linear-gradient(
        135deg,
        var(--ccm-navy) 0%,
        var(--ccm-blue) 100%
    ) !important;

    color: #ffffff !important;

    border: none !important;
}


/* ============================================================
   GENERAL HEADINGS
   ============================================================ */

h1,
h2,
h3 {
    color: var(--ccm-navy);
}


/* Header headings remain white */

.paperform-header h1,
.paperform-header h2,
.paperform-header h3 {
    color: #ffffff !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    /* Reduce top page whitespace */

    .Paperform_Container,
    .Paperform__Container {
        padding-top: 12px !important;
    }


    /* Header */

    .paperform-header {
        flex-direction: column;

        margin-bottom: 14px;
    }


    /* Logo panel */

    .paperform-logo-panel {
        width: auto;
        min-width: 0;

        padding: 20px 24px;

        justify-content: flex-start;
    }

    .paperform-logo {
        max-width: 145px;
    }


    /* Header title panel */

    .paperform-title-panel {
        padding: 22px 24px;
    }

    .paperform-title {
        font-size: 26px;
    }

    .paperform-subtitle {
        font-size: 14px;
    }


    /* Question spacing */

    .Paperform__QuestionBlock {
        margin-bottom: 8px !important;
    }

    .Paperform__Question + .Paperform__Question {
        margin-top: 8px !important;
    }


    /* Section breaks */

    .Paperform__PageBreak,
    .Paperform__SectionBreak {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }


    /* Multiple choice */

    .Choices__choice {
        min-height: 46px !important;

        padding-top: 12px !important;
        padding-bottom: 12px !important;

        border-radius: 8px !important;
    }


    /* Yes / No */

    .YesNo__button {
        min-height: 46px !important;

        border-radius: 8px !important;
    }


    /*
       16px prevents iOS Safari automatically zooming
       the page when a form control receives focus.
    */

    .LiveField input,
    .LiveField textarea,
    .Choices__label,
    .YesNo__button,
    .Select-value-label,
    .Select-placeholder,
    .Select-option {
        font-size: 16px !important;
    }
}