/*****************************************************************/
/* CC (Custom Cupcake) Full Page */
/*****************************************************************/
.custom-img {
    height: 220px;
    width: 220px;
}

.cc-customize-btn-text {
    font-family: Roboto;
    font-size: 16px;
}

.cc-buton-glow {
    /*box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);*/ /* Light blue glow */
    /*transition: box-shadow 0.3s ease;*/
    /*transform: scale(1.03);
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.5);*/
}

.custom-popup-wrapper {
    max-width: 400px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.custom-cc-lbl {
    /*font-family: Roboto-Light;*/
    font-family: Roboto-Light;
    font-size: 14px;
    line-height: 1.3;
    /*background-color:#333;*/
    color: #333;
    padding: 5px;
}

.custom-popup-ddl {
    width: 100%;
    font-family: Roboto-Light;
    font-size: 14px;
    background-color: #F8F9FA;
    color: #333;
    border-radius: 5px 5px;
    padding: 5px;
}

.custom-rule-badge {
    font-family: Roboto;
    font-size: 14px;
    /*background-color: #F7F7F7;*/
    color: #666666;
    border-radius: 5px 5px;
    /*border: 1px solid #E1E1E1;*/
    padding: 5px;
    /*background-color: #E2FAFE !important;
    border: 1px solid #E1E1E1;*/
}

.custom-add-images-badge {
    display: block;
    white-space: normal;
    width: 100%;
    word-break: break-word;
    font-family: Roboto;
    font-size: 14px;
    background-color: #F7F7F7;
    color: #333;
    border-radius: 5px 5px;
    border: 1px solid #E1E1E1;
    padding: 5px;
}

.custom-order-menu-text {
    padding: 5px;
    background-color: #4d4d4d;
    font-family: Roboto;
    color: white;
    font-size: 20px;
    border-radius: 5px 5px 0px 0px; /* top-left, top-right, bottom-right, bottom-left */
}

.custom-text-area {
    font-family: Roboto;
    font-size: 14px;
    color: #666666;
}

.custom-cc-dropdown {
    padding: 6px;
    font-size: 16px;
    font-family: Roboto-Light;
}

.custom-cupcake-order-validation {
    padding: 10px;
    font-size: 16px;
    font-family: Roboto;
}

.cc-page-width {
    max-width: 1000px;
    /*margin-left: 80px;*/ /* Align left */
    /*margin-right: auto;*/
}

.cc-modal-header-style {
    /*background-color: #F7F7F7;*/
    /*background-color: #EDF5FC;*/
    background-color: #F2F8FD;
    color: #333;
    height: 55px;
}

.custom-cupcake-page-img {
    width: 450px;
    height: 450px;
}

.cc-custom-header {
    font-family: Roboto-Light;
    font-size: 20px;
    color: #666666;
    width: 250px;
}

/*May not use*/
.cc-title-container {
    /*background-color: #f7f7f7;*/
    /*background-color: #f2f2f2;*/
    /*background-color: #FFF3CD;*/
    /*background-color: #FFF8DF;*/
    /*border: 1px solid #FFECB5;*/
    border-radius: 5px 5px;
    padding: 6px;
    /*margin-top: 5px;*/
    border-radius: 5px 5px;
}
/*May not use*/
.cc-details-title {
    font-family: Roboto-Thin;
    font-size: 40px;
    margin-bottom: 0px;
    color: #666666 !important;
}

.cc-modal-form {
    margin-top: 10px;
    max-width: 700px;
    max-height: 750px;
    z-index: 1000 !important;
}

.cc-form-lines {
    background-color: #D3D3D3;
}

.cc-row-white {
    padding: 10px;
}

.cc-row-lightgray {
    padding: 20px;
    /*background-color:#f7f7f7;*/
    /*background-color: #F2F8FD;*/
    border-top: 1px solid #D8EAFA;
    border-bottom: 1px solid #D8EAFA;
}

.validation-summary-valid {
    /*display: none !important;*/
}

/*.cc-req-field {
    border: 2px solid #dc3545;
}*/

.cc-req-indicator {
    color: red;
    margin-left: 4px;
    font-weight: bold;
}

/*For Rebinding form-data during Edits*/
.fade-container {
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .fade-container.visible {
        opacity: 1;
    }



/*****************************************************************/
/* Flavor, Filling, and Icing Flavor Option Styles */
/*****************************************************************/
#flavorOptionsContainer,
#icingFlavorOptionsContainer {
    overflow-x: hidden !important;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Shared layout for option containers */
#flavorOptions,
#fillingOptions,
#icingFlavorOptions {
    display: flex;
    /*flex-wrap: wrap;*/
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: Roboto;
    font-size: 14px;
}

    /* Pill-style buttons */
    #flavorOptions .list-group-item,
    #fillingOptions .list-group-item,
    #icingFlavorOptions .list-group-item {
        display: block;
        width: 98%;
        min-height: 30px;
        /*width: auto;*/
        border-radius: 999px;
        padding: 0.35rem 0.75rem;
        /*margin: 0;*/
        background-color: #f1f3f5;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        border: none;
    }

        /* Hover and selected styling */
        #flavorOptions .list-group-item:hover,
        #fillingOptions .list-group-item:hover,
        #icingFlavorOptions .list-group-item:hover {
            background-color: #e2e6ea;
        }

        #flavorOptions .list-group-item.selected,
        #fillingOptions .list-group-item.selected,
        #icingFlavorOptions .list-group-item.selected {
            background-color: #0d6efd;
            color: #fff;
            font-weight: 500;
        }


