/* ==========================================================
   ZRECIPEZ — UNIVERSAL ACTION BUTTONS
   DEEP RED + WHITE TEXT + GOLD GLOW
   ========================================================== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.btn,
.back,
.home,
.action,
.actions a,
.pagination a,
.pager a,
.quick a,
nav a,
a.button,
a.btn {

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

    min-height: 42px !important;

    padding:
        9px 16px !important;

    margin:
        3px !important;

    color:
        #ffffff !important;

    font-weight:
        900 !important;

    text-decoration:
        none !important;

    letter-spacing:
        .35px !important;

    border:
        2px solid #ffd329 !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            180deg,
            #a52219 0%,
            #76130e 50%,
            #450806 100%
        ) !important;

    text-shadow:
        0 2px 2px #000,
        0 0 4px #000,
        0 0 7px rgba(0,0,0,.90) !important;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.28),
        inset 0 -3px 5px rgba(0,0,0,.45),
        0 0 4px #ffd700,
        0 0 9px rgba(255,190,0,.85),
        0 0 15px rgba(255,100,0,.48) !important;

    cursor:
        pointer !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease !important;
}


/* ==========================================================
   HOVER
   ========================================================== */

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover,
.btn:hover,
.back:hover,
.home:hover,
.action:hover,
.actions a:hover,
.pagination a:hover,
.pager a:hover,
.quick a:hover,
nav a:hover,
a.button:hover,
a.btn:hover {

    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #cf3121 0%,
            #941910 50%,
            #5d0b07 100%
        ) !important;

    border-color:
        #fff0a0 !important;

    transform:
        translateY(-2px)
        scale(1.03) !important;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,.35),
        inset 0 -3px 5px rgba(0,0,0,.45),
        0 0 6px #ffffff,
        0 0 12px #ffd700,
        0 0 20px #ff9b00,
        0 0 28px rgba(255,70,0,.65) !important;
}


/* ==========================================================
   ACTIVE / CURRENT
   ========================================================== */

button:active,
input[type="submit"]:active,
input[type="button"]:active,
.button:active,
.btn:active,
nav a[aria-current="page"],
nav a.active {

    transform:
        translateY(0)
        scale(.99) !important;

    background:
        linear-gradient(
            180deg,
            #8f1c14,
            #66100c,
            #3b0705
        ) !important;

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.55),
        0 0 5px #ffd700,
        0 0 11px #ff9b00 !important;
}


/* ==========================================================
   DISABLED
   ========================================================== */

button:disabled,
input:disabled {

    opacity:
        .55 !important;

    cursor:
        not-allowed !important;

    transform:
        none !important;
}


/* ==========================================================
   TEXT LINKS INSIDE RECIPE CONTENT SHOULD STAY TEXT LINKS
   ========================================================== */

.recipe-body a:not(.button):not(.btn):not(.back),
.recipe-content a:not(.button):not(.btn):not(.back),
.recipe-detail a:not(.button):not(.btn):not(.back),
.ingredients a,
.instructions a {

    display:
        inline !important;

    min-height:
        0 !important;

    padding:
        0 !important;

    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        #ffd84a !important;

    text-shadow:
        0 1px 2px #000 !important;
}


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

@media(max-width:700px) {

    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .btn,
    .back,
    .home,
    .action,
    .actions a,
    .pagination a,
    .pager a,
    .quick a,
    nav a {

        min-height:
            38px !important;

        padding:
            8px 12px !important;

        font-size:
            12px !important;
    }

}



/* ==========================================================
   ZRECIPEZ — CHILI PEPPER BUTTON OVERRIDE
   ========================================================== */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.btn,
.back,
.home,
.action,
.actions a,
.pagination a,
.pager a,
.quick a,
nav a,
a.button,
a.btn {

    position: relative !important;

    overflow: visible !important;

    padding:
        10px 20px 10px 24px !important;

    border:
        2px solid #ffd633 !important;

    border-radius:
        28px 18px 28px 18px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            160deg,
            #ef3b27 0%,
            #c81e15 34%,
            #8d100c 70%,
            #4e0705 100%
        ) !important;

    text-shadow:
        0 2px 2px #000,
        0 0 4px #000 !important;

    box-shadow:
        inset 3px 3px 5px rgba(255,255,255,.28),
        inset -4px -5px 6px rgba(50,0,0,.42),
        0 0 5px #ffd700,
        0 0 11px rgba(255,190,0,.88),
        0 0 18px rgba(255,70,0,.58) !important;

    transform:
        rotate(-1deg);

    transform-origin:
        center;

}


