/* =========================================================
   CRAZYNUTS GLOBAL BRAND SYSTEM

   Reference design:
   Manufacturing page

   Primary CTA      = Orange
   Secondary        = Black / dark
   Brand headings   = Burgundy + Playfair Display
   Cards            = White / warm cream
   Danger actions   = Red only when destructive
   ========================================================= */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {
    --cn-brand-red: #951f1f;
    --cn-brand-red-dark: #691d0e;
    --cn-brand-red-deep: #3a0b07;
    --cn-brand-orange: #f58220;
    --cn-brand-orange-dark: #d86712;
    --cn-brand-black: #060606;
    --cn-brand-cream: #fff8f0;
    --cn-brand-white: #ffffff;
    --cn-brand-text: #281612;
    --cn-brand-muted: rgba(40, 22, 18, .70);
    --cn-brand-border: rgba(149, 31, 31, .12);
    --cn-brand-radius-btn: 15px;
    --cn-brand-radius-card: 22px;
    --cn-brand-shadow: 0 16px 38px rgba(0, 0, 0, .08);
    --cn-brand-orange-shadow: 0 14px 28px rgba(245, 130, 32, .28);
    --cn-brand-orange-shadow-hover: 0 18px 38px rgba(245, 130, 32, .38);
    --cn-brand-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --cn-brand-font-display: "Playfair Display", serif;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

body {
    font-family: var(--cn-brand-font-body);
    color: var(--cn-brand-text);
}


/*
   Main titles across customer pages now follow
   the same typography as Manufacturing.
*/

.cn-main h1,
.cn-main h2,
.cn-displayTitle {
    font-family: var(--cn-brand-font-display);
}


/* =========================================================
   REUSABLE MANUFACTURING-STYLE BUTTON
   ========================================================= */

.cn-brandBtn {
    display: inline-flex;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 2px solid transparent;
    border-radius: var(--cn-brand-radius-btn);
    font-family: var(--cn-brand-font-body);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}


    .cn-brandBtn:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }


    .cn-brandBtn:focus-visible {
        outline: 3px solid rgba(245, 130, 32, .38);
        outline-offset: 3px;
    }


/* PRIMARY */

