/* Payment Modal */
.mq-modal {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0;
    padding: 40px;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100dvh;
    width: 100vw;
    z-index: 999999;
}

.mq-modal * {
    box-sizing: border-box;
}

.mq-modal-content {
    background: linear-gradient(to bottom, #ffffff, #f8faff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    margin: 40px auto;
    max-width: 500px;
    max-height: calc(100vh - 80px);
    position: relative;
    padding: 25px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 90%;
}

/* Improve modal scrolling */
.mq-modal-content::-webkit-scrollbar {
    width: 8px;
}

.mq-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.mq-modal-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.mq-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Close Button */
.mq-modal-close {
    background: #f0f7ff;
    border-radius: 50%;
    cursor: pointer;
    color: #4f566b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: all 0.2s ease;
    height: 32px;
    width: 32px;
    z-index: 9;
}

.mq-modal-close:hover {
    background: #e6efff;
    color: #2e3192;
    transform: rotate(90deg);
}

/* Buttons */
.mq-modal-button.button,
.mq-modal-button[type=submit] {
    background: linear-gradient(135deg, #2e3192 0%, #00aeef 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    font-size: 16px;
    line-height: normal;
    transition: all 0.2s ease;
}

.mq-modal-button.button:hover,
.mq-modal-button[type=submit]:hover {
    background: linear-gradient(135deg, #252a7d 0%, #0095cc 100%);
    box-shadow: 0 6px 15px rgba(0, 174, 239, 0.3);
    transform: translateY(-1px);
}

.mq-modal-button.button:active,
.mq-modal-button[type=submit]:active {
    box-shadow: 0 2px 8px rgba(0, 174, 239, 0.2);
    transform: translateY(0);
}

.mq-modal-button.button:disabled,
.mq-modal-button[type=submit]:disabled {
    background: #e6efff;
    box-shadow: none;
    cursor: not-allowed;
    color: #8792a2;
    transform: none;
}

.mq-modal-button[type=submit] {
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 14px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    width: 100%;
}

.mq-modal-button.button {
    box-shadow: 0 4px 12px rgba(0, 174, 239, 0.2);
    font-weight: 600;
    padding: 14px 28px;
}

#mq-profile-form .mq-modal-button i {
    vertical-align: bottom;
}

.mq-modal-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.mq-add-payment-method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mq-button-danger {
    background: #fa755a;
    color: white;
}

.mq-button-danger:hover {
    background: #e66a50;
}
.invoice-download {
    background-color: #00c3ff;
    color: #fff;
    padding: 3px 8px 3px 30px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10V11H17C18.933 11 20.5 12.567 20.5 14.5C20.5 16.433 18.933 18 17 18H16.9C16.3477 18 15.9 18.4477 15.9 19C15.9 19.5523 16.3477 20 16.9 20H17C20.0376 20 22.5 17.5376 22.5 14.5C22.5 11.7793 20.5245 9.51997 17.9296 9.07824C17.4862 6.20213 15.0003 4 12 4C8.99974 4 6.51381 6.20213 6.07036 9.07824C3.47551 9.51997 1.5 11.7793 1.5 14.5C1.5 17.5376 3.96243 20 7 20H7.1C7.65228 20 8.1 19.5523 8.1 19C8.1 18.4477 7.65228 18 7.1 18H7C5.067 18 3.5 16.433 3.5 14.5C3.5 12.567 5.067 11 7 11H8V10ZM13 11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V16.5858L9.70711 15.2929C9.31658 14.9024 8.68342 14.9024 8.29289 15.2929C7.90237 15.6834 7.90237 16.3166 8.29289 16.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L15.7071 16.7071C16.0976 16.3166 16.0976 15.6834 15.7071 15.2929C15.3166 14.9024 14.6834 14.9024 14.2929 15.2929L13 16.5858V11Z" fill="%23000000" style="&%2310; fill: %23fff;&%2310;"/></svg>');
    background-position: left 9px center;
    background-size: 17px;
    background-repeat: no-repeat;
}
.invoice-download:hover,
.invoice-download:focus {
    color: #fff;
    background-color: #05a5d6;
}
a[href*="?view=manage_"] {
    padding: 3px 8px 3px 30px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    background-color: #0160e7;
    color: #fff;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none"><g id="style=stroke"><g id="setting"><path id="vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M12 9.75C10.7574 9.75 9.75 10.7574 9.75 12C9.75 13.2426 10.7574 14.25 12 14.25C13.2426 14.25 14.25 13.2426 14.25 12C14.25 10.7574 13.2426 9.75 12 9.75ZM8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12Z" fill="%23000000" style="&%2310; fill: %23fff;&%2310;"/><path id="vector (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M9.60347 3.77018C9.3358 3.32423 8.77209 3.18551 8.35347 3.43457L8.34256 3.44105L6.61251 4.43096C6.06514 4.74375 5.8763 5.45289 6.1894 5.9948L5.54 6.37001L6.18888 5.99391C6.72395 6.91704 6.86779 7.92882 6.38982 8.75823C5.91192 9.58753 4.96479 9.97001 3.9 9.97001C3.26678 9.97001 2.75 10.4917 2.75 11.12V12.88C2.75 13.5084 3.26678 14.03 3.9 14.03C4.96479 14.03 5.91192 14.4125 6.38982 15.2418C6.86773 16.0711 6.72398 17.0827 6.18909 18.0058C5.87642 18.5476 6.06491 19.2561 6.6121 19.5688L8.35352 20.5654C8.77214 20.8144 9.33577 20.6758 9.60345 20.2299L9.71093 20.0442C10.2458 19.1214 11.052 18.4925 12.0087 18.4925C12.9662 18.4925 13.77 19.1219 14.3 20.0458C14.3002 20.0462 14.3004 20.0466 14.3007 20.047L14.4065 20.2298C14.6742 20.6758 15.2379 20.8145 15.6565 20.5655L15.6674 20.559L17.3975 19.5691C17.9434 19.2571 18.1351 18.5578 17.8198 18.0038C17.2858 17.0813 17.1426 16.0705 17.6202 15.2418C18.0981 14.4125 19.0452 14.03 20.11 14.03C20.7432 14.03 21.26 13.5084 21.26 12.88V11.12C21.26 10.4868 20.7384 9.97001 20.11 9.97001C19.0452 9.97001 18.0981 9.58753 17.6202 8.75824C17.1423 7.92899 17.286 6.91744 17.8208 5.99445C18.1336 5.45258 17.9451 4.74391 17.3979 4.43119L15.6565 3.43466C15.2379 3.1856 14.6742 3.32423 14.4065 3.77019L14.2991 3.95579C13.7642 4.8786 12.958 5.50751 12.0012 5.50751C11.0439 5.50751 10.2402 4.87825 9.71021 3.95455C9.70992 3.95403 9.70962 3.95352 9.70933 3.95301L9.60347 3.77018ZM7.59248 2.14193C8.75191 1.45656 10.2226 1.87704 10.8946 3.00654L10.8991 3.01421L11.0091 3.20423L11.0107 3.20701C11.3807 3.85247 11.7666 4.00751 12.0012 4.00751C12.237 4.00751 12.6259 3.85115 13.0009 3.20423C13.001 3.20412 13.0009 3.20434 13.0009 3.20423L13.1154 3.00651C13.7874 1.877 15.2581 1.45656 16.4175 2.14193L18.1421 3.12883C19.4147 3.85604 19.8463 5.48713 19.1194 6.74522L19.1189 6.74611C18.7439 7.39298 18.8028 7.8062 18.9198 8.00929C19.0369 8.21249 19.3648 8.47001 20.11 8.47001C21.5616 8.47001 22.76 9.65323 22.76 11.12V12.88C22.76 14.3317 21.5768 15.53 20.11 15.53C19.3648 15.53 19.0369 15.7875 18.9198 15.9907C18.8028 16.1938 18.7439 16.607 19.1189 17.2539L19.1212 17.2579C19.8444 18.5235 19.4157 20.1431 18.1425 20.871C18.1424 20.871 18.1426 20.8709 18.1425 20.871L16.4174 21.8581C15.258 22.5434 13.7874 22.123 13.1154 20.9935L13.1109 20.9858L13.0009 20.7958L12.9993 20.793C12.6293 20.1476 12.2434 19.9925 12.0087 19.9925C11.773 19.9925 11.3841 20.1489 11.0091 20.7958C11.009 20.7959 11.0091 20.7957 11.0091 20.7958L10.8946 20.9935C10.2226 22.123 8.75199 22.5434 7.59257 21.8581L5.8679 20.8712C5.86776 20.8711 5.86803 20.8713 5.8679 20.8712C4.59558 20.1439 4.16378 18.5128 4.8906 17.2548L4.89112 17.2539C5.26605 16.607 5.20721 16.1938 5.09018 15.9907C4.97308 15.7875 4.64521 15.53 3.9 15.53C2.43322 15.53 1.25 14.3317 1.25 12.88V11.12C1.25 9.66837 2.43322 8.47001 3.9 8.47001C4.64521 8.47001 4.97308 8.21249 5.09018 8.00929C5.20721 7.8062 5.26605 7.39298 4.89112 6.74611L4.8906 6.74522C4.16378 5.48726 4.59518 3.85639 5.86749 3.12906L7.59248 2.14193Z" fill="%23000000" style="&%2310; fill: %23fff;&%2310;"/></g></g></svg>');
    background-position: left 9px center;
    background-size: 16px;
    background-repeat: no-repeat;
}
a[href*="?view=manage_"]:hover,
a[href*="?view=manage_"]:focus {
	color: #fff;
    background-color: #0143a1;
}

#mq-pause-subscription.mq-pause-restart-subscription {
    background: #d5d50a;
    box-shadow: none;
}
#mq-pause-subscription.mq-pause-restart-subscription:hover {
    background: #dbdb21;
    box-shadow: none;
}
.manage-subscriptions-main .mq-cancel-subscription {
    background: #dc3545;
    box-shadow: none;
}
.manage-subscriptions-main .mq-cancel-subscription:hover {
    background: #e74c3c;
    box-shadow: none;
}
#mq-update-card-button.button {
    background: #20c997;
    box-shadow: none;
}
#mq-update-card-button.button:hover {
    box-shadow: none;
    background: #1bdba1;
}
#mq-renewal-subscriptions {
    color: #2e3192;
    font-size: 24px;
    margin: 25px 0 0;
}

