.elementor-345 .elementor-element.elementor-element-6565fa6 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #0BAAC3 0%, #0BAAC3 100%);opacity:1;}.elementor-345 .elementor-element.elementor-element-6565fa6{margin-top:-8em;margin-bottom:0em;padding:10em 0em 6em 0em;}.elementor-345 .elementor-element.elementor-element-c85e6a5 > .elementor-element-populated{color:#F4A41D;}body.elementor-page-345:not(.elementor-motion-effects-element-type-background), body.elementor-page-345 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#968753;}:root{--page-title-display:none;}/* Start custom CSS for section, class: .elementor-element-6565fa6 */.section-boxes{
    background-color: #FFF5D1 !important;
}/* End custom CSS */
/* Start custom CSS *//* ===========================
   Donut Box Customizer Styles
   =========================== */

/* Main container styling */
.donut-app {
    font-family: 'Quicksand', sans-serif; /* Set main font */
    background: #fffafb;                   /* Light background color */
    border-radius: 2rem;                   /* Rounded corners for container */
    padding: 2rem;                         /* Space inside the container */
}

/* Heading font style */
.heading-font {
    font-family: 'Fredoka One', cursive;   /* Custom heading font */
}

/* Box slot (individual donut placeholders) */
.box-slot {
    aspect-ratio: 1/1;                     /* Make it square */
    border: 2px dashed #f9a8d4;            /* Dashed pink border for empty slots */
    border-radius: 50%;                     /* Fully rounded for circle shape */
    display: flex;                          /* Flex for centering content */
    align-items: center;                    /* Vertical center */
    justify-content: center;                /* Horizontal center */
    position: relative;                     /* Relative for inner content positioning */
    overflow: hidden;                       /* Hide overflow inside slot */
    background: white;                      /* White background */
    transition: all 0.2s ease-in-out;       /* Smooth hover/filled effect */
}

/* Filled slot styling (when donut is added) */
.box-slot.filled {
    border-style: solid;                    /* Change border to solid */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Subtle shadow for depth */
    cursor: pointer;                        /* Show pointer cursor */
}

/* Loading spinner for checkout button */
.loading-spinner {
    border: 3px solid #f3f3f3;             /* Gray spinner background */
    border-top: 3px solid #ec4899;         /* Pink top for spinning effect */
    border-radius: 50%;                     /* Make it circular */
    width: 20px;                            /* Spinner width */
    height: 20px;                           /* Spinner height */
    animation: spin 1s linear infinite;     /* Continuous rotation */
    display: inline-block;                  /* Inline to fit inside button text */
    vertical-align: middle;                 /* Align with text */
    margin-right: 8px;                      /* Space between spinner and text */
}

/* Keyframes for spinning animation */
@keyframes spin {
    0% { transform: rotate(0deg); }        /* Start rotation */
    100% { transform: rotate(360deg); }    /* End rotation */
}

/* Flavor card in selection grid */
.flavor-card {
    background: white;                      /* White background */
    padding: 0.5rem;                        /* Padding inside card */
    border-radius: 1rem;                    /* Rounded corners */
    border: 1px solid #f9a8d4;             /* Light pink border */
    cursor: pointer;                        /* Pointer cursor on hover */
    transition: all 0.2s ease-in-out;       /* Smooth hover transition */
    text-align: center;                     /* Center text */
}

.flavor-card:hover {
    border-color: #ec4899;                  /* Pink border on hover */
    box-shadow: 0 4px 15px rgba(236,72,153,0.2); /* Slight shadow */
}

/* Product image inside flavor card */
.flavor-card img {
    width: 100%;                            /* Full width of card */
    aspect-ratio: 1/1;                      /* Keep square */
    object-fit: cover;                      /* Cover image properly */
    border-radius: 1rem;                     /* Rounded corners for image */
    margin-bottom: 0.5rem;                  /* Space below image */
}

/* Checkout button (default disabled) */
#checkout-btn {
    width: 100%;                            /* Full width of sidebar */
    padding: 1rem 0;                        /* Vertical padding */
    border-radius: 1rem;                    /* Rounded corners */
    font-weight: bold;                       /* Bold text */
    transition: all 0.2s ease-in-out;       /* Smooth hover effect */
}

/* Checkout button when enabled */
#checkout-btn.enabled {
    background-color: #ec4899;              /* Pink background */
    color: white;                           /* White text */
    cursor: pointer;                        /* Pointer cursor */
}

#checkout-btn.enabled:hover {
    background-color: #db2777;              /* Darker pink on hover */
}

/* Error log text */
#error-log {
    color: #f87171;                         /* Red text for errors */
    font-size: 0.75rem;                     /* Small font size */
    margin-top: 0.5rem;                     /* Space above */
    text-align: center;                     /* Center text */
}

/* Buttons in box selection */
.box-btn {
    background: white;                       /* White background */
    padding: 2rem;                           /* Padding inside button */
    border-radius: 2rem;                     /* Rounded corners */
    border: 2px solid #fce7f3;              /* Light pink border */
    transition: all 0.2s ease-in-out;        /* Smooth hover effect */
    cursor: pointer;                         /* Pointer on hover */
    display: flex;                           /* Flex for icon and text */
    flex-direction: column;                  /* Icon on top, text below */
    align-items: center;                     /* Center horizontally */
}

.box-btn:hover {
    border-color: #ec4899;                   /* Darker pink on hover */
    box-shadow: 0 4px 15px rgba(236,72,153,0.2); /* Subtle shadow */
}

.box-btn span {
    font-size: 3rem;                          /* Large emoji/icon size */
}

.box-btn h3 {
    font-family: 'Fredoka One', cursive;     /* Heading font */
    margin-top: 0.5rem;                      /* Space between icon and text */
    font-size: 1.25rem;                      /* Medium font size */
}/* End custom CSS */