.notify-me-form {
    margin-top: 20px;
}

.notify-me-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #ff5a5f;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.notify-me-container {
    display: block !important;
}

.notify-me-hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

.notify-me-button:hover {
    background-color: #ff7e82;
}

.notify-me-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.notify-me-popup-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.notify-me-popup-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.notify-me-popup-close:hover,
.notify-me-popup-close:focus {
    color: #ff5a5f;
    text-decoration: none;
}

.notify-me-popup form {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
}

.notify-me-popup label {
    display: block;
    margin-bottom: 10px;
}

.notify-me-popup input[type="email"],
.notify-me-popup input[type="text"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.notify-me-popup button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
}

.notify-me-popup button[type="submit"]:hover {
    background-color: #45a049;
}

.notify-me-button-hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 600px) {
    .notify-me-popup-content {
        width: 90%;
    }
}

.notify-me-error {
    color: red;
    margin-top: 10px;
}
.notify-me-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
}

.notify-me-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.notify-me-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-dialog {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
    border-radius: 4px;
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title {
    margin: 0;
}

.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-body {
    margin-bottom: 20px;
}

.notify-popup-message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
}

.notify-me-settings-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notify-me-settings-section {
    margin-bottom: 40px;
}

.notify-me-settings-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.notify-me-color-picker {
    width: 100px;
}

.notify-popup-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.modal-dialog {
    max-width: 600px;
}

.modal-content {
    background-color: #f8f8f8;
    border-radius: 10px;
}

.product-image {
    text-align: center;
    margin-bottom: 20px;
}

.product-image img {
    max-width: 200px;
    max-height: 200px;
}
.notify-me-button-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url('path/to/icon.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.notify-me-button span {
    margin-right: 5px;
}
.notify-me-filter-form {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.notify-me-filter-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notify-me-filter-section label {
    margin-right: 5px;
}

.notify-me-filter-section input[type="text"],
.notify-me-filter-section select {
    width: 200px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.notify-me-requests-table {
    margin-top: 20px;
}

.notify-me-requests-table th,
.notify-me-requests-table td {
    padding: 10px;
    text-align: left;
}

.notify-me-requests-table .actions {
    text-align: center;
}

.notify-me-requests-table .actions button {
    margin-right: 5px;
}
.notify-me-popup p {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
}
.notify-me-guest-message {
    margin-bottom: 15px;
}
.notify-me-guest-message p {
    font-size: 14px;
    line-height: 1.5;
}
.notify-popup-text {
    color: #333;
    font-size: 16px;
    margin-bottom: 20px;
}
.notify-me-popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.notify-me-popup-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 40px;
    border-radius: 10px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.notify-me-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.notify-me-close:hover {
    color: #000;
}

#notify-me-form input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#notify-me-form button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#notify-me-form button:hover {
    background-color: #45a049;
}

#notify-me-message {
    margin-top: 20px;
    font-weight: bold;
}

.loading-message,
.success-message,
.error-message {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.loading-message {
    background-color: #f0f0f0;
    color: #333;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
}

#notify-me-loading {
    text-align: center;
    margin-top: 10px;
}

#notify-me-loading img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

#notify-me-message {
    margin-top: 10px;
    font-weight: bold;
}

#notify-me-message.success {
    color: green;
}

#notify-me-message.error {
    color: red;
}

.notify-me-icon svg {
    color: currentColor;
    width: 24px;
    height: 24px;
}

body h1:not(.notify-me-root h1),
body h2:not(.notify-me-root h2),
body h3:not(.notify-me-root h3),
body h4:not(.notify-me-root h4),
body h5:not(.notify-me-root h5),
body h6:not(.notify-me-root h6),
body strong:not(.notify-me-root strong),
body b:not(.notify-me-root b),
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6,
.elementor strong,
.elementor b,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6,
.woocommerce strong,
.woocommerce b {
    font-family: inherit !important;
}

.admin-bar h1,
.admin-bar h2,
.admin-bar h3,
.admin-bar h4,
.admin-bar h5,
.admin-bar h6,
.admin-bar strong,
.admin-bar b,
#wpadminbar h1,
#wpadminbar h2,
#wpadminbar h3,
#wpadminbar h4,
#wpadminbar h5,
#wpadminbar h6,
#wpadminbar strong,
#wpadminbar b {
    font-family: inherit !important;
}