/*
 * button-fixes.css
 * Fixes all button/interactive element visibility issues identified in the UI audit.
 * Uses the established color palette:
 *   Orange:    #f97316
 *   Dark navy: #1e293b  (also used as --primary-color after website-color.php swap)
 *   Dark navy: #0C1239  (--heading-color, --secondary-color default)
 *   White:     #ffffff
 *
 * IMPORTANT: This file must be loaded AFTER main.css, website-color.php, and update.css
 * so that its selectors take effect as overrides.
 */

/* =========================================================
 * ISSUE 1: .main-btn:hover text color (#0C1239 dark navy)
 *          on background filled by --primary-color (#1e293b dark)
 *          = dark text on dark background => INVISIBLE
 *
 * website-color.php line 88 overrides .main-btn:hover to $primaryColor (#f97316),
 * but only when PHP dynamic file is served. The hardcoded default in main.css
 * (--heading-color = #0C1239 on --primary-color = #1e293b) is broken.
 * Force white text on the dark hover state as a safe fallback.
 * ========================================================= */
.main-btn:hover {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 2: .main-btn-primary base state
 *          color: var(--heading-color) = #0C1239 (dark navy)
 *          background-color: var(--primary-color) = #1e293b (dark, after swap)
 *          = dark text on dark background => INVISIBLE
 *
 * The .main-btn-primary variant is meant to be the "light" primary button.
 * With the swapped variables, its background is the dark navy #1e293b.
 * Override to ensure white text on dark backgrounds.
 * ========================================================= */
.main-btn-primary {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 3: .main-btn-primary:hover — inherits color from .main-btn:hover
 *          which we fixed above; but also specifically the :before/:after
 *          pseudo-elements expose --primary-color background during hover
 *          with heading-color text. Ensure white text on hover too.
 * ========================================================= */
.main-btn-primary:hover {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 4: .hero-search-wrapper .search-btn
 *          background-color: var(--primary-color) = #1e293b (dark)
 *          No text color defined => inherits body color (dark) => INVISIBLE
 * ========================================================= */
.hero-search-wrapper .search-btn {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 5: .equipments-search-filter .search-filter-form .search-btn
 *          background-color: var(--primary-color) = #1e293b (dark)
 *          No text color defined => inherits from context => potentially invisible
 * ========================================================= */
.equipments-search-filter .search-filter-form .search-btn {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 6: .author-area .authors-search-filter .search-filter-form .search-btn
 *          background-color: var(--primary-color) (dark after swap)
 *          No explicit text color defined in update.css search-btn rule
 * ========================================================= */
.author-area .authors-search-filter .search-filter-form .search-btn {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 7: .sidebar-widget-area .widget.search-widget .search-btn
 *          color: var(--heading-color) = #0C1239 (dark navy)
 *          background-color: var(--primary-color) = #1e293b (dark)
 *          = dark text on dark background => INVISIBLE (icon button)
 * ========================================================= */
.sidebar-widget-area .widget.search-widget .search-btn {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 8: .checkout-area-section .coupon .btn
 *          background-color: #ff4a17 (orange-red)
 *          No explicit text color set => Bootstrap default may render
 *          dark text or transparent, which is hard to read on orange-red
 *          Force white text for readability.
 * ========================================================= */
.checkout-area-section .coupon .btn,
.equipment-details-section .pricing-body .extra-option .btn {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 9: .cart-area-section .cart-middle .cart-btn
 *          background-color set via website-color.php to --secondary-color (#f97316)
 *          but override in main.css uses #ff4a17 without explicit text color.
 *          Already has color: #fff, but website-color.php override at line 231
 *          sets background to $secondaryColor (dark #1e293b) — keep white text.
 * ========================================================= */
.cart-area-section .cart-middle .cart-btn {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 10: Pagination active page link in user dashboard
 *          .user-dashboard .main-table .dataTables_wrapper
 *          .dataTables_paginate .paginate_button.active .page-link
 *          color: var(--heading-color) = #0C1239 (dark navy)
 *          background: var(--primary-color) = #1e293b (dark, after swap)
 *          = dark text on dark background => INVISIBLE
 * ========================================================= */
.user-dashboard .main-table .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
.user-dashboard .main-table .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link:hover {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 11: .pagination-nav .page-item.active .page-link
 *          background-color: var(--primary-color) = #1e293b (dark)
 *          color: #fff (OK in update.css) — already white.
 *          But the hover state in update.css:
 *          .pagination-nav .page-item.next:hover, .prev:hover
 *          uses color: var(--primary-color) = #1e293b on transparent background.
 *          The background is white/light in light mode => dark text on white = OK.
 *          However in dark mode the background could be dark. Explicit orange fix:
 * ========================================================= */
.pagination-nav .page-item.next:hover,
.pagination-nav .page-item.prev:hover {
    color: #f97316 !important;
}

/* =========================================================
 * ISSUE 12: .header-navigation .main-menu ul li .sub-menu li:hover > a
 *          background-color: var(--heading-color) = #0C1239 (dark navy)
 *          No text color override for hover => inherits dark text => INVISIBLE
 * ========================================================= */
.header-navigation .main-menu ul li .sub-menu li:hover > a {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 13: .header-navigation .main-menu ul li .sub-menu li a:hover
 *          background-color: var(--primary-color) = #1e293b (dark, after swap)
 *          color: var(--white) (set in main.css line 654) — OK as-is,
 *          but website-color.php changes sub-menu hover bg to $primaryColor (= #f97316).
 *          Color is var(--white) = white on orange = visible. No fix needed.
 * ========================================================= */

/* =========================================================
 * ISSUE 14: .newsletter-wrapper-two .newsletter-content-box .newsletter-btn
 *          background-color: var(--secondary-color)
 *          After website-color.php swap: --secondary-color = $primaryColor = #f97316 (orange)
 *          color: var(--white) = white on orange => visible. No fix needed.
 *          BUT the default from main.css :root has --secondary-color = #0C1239 (dark)
 *          with white text — also OK.
 * ========================================================= */

/* =========================================================
 * ISSUE 15: h1,h2,h3,h4,h5,h6 color override in website-color.php line 84
 *          sets heading color to $primaryColor (#f97316 orange).
 *          This affects text INSIDE dark-background buttons like .main-btn.
 *          A heading inside a .main-btn would turn orange on dark — readable.
 *          No critical fix needed here.
 * ========================================================= */

/* =========================================================
 * ISSUE 16: .main-btn-primary base state with swapped variables:
 *          --primary-color = #1e293b (dark) AFTER website-color.php swap
 *          The button background = dark, yet main.css line 306 says
 *          color: var(--heading-color) = #0C1239 (also dark).
 *          website-color.php line 307 overrides .main-btn-primary color
 *          to $primaryColor = #f97316 (orange), which IS readable on dark.
 *          But without website-color.php serving, it's invisible.
 *          Our ISSUE 2 fix above covers this.
 * ========================================================= */

/* =========================================================
 * ISSUE 17: btn-warning in Bootstrap (atlantis.css) sets:
 *          background: #FFAD46 !important; color: #ffffff !important
 *          White text on bright yellow-orange background has poor contrast.
 *          Override to dark text for better readability.
 * ========================================================= */
.btn-warning {
    color: #1e293b !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:disabled {
    color: #1e293b !important;
}

/* =========================================================
 * ISSUE 18: .checkout-area-section .coupon .btn override from website-color.php
 *          line 184-186 sets background-color to $secondaryColor = #1e293b (dark).
 *          The button inherits Bootstrap default text (usually dark).
 *          Already covered in ISSUE 8 fix above with !important.
 * ========================================================= */

/* =========================================================
 * ISSUE 19: Frontend login form btn-warning "Checkout as Guest" button
 *          (resources/views/frontend/login.blade.php line 35)
 *          Uses .btn.btn-block.btn-warning.
 *          Bootstrap default for btn-warning has good contrast with our
 *          dark text fix in ISSUE 17 above. No additional fix needed.
 * ========================================================= */

/* =========================================================
 * ADDITIONAL SAFETY: Any .main-btn placed on a dark background section
 *          (e.g., hero sections, counter sections) should always show
 *          white text by default. The base .main-btn sets color: var(--white)
 *          which is correct. The only broken state is :hover — fixed above.
 * ========================================================= */

/* =========================================================
 * ADDITIONAL SAFETY: cart-btn in website-color.php override
 *          .cart-area-section .cart-middle .cart-btn gets
 *          background from --secondary-color = $primaryColor (orange #f97316).
 *          Ensure white text for both states.
 * ========================================================= */
.cart-area-section .cart-middle .cart-btn:hover {
    color: #ffffff !important;
}

/* =========================================================
 * ADDITIONAL SAFETY: Any button rendered inside sections that use
 *          .bg-with-overlay or dark-blue backgrounds should have
 *          white text to guarantee visibility.
 * ========================================================= */
.bg-with-overlay .main-btn,
.dark-blue .main-btn {
    color: #ffffff !important;
}
.bg-with-overlay .main-btn:hover,
.dark-blue .main-btn:hover {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 20: .main-btn base + hover text
 *          Primary fix: the Blade template now strips '#' from color values before
 *          placing them in the website-color.php URL (ltrim('#')), so the CSS
 *          variables resolve correctly.
 *          Defensive fallback: keep base text white and hover text white.
 * ========================================================= */
.main-btn {
    color: #ffffff !important;
}
.main-btn:hover {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 21: .equipement-sidebar-info .booking-form .price-tag
 *          background = var(--primary-color). When empty, becomes transparent,
 *          and h4 text (var(--heading-color) = dark navy) on dark parent bg = INVISIBLE.
 *          Force dark navy background with white text on the price tag.
 * ========================================================= */
.equipement-sidebar-info .booking-form .price-info {
    background-color: #f97316 !important;
}
.equipement-sidebar-info .booking-form .price-info h5 {
    color: #ffffff !important;
}
.equipement-sidebar-info .booking-form .price-info .price-tag {
    background-color: #1e293b !important;
}
.equipement-sidebar-info .booking-form .price-info .price-tag h4,
.equipement-sidebar-info .booking-form .price-info .price-tag h4 span {
    color: #ffffff !important;
}

/* =========================================================
 * ISSUE 22: Breadcrumb active item color
 *          .breadcrumbs-link li.active uses var(--primary-color) = #1e293b (dark navy)
 *          after website-color.php swap. Dark overlay background = invisible.
 *          Fix: orange accent for active item, white for link, orange hover on link.
 * ========================================================= */
.breadcrumbs-area .page-title ul.breadcrumbs-link li.active {
    color: #f97316 !important;
}

.breadcrumbs-area .page-title ul.breadcrumbs-link li a {
    color: #ffffff !important;
}

.breadcrumbs-area .page-title ul.breadcrumbs-link li a:hover {
    color: #f97316 !important;
}