/* =========================================================
   FIND MY FIELD CSS
   Red theme matched to BTMB bright panel treatment
   with spotlight product cards
   ========================================================= */

/* =========================================================
   1. THEME TOKENS / EASY COLOR CHANGES
   ========================================================= */
:root {
    --fmf-text: #fff6f4;
    --fmf-text-soft: rgba(255, 246, 244, 0.92);
    --fmf-text-muted: rgba(255, 214, 208, 0.70);

    --fmf-panel-bg-top: #cc0000;
    --fmf-panel-bg-bottom: #a80000;
    --fmf-panel-glow-1: rgba(255, 132, 108, 0.14);
    --fmf-panel-glow-2: rgba(255, 89, 64, 0.10);
    --fmf-panel-border: rgba(255, 255, 255, 0.16);
    --fmf-panel-shadow: 0 20px 50px rgba(120, 10, 5, 0.24);

    --fmf-card-bg: rgba(255, 255, 255, 0.08);
    --fmf-card-bg-strong: rgba(255, 255, 255, 0.10);
    --fmf-card-border: rgba(255, 255, 255, 0.16);

    --fmf-input-bg: #fff3f1;
    --fmf-input-text: #7b1710;
    --fmf-input-placeholder: #b88783;

    --fmf-button-bg-1: #ff3d31;
    --fmf-button-bg-2: #cc0000;
    --fmf-button-text: #ffffff;
    --fmf-button-shadow: 0 14px 30px rgba(204, 0, 0, 0.28);

    --fmf-product-card-bg: #ffffff;
    --fmf-product-card-text: #111827;
    --fmf-product-card-border: rgba(0, 0, 0, 0.08);
    --fmf-product-card-hover-border: rgba(204, 0, 0, 0.42);
    --fmf-product-card-active-border: #cc0000;

    --fmf-radius-lg: 24px;
    --fmf-radius-md: 22px;
    --fmf-radius-sm: 16px;
}

/* =========================================================
   2. PAGE WRAPPER / GLOBAL
   ========================================================= */
#mapFindMyField,
.fmf-page-wrapper,
.fmf-page-wrapper * {
    box-sizing: border-box !important;
}

.fmf-page-wrapper {
    width: 100% !important;
    padding: 24px 12px 48px !important;
    color: var(--fmf-text) !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.fmf-shell {
    max-width: 1240px !important;
    margin: 0 auto !important;
}

/* =========================================================
   3. PANELS / MAIN CONTAINERS
   ========================================================= */
.fmf-panel,
.fmf-results-panel {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--fmf-radius-lg) !important;
    border: 1px solid var(--fmf-panel-border) !important;
    background:
        radial-gradient(circle at top left, var(--fmf-panel-glow-1), transparent 34%),
        radial-gradient(circle at bottom right, var(--fmf-panel-glow-2), transparent 30%),
        linear-gradient(180deg, var(--fmf-panel-bg-top), var(--fmf-panel-bg-bottom)) !important;
    box-shadow: var(--fmf-panel-shadow) !important;
}

.fmf-panel {
    padding: 40px !important;
}

.fmf-results-panel {
    margin-top: 24px !important;
    padding: 32px !important;
}

.fmf-header,
.fmf-results-header {
    position: relative !important;
    z-index: 1 !important;
    max-width: 900px !important;
    margin: 0 auto 40px !important;
    text-align: center !important;
}

/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */
.fmf-eyebrow {
    margin: 0 0 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--fmf-text-muted) !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.fmf-header h2,
.fmf-results-header h2,
.fmf-page-wrapper .fmf-header h2,
.fmf-page-wrapper .fmf-results-header h2 {
    font-family: "Playpen Sans", cursive !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #ffffff !important;
    margin: 0 0 16px !important;
}

.fmf-intro,
.fmf-copy {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: var(--fmf-text-soft) !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}

/* =========================================================
   5. PRODUCT CARD GRID
   ========================================================= */
.fmf-products {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
}

.fmf-product-card {
    appearance: none !important;
    width: 100% !important;
    min-height: 260px !important;
    padding: 18px 14px 14px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 250, 0.96) 25%, rgba(247, 240, 234, 0.96) 58%, rgba(239, 229, 221, 0.98) 100%) !important;
    border: 1px solid var(--fmf-product-card-border) !important;
    color: var(--fmf-product-card-text) !important;
    cursor: pointer !important;
    text-align: center !important;
    outline: none !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    opacity: 0.72;
    transform: scale(0.985);
    box-shadow:
        inset 0 24px 40px rgba(255, 255, 255, 0.52),
        inset 0 -12px 20px rgba(140, 43, 27, 0.04),
        0 6px 18px rgba(77, 10, 6, 0.10) !important;
    transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fmf-product-card:hover,
