/**
 * Feedback Modal — framework restyle of the Help/Feedback modal
 *
 * The modal markup is built by legacy js/footer.js (triggerModalFeedback) and
 * is shared by both surfaces. This sheet is linked ONLY from the framework
 * head zone (lib/view/layouts/zones/head.view.php), so legacy dashboard.php
 * pages keep their original look while framework (?fw=) pages get the LPD
 * design language. Markup and behavior are untouched — this file styles the
 * existing classes only.
 *
 * Specificity: the legacy rules in css/modal-popups.css are written as
 * `#FeedbackForm .x` (1 id). Everything here is scoped
 * `#modal-general #FeedbackForm` (2 ids) so it wins without !important.
 *
 * Modal chrome (header band) is scoped with :has( #FeedbackForm ) so the
 * treatment applies to the Feedback modal only, not every #modal-general.
 * On a browser without :has() support the chrome falls back to the legacy
 * grey header; the form styling below does not depend on :has().
 *
 * Tokens mirror lib/assets/css/lpd/account/account-common.css (declared there
 * on .account-view, which does not wrap this body-appended modal). When the
 * token layer is promoted to a shared framework sheet, these local
 * declarations collapse into it. See FRAMEWORK_UI_STYLING.md.
 */

#modal-general {
    --lpd-blue:           #2F4798;
    --lpd-blue-hover:     #2C7DBD;
    --lpd-gold:           #FFD61A;
    --lpd-charcoal:       #2B2A2D;
    --lpd-gray:           #6C757D;
    --lpd-panel-surface:  #F8F9FB;
    --lpd-panel-border:   #E3E6EA;
    --lpd-input-border:   #CED4DA;
    --lpd-radius:         8px;
}

/* --- Modal chrome (Feedback modal only) ------------------------------------ */
#modal-general:has( #FeedbackForm ) .modal-content {
    border: 1px solid var( --lpd-panel-border );
    border-radius: var( --lpd-radius );
    overflow: hidden;
}

#modal-general:has( #FeedbackForm ) .modal-header {
    align-items: center;
    padding: 0.6rem 1rem;
    background-color: var( --lpd-blue );
    border: none;
    border-radius: 0;
}

#modal-general:has( #FeedbackForm ) .modal-header .modal-title {
    color: #fff;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

#modal-general:has( #FeedbackForm ) .modal-header .close {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
}

#modal-general:has( #FeedbackForm ) .modal-header .close:hover {
    opacity: 1;
}

#modal-general:has( #FeedbackForm ) .modal__content {
    font-family: 'interstate', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var( --lpd-charcoal );
    padding-top: 0.5rem;
}

#modal-general:has( #FeedbackForm ) .modal__content > p {
    margin: 0 0 0.4rem;
    font-size: 0.88rem;
    color: var( --lpd-gray );
}

#modal-general:has( #FeedbackForm ) .modal__content a {
    color: var( --lpd-blue );
    text-decoration: underline;
}

/* --- Category selector (radio cards) --------------------------------------- */
#modal-general #FeedbackForm .fb-menu-div {
    padding: 1rem 0 0.25rem;
}

#modal-general #FeedbackForm .fb-menu-div ul {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

#modal-general #FeedbackForm .fb-menu-div li {
    flex: 1;
    display: block;
    padding: 0 !important;
    margin: 0;
    background: var( --lpd-panel-surface );
    border: 1px solid var( --lpd-input-border );
    border-bottom: 3px solid var( --lpd-panel-border );
    border-radius: var( --lpd-radius );
}

/* Kill the legacy cyan active bar; the active state lives on the card. */
#modal-general #FeedbackForm .fb-menu-div li:after {
    display: none;
}

#modal-general #FeedbackForm .fb-menu-div li.active {
    background: #fff;
    border-color: var( --lpd-blue );
    border-bottom-color: var( --lpd-gold );
}

#modal-general #FeedbackForm .fb-menu-item {
    width: 100%;
}

#modal-general #FeedbackForm .fb-menu-item .container {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.6rem 0.6rem 2.1rem;
    margin: 0;
    font-size: inherit;
}

#modal-general #FeedbackForm .fb-menu-item h5 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var( --lpd-charcoal );
}

/* Modern radio circle — blue ring with a blue dot when selected. */
#modal-general #FeedbackForm .fb-menu-item .checkmark {
    top: 50%;
    left: 0.65rem;
    transform: translateY( -50% );
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid var( --lpd-input-border );
}

#modal-general #FeedbackForm .fb-menu-item input:checked ~ .checkmark {
    background-color: #fff;
    border-color: var( --lpd-blue );
}

#modal-general #FeedbackForm .fb-menu-item .checkmark::after {
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: var( --lpd-blue );
    border: none;
}

/* --- Feedback textarea ------------------------------------------------------ */
#modal-general #FeedbackForm .fb-input-div {
    display: block;
    margin-bottom: 1.25rem;
}

#modal-general #FeedbackForm .fb-input-div h4 {
    margin: 0.9rem 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var( --lpd-charcoal );
}

#modal-general #FeedbackForm .fb-input-div textarea {
    width: 100%;
    height: 180px;
    background: #fff;
    border: 1px solid var( --lpd-input-border );
    border-radius: var( --lpd-radius );
    padding: 0.6rem 0.75rem;
    font: inherit;
    resize: vertical;
}

#modal-general #FeedbackForm .fb-input-div textarea:focus {
    outline: none;
    border-color: var( --lpd-blue );
    box-shadow: 0 0 0 3px rgba( 47, 71, 152, 0.15 );
}

/* --- Submit ------------------------------------------------------------------ */
#modal-general #FeedbackForm .fb-submit-div {
    padding-bottom: 0.75rem;
    text-align: right;
}

#modal-general #FeedbackForm .fb-submit-div .site-btn {
    padding: 0.5rem 1.5rem;
    background: var( --lpd-blue );
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
}

#modal-general #FeedbackForm .fb-submit-div .site-btn:hover,
#modal-general #FeedbackForm .fb-submit-div .site-btn:focus {
    background: var( --lpd-blue-hover );
}

/* --- Small screens ----------------------------------------------------------- */
@media all and ( max-width: 767px ) {
    #modal-general #FeedbackForm .fb-menu-div ul {
        display: block;
    }

    #modal-general #FeedbackForm .fb-menu-div li {
        display: block;
        margin-bottom: 0.5rem;
    }

    #modal-general #FeedbackForm .fb-submit-div {
        text-align: center;
    }
}