/**
 * Custom CSS for Pricing Section Spacing Optimization
 * 
 * This file reduces the vertical padding between the headline section 
 * and the package boxes while maintaining visual hierarchy and mobile responsiveness.
 * 
 * Created: 2025-09-19
 */

/* ===== Reduced Pricing Section Spacing ===== */

/* Reduce spacing after section header from 90px to 45px */
.pricing-sec .section-header {
    margin-bottom: 45px !important;
}

/* Reduce spacing after pricing navigation tabs from 96px to 48px */
.pricing-sec .pricing_nav {
    margin-bottom: 48px !important;
}

/* ===== Mobile Responsive Adjustments ===== */

/* Tablet devices (max-width: 1024px) */
@media (max-width: 1024px) {
    .pricing-sec .section-header {
        margin-bottom: 35px !important;
    }
    
    .pricing-sec .pricing_nav {
        margin-bottom: 40px !important;
    }
}

/* Mobile devices (max-width: 809px) */
@media (max-width: 809px) {
    .pricing-sec .section-header {
        margin-bottom: 30px !important;
    }
    
    .pricing-sec .pricing_nav {
        margin-bottom: 35px !important;
    }
}

/* Small mobile devices (max-width: 480px) */
@media (max-width: 480px) {
    .pricing-sec .section-header {
        margin-bottom: 25px !important;
    }
    
    .pricing-sec .pricing_nav {
        margin-bottom: 30px !important;
    }
}

/* ===== Responsive Grid Behavior ===== */

/* Mobile devices - stack pricing cards vertically */
/* UPDATED BREAKPOINT: Changed from 809px to 991px for better mobile coverage */
@media (max-width: 991px) {
    .pricing-sec .pricing-lists {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 20px !important;
    }
}

/* Small tablets - maintain 2 column layout with smaller gap */
/* COMMENTED OUT - Not needed with updated breakpoint */
/*
@media (max-width: 1024px) and (min-width: 810px) {
    .pricing-sec .pricing-lists {
        gap: 20px !important;
    }
}
*/

/* ===== Remove Empty Black Box Between Header and Cards ===== */

/* Hide the pricing navigation wrapper when empty or not needed */
.pricing-sec .pricing_nav_wrap {
    display: none !important;
}

/* If tabs are specifically needed, uncomment this and comment the above:
.pricing-sec .pricing_nav_wrap:empty {
    display: none !important;
}
*/

/* Remove margin from tab content to eliminate gap */
.pricing-sec .tab-content {
    margin-top: 0 !important;
}

/* Ensure pricing lists have proper spacing without nav */
.pricing-sec .pricing-lists {
    margin-top: 0 !important;
}

/* Remove any additional spacing from tab panes */
.pricing-sec .tab-pane {
    padding-top: 0 !important;
}

/* Ensure smooth flow between sections */
.pricing-sec .section-header + .pricing_nav_wrap + .tab-content,
.pricing-sec .section-header + .tab-content {
    margin-top: 0 !important;
}

/* Handle any potential spacer divs or elements */
.pricing-sec .spacer,
.pricing-sec .elementor-spacer,
.pricing-sec [class*="spacer"],
.pricing-sec [class*="divider"] {
    display: none !important;
}

/* ===== Ensure Natural Layout Flow ===== */

/* Make sure pricing cards display properly without navigation */
.pricing-sec .tab-content .tab-pane {
    display: block !important;
    opacity: 1 !important;
}

/* Ensure pricing grid displays correctly */
/* COMMENTED OUT - CAUSING MOBILE RESPONSIVE ISSUE */
/*
.pricing-sec .pricing-lists {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
}
*/

/* Maintain proper spacing for pricing boxes */
.pricing-sec .pricing-box {
    margin-bottom: 0 !important;
}

/* Remove any transform or animation delays that might cause layout issues */
.pricing-sec .pricing-box[data-aos] {
    transform: none !important;
    opacity: 1 !important;
}

/**
 * Spacing Summary:
 *
 * Desktop:     Header: 45px (was 90px) | Nav: Hidden (was 96px)
 * Tablet:      Header: 35px            | Nav: Hidden
 * Mobile:      Header: 30px            | Nav: Hidden
 * Small Mobile: Header: 25px           | Nav: Hidden
 *
 * Total reduction: ~75% less spacing + removed empty black box
 */

/* ===== Mobile Z-Index Fixes for Image Layering ===== */

/**
 * Mobile-only fix to ensure decorative images (music logo, save icon)
 * stay behind all text content to prevent overlapping issues.
 *
 * Desktop layout is NOT affected by these rules.
 */