.fmf-product-card:focus {
    opacity: 0.9;
    transform: scale(1) translateY(-3px);
    border-color: var(--fmf-product-card-hover-border) !important;
    box-shadow:
        inset 0 26px 44px rgba(255, 255, 255, 0.62),
        inset 0 -12px 20px rgba(140, 43, 27, 0.04),
        0 12px 26px rgba(77, 10, 6, 0.14) !important;
}

.fmf-product-card.is-active {
    opacity: 1;
    transform: scale(1) translateY(-4px);
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 1) 0%, rgba(255, 251, 248, 1) 22%, rgba(246, 236, 228, 0.98) 60%, rgba(241, 230, 221, 0.98) 100%) !important;
    border: 2px solid var(--fmf-product-card-active-border) !important;
    box-shadow:
        inset 0 28px 46px rgba(255, 255, 255, 0.74),
        0 0 0 1px rgba(255, 255, 255, 0.75),
        0 14px 32px rgba(198, 40, 40, 0.22) !important;
}

.fmf-product-card img {
    width: 100% !important;
    max-width: 170px !important;
    height: 108px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 14px auto 16px !important;
    background: transparent !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.10)) !important;
}

.fmf-product-card span {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #111827 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    margin-top: auto !important;
    min-height: 38px !important;
}

/* =========================================================
   6. SEARCH CARD
   ========================================================= */
.fmf-search-card {
    position: relative !important;
    z-index: 1 !important;
    max-width: 980px !important;
    margin: 36px auto 0 !important;
    padding: 28px !important;
    border-radius: var(--fmf-radius-md) !important;
    background: var(--fmf-card-bg-strong) !important;
    border: 1px solid var(--fmf-card-border) !important;
    backdrop-filter: blur(8px) !important;
}

.fmf-copy {
    margin: 0 !important;
}

