/* ==========================================================================
   REUSABLE BUTTON CLASSES
   Applied via Divi's "CSS Class" field on Button modules.
   Usage: btn-blue | btn-pink | btn-outline | btn-light
   ========================================================================== */

/* ---------- Shared base styles ---------- */
.et_pb_button.btn-blue,
.et_pb_button.btn-pink,
.et_pb_button.btn-outline,
.et_pb_button.btn-light {
    padding: 1rem 2.25rem !important;
    font-family: var(--jw-font-body, 'Lato', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    border-width: 2px !important;
    border-style: solid !important;
    line-height: 1.7 !important;
    transition: all 0.35s ease !important;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none !important;
}

/* Remove Divi's default ::after arrow icon */
.et_pb_button.btn-blue::after,
.et_pb_button.btn-pink::after,
.et_pb_button.btn-outline::after,
.et_pb_button.btn-light::after {
    display: none !important;
}

/* ---------- btn-blue: Pacific Blue solid ---------- */
.et_pb_button.btn-blue {
    background-color: var(--jw-pacific-blue, #47A8BD) !important;
    border-color: var(--jw-pacific-blue, #47A8BD) !important;
    color: #fff !important;
}

.et_pb_button.btn-blue:hover {
    background-color: #3B8FA0 !important;
    border-color: #3B8FA0 !important;
    color: #fff !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 24px rgba(71, 168, 189, 0.4) !important;
}

/* ---------- btn-pink: Petal Pink solid ---------- */
.et_pb_button.btn-pink {
    background-color: var(--jw-petal-pink, #B27092) !important;
    border-color: var(--jw-petal-pink, #B27092) !important;
    color: #fff !important;
}

.et_pb_button.btn-pink:hover {
    background-color: #96577A !important;
    border-color: #96577A !important;
    color: #fff !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 24px rgba(178, 112, 146, 0.4) !important;
}

/* ---------- btn-outline: Semi-transparent + charcoal border ---------- */
.et_pb_button.btn-outline {
    background-color: rgba(248, 247, 241, 0.4) !important;
    border-color: var(--jw-charcoal, #424B54) !important;
    color: var(--jw-charcoal, #424B54) !important;
}

.et_pb_button.btn-outline:hover {
    background-color: var(--jw-charcoal, #424B54) !important;
    border-color: var(--jw-charcoal, #424B54) !important;
    color: #fff !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 24px rgba(66, 75, 84, 0.3) !important;
}

/* ---------- btn-light: Opaque light background, no visible border ---------- */
.et_pb_button.btn-light {
    background-color: var(--jw-porcelain, #F8F7F1) !important;
    border-color: var(--jw-porcelain, #F8F7F1) !important;
    color: var(--jw-charcoal, #424B54) !important;
}

.et_pb_button.btn-light:hover {
    background-color: var(--jw-eggshell, #EDEADB) !important;
    border-color: var(--jw-eggshell, #EDEADB) !important;
    color: var(--jw-charcoal, #424B54) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 24px rgba(66, 75, 84, 0.15) !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .et_pb_button.btn-blue,
    .et_pb_button.btn-pink,
    .et_pb_button.btn-outline,
    .et_pb_button.btn-light {
        transition: none !important;
    }

    .et_pb_button.btn-blue:hover,
    .et_pb_button.btn-pink:hover,
    .et_pb_button.btn-outline:hover,
    .et_pb_button.btn-light:hover {
        transform: none !important;
    }
}