@media screen and (max-width: 768px) {

    /* Send 3D music logo images behind all content */
    .pricing-lists .shape_img,
    .pricing-lists .shape_img2 {
        z-index: -1 !important;
        position: absolute;
    }

    /* Send white save icon behind text */
    .pricing-box .pricing-featured-icon {
        z-index: 1 !important;
        position: absolute;
    }

    /* Ensure all text layers are above images */
    .pricing-box .title,
    .pricing-box .price,
    .pricing-box p,
    .pricing-box .content,
    .pricing-box .feature-lists,
    .pricing-box .pricing-footer,
    .pricing-box .pricing-header {
        position: relative;
        z-index: 10 !important;
    }

    /* Fix for "Fully Customized" card title overlapping with save icon */
    /* Increase z-index and reduce font size for better fit */
    .pricing-box .pricing-header .title,
    .pricing-box .pricing-header h3,
    .pricing-box h3 {
        position: relative;
        z-index: 15 !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
        padding-right: 45px !important; /* Add padding to avoid save icon */
    }

    /* Ensure section header text is above decorative images */
    .pricing-sec .section-header,
    .pricing-sec .section-title,
    .pricing-sec .section-subtitle,
    .pricing-sec .section-desc {
        position: relative;
        z-index: 10 !important;
    }

    /* Make sure pricing box itself has proper stacking context */
    .pricing-box {
        position: relative;
        z-index: 2 !important;
    }
}

/* ===== Mobile Overlay Images Always Visible (Funfact Boxes) ===== */

/**
 * Make overlay images always visible on mobile devices.
 * These are the decorative images that appear in funfact boxes
 * (e.g., "deeply personal", "professionally composed", "treasure forever", "tamils worldwide").
 *
 * On mobile, these images are permanently displayed without requiring touch/hover.
 *
 * Desktop view (>768px) remains unchanged (shows on hover only).
 */

@media screen and (max-width: 768px) {

    /* Make all funfact box overlay images always visible */
    .funfact-box .overlay {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure overlays stay visible regardless of touch/hover state */
    .funfact-box:hover .overlay,
    .funfact-box.active .overlay {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Maintain default cursor since images are always visible */
    .funfact-box {
        cursor: default !important;
    }

    /* Keep consistent border color on mobile */
    .funfact-box.active,
    .funfact-box:hover {
        border-color: #4d4d4d !important;
    }
}

/* ===== Remove "Let's Connect" / BENEFITS Button from Footer (All Devices) ===== */

/**
 * Hide the "Let's Connect" / BENEFITS button in the footer Contact Info section.
 * This button is no longer needed and should be removed from both
 * desktop and mobile views.
 *
 * Button Location: Footer > Contact Info section
 * Widget File: wp-content/plugins/aixor-core/widgets/home-footer.php (line 844-858)
 * Button Structure: <a class="theme-btn">Let's Connect</a>
 */

/* Hide by parent container */
.footer-contact-infos .theme-btn,
.footer-widget .footer-contact-infos .theme-btn {
    display: none !important;
    visibility: hidden !important;
}

/* Hide by link URL (targets wpriverthemes.com link) */
.footer a.theme-btn[href*="wpriverthemes"],
.footer a.theme-btn[href*="contact"],
.footer-widget a.theme-btn[target="_blank"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide any theme-btn with angle-icon-1.svg image */
.footer a.theme-btn:has(img[src*="angle-icon-1.svg"]) {
    display: none !important;
    visibility: hidden !important;
}

/* More aggressive rules - hide ALL "Let's Connect" buttons everywhere */
a.theme-btn[href*="wpriverthemes.com"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide any theme-btn linking to wpriverthemes */
a[href*="wpriverthemes"] {
    display: none !important;
    visibility: hidden !important;
}

/* Target by text content and image combination */
/* a.theme-btn:has(img[src*="angle-icon-1"]) {
    display: none !important;
    visibility: hidden !important;
} */

/* ===== Remove "Let's Connect" Heading from Contact/Order Page (All Devices) ===== */

/**
 * Hide the "Let's Connect" heading that appears above the contact form
 * on the order-my-song page.
 *
 * Widget: Contact (home-contact.php, line 87)
 * Location: Above "Order My Song" form
 * CSS Selector: .contact-sec .contact-content h3
 */

.contact-sec .contact-content h3 {
    display: block;
    visibility: visible;
}

/* ===== Remove "Benefits" Link from Footer Company Info (All Devices) ===== */

/**
 * Hide the "Benefits" link in the footer Company Info section.
 * This link is no longer needed and should be removed from both
 * desktop and mobile views.
 *
 * Link Location: Footer > Company Info section
 * Widget File: wp-content/plugins/aixor-core/widgets/home-footer.php (line 807-823)
 * Link Structure: <a class="with-border" href="#benefits">
 */

/* Aggressive rule - hide ANY link with href="#benefits" */
a[href="#benefits"] {
    display: none !important;
    visibility: hidden !important;
}

/* Additional specific selectors for extra coverage */
.footer-link a[href="#benefits"],
.footer-widget .footer-link a.with-border[href="#benefits"],
.footer a.with-border[href="#benefits"] {
    display: none !important;
    visibility: hidden !important;
}

/* Even more aggressive - hide by text content and any benefits variation */
a[href*="benefits"],
a[href*="Benefits"],
.footer-link a[href*="benefits"],
.footer-widget a[href*="benefits"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide any link in footer containing "benefits" regardless of case */
.footer a[href*="benefit"],
.footer-widget a[href*="benefit"],
footer a[href*="benefit"] {
    display: none !important;
    visibility: hidden !important;
}

/* Target the list item containing the benefits link */
.footer-link ul li:has(a[href*="benefit"]),
.footer-widget ul li:has(a[href*="benefit"]) {
    display: none !important;
    visibility: hidden !important;
}