/*
===============================================================================
A Kitchen Society — Map To Local Ingredient Modal
Drop-in stylesheet for the existing MapToLocal partial + details-unified.js
-------------------------------------------------------------------------------
Load AFTER recipe-details.css so these rules win.

The current partial and details-unified.js contain several inline styles.
Where necessary, this file uses narrowly-scoped !important rules so you do
not have to rewrite the Razor or JavaScript first.
===============================================================================
*/

#rimModalOverlay {
    position: fixed;
    inset: 0;
    z-index: 3400;
    background: rgba(18, 30, 42, .48);
    backdrop-filter: blur(2px);
}

/*
details-unified.js opens the overlay with display:block, so center the modal
with positioning instead of forcing display:flex/grid. That preserves the
existing JS close behavior (display:none).
*/
#rimModalOverlay > .rim-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(620px, calc(100vw - 32px));
    max-height: min(780px, calc(100vh - 40px));
    transform: translate(-50%, -50%);
    overflow: hidden;

    border: 1px solid #d9e1e8;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 26px 72px rgba(18, 39, 61, .24);
}

/* ==========================================================================
   OUTER MODAL HEADER
   ========================================================================== */

    #rimModalOverlay .rim-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 58px;
        padding: 13px 18px;
        border-bottom: 1px solid #e4e9ed;
        background: #fff;
    }

#rimModalOverlay .rim-modal-title {
    margin: 0;
    color: #17324d;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.2;
}

#rimModalOverlay .rim-modal-close {
    display: inline-grid;
    place-items: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #748391;

    font: inherit;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}

#rimModalOverlay .rim-modal-close:hover {
    background: #f2f5f7;
    color: #173f66;
}

/* ==========================================================================
   MODAL BODY
   ========================================================================== */

#rimModalOverlay .rim-modal-body {
    max-height: calc(min(780px, 100vh - 40px) - 58px);
    overflow-y: auto;
    padding: 0;
    background: #fff;
}

#rimModalOverlay .rim-map-modal {
    --rim-navy: #173f66;
    --rim-text: #20384f;
    --rim-muted: #687a8b;
    --rim-subtle: #84929f;
    --rim-border: #dce4ea;
    --rim-border-strong: #c9d4dd;
    --rim-soft: #f7f9fb;
    --rim-green: #21844f;
    --rim-green-soft: #eef8f2;
    --rim-red: #a43a32;
    --rim-red-soft: #fff4f3;

    padding: 18px 22px 20px;
    color: var(--rim-text);

}

#rimModalOverlay .rim-map-modal,
#rimModalOverlay .rim-map-modal * {
    box-sizing: border-box;

}

/* ==========================================================================
   INTRO COPY
   ========================================================================== */

#rimModalOverlay .rim-map-modal > .rim-modal-row:first-child h4 {
    margin: 0 0 5px !important;
    color: var(--rim-text);
    font-size: .92rem !important;
    font-weight: 500 !important;
    line-height: 1.35;
    width: 100%;
}


#rimModalOverlay .rim-map-modal > .rim-modal-row:first-child h4 span {
    color: var(--rim-green) !important;
}

    #rimModalOverlay .rim-map-modal > .rim-modal-row:first-child p {
        margin: 0 0 14px !important;
        color: var(--rim-muted);
        font-size: .74rem !important;
        line-height: 1;
        opacity: 1 !important;
    }

/* ==========================================================================
   ERROR
   ========================================================================== */

#rimModalOverlay #rimError {
    margin: 0 0 9px;
    padding: 8px 9px;

    border: 1px solid #efcbc7;
    border-radius: 7px;
    background: var(--rim-red-soft);
    color: var(--rim-red);

    font-size: .72rem;
    font-weight: 550;
    line-height: 1.4;
}

/* ==========================================================================
   SEARCH / CLEAR / CONFIRM
   Uses :has() because the current Razor row has only inline layout styles.
   ========================================================================== */

#rimModalOverlay .rim-map-modal > div:has(> #rimSearchInput) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 9px !important;
}

#rimModalOverlay #rimSearchInput {
    width: 100%;
    min-width: 0;
    height: 36px;

    padding: 0 10px !important;
    border: 1px solid var(--rim-border-strong) !important;
    border-radius: 8px !important;
    background: #fff;

    color: var(--rim-text);
    font: inherit;
    font-size: .9rem !important;
}

#rimModalOverlay #rimSearchInput::placeholder {
    color: #96a2ac;
}

#rimModalOverlay #rimSearchInput:hover {
    border-color: #afbec9 !important;
}

