/* Custom Logo and Button Styles Based on Salasta Logo Colors */

/* Black Background Theme */
body {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

.bg{
    background-color: #000000 !important;
}
/* Main content areas */
.ed-container,
.ed-container-expand,
.container {
    /* background-color: #000000 !important; */
}

/* Sections */
section {
    background-color: #00000066 !important;
}

/* Cards and containers */
.ed-course__card,
.ed-product__card,
.ed-category__card,
.ed-testimonial__card {
    background-color: #1a1a1a !important;
    color: #FFFFFF !important;
}

/* CLIENT TESTIMONIALS - text selection color white */
.ed-testimonial ::selection {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25);
}
.ed-testimonial::-moz-selection {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25);
}

/* Header/Topbar */

.ed-topbar {
    background-color: #00000061 !important;
}


.ed-header {
    background-color: #00000061 !important;
}

/* Mobile menu modal — black panel (Bootstrap modal + offcanvas header) */
.mobile-menu-modal .modal-content {
    --bs-modal-bg: #000000;
    background-color: #000000 !important;
}

.mobile-menu-modal .offcanvas-header {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Footer */
.ed-footer {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

/* Text colors */
h1, h2, h3, h4, h5, h6,
p, span, a, li {
    color: #FFFFFF !important;
}

/* Logo container backgrounds - Black theme */
.ed-topbar__logo,
.ed-footer__logo,
.ed-auth__modal-logo,
.ed-sidebar-logo,
.offcanvas-logo,
.ed-auth__logo {
    /* background-color: #000000 !important; */
    /* padding: 8px 12px; */
    border-radius: 4px;
    display: inline-block;
}

/* Logo styling */
.ed-topbar__logo img,
.ed-footer__logo img,
.ed-auth__modal-logo img,
.ed-sidebar-logo img,
.offcanvas-logo img,
.ed-auth__logo img {
    width: 214px;
    /* width: auto; */
    /* object-fit: contain; */
}

/* Button gradient based on Salasta logo colors - Higher specificity */
.ed-btn,
a.ed-btn,
button.ed-btn,
.ed-hero__btn .ed-btn,
.ed-section-head__btn .ed-btn,
.ed-product__cover .ed-btn,
.ed-cart__update-button.ed-btn,
.ed-cart__coupon-button.ed-btn,
.ed-cart__checkout-button .ed-btn,
.ed-checkout__form .ed-btn,
.ed-contact__form-btn .ed-btn,
.ed-auth__form-btn .ed-btn,
.ed-sidebar-subscribe .ed-btn,
.ed-payment-infos .ed-btn {
    background: var(--ed-primary-color);
    background-size: 200% 200% !important;
    color: #000000 !important; /* Black text */
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.ed-btn:hover,
a.ed-btn:hover,
button.ed-btn:hover,
.ed-hero__btn .ed-btn:hover,
.ed-section-head__btn .ed-btn:hover,
.ed-product__cover .ed-btn:hover,
.ed-product__card:hover .ed-product__cover .ed-btn,
.ed-cart__update-button.ed-btn:hover,
.ed-cart__coupon-button.ed-btn:hover,
.ed-cart__checkout-button .ed-btn:hover,
.ed-checkout__form .ed-btn:hover,
.ed-contact__form-btn .ed-btn:hover,
.ed-auth__form-btn .ed-btn:hover,
.ed-sidebar-subscribe .ed-btn:hover,
.ed-payment-infos .ed-btn:hover,
.ed-call-action .ed-btn:hover {
    background: linear-gradient(135deg, 
        #FFD700 0%,      /* Yellow */
        #FF8C00 15%,     /* Orange */
        #FF4500 30%,     /* Red-Orange */
        #FF1493 45%,     /* Deep Pink */
        #FF00FF 60%,     /* Magenta */
        #8B00FF 75%,     /* Purple */
        #0000FF 90%,     /* Blue */
        #00CED1 100%     /* Teal */
    ) !important;
    background-size: 200% 200% !important;
    background-position: right center !important;
    color: #000000 !important; /* Keep black text on hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.ed-btn:active,
a.ed-btn:active,
button.ed-btn:active {
    transform: translateY(0) !important;
}

/* Button variants */
.ed-btn.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.ed-btn.bg-secondary {
    background: #6c757d;
    color: #ffffff !important;
}

.ed-btn.bg-secondary:hover {
    background: #5a6268;
    color: #ffffff !important;
}

.ed-btn.bg-danger {
    background: #dc3545;
    color: #ffffff !important;
}

.ed-btn.bg-danger:hover {
    background: #c82333;
    color: #ffffff !important;
}

/* Register and Login buttons in topbar - Higher specificity */
.ed-topbar__info-buttons .register-btn,
.ed-topbar__info-buttons .login-btn,
button.register-btn,
button.login-btn,
a.register-btn,
a.login-btn {
    background: var(--ed-primary-color);

    background-size: 200% 200% !important;
    color: #000000 !important; /* Black text */
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
}

.ed-topbar__info-buttons .register-btn:hover,
.ed-topbar__info-buttons .login-btn:hover,
button.register-btn:hover,
button.login-btn:hover,
a.register-btn:hover,
a.login-btn:hover {
    background: linear-gradient(135deg, 
        #FFD700 0%,      /* Yellow */
        #FF8C00 15%,     /* Orange */
        #FF4500 30%,     /* Red-Orange */
        #FF1493 45%,     /* Deep Pink */
        #FF00FF 60%,     /* Magenta */
        #8B00FF 75%,     /* Purple */
        #0000FF 90%,     /* Blue */
        #00CED1 100%     /* Teal */
    ) !important;
    background-size: 200% 200% !important;
    background-position: right center !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Alternative gradient for variety */
.ed-btn.gradient-alt {
    background: linear-gradient(135deg, 
        #00CED1 0%,      /* Teal */
        #0000FF 20%,     /* Blue */
        #8B00FF 40%,     /* Purple */
        #FF00FF 60%,     /* Magenta */
        #FF1493 80%,     /* Deep Pink */
        #FF4500 100%     /* Red-Orange */
    );
    background-size: 200% 200%;
}

/* Full width button */
.ed-btn.w-100 {
    width: 100%;
}

/* Button with icon - override default icon styles */
.ed-btn i,
.ed-btn i.fi,
.ed-btn i.icofont {
    position: absolute !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 50px !important;
    background: rgba(0, 0, 0, 0.1) !important; /* Light black background for icon */
    border-radius: 100% !important;
    color: #000000 !important; /* Black icon */
    text-align: center !important;
    font-size: 20px !important;
    top: 4px !important;
    right: 5px !important;
    transition: all 0.4s ease !important;
    margin-left: 0 !important;
}

.ed-btn:hover i,
.ed-btn:hover i.fi,
.ed-btn:hover i.icofont,
.ed-cart__update-button.ed-btn:hover i {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #000000 !important;
    transform: translateX(2px) !important;
}

/* Make all SVG icons white (exclude real photos under course/product thumbnails) */
img[src*=".svg"],
img[src*="assets/images/icons"] {
    filter: brightness(0) invert(1) !important;
    transition: all 0.3s ease;
}

.ed-course__img img,
.ed-product__img img {
    filter: none !important;
}

/* Footer icons */
.ed-footer__social img,
.ed-footer__contact-icon img {
    filter: brightness(0) invert(1) !important;
}

/* Sidebar icons */
.ed-sidebar-social img,
.ed-contact__info-icon img {
    filter: brightness(0) invert(1) !important;
}

/* Contact page icons */
.ed-contact__info-icon img,
.ed-contact__card-icon img {
    filter: brightness(0) invert(1) !important;
}

/* Header action icons */
.ed-topbar__action-icon img,
.ed-header__cart img {
    filter: brightness(0) invert(1) !important;
}

/* Category icons */
.ed-category__icon img {
    filter: brightness(0) invert(1) !important;
}

/* Social media icons hover effect */
.ed-topbar__info-social img[src*=".svg"]:hover,
.ed-footer__social img[src*=".svg"]:hover,
.ed-sidebar-social img[src*=".svg"]:hover {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    transform: scale(1.1);
}

/* Keep specific icons that should remain colored (if needed) */
img[src*="icon-color-"] {
    filter: none !important;
}

/* One header row on phones/tablets: hide duplicate bar (phone, email, cart, extra icon) */
.ed-topbar__cart-mobile {
    display: none;
    align-items: center;
}

@media only screen and (max-width: 991.98px) {
    header.ed-header {
        display: none !important;
    }

    .ed-topbar__cart-mobile {
        display: flex;
    }
}

/* Mobile responsive */
@media only screen and (max-width: 767px) {
    .ed-btn i,
    .ed-btn i.fi,
    .ed-btn i.icofont {
        width: 40px !important;
        height: 40px !important;
        line-height: 47px !important;
    }
}

.counter-card__info {
    color: #ffffff !important;
}

.counter-card__info h4,
.counter-card__info p,
.counter-card__info span {
    color: #ffffff !important;
}

/* Course details — light gray sidebar widgets: use dark text (global white was invisible on off-white) */
.ed-course__sidebar .ed-course__sidebar-title {
    color: #111111 !important;
}

.ed-course__sidebar .ed-course__sidebar-widget ul li {
    color: #2d2d2d !important;
}

.ed-course__sidebar .ed-course__sidebar-widget ul li span {
    color: #4e5450 !important;
}

.ed-course__sidebar .ed-course__sidebar-widget ul li .price {
    color: #543ee8 !important;
}

.ed-course__sidebar .ed-contact__info-content span {
    color: #4e5450 !important;
}

.ed-course__sidebar .ed-contact__info-content a {
    color: #543ee8 !important;
}

.ed-course__sidebar .alert.alert-success {
    color: #0f5132 !important;
}

/* Admin login page (standalone layout) */
.admin-login-page .admin-login-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.admin-login-section {
    width: 100%;
}

/* About counter badge — black text (must load after global h4/p and .counter-card__info white rules) */
.counter-card.updown-ani .counter-card__info h4,
.counter-card.updown-ani .counter-card__info p,
.counter-card.updown-ani .counter-card__info span {
    color: #ffffff !important;
}

/* Contact form — checkbox visible on dark background (theme had tiny label line-height) */
.ed-contact__form-check {
    margin-bottom: 24px !important;
}

.ed-contact__form-check .form-check-label {
    line-height: 1.5 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    cursor: pointer;
}

.ed-contact__form-check .form-check-input {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-top: 4px !important;
    border-radius: 4px !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    background-color: #1a1a1a !important;
    accent-color: #8b00ff;
    flex-shrink: 0;
}

.ed-contact__form-check .form-check-input:checked {
    background-color: #8b00ff !important;
    border-color: #ffffff !important;
}

.ed-contact__form-check .form-check-label a {
    color: #c9a0ff !important;
    text-decoration: underline;
}