.cn-brandBtn--primary {
    color: #fff;
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) );
    box-shadow: var(--cn-brand-orange-shadow);
}


    .cn-brandBtn--primary:hover {
        color: #fff;
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


/* DARK */

.cn-brandBtn--dark {
    color: #fff;
    background: linear-gradient( 135deg, #171717, var(--cn-brand-black) );
}


    .cn-brandBtn--dark:hover {
        color: #fff;
        background: #000;
    }


/* OUTLINE */

.cn-brandBtn--outline {
    color: var(--cn-brand-orange);
    background: #fff;
    border-color: var(--cn-brand-orange);
}


    .cn-brandBtn--outline:hover {
        color: var(--cn-brand-orange-dark);
        background: var(--cn-brand-cream);
    }


/* DANGER */

.cn-brandBtn--danger {
    color: var(--cn-brand-red);
    background: #fff;
    border-color: rgba(149, 31, 31, .35);
}


    .cn-brandBtn--danger:hover {
        background: rgba(149, 31, 31, .06);
    }


/* =========================================================
   ABOUT PAGE
   ========================================================= */


/*
   Keep burgundy titles, but use the
   Manufacturing orange CTA instead of WhatsApp green.
*/

.cn-aboutTitle {
    color: var(--cn-brand-red);
}


.cn-branchCard__btn {
    min-height: 46px !important;
    padding: 11px 17px !important;
    border-radius: var(--cn-brand-radius-btn) !important;
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    color: #fff !important;
    box-shadow: var(--cn-brand-orange-shadow);
    font-weight: 950 !important;
}


    .cn-branchCard__btn:hover {
        opacity: 1 !important;
        transform: translateY(-2px) !important;
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


.cn-branchCard.is-active {
    border-color: rgba(245, 130, 32, .60) !important;
    box-shadow: 0 12px 28px rgba(245, 130, 32, .12) !important;
}


.cn-branchCard__pill {
    color: var(--cn-brand-orange-dark) !important;
    background: rgba(245, 130, 32, .10) !important;
}


/* =========================================================
   HOME PAGE
   ========================================================= */

.cn-mixCta__title {
    font-family: var(--cn-brand-font-display);
}


/*
   Existing home Mix CTA was white/burgundy.
   Change it to Manufacturing orange.
*/

.cn-mixCta__btn {
    min-height: 50px !important;
    height: auto !important;
    padding: 12px 20px !important;
    border: 2px solid transparent !important;
    border-radius: var(--cn-brand-radius-btn) !important;
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    color: #fff !important;
    box-shadow: var(--cn-brand-orange-shadow);
    font-weight: 950;
}


    .cn-mixCta__btn:hover {
        filter: none !important;
        transform: translateY(-2px);
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


/* =========================================================
   PRODUCT DETAILS
   ========================================================= */

.cn-btn2 {
    min-height: 50px !important;
    height: auto !important;
    border-radius: var(--cn-brand-radius-btn) !important;
    padding: 12px 18px !important;
}


/* Add to cart */

.cn-btn2--primary {
    color: #fff !important;
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    box-shadow: var(--cn-brand-orange-shadow);
}


    .cn-btn2--primary:hover {
        filter: none !important;
        transform: translateY(-2px);
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


/* Continue shopping */

.cn-btn2--ghost {
    color: var(--cn-brand-orange-dark) !important;
    background: #fff !important;
    border: 2px solid var(--cn-brand-orange) !important;
}


    .cn-btn2--ghost:hover {
        background: var(--cn-brand-cream) !important;
    }


/* Weight selector */

.cn-weight__btn.is-active {
    border-color: var(--cn-brand-orange) !important;
    background: var(--cn-brand-orange) !important;
    color: #fff !important;
}


/* =========================================================
   MIX PAGE
   ========================================================= */

.mix-btn {
    min-height: 48px;
    border-radius: var(--cn-brand-radius-btn) !important;
}


    /*
   Normal small actions remain dark,
   matching Manufacturing secondary styling.
*/

    .mix-btn:not(.mix-btn--primary):not(.mix-btn--outline) {
        background: var(--cn-brand-black);
        border-color: var(--cn-brand-black);
        color: #fff;
    }


/* Add mix to cart */

.mix-btn--primary {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    box-shadow: var(--cn-brand-orange-shadow);
}


    .mix-btn--primary:hover {
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


/* Outline action */

.mix-btn--outline {
    color: var(--cn-brand-orange-dark) !important;
    background: #fff !important;
    border: 2px solid var(--cn-brand-orange) !important;
}


/* Box size */

.mix-size__btn.is-active {
    border-color: var(--cn-brand-orange) !important;
    background: var(--cn-brand-orange) !important;
    color: #fff !important;
}


/* =========================================================
   CART
   ========================================================= */

.cn-cart .cn-btn {
    min-height: 50px !important;
    height: auto !important;
    border-radius: var(--cn-brand-radius-btn) !important;
    padding: 12px 18px !important;
}


.cn-cart .cn-btn--primary {
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    color: #fff !important;
    box-shadow: var(--cn-brand-orange-shadow);
}


    .cn-cart .cn-btn--primary:hover {
        filter: none !important;
        transform: translateY(-2px);
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


/* Active weight chip */

.cn-cart .cn-chip.is-active {
    background: var(--cn-brand-orange) !important;
    border-color: var(--cn-brand-orange) !important;
    color: #fff !important;
}


/* =========================================================
   CHECKOUT
   ========================================================= */


/*
   Checkout previously used green.
   Now all primary checkout actions match Manufacturing.
*/

.checkout-submit {
    min-height: 52px !important;
    border-radius: var(--cn-brand-radius-btn) !important;
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    color: #fff !important;
    box-shadow: var(--cn-brand-orange-shadow) !important;
}


    .checkout-submit:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--cn-brand-orange-shadow-hover) !important;
    }


    .checkout-submit:focus-visible {
        outline: 3px solid rgba(245, 130, 32, .38) !important;
    }


/*
   COD itself is not a WhatsApp-success indicator,
   so it should no longer be green.
*/

.cod-option {
    border-color: rgba(245, 130, 32, .28) !important;
    background: var(--cn-brand-cream) !important;
}


.cod-option__icon {
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
}


.cod-option span {
    color: var(--cn-brand-muted) !important;
}


/* Selected branch */

.branch-option:has(input:checked) {
    border-color: var(--cn-brand-orange) !important;
    background: var(--cn-brand-cream) !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, .08) !important;
}


.branch-option input[type="radio"] {
    accent-color: var(--cn-brand-orange) !important;
}


.branch-map {
    color: var(--cn-brand-orange-dark) !important;
}


/* =========================================================
   CUSTOMER ORDERS
   ========================================================= */

.cn-ordersPrimaryBtn {
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    color: #fff !important;
    box-shadow: var(--cn-brand-orange-shadow);
}


    .cn-ordersPrimaryBtn:hover {
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


/*
   WhatsApp buttons intentionally use the same
   brand CTA instead of green so the visual language
   remains consistent.
*/

.cn-orderWhatsAppBtn {
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    color: #fff !important;
    box-shadow: var(--cn-brand-orange-shadow);
}


    .cn-orderWhatsAppBtn:hover {
        opacity: 1 !important;
        transform: translateY(-2px);
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


/* Order progression */

.cn-orderProgressStep.is-done
.cn-orderProgressDot {
    border-color: var(--cn-brand-orange) !important;
    background: var(--cn-brand-orange) !important;
}


.cn-orderProgressLine.is-done {
    background: var(--cn-brand-orange) !important;
}


/* =========================================================
   AUTH — LOGIN / REGISTER
   ========================================================= */

.cn-authTitle {
    font-family: var(--cn-brand-font-display);
    color: var(--cn-brand-red) !important;
}


.cn-auth .cn-btn {
    min-height: 50px !important;
    height: auto !important;
    border-radius: var(--cn-brand-radius-btn) !important;
    padding: 12px 18px !important;
}


.cn-auth .cn-btn--primary {
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    color: #fff !important;
    box-shadow: var(--cn-brand-orange-shadow);
}


    .cn-auth .cn-btn--primary:hover {
        filter: none !important;
        transform: translateY(-2px);
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


.cn-auth .cn-btn--ghost {
    color: var(--cn-brand-orange-dark) !important;
    background: #fff !important;
    border: 2px solid var(--cn-brand-orange) !important;
}


/* Input focus */

.cn-input:focus {
    border-color: var(--cn-brand-orange) !important;
    box-shadow: 0 0 0 4px rgba(245, 130, 32, .10) !important;
}


/* =========================================================
   WISHLIST
   Temporary brand unification.
   Full redesign comes in 18.5C.
   ========================================================= */

.wl-cta,
.wl-btn--primary {
    color: #fff !important;
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    border-color: transparent !important;
    box-shadow: var(--cn-brand-orange-shadow);
}


    .wl-cta:hover,
    .wl-btn--primary:hover {
        background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


.wl-btn--ghost {
    color: var(--cn-brand-orange-dark) !important;
    background: #fff !important;
    border: 2px solid var(--cn-brand-orange) !important;
}


/*
   Remove stays red because it is genuinely destructive.
*/

.wl-btn--danger {
    color: var(--cn-brand-red) !important;
    background: #fff !important;
    border-color: rgba(149, 31, 31, .32) !important;
}


/* =========================================================
   POPUP CTA
   ========================================================= */

.cn-pop__cta {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cn-brand-radius-btn) !important;
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    color: #fff !important;
    border: 2px solid transparent !important;
    box-shadow: var(--cn-brand-orange-shadow);
}


    .cn-pop__cta:hover {
        filter: none !important;
        transform: translateY(-2px);
        box-shadow: var(--cn-brand-orange-shadow-hover);
    }


/* =========================================================
   BOOTSTRAP LEGACY BUTTONS
   For dormant verification / old pages.
   ========================================================= */

.cn-main .btn-primary {
    background: linear-gradient( 135deg, var(--cn-brand-orange), var(--cn-brand-orange-dark) ) !important;
    border-color: var(--cn-brand-orange) !important;
    color: #fff !important;
}


.cn-main .btn-outline-secondary {
    color: var(--cn-brand-orange-dark) !important;
    background: #fff !important;
    border-color: var(--cn-brand-orange) !important;
}


/* =========================================================
   GENERAL FORM FOCUS
   ========================================================= */

.cn-main input:focus,
.cn-main select:focus,
.cn-main textarea:focus {
    outline: none;
}


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

@media (max-width: 640px) {

    .cn-brandBtn {
        min-height: 50px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cn-brandBtn,
    .cn-branchCard__btn,
    .cn-mixCta__btn,
    .cn-btn2,
    .mix-btn,
    .checkout-submit,
    .cn-orderWhatsAppBtn,
    .wl-btn,
    .wl-cta {
        transition: none !important;
    }

        .cn-brandBtn:hover,
        .cn-branchCard__btn:hover,
        .cn-mixCta__btn:hover,
        .cn-btn2:hover,
        .mix-btn:hover,
        .checkout-submit:hover,
        .cn-orderWhatsAppBtn:hover,
        .wl-btn:hover,
        .wl-cta:hover {
            transform: none !important;
        }
}