/* Start custom CSS for html, class: .elementor-element-46ad233 *//* =========================================
   KUPON - WAKATOBI HUB
========================================= */

.wkl-coupon-box {
    margin-bottom: 20px;
}

.wkl-coupon-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 15px;

    border: 1px solid #dce2e9;
    border-radius: 9px;

    background: #fff;
    color: #172033;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: all .2s ease;
}

.wkl-coupon-toggle:hover {
    background: #f7fbff;
    border-color: #bcd4ea;
}

.wkl-coupon-arrow {
    font-size: 18px;
    line-height: 1;

    transition: transform .2s ease;
}

.wkl-coupon-box.active .wkl-coupon-arrow {
    transform: rotate(180deg);
}


/* FORM KUPON */

.wkl-coupon-form {
    display: none;

    margin-top: 10px;
    padding: 14px;

    background: #f7f9fc;

    border: 1px solid #e1e6ed;
    border-radius: 9px;
}

.wkl-coupon-box.active .wkl-coupon-form {
    display: block;
}


/* INPUT + BUTTON */

.wkl-coupon-input {
    display: flex;
    gap: 8px;
}

.wkl-coupon-input input {
    flex: 1;
    min-width: 0;

    height: 42px;

    padding: 0 12px;

    border: 1px solid #d5dce5 !important;
    border-radius: 7px !important;

    background: #fff !important;

    color: #172033;

    font-size: 13px;

    outline: none;
}

.wkl-coupon-input input:focus {
    border-color: #0866d6 !important;
    box-shadow: 0 0 0 2px rgba(8,102,214,.08);
}

.wkl-coupon-input button {
    height: 42px;

    padding: 0 16px;

    border: 0 !important;
    border-radius: 7px !important;

    background: #0866d6 !important;
    color: #fff !important;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

    transition: .2s;
}

.wkl-coupon-input button:hover {
    background: #0754ad !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .wkl-coupon-input {
        display: block;
    }

    .wkl-coupon-input input {
        width: 100%;
        margin-bottom: 8px;
    }

    .wkl-coupon-input button {
        width: 100%;
    }

}/* End custom CSS */