     .checkbox-wrapper-20 {
         --slider-height: 8px;
         --slider-width: calc(var(--slider-height) * 4);
         --switch-height: calc(var(--slider-height) * 3);
         --switch-width: var(--switch-height);
         --switch-shift: var(--slider-height);
         --transition: all 0.2s ease;

         --switch-on-color: #ef0460;
         --slider-on-color: #fc5d9b;

         --switch-off-color: #eeeeee;
         --slider-off-color: #c5c5c5;
     }

     .checkbox-wrapper-20 .switch {
         display: block;
     }

     .checkbox-wrapper-20 .switch .slider {
         position: relative;
         display: inline-block;
         height: var(--slider-height);
         width: var(--slider-width);
         border-radius: var(--slider-height);
         cursor: pointer;
         background: var(--slider-off-color);
         transition: var(--transition);
     }

     .checkbox-wrapper-20 .switch .slider:after {
         background: var(--switch-off-color);
         position: absolute;
         left: calc(-1 * var(--switch-shift));
         top: calc((var(--slider-height) - var(--switch-height)) / 2);
         display: block;
         width: var(--switch-height);
         height: var(--switch-width);
         border-radius: 50%;
         box-shadow: 0px 2px 2px rgba(0, 0, 0, .2);
         content: '';
         transition: var(--transition);
     }

     .checkbox-wrapper-20 .switch label {
         margin-right: 7px;
     }

     .checkbox-wrapper-20 .switch .input {
         display: none;
     }

     .checkbox-wrapper-20 .switch .input~.label {
         margin-left: var(--slider-height);
     }

     .checkbox-wrapper-20 .switch .input:checked~.slider:after {
         left: calc(var(--slider-width) - var(--switch-width) + var(--switch-shift));
     }

     .checkbox-wrapper-20 .switch .input:checked~.slider {
         background: var(--slider-on-color);
     }

     .checkbox-wrapper-20 .switch .input:checked~.slider:after {
         background: var(--switch-on-color);
     }

     #coupon_suggestions li {
         background-color: #17980e;
         padding: 2px 7px;
         color: white;
         cursor: pointer;
     }

     #coupon_suggestions {
         padding-top: 10px;
         display: flex;
         gap: 10px;
     }

     .form-group {
         margin-bottom: 1rem;
     }

     #content>div>div>div.col-inner {
         all: unset;
         padding: 10px;
         display: block;
         background: #fff;
         box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.12);
         border-radius: 2px;
         -moz-border-radius: 2px;
         -webkit-border-radius: 2px;
         max-width: 750px;
         margin: 30px auto !important;
         border-radius: 15px;
     }

     /* Create a custom checkbox */
     .checkmark {
         position: relative;
         top: 0;
         left: 0;
         height: 1.3em;
         width: 1.3em;
         background-color: #ccc;
         transition: all 0.3s;
         border-radius: 5px;
     }

     /* Create the checkmark/indicator (hidden when not checked) */
     .checkmark:after {
         content: "";
         position: absolute;
         display: none;
     }

     /* Show the checkmark when checked */
     .store-address-checkbox input:checked~.checkmark:after {
         display: block;
     }

     /* Style the checkmark/indicator */
     .store-address-checkbox .checkmark:after {
         left: 0.45em;
         top: 0.25em;
         width: 0.4em;
         height: 0.65em;
         border: solid white;
         border-width: 0 0.15em 0.15em 0;
         transform: rotate(45deg);
     }

     @keyframes pop {
         0% {
             transform: scale(1);
         }

         50% {
             transform: scale(0.9);
         }

         100% {
             transform: scale(1);
         }
     }

     /* Hide the default checkbox */
     .store-address-checkbox input {
         position: absolute;
         opacity: 0;
         cursor: pointer;
         height: 0;
         width: 0;
     }

     .store-address-checkbox {
         background-color: aliceblue;
         display: flex;
         gap: 10px;
         position: relative;
         cursor: pointer;
         font-size: 16px;
         user-select: none;
         padding: 20px;
         max-width: max-content;
         border-radius: 10px;
     }

     .store-address-checkbox input:checked+.checkmark {
         background-color: #f16784;
         animation: pop 0.5s;
         animation-direction: alternate;
     }

     .store-address-checkbox input:checked+.checkmark:after {
         display: block;
     }


     .ai-suggest-box {
         background: #f9f9fb;
         border: 1px solid #ddd;
         border-radius: 12px;
         padding: 16px;
         margin-bottom: 20px;
         position: relative;
         font-family: 'Segoe UI', sans-serif;
     }

     .ai-suggest-box h4 {
         margin: 0 0 10px;
         font-size: 16px;
         font-weight: bold;
         color: #444;
     }

     .ai-fields {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 12px;
         margin-bottom: 10px;
     }

     .ai-fields input,
     .ai-fields select {
         width: 100%;
         padding: 8px;
         border-radius: 6px;
         border: 1px solid #ccc;
         font-size: 14px;
     }

     .ai-generate-btn {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         background: #007bff;
         color: white;
         border: none;
         padding: 10px 16px;
         border-radius: 8px;
         cursor: pointer;
         transition: background 0.2s ease;
         font-size: 14px;
     }

     .ai-generate-btn:disabled {
         opacity: 0.6;
         cursor: not-allowed;
     }

     .ai-spinner {
         border: 2px solid #f3f3f3;
         border-top: 2px solid white;
         border-radius: 50%;
         width: 16px;
         height: 16px;
         animation: spin 0.8s linear infinite;
     }

     @keyframes spin {
         0% {
             transform: rotate(0);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     .ai-note {
         font-size: 13px;
         color: #777;
         margin-top: 4px;
     }