.fmf-sample {
    margin: 16px 0 14px !important;
    text-align: center !important;
    color: var(--fmf-text-soft) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.fmf-error {
    display: none !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    color: #ffd1cb !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.fmf-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.fmf-input,
.fmf-page-wrapper .fmf-input,
.fmf-page-wrapper input.fmf-input {
    width: 100% !important;
    height: 64px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 16px !important;
    outline: none !important;
    background: var(--fmf-input-bg) !important;
    color: var(--fmf-input-text) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
    box-shadow: none !important;
}

.fmf-input::placeholder,
.fmf-page-wrapper .fmf-input::placeholder {
    color: var(--fmf-input-placeholder) !important;
}

.fmf-search-btn,
.fmf-reset-btn,
.fmf-page-wrapper .fmf-search-btn,
.fmf-page-wrapper .fmf-reset-btn,
.fmf-page-wrapper button.fmf-search-btn,
.fmf-page-wrapper button.fmf-reset-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 64px !important;
    min-width: 188px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
    font-size: 22px !important;
    line-height: 64px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: var(--fmf-button-text) !important;
    background: linear-gradient(180deg, var(--fmf-button-bg-1), var(--fmf-button-bg-2)) !important;
    box-shadow: var(--fmf-button-shadow) !important;
    cursor: pointer !important;
    outline: none !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.fmf-search-btn:hover,
.fmf-reset-btn:hover,
.fmf-page-wrapper .fmf-search-btn:hover,
.fmf-page-wrapper .fmf-reset-btn:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
    color: var(--fmf-button-text) !important;
    background: linear-gradient(180deg, var(--fmf-button-bg-1), var(--fmf-button-bg-2)) !important;
}

.fmf-search-btn:focus,
.fmf-search-btn:active,
.fmf-reset-btn:focus,
.fmf-reset-btn:active,
.fmf-page-wrapper .fmf-search-btn:focus,
.fmf-page-wrapper .fmf-search-btn:active,
.fmf-page-wrapper .fmf-reset-btn:focus,
.fmf-page-wrapper .fmf-reset-btn:active {
    outline: none !important;
    box-shadow: var(--fmf-button-shadow) !important;
    color: var(--fmf-button-text) !important;
    background: linear-gradient(180deg, var(--fmf-button-bg-1), var(--fmf-button-bg-2)) !important;
}

/* =========================================================
   7. RESULTS GRID / RESULT CARDS
   ========================================================= */
.fmf-results-grid {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

.fmf-result-card {
    padding: 24px !important;
    border-radius: var(--fmf-radius-md) !important;
    background: var(--fmf-card-bg) !important;
    border: 1px solid var(--fmf-card-border) !important;
}

.fmf-result-top {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 22px !important;
    align-items: center !important;
    margin-bottom: 22px !important;
}

.fmf-result-image-wrap {
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    min-height: 190px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#fmfResultProductImage {
    width: 100% !important;
    max-width: 210px !important;
    max-height: 150px !important;
    object-fit: contain !important;
}

.fmf-stat-grid {
    display: grid !important;
    gap: 12px !important;
}

.fmf-stat {
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.fmf-stat-label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--fmf-text-muted) !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.fmf-stat strong {
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.fmf-map-wrap {
    overflow: hidden !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#mapFindMyField {
    width: 100% !important;
    height: 480px !important;
    background: rgba(255, 255, 255, 0.10) !important;
}

.fmf-actions {
    margin-top: 20px !important;
    text-align: center !important;
}

/* =========================================================
   8. RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
    .fmf-panel {
        padding: 32px !important;
    }

    .fmf-results-panel {
        padding: 28px !important;
    }

    .fmf-header,
    .fmf-results-header {
        margin-bottom: 34px !important;
    }

    .fmf-header h2,
    .fmf-results-header h2,
    .fmf-page-wrapper .fmf-header h2,
    .fmf-page-wrapper .fmf-results-header h2 {
        font-size: 38px !important;
    }

    .fmf-intro,
    .fmf-copy {
        font-size: 17px !important;
    }

    .fmf-products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
        margin-top: 28px !important;
        margin-bottom: 28px !important;
    }

    .fmf-product-card {
        min-height: 245px !important;
    }

    .fmf-product-card img {
        max-width: 165px !important;
        height: 104px !important;
    }

    .fmf-product-card span {
        font-size: 12px !important;
    }

    .fmf-search-card {
        margin-top: 32px !important;
        padding: 24px !important;
    }

    .fmf-sample {
        font-size: 13px !important;
    }

    .fmf-input,
    .fmf-page-wrapper .fmf-input,
    .fmf-page-wrapper input.fmf-input {
        height: 60px !important;
        font-size: 16px !important;
    }

    .fmf-search-btn,
    .fmf-reset-btn,
    .fmf-page-wrapper .fmf-search-btn,
    .fmf-page-wrapper .fmf-reset-btn,
    .fmf-page-wrapper button.fmf-search-btn,
    .fmf-page-wrapper button.fmf-reset-btn {
        height: 60px !important;
        min-width: 170px !important;
        font-size: 20px !important;
        line-height: 60px !important;
    }
}

@media (max-width: 820px) {
    .fmf-page-wrapper {
        padding: 16px 8px 34px !important;
    }

    .fmf-panel,
    .fmf-results-panel {
        padding: 22px 18px !important;
        border-radius: 20px !important;
    }

    .fmf-header,
    .fmf-results-header {
        margin-bottom: 28px !important;
    }

    .fmf-header h2,
    .fmf-results-header h2,
    .fmf-page-wrapper .fmf-header h2,
    .fmf-page-wrapper .fmf-results-header h2 {
        font-size: 34px !important;
    }

    .fmf-intro,
    .fmf-copy {
        font-size: 16px !important;
    }

    .fmf-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    .fmf-product-card {
        min-height: 230px !important;
        padding: 16px 12px 12px !important;
    }

    .fmf-product-card span {
        font-size: 12px !important;
    }

    .fmf-search-card {
        margin-top: 28px !important;
        padding: 20px !important;
    }

    .fmf-search-row {
        flex-direction: column !important;
        gap: 14px !important;
    }

    .fmf-input,
    .fmf-page-wrapper .fmf-input,
    .fmf-page-wrapper input.fmf-input {
        height: 58px !important;
        font-size: 15px !important;
    }

    .fmf-search-btn,
    .fmf-reset-btn,
    .fmf-page-wrapper .fmf-search-btn,
    .fmf-page-wrapper .fmf-reset-btn,
    .fmf-page-wrapper button.fmf-search-btn,
    .fmf-page-wrapper button.fmf-reset-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 58px !important;
        font-size: 18px !important;
        line-height: 58px !important;
    }

    .fmf-result-top {
        grid-template-columns: 1fr !important;
    }

    #mapFindMyField {
        height: 380px !important;
    }
}

@media (max-width: 560px) {
    .fmf-products {
        grid-template-columns: 1fr !important;
    }

    .fmf-product-card {
        min-height: 220px !important;
    }

    .fmf-product-card img {
        max-width: 160px !important;
        height: 100px !important;
    }

    .fmf-header h2,
    .fmf-results-header h2,
    .fmf-page-wrapper .fmf-header h2,
    .fmf-page-wrapper .fmf-results-header h2 {
        font-size: 30px !important;
    }

    #mapFindMyField {
        height: 320px !important;
    }
}