/* /home/mohammed-azaan-peshmam/Desktop/wordpress plugin/github/wc-referral-wallet/assets/css/blocks.css */
/* WooCommerce Blocks Integration Styles with WordPress block theme compatibility */
/* Provides seamless integration with WordPress block themes and WooCommerce blocks using theme-adaptive styling */
/* RELEVANT FILES: theme-adaptive.css, class-wc-referral-theme-adapter.php, frontend.css, referral-modal.css */

.wc-block-cart .wc-referral-wallet-discount,
.wc-block-checkout .wc-referral-wallet-discount {
    background: var(--wc-referral-bg-secondary);
    border: 1px solid var(--wc-referral-primary);
    border-radius: 5px;
    padding: 15px;
    margin: 15px 0;
}

.wc-referral-wallet-discount h4 {
    margin: 0 0 10px 0;
    color: var(--wc-referral-primary);
    font-size: 16px;
}

.wc-referral-wallet-discount .balance-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.wc-referral-wallet-discount .apply-wallet-btn {
    background: var(--wc-referral-primary);
    color: var(--wc-referral-bg-primary);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.wc-referral-wallet-discount .apply-wallet-btn:hover {
    background: var(--wc-referral-primary-dark);
}

.wc-referral-wallet-discount .apply-wallet-btn:disabled {
    background: var(--wc-referral-text-muted);
    cursor: not-allowed;
}

.wc-block-cart__sidebar .wc-referral-wallet-discount,
.wc-block-checkout__sidebar .wc-referral-wallet-discount {
    margin: 10px 0;
    padding: 12px;
}

/* Mobile styles */
/**
 * WordPress Block Theme Specific Integration
 * Enhanced compatibility with WordPress block themes and global styles
 */

/* Block theme global styles integration */
.has-global-styles .wc-referral-wallet-discount {
    /* Inherit WordPress block theme spacing */
    margin-block: var(--wp--preset--spacing--40, 1rem);
    margin-inline: var(--wp--preset--spacing--20, 0.5rem);
    
    /* Use block theme content width when available */
    max-width: var(--wp--style--global--content-size, 65ch);
}

/* WordPress block editor integration */
.wp-block-editor .wc-referral-wallet-discount {
    font-family: var(--wp--preset--font-family--system-font, var(--wc-referral-font-family));
    line-height: var(--wp--style--root--line-height, 1.6);
}

/* Block theme color inheritance */
.has-global-styles .wc-referral-wallet-discount h4 {
    font-family: var(--wp--preset--font-family--heading, var(--wc-referral-heading-font));
    font-size: var(--wp--preset--font-size--medium, var(--wc-referral-font-size-base));
}

/* WordPress Twenty Twenty-Four theme specific adjustments */
.wp-theme-twentytwentyfour .wc-referral-wallet-discount {
    border-radius: var(--wp--preset--spacing--20, 0.5rem);
    box-shadow: var(--wc-referral-shadow-sm);
}

/* FSE (Full Site Editing) block theme support */
.wp-site-blocks .wc-referral-wallet-discount {
    /* Respect block theme's content width */
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* Block theme pattern integration */
.wp-block-group .wc-referral-wallet-discount,
.wp-block-columns .wc-referral-wallet-discount {
    margin-block-start: var(--wp--preset--spacing--30, 0.75rem);
    margin-block-end: var(--wp--preset--spacing--30, 0.75rem);
}

/* WordPress block spacing system integration */
.wc-referral-wallet-discount {
    /* Use WordPress fluid spacing when available */
    padding: clamp(
        var(--wp--preset--spacing--30, 0.75rem),
        4vw,
        var(--wp--preset--spacing--50, 1.5rem)
    );
    
    /* Responsive typography using WordPress system */
    font-size: clamp(
        var(--wp--preset--font-size--small, 0.875rem),
        2.5vw,
        var(--wp--preset--font-size--medium, 1rem)
    );
}

/* Block theme dark mode support */
:root:has(.wp-dark-mode-active) .wc-referral-wallet-discount,
.has-background-dim .wc-referral-wallet-discount {
    background: color-mix(in srgb, var(--wc-referral-bg-primary) 90%, var(--wc-referral-text-primary) 10%);
    border-color: color-mix(in srgb, var(--wc-referral-primary) 60%, var(--wc-referral-text-primary) 40%);
}

/* WordPress block alignment support */
.wc-referral-wallet-discount.alignwide {
    max-width: var(--wp--style--global--wide-size, 85ch);
}

.wc-referral-wallet-discount.alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Container query support for modern block themes */
@container (min-width: 768px) {
    .wc-referral-wallet-discount .balance-info {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .wc-referral-wallet-discount .apply-wallet-btn {
        width: auto;
        min-width: 120px;
    }
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .wc-referral-wallet-discount .balance-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--20, 0.5rem);
    }
    
    .wc-referral-wallet-discount .apply-wallet-btn {
        width: 100%;
        margin-top: var(--wp--preset--spacing--20, 0.5rem);
    }
    
    /* Enhanced mobile spacing for block themes */
    .has-global-styles .wc-referral-wallet-discount {
        margin-inline: var(--wp--preset--spacing--30, 0.75rem);
        padding: var(--wp--preset--spacing--40, 1rem);
    }
}

/* Print styles for block themes */
@media print {
    .wc-referral-wallet-discount {
        background: transparent !important;
        border: 1px solid var(--wc-referral-text-primary) !important;
        color: var(--wc-referral-text-primary) !important;
        box-shadow: none !important;
    }
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
    .wc-referral-wallet-discount {
        border-width: 2px;
        border-style: solid;
    }
    
    .wc-referral-wallet-discount .apply-wallet-btn {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wc-referral-wallet-discount * {
        transition: none !important;
        animation: none !important;
    }
}