#rimModalOverlay #rimSearchInput:focus {
    border-color: #7198b8 !important;
    outline: 2px solid rgba(23, 63, 102, .10);
    outline-offset: 0;
}

#rimModalOverlay .rim-btn,
#rimModalOverlay #rimClearBtn,
#rimModalOverlay #rimConfirmBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 6px 10px !important;

    border: 1px solid var(--rim-border-strong);
    border-radius: 8px;

    font: inherit;
    font-size: .72rem;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

#rimModalOverlay .rim-btn-secondary,
#rimModalOverlay #rimClearBtn {
    background: #fff;
    color: var(--rim-navy);
}

#rimModalOverlay .rim-btn-secondary:hover,
#rimModalOverlay #rimClearBtn:hover {
    background: var(--rim-soft);
    border-color: #adbdc8;
}

#rimModalOverlay .rim-btn-primary,
#rimModalOverlay #rimConfirmBtn {
    border-color: var(--rim-navy);
    background: var(--rim-navy);
    color: #fff;
}

#rimModalOverlay .rim-btn-primary:hover:not(:disabled),
#rimModalOverlay #rimConfirmBtn:hover:not(:disabled) {
    background: #0f3150;
    border-color: #0f3150;
}

#rimModalOverlay .rim-btn-primary:disabled,
#rimModalOverlay #rimConfirmBtn:disabled {
    border-color: #dde3e8;
    background: #f4f6f8;
    color: #9aa6b0;
    cursor: default;
    opacity: 1 !important;
}

/* ==========================================================================
   KROGER OPTION
   ========================================================================== */

#rimModalOverlay #krogerCheckboxRow {
    margin: 0 0 11px;
}

    #rimModalOverlay #krogerCheckboxRow > label {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 38px;
        padding: 7px 9px !important;
        border: 1px solid #bfe2cc !important;
        border-radius: 8px !important;
        background: var(--rim-green-soft) !important;
        cursor: pointer !important;
    }

#rimModalOverlay #rimIncludeKroger {
    width: 16px !important;
    height: 16px !important;
    margin: 0;
    accent-color: var(--rim-green);
}

#rimModalOverlay #krogerCheckboxRow label span {
    color: #28784a !important;
    font-size: .8rem;
    font-weight: 550 !important;
}

#rimModalOverlay #krogerStoreInfo {
    margin-top: 5px !important;
    padding-left: 27px !important;
    color: var(--rim-muted);
    font-size: .72rem !important;
    line-height: 1.35;
    opacity: 1 !important;
}

/* ==========================================================================
   SELECTED INGREDIENT SUMMARY
   ========================================================================== */

    #rimModalOverlay #rimSelectedSummary {
        margin: 0 0 10px;
        padding: 9px 10px !important;
        border: 1px solid #b9dfc8 !important;
        border-radius: 8px !important;
        background: #f1faf4 !important;
        color: var(--rim-text);
        font-size: .69rem;
        line-height: 1.4;
    }

/* JS injects inline color/margin styles; normalize them a little. */
    #rimModalOverlay #rimSelectedSummary > div:first-child {
        color: var(--rim-green) !important;
        font-size: .7rem;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: .035em;
    
        }

#rimModalOverlay #rimSelectedSummary > div + div {
    margin-top: 3px !important;

}

/* ==========================================================================
   RESULTS AREA
   ========================================================================== */

    #rimModalOverlay #rimSearchResults {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        max-height: min(430px, 48vh) !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        padding: 1px 4px 2px 0 !important;
        scrollbar-width: thin;
        scrollbar-color: #c4d0d9 transparent;
    }

#rimModalOverlay #rimSearchResults::-webkit-scrollbar {
    width: 7px;
}

#rimModalOverlay #rimSearchResults::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c4d0d9;
}

/*
The JS currently injects section labels as plain divs with inline styles.
This targets only the heading-like direct children while leaving result buttons
and the separator alone.
*/
        #rimModalOverlay #rimSearchResults > div:not([style*="border-top"]) {
            margin: 8px 0 1px !important;
            color: #5d7081 !important;
            font-size: .7rem !important;
            font-weight: 500 !important;
            letter-spacing: .06em !important;
            text-transform: uppercase !important;
            opacity: 1 !important;

        }

#rimModalOverlay #rimSearchResults > div[style*="border-top"] {
    margin: 9px 0 5px !important;
    border-top: 1px solid #e2e8ed !important;
}

/* Local + Kroger cards. Inline styles in JS require !important here. */
        #rimModalOverlay #rimSearchResults .rim-result {
            position: relative;
            width: 100% !important;
            min-height: 80px;
            padding: 10px!important;
            border: 1px solid var(--rim-border) !important;
            border-radius: 9px !important;
            background: #fff !important;
            color: #444;
            font: inherit;
            font-size: .78rem;
            font-weight: 500;
            line-height: 1.35;
            text-align: left !important;
            cursor: pointer !important;
            transition: border-color .13s ease, background .13s ease, box-shadow .13s ease, transform .13s ease;
        }