/* Error and Success Messages */
.mq-modal-errors,
.mq-modal-success {
    display: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 15px;
    padding: 12px 16px;
}

.mq-modal-errors {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border: 1px solid #fed7d7;
    color: #e53e3e;
}

.mq-modal-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    color: #047857;
}

.mq-error-text {
    color: #e53e3e;
    font-size: 14px;
    font-weight: 500;
}

.mq-required {
    color: #e53e3e;
}

/* Form Elements */
.mq-form-group {
    margin-bottom: 15px;
}

.mq-form-group label {
    display: block;
    color: #2e3192;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    padding-left: 2px;
}

.mq-form-group label i {
    vertical-align: sub;
}

.mq-form-group input,
.mq-form-group textarea,
.mq-form-group select {
    background: #f8faff;
    border: 1px solid #e6efff;
    border-radius: 8px !important;
    font-size: 15px;
    line-height: normal;
    padding: 11px 14px;
    transition: all 0.2s ease;
    width: 100%;
}

.mq-form-group select {
    padding-top: 10px;
    padding-bottom: 10px;
}

.mq-form-group input:focus,
.mq-form-group textarea:focus,
.mq-form-group select:focus {
    background: #ffffff;
    border-color: #00aeef;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
    outline: none;
}

.mq-form-group label:has(input[type=checkbox]) {
    padding: 0;
}

