/* *****************************************************

 ** Custom Stylesheet **

 Any custom styling you want to apply should be
 defined here.

***************************************************** */

/* ============================================
 BUTTON OVERRIDES - Transparent Style
 Force all buttons to follow dark theme style
 ============================================ */

/* Reset ALL btn-primary variations - highest specificity */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:hover,
.open > .dropdown-toggle.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
.btn-primary.btn-order-now,
a.btn-primary,
.modal .btn-primary,
#recommendationsModal .btn-primary,
#modalAjax .btn-primary,
.modal-footer .btn-primary,
form .btn-primary,
form button.btn-primary,
form input[type="submit"].btn-primary,
.btn.btn-primary,
button.btn.btn-primary {
 background: transparent !important;
 background-color: transparent !important;
 border: 1px solid var(--border) !important;
 color: var(--text-secondary) !important;
 border-radius: 7px !important;
 box-shadow: none !important;
 -webkit-box-shadow: none !important;
 text-shadow: none !important;
 text-decoration: none !important;
 background-image: none !important;
 filter: none !important;
}

.btn-primary:hover,
.btn-primary:focus:hover,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.modal .btn-primary:hover,
#recommendationsModal .btn-primary:hover,
#modalAjax .btn-primary:hover,
form .btn-primary:hover,
form button.btn-primary:hover,
form input[type="submit"].btn-primary:hover,
.btn.btn-primary:hover,
button.btn.btn-primary:hover {
 background: var(--bg-hover) !important;
 background-color: var(--bg-hover) !important;
 border-color: var(--border) !important;
 color: var(--text) !important;
 text-decoration: none !important;
}

/* Light theme button overrides */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary:focus,
[data-theme="light"] .btn-primary:active,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] button.btn-primary,
[data-theme="light"] a.btn-primary,
[data-theme="light"] .modal .btn-primary {
 border-color: var(--border) !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus:hover {
 background: var(--bg-hover) !important;
 border-color: var(--border) !important;
}

/* Reset ALL btn-success variations */
.btn-success,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success:hover,
.open > .dropdown-toggle.btn-success,
button.btn-success,
a.btn-success,
.btn-success.btn-order-now,
a.btn-success.btn-order-now,
.modal .btn-success,
#recommendationsModal .btn-success,
#modalAjax .btn-success {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
    filter: none !important;
}

.btn-success:hover,
.btn-success:focus:hover,
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover,
.modal .btn-success:hover,
#recommendationsModal .btn-success:hover {
    background: var(--bg-hover) !important;
    background-color: var(--bg-hover) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    text-decoration: none !important;
}

[data-theme="light"] .btn-success,
[data-theme="light"] .btn-success:focus,
[data-theme="light"] .btn-success:active,
[data-theme="light"] .btn-success:hover {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .btn-success:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   MODAL BUTTON OVERRIDES
   Specific overrides for modal buttons
   ============================================ */

/* btn-add inside recommendations modal - the main culprit */
.btn-add,
#recommendationsModal .btn-add,
#recommendationsModal .product-recommendation .btn-add,
.product-recommendation .btn-add {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn-add:hover,
#recommendationsModal .btn-add:hover,
#recommendationsModal .product-recommendation .btn-add:hover,
.product-recommendation .btn-add:hover {
    background: var(--bg-hover) !important;
    background-color: var(--bg-hover) !important;
    border-color: var(--text-muted) !important;
    color: var(--text) !important;
}

/* modal-submit button in AJAX modal */
.modal-submit,
.modal-footer .modal-submit,
#modalAjax .modal-submit,
.btn.modal-submit {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.modal-submit:hover,
.modal-footer .modal-submit:hover,
#modalAjax .modal-submit:hover,
.btn.modal-submit:hover {
    background: var(--bg-hover) !important;
    background-color: var(--bg-hover) !important;
    border-color: var(--text-muted) !important;
    color: var(--text) !important;
}

/* Continue button in recommendations modal */
#btnContinueRecommendationsModal,
#recommendationsModal .btn-primary,
#recommendationsModal a.btn-primary {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text) !important;
}

#btnContinueRecommendationsModal:hover,
#recommendationsModal .btn-primary:hover,
#recommendationsModal a.btn-primary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text) !important;
}

/* ============================================
   GENERAL BUTTON RESET
   Remove all blue backgrounds
   ============================================ */

/* Force remove any inline styles that add blue backgrounds */
button[style*="background"],
a[style*="background"],
.btn[style*="background"],
input[type="submit"][style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure all order buttons follow the theme */
.btn-order-now,
.product .btn-order-now,
#products .btn-order-now,
.products .btn-order-now {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.btn-order-now:hover,
.product .btn-order-now:hover,
#products .btn-order-now:hover,
.products .btn-order-now:hover {
    background: var(--bg-hover) !important;
    background-color: var(--bg-hover) !important;
    border-color: var(--text-muted) !important;
    color: var(--text) !important;
}

/* ============================================
   LIGHT THEME ADJUSTMENTS
   ============================================ */

[data-theme="light"] .btn-add,
[data-theme="light"] #recommendationsModal .btn-add,
[data-theme="light"] .product-recommendation .btn-add {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .btn-add:hover,
[data-theme="light"] #recommendationsModal .btn-add:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .modal-submit,
[data-theme="light"] #modalAjax .modal-submit {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .modal-submit:hover,
[data-theme="light"] #modalAjax .modal-submit:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}