#rimModalOverlay #rimSearchResults .rim-result:hover {
    border-color: #aebfcb !important;
    background: #fbfcfd !important;
    box-shadow: 0 5px 14px rgba(23, 47, 73, .055);
    transform: translateY(-1px);

}

#rimModalOverlay #rimSearchResults .rim-result.is-selected {
    border-color: #5b98c3 !important;
    background: #f2f8fc !important;
    box-shadow: inset 3px 0 0 #173f66;

}

/* Selected indicator without changing JS markup */
#rimModalOverlay #rimSearchResults .rim-result.is-selected::after {
    content: "Selected";
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 4px 8px;
    border-radius: 999px;
    background: #173f66;
    color: #fff;

    font-size: .64rem;
    font-weight: 400;
    letter-spacing: .025em;
    line-height: 1;
}

/* Local result typography */
        #rimModalOverlay #rimSearchResults .rim-result-local > div:first-child {
            padding-right: 58px;
            color: #17324d;
            font-size: .8rem;
            font-weight: 500 !important;
        }

#rimModalOverlay #rimSearchResults .rim-result-local > div:nth-child(2) {
    margin-top: 6px !important;
    color: #617487;
    font-size: .74rem;
    opacity: 1 !important;
}

#rimModalOverlay #rimSearchResults .rim-result-local > div:nth-child(3) {
    margin-top: 6px !important;
    color: #8794a0;
    font-size: .68rem;
    opacity: 1 !important;
}

/* Kroger result cards */
#rimModalOverlay #rimSearchResults .rim-result-kroger {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-color: #cfe3d6 !important;
}

#rimModalOverlay #rimSearchResults .rim-result-kroger:hover {
    border-color: #9cc9ad !important;
    background: #fbfefc !important;
}

#rimModalOverlay #rimSearchResults .rim-result-kroger.is-selected {
    border-color: #4e9c6c !important;
    background: #f1faf4 !important;
    box-shadow: inset 3px 0 0 #21844f;
}

#rimModalOverlay #rimSearchResults .rim-result-kroger img {
    width: 52px !important;
    height: 52px !important;
    padding: 3px !important;
    border: 1px solid #edf1f4;
    border-radius: 7px !important;
    background: #fff !important;
    object-fit: contain !important;
}

/* ==========================================================================
   SMALL / EMPTY / ERROR RESULT MESSAGES
   ========================================================================== */

#rimModalOverlay #rimSearchResults > div[style*="color:#b42318"] {
    padding: 9px 10px;
    border: 1px solid #efcbc7;
    border-radius: 7px;
    background: var(--rim-red-soft);
    color: var(--rim-red) !important;
    font-size: .67rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;

}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 680px) {
    #rimModalOverlay > .rim-modal {
        top: auto;
        bottom: 10px;
        left: 10px;

        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);

        transform: none;
        border-radius: 12px;
    }

    #rimModalOverlay .rim-modal-head {
        min-height: 52px;
        padding: 11px 14px;
    }

    #rimModalOverlay .rim-modal-body {
        max-height: calc(100vh - 72px);
    }

    #rimModalOverlay .rim-map-modal {
        padding: 14px;
    }

    #rimModalOverlay .rim-map-modal > div:has(> #rimSearchInput) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #rimModalOverlay #rimConfirmBtn {
        grid-column: 1 / -1;
        width: 100%;
    }

    #rimModalOverlay #rimSearchResults {
        max-height: 43vh !important;
    }
}

@media (max-width: 460px) {
    #rimModalOverlay .rim-map-modal > div:has(> #rimSearchInput) {
        grid-template-columns: 1fr 1fr;
    }

    #rimModalOverlay #rimSearchInput {
        grid-column: 1 / -1;
    }

    #rimModalOverlay #rimClearBtn,
    #rimModalOverlay #rimConfirmBtn {
        width: 100%;
    }

    #rimModalOverlay #rimConfirmBtn {
        grid-column: auto;
    }

    #rimModalOverlay #rimSearchResults .rim-result-kroger {
        align-items: flex-start !important;
    }

    #rimModalOverlay #rimSearchResults .rim-result-kroger img {
        width: 44px !important;
        height: 44px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #rimModalOverlay *,
    #rimModalOverlay *::before,
    #rimModalOverlay *::after {
        transition: none !important;
        animation: none !important;
    }
}