#selectedFlavorBadges .badge,
#selectedFillingBadges .badge,
#selectedIcingFlavorBadges .badge {
    font-size: 1rem;
}


/*****************************************************************/
/* Color Picker */
/*****************************************************************/
.color-picker-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 5px;
    border-radius: 5px 5px;
    border: 1px solid #EAEAEA;
    padding: 10px 10px 5px 10px;
}

.color-picker-item {
    text-align: left;
    width: 50px; /* Control width of each item */
    font-family: Roboto;
    font-size: 12px;
}

.color-swatch .checkmark {
    display: none;
    position: absolute;
    top: -16px;
    right: -7px;
    color: white;
    background: #28a745;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
}

.color-swatch {
    position: relative;
    width: 28px;
    height: 28px;
    /*border-radius: 6px;*/
    border-radius: 50%;
    /*border: 1px solid #ccc;*/
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    background-size: cover;
}

    .color-swatch:hover {
        transform: scale(1.1);
        border-color: #888;
    }

    .color-swatch.selected {
        /*border: 3px solid #007bff;*/ /* Bootstrap blue */
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.7);
        transform: scale(1.15);
    }

        .color-swatch.selected .checkmark {
            display: block;
        }


    .color-swatch.disabled {
        opacity: 0.4;
        pointer-events: none;
        cursor: not-allowed;
    }


/*****************************************************************/
/* Toast Styles */
/*****************************************************************/
#modalToast {
    background-color: #9CEFFE;
    max-width: 300px !important;
    border: 1px solid #333 !important; /* for testing */
    z-index: 3001 !important;
    padding: 1rem !important;
    font-size: 16px !important;
    font-family: Roboto;
    color: #333;
    opacity: 1 !important;
    top: 225px !important;
    position: fixed !important;
    left: 25%;
    animation: slideFromTop 0.5s ease-out;
    z-index: 1100;
}

@keyframes slideFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Toast */
/*#ruleToast {
    background-color: #9CEFFE;
    min-width: 300px !important;
    border: 1px solid #333 !important;*/ /* for testing */
/*z-index: 99999 !important;
    padding: 1rem !important;
    font-size: 16px !important;
    font-family: Roboto;
    color: #333;
    opacity: 1 !important;
    top: 225px !important;
    position: fixed !important;
    left: 40%;
    animation: slideFromTop 0.5s ease-out;*/
/*transform: translateX(-50%);
}*/