.mq-form-group input[type=checkbox] {
    margin-left: 0;
    width: auto;
}

/* Auth Links */
.mq-modal-links,
.mq-modal-switch {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 0;
    text-align: center;
}

.mq-modal-links a,
.mq-modal-switch a {
    color: #007bff;
    text-decoration: none;
}

.mq-modal-links a:hover,
.mq-modal-switch a:hover {
    text-decoration: underline;
}

.mq-modal-separator {
    color: #666;
    margin: 0 10px;
}

/* Payment */
.octf-btn-icon i {
    vertical-align: middle;
}

.mq-modal-payment .mq-modal-content {
    max-width: 700px;
}

.mq-modal-payment .mq-modal-content .product-pricing {
    margin-bottom: 0;
    padding: 5px 18px;
}

.mq-modal-payment .mq-modal-content .product-description {
    padding: 10px 15px;
    margin-bottom: 10px;
}

.mq-modal-payment .mq-modal-content .mq-form-row {
    margin-bottom: 0;
}

.mq-modal-payment .mq-modal-content h2 {
    font-size: 23px;
    margin-bottom: 10px;
}

.mq-modal-payment .mq-modal-content .payment-form-container h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.mq-modal-payment .mq-modal-content .product-details {
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.mq-modal-payment .mq-modal-content .price-amount {
    font-size: 20px;
    line-height: 20px;
}

.mq-modal-payment .mq-modal-content .mq-form-group {
    margin-bottom: 10px;
}

.mq-modal-payment .mq-modal-content .mq-form-group label {
    margin-bottom: 4px;
}
#mq-pause-restart-subscription-modal .product-details,
#mq-cancel-subscription-modal .product-details {
    border: none;
    padding-bottom: 0;
}
#mq-pause-restart-subscription-modal .payment-form-container p,
#mq-cancel-subscription-modal .payment-form-container p {
    text-align: center;
}
#mq-confirm-subscription-action,
#mq-confirm-cancel-subscription {
    margin: 10px auto 0;
    display: block;
}
#card-modal .product-details {
    border-bottom: none;
    padding: 0;
} 
#card-modal #updateCard .row .form-group label {
    display: block;
    color: #2e3192;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    padding-left: 2px;
}
#card-modal #updateCard .row {
    display: flex;
    flex-wrap: wrap;
}
#card-modal #updateCard input[type="text"] {
    background: #f8faff;
    border: 1px solid #e6efff;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 25px;
    transition: all 0.2s ease;
    width: 100%;
}
#card-modal #updateCard input[type="text"]:focus {
    background: #ffffff;
    border-color: #00aeef;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
}
#card-modal #updateCard .form-group ,
#sc_update_card_button {
    margin-top: 15px;
}
@media screen and (max-width: 767px) {
    #card-modal #updateCard .row .form-group {
        width: 100%;
    }    
}


/* Product Details */
.product-details {
    border-bottom: 2px solid #e6efff;
    margin-bottom: 25px;
    padding-bottom: 20px;
}

.mq-modal-content h2 {
    background: linear-gradient(to right, #2e3192, #00aeef);
    border-bottom: 2px solid #e6efff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    color: #2e3192;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
    padding-left: 15px;
    padding-bottom: 12px;
    position: relative;
}

.mq-modal-content h2::before {
    background: linear-gradient(to bottom, #2e3192, #00aeef);
    border-radius: 3px;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
}

.product-description {
    background: linear-gradient(135deg, rgba(240, 247, 255, 0.5) 0%, rgba(230, 239, 255, 0.5) 100%);
    border-left: 4px solid #00aeef;
    box-shadow: 0 2px 8px rgba(46, 49, 146, 0.05);
    border-radius: 0 8px 8px 0;
    color: #000;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px;
    padding: 15px;
    position: relative;
}

.product-description p {
    margin: 0;
    padding: 0;
}

.product-description strong,
.product-description b {
    color: #2e3192;
    font-weight: 600;
}

.product-description ul,
.product-description ol {
    margin: 10px 0;
    padding-left: 20px;
}

.product-description li {
    margin-bottom: 5px;
    position: relative;
}

.product-description ul li::before {
    content: '•';
    color: #00aeef;
    font-weight: bold;
    position: absolute;
    left: -15px;
}

.product-pricing {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6efff 100%);
    border: 1px solid #e6efff;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 18px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.price-item:not(:last-child) {
    border-bottom: 1px dashed #c5d5f2;
}

.price-label {
    color: #2e3192;
    font-weight: 600;
    font-size: 15px;
}

.price-amount {
    color: #00aeef;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

/* Payment Form */
.payment-form-container {
    background: #fff;
}

.payment-form-container h3 {
    background: linear-gradient(to right, #2e3192, #00aeef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #2e3192;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
}

/* Stripe Elements */
.StripeElement {
    background: #f8faff;
    border: 1px solid #e6efff;
    border-radius: 8px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.StripeElement--focus {
    background: #ffffff;
    border-color: #00aeef;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.1);
}

/* Input Error Styles */
.mq-mq-input-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 5px;
    display: block;
}

.has-error {
    border-color: #dc3545 !important;
    background-color: #fff !important;
}

.has-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Password Strength Meter */
.password-strength-meter {
    height: 4px;
    background-color: #ddd;
    margin: 5px 0;
    border-radius: 2px;
}

.password-strength-meter.very-weak {
    background-color: #ff4444;
    width: 20%;
}

.password-strength-meter.weak {
    background-color: #ffbb33;
    width: 40%;
}

.password-strength-meter.medium {
    background-color: #ffeb3b;
    width: 60%;
}

.password-strength-meter.strong {
    background-color: #00C851;
    width: 80%;
}

.password-strength-meter.very-strong {
    background-color: #007E33;
    width: 100%;
}

.password-strength-text {
    font-size: 12px;
    margin-top: 5px;
    color: #666;
}

/* Dashboard Styles */
.mq-dashboard-wrapper {
    background: #f8faff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 20px auto;
    max-width: 1200px;
    min-height: 600px;
    overflow: hidden;
    width: 95%;
}

.mq-dashboard-wrapper * {
    box-sizing: border-box;
}

.mq-dashboard-header {
    background: linear-gradient(135deg, #2e3192 0%, #00aeef 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
}

.mq-dashboard-logo h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #e6efff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff;
}

.mq-dashboard-user-menu {
    position: relative;
}

.mq-user-info {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 8px;
    transition: all 0.2s ease;
}

.mq-user-info:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.mq-user-avatar img {
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: block;
    height: 40px;
    width: 40px;
}

.mq-user-name {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.mq-user-dropdown {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    width: 150px;
    z-index: 100;
}

.mq-user-info:hover .mq-user-dropdown {
    display: block;
}

.mq-user-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.mq-user-dropdown li a {
    display: block;
    color: #2e3192;
    font-size: 16px;
    padding: 10px 16px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mq-user-dropdown li a:hover {
    background: #f0f7ff;
    color: #00aeef;
}

.mq-dashboard-nav {
    background: white;
    border-bottom: 1px solid #e6efff;
    padding: 0 30px;
}

.mq-dashboard-nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mq-dashboard-nav li a {
    color: #4f566b;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    padding: 15px 0;
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease;
    outline: none;
}

.mq-dashboard-nav li.active a {
    color: #2e3192;
}

.mq-dashboard-nav li.active a::after {
    background: linear-gradient(to right, #2e3192, #00aeef);
    border-radius: 2px 2px 0 0;
    content: '';
    height: 3px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
}

.mq-dashboard-content {
    padding: 30px;
}

@media (max-width: 575px) {
    .mq-dashboard-wrapper .mq-dashboard-content, .mq-dashboard-wrapper .mq-dashboard-header {
        padding: 15px;
    }
    .mq-dashboard-wrapper .mq-dashboard-nav {
        padding: 0 15px;
    }
    .mq-dashboard-content .mq-profile-content {
        padding: 20px;
    }
    #mq-profile-form .mq-form-submit {
        margin-top: 15px;
    }
    #mq-profile-form .mq-form-divider {
        margin: 0px 0 20px;
    }
    #mq-profile-form .mq-form-group input {
        padding: 6px 20px;
    }
}


/* Section Header */
.mq-section-header {
    margin-bottom: 30px;
}

.mq-section-header h2 {
    color: #2e3192;
    font-size: 24px;
    margin: 0 0 10px;
}

.mq-section-header p {
    color: #4f566b;
    font-size: 16px;
    margin: 0;
}

/* Profile Page Styles */
.mq-profile-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 25px;
}

.mq-form-row {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: 25px;
}

.mq-form-divider {
    color: #2e3192;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0 20px;
    position: relative;
    text-align: center;
}

.mq-form-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(12px);
    height: 1px;
    background-color: #e6efff;
    width: 100%;
    left: 0;
    z-index: 1;
}

.mq-form-divider span {
    background: white;
    padding: 0 15px;
    position: relative;
    top: 12px;
    z-index: 2;
}

.mq-form-submit {
    margin-top: 30px;
}

#mq-profile-form .mq-form-row {
    margin-bottom: 15px;
}

