/*
 * Fusion store theme overrides.
 * Loaded last in layouts/app.blade.php so these win over the legacy theme stylesheets.
 * Values match fusionkosherstore.com: ink #0f1012, lime #c4ed1f, Outfit headings, pill buttons.
 */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Hanken Grotesk', sans-serif !important;
}

/* Primary buttons: lime pill with ink text */
.btn.style1,
.btn.style2,
.btn-primary,
.btn-purple,
.signin-btn,
.gradient-button {
    background: #c4ed1f !important;
    border-color: #c4ed1f !important;
    color: #0f1012 !important;
    border-radius: 999px !important;
    filter: none !important;
    text-shadow: none !important;
}

.btn.style1:hover, .btn.style1:focus, .btn.style1:active,
.btn.style2:hover, .btn.style2:focus, .btn.style2:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-purple:hover, .btn-purple:focus, .btn-purple:active,
.signin-btn:hover, .signin-btn:focus, .signin-btn:active,
.gradient-button:hover, .gradient-button:focus, .gradient-button:active {
    background: #b3d916 !important;
    border-color: #b3d916 !important;
    color: #0f1012 !important;
    opacity: 1 !important;
}

/* Legacy rules force white text on these lime buttons with higher specificity; repeat them here so ink wins */
header .navbar .nav li a.btn.style1,
#cart-drop-mobile .btn-cart.style1,
.tab-content .plan-wrap .item-wrap .price-wrap .style2:hover {
    color: #0f1012 !important;
}

/*
 * Section backgrounds: the store's lime artwork under an ink gradient instead of the purple bg1/bg3 images.
 * Matched on the inline image so only those sections change; !important beats the inline background.
 */
#hero[style*="bg1.png"] {
    background-color: #0f1012 !important;
    background-image:
        linear-gradient(105deg, rgba(15, 16, 18, 0.92) 0%, rgba(15, 16, 18, 0.72) 45%, rgba(15, 16, 18, 0.35) 80%, rgba(15, 16, 18, 0.15) 100%),
        url('../theme/fusion/hero-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#nationwide[style*="bg3.png"] {
    background-color: #0f1012 !important;
    background-image:
        linear-gradient(90deg, rgba(15, 16, 18, 0.94) 0%, rgba(15, 16, 18, 0.78) 40%, rgba(15, 16, 18, 0.35) 72%, rgba(15, 16, 18, 0.12) 100%),
        url('../theme/fusion/hero-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/*
 * Bring Your Own Phone: the Fusion F2 from the store, with a soft lime glow, instead of the photo of a phone showing Teltik.
 * The phone sits 380px right of centre so it clears the 450px text column and stays inside the container.
 */
section.bring[style*="girl.png"] {
    background-color: #f2f4f7 !important;
    background-image:
        url('../theme/fusion/fusion-f2.png'),
        radial-gradient(circle at calc(50% + 380px) 55%, rgba(196, 237, 31, 0.45) 0, rgba(196, 237, 31, 0) 260px) !important;
    background-size: auto 80%, auto !important;
    background-position: calc(50% + 380px) center, center !important;
    background-repeat: no-repeat !important;
}

/* Below 992px the text is full width, so keep the section plain as the legacy theme did */
@media (max-width: 991px) {
    section.bring[style*="girl.png"] {
        background-image: none !important;
    }
}

/* Coverage map (cloud.png) is a flat purple shape; render it in dark grey (#4c4c4c, close to the store's #4a5158) instead */
img.cloud {
    filter: brightness(0) invert(30%) !important;
}

/*
 * Support page: the legacy template's teal (#33cccc) in store colours.
 * Accent text and lines on white use dark lime; the contact form panel uses the footer slate with a lime button.
 */
.supportWrapper .support .info h3,
.supportWrapper .faqs ul.questions li h2 i,
.supportWrapper .faqs nav ul li a.active {
    color: #5f7a00 !important;
}

.supportWrapper .faqs nav ul li a.active {
    border-bottom-color: #5f7a00 !important;
}

.supportWrapper .faqs ul.questions li.active {
    border-color: #5f7a00 !important;
}

.supportWrapper .support form {
    background: #1f2530 !important;
}

.supportWrapper .support form input[type="submit"] {
    background: #c4ed1f !important;
    border-color: #c4ed1f !important;
    color: #0f1012 !important;
}

.supportWrapper .support form input[type="submit"]:hover,
.supportWrapper .support form input[type="submit"]:focus {
    background: #b3d916 !important;
    border-color: #b3d916 !important;
}

/* Secondary and outline buttons keep their colours but take the store's pill shape */
.btn.style3,
.btn.style4,
.btn-transparent,
.l-btn {
    border-radius: 999px !important;
}