/* Green pepper stem */

button::before,
.button::before,
.btn::before,
.back::before,
.home::before,
.action::before,
.actions a::before,
.pagination a::before,
.pager a::before,
.quick a::before,
nav a::before,
a.button::before,
a.btn::before {

    content:
        "";

    position:
        absolute;

    left:
        -4px;

    top:
        50%;

    width:
        14px;

    height:
        9px;

    border-radius:
        80% 20% 60% 20%;

    background:
        linear-gradient(
            135deg,
            #8dd437,
            #397b19
        );

    border:
        1px solid rgba(255,215,40,.75);

    transform:
        translateY(-50%)
        rotate(-25deg);

    box-shadow:
        0 0 4px rgba(120,220,50,.75);

    pointer-events:
        none;
}


/* Make neighboring peppers look slightly organic */

nav a:nth-child(even),
.quick a:nth-child(even),
.actions a:nth-child(even) {

    transform:
        rotate(1deg);

}


nav a:nth-child(3n),
.quick a:nth-child(3n),
.actions a:nth-child(3n) {

    border-radius:
        20px 30px 18px 28px !important;
}


/* Hover — hotter chili */

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover,
.btn:hover,
.back:hover,
.home:hover,
.action:hover,
.actions a:hover,
.pagination a:hover,
.pager a:hover,
.quick a:hover,
nav a:hover,
a.button:hover,
a.btn:hover {

    color:
        #ffffff !important;

    background:
        linear-gradient(
            160deg,
            #ff6540 0%,
            #ed291b 32%,
            #b3140d 68%,
            #650905 100%
        ) !important;

    transform:
        translateY(-2px)
        rotate(0deg)
        scale(1.04) !important;

    box-shadow:
        inset 3px 3px 6px rgba(255,255,255,.35),
        inset -4px -5px 7px rgba(50,0,0,.45),
        0 0 6px #ffffff,
        0 0 13px #ffd700,
        0 0 22px #ff8b00,
        0 0 30px rgba(255,55,0,.70) !important;
}


/* Inputs cannot reliably use ::before in all browsers.
   Keep submit controls chili-red but without the green stem. */

input[type="submit"],
input[type="button"],
input[type="reset"] {

    border-radius:
        26px 16px 26px 16px !important;
}


/* Small screens */

@media(max-width:700px) {

    nav a,
    .quick a,
    .button,
    .btn,
    .back,
    button {

        transform:
            none !important;

        border-radius:
            22px !important;
    }

}



/* ==========================================================
   ZRECIPEZ — HOME / BACK BUTTON VISIBILITY
   ========================================================== */

a.home,
a.back,
.back-row a,
a[href="/"].home,
a[href="/"].back {

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

    min-height: 42px !important;

    padding:
        10px 18px !important;

    color:
        #ffffff !important;

    font-weight:
        900 !important;

    text-decoration:
        none !important;

    opacity:
        1 !important;

    border:
        2px solid #ffd329 !important;

    border-radius:
        24px !important;

    background:
        linear-gradient(
            160deg,
            #ef3b27 0%,
            #bd1c14 38%,
            #7c0d09 72%,
            #430604 100%
        ) !important;

    text-shadow:
        0 2px 2px #000,
        0 0 4px #000 !important;

    box-shadow:
        inset 3px 3px 5px rgba(255,255,255,.25),
        inset -4px -5px 6px rgba(40,0,0,.45),
        0 0 5px #ffd700,
        0 0 12px rgba(255,190,0,.90),
        0 0 20px rgba(255,75,0,.55) !important;
}


a.home:hover,
a.back:hover,
.back-row a:hover {

    color:
        #ffffff !important;

    transform:
        translateY(-2px)
        scale(1.03) !important;

    box-shadow:
        inset 3px 3px 6px rgba(255,255,255,.35),
        inset -4px -5px 7px rgba(40,0,0,.45),
        0 0 6px #ffffff,
        0 0 14px #ffd700,
        0 0 24px #ff8b00,
        0 0 32px rgba(255,55,0,.70) !important;
}