@media (max-width: 680px) {
    #mq-profile-form .mq-form-row {
        margin-bottom: 0;
        grid-template-columns: 100%;
        gap: 0;
    }
}

/* Dashboard Overview Styles */
.mq-dashboard-overview {
    max-width: 100%;
}

.mq-stats-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 30px;
}

.mq-stat-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.mq-stat-card h4 {
    color: #4f566b;
    font-size: 14px;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.mq-stat-card .stat-value {
    color: #2e3192;
    font-size: 24px;
    font-weight: 700;
}

.mq-stat-card .stat-subvalue {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* All Transactions Table */
.mq-all-transactions {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 25px;
}

.mq-all-transactions h3 {
    color: #2e3192;
    font-size: 20px;
    margin: 0 0 20px;
}

.mq-payments-table-wrapper {
    overflow-x: auto;
}

.mq-payments-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.mq-payments-table th,
.mq-payments-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e6efff;
}

.mq-payments-table th {
    background: #f8faff;
    color: #2e3192;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mq-payments-table td {
    font-size: 14px;
    color: #4f566b;
    vertical-align: middle;
}

.mq-payments-table tr:last-child td {
    border-bottom: none;
}

.mq-payments-table tr:hover {
    background-color: #f8faff;
}

.mq-payments-table th:nth-child(4),
.mq-payments-table tr td:nth-child(4),
.mq-payments-table th:nth-child(5), 
.mq-payments-table tr td:nth-child(5),
.mq-payments-table th:nth-child(6),
.mq-payments-table tr td:nth-child(6) {
    text-align: center;
}

/* Product Information */
.mq-product-name {
    font-weight: 600;
    color: #2e3192;
    margin-bottom: 4px;
}

.mq-product-description {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* Payment Status */
.payment-status {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.status-succeeded,
.status-completed,
.status-paid {
    background-color: #dff0d8;
    color: #3c763d;
}

.status-pending {
    background-color: #fcf8e3;
    color: #8a6d3b;
}

.status-failed,
.status-overdue {
    background-color: #f2dede;
    color: #a94442;
}

.status-draft {
    background-color: #808080; /* gray */
    color: #fff;
}

.status-open {
    background-color: #007bff; /* blue */
    color: #fff;
}

.status-paid {
    background-color: #28a745; /* green */
    color: #fff;
}

.status-uncollectible {
    background-color: #6c757d; /* dark gray */
    color: #fff;
}

.status-void {
    background-color: #343a40; /* almost black */
    color: #fff;
}

.status-active {
    background-color: #00b100; /* bright green */
    color: #fff;
}

.status-past_due {
    background-color: #ff851b; /* orange */
    color: #fff;
}

.status-canceled {
    background-color: #dc3545; /* red */
    color: #fff;
}

.status-unpaid {
    background-color: #ffc107; /* yellow */
    color: #fff;
}

.status-paused {
    background-color: #d5d50a; /* olive/yellowish */
    color: #fff;
}

.status-incomplete {
    background-color: #17a2b8; /* teal */
    color: #fff;
}

.status-failed {
    background-color: #e74c3c; /* red */
    color: #fff;
}

.status-succeeded {
    background-color: #20c997; /* greenish */
    color: #fff;
}

.status-pending {
    background-color: #6610f2; /* purple */
    color: #fff;
}

/* Invoice Number */
.invoice-number {
    font-family: monospace;
    font-size: 13px;
    color: #4f566b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.no-invoice {
    color: #94a3b8;
    font-size: 13px;
}

/* No Payments Message */
.no-payments {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
    font-size: 15px;
    background: #f8faff;
    border-radius: 8px;
    border: 1px dashed #e6efff;
}

/* Table Wrapper for Responsive Design */
.mq-payments-table-wrapper {
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 768px) {
    .mq-payments-table th,
    .mq-payments-table td {
        padding: 10px 12px;
    }

    .invoice-number {
        font-size: 12px;
        padding: 1px 4px;
    }
}

/* Login Menu Item Styles */
.mq-login-link {
    cursor: pointer;
    transition: all 0.3s ease;
}

.mq-login-link:hover {
    color: #00aeef !important;
}

/* Payment Methods Page */
.mq-payment-methods {
    padding: 20px;
}

.mq-payment-methods-content {
    margin-top: 20px;
}

.mq-saved-payment-methods {
    margin-top: 30px;
}

.mq-saved-payment-methods h3 {
    color: #4f566b;
    font-size: 18px;
    margin-bottom: 20px;
}

.mq-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.mq-card-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.mq-card-item .card-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.mq-card-item .card-brand img {
    height: 24px;
    width: auto;
}

.mq-card-item .card-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mq-card-item .card-details p {
    margin: 0;
    color: #4f566b;
}

/* Loading State */
.mq-loading {
    text-align: center;
    color: #4f566b;
    padding: 20px;
}

.mq-modal.show {
    opacity: 1;
    visibility: visible;
}

.mq-modal.show .mq-modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Manage Subscription */
.manage-subscriptions-main {
    max-width: 800px;
    width: 100%;
    margin: 30px auto;
    padding: 20px;
    color: #333;
    background: #f8faff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.manage-subscriptions-main h2 {
    color: #2e3192;
    font-size: 24px;
    margin: 0 0 10px;
}

.manage-subscriptions-product {
    display: flex;
    flex-wrap: wrap;
}

.manage-subscriptions-product > p {
    font-size: 16px;
    margin-bottom: 10px;
    width: 50%;
}

.manage-subscriptions-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}

.manage-subscriptions-card p {
    margin-bottom: 0;
}

.manage-subscriptions-main > button {
    margin: 15px 5px 0 0;
}