/**
 * Frontend CSS for Arik Sahaj Checkout
 *
 * @package Arik_Sahaj_Checkout
 * @since   1.0.0
 * @version 1.0.4
 *
 * ARCHITECTURE NOTE:
 * Colors, padding, font-size, border-radius, gap, icon-size, box-shadow,
 * transition, and hover transform are all output by add_dynamic_styles()
 * in class-ariksac-frontend.php using high-specificity selectors + !important.
 *
 * Since wp_add_inline_style() appends after this stylesheet in the DOM,
 * any property set with !important in dynamic CSS cannot be overridden here.
 *
 * This file handles: layout, structure, spinner, notices, wrappers, RTL,
 * reduced-motion, high-contrast, block theme compatibility.
 */

/* =============================================================================
   Button Wrapper
   ============================================================================= */

.ariksac-button-wrapper {
    margin: 15px 0;
    position: relative;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.ariksac-button-wrapper *,
.ariksac-button-wrapper *::before,
.ariksac-button-wrapper *::after {
    box-sizing: border-box;
}

/* =============================================================================
   WhatsApp Button — Structural fallbacks only.
   All visual properties (color, bg, padding, font-size, border-radius,
   gap, box-shadow, transition) are set by dynamic CSS with !important.
   ============================================================================= */

.ariksac-whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide the honeypot input visually and from screen readers. */
.ariksac-whatsapp-button input[name="ariksac_hp"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =============================================================================
   Disabled / Loading State
   ============================================================================= */

.ariksac-whatsapp-button:disabled,
.ariksac-whatsapp-button.ariksac-loading-state,
.ariksac-whatsapp-button[aria-busy="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
}

/* =============================================================================
   WhatsApp Icon — layout only; width/height from dynamic CSS
   ============================================================================= */

.ariksac-whatsapp-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: block;
}

/* =============================================================================
   Button Text
   ============================================================================= */

.ariksac-button-text {
    display: inline-block;
    line-height: 1.4;
}

/* =============================================================================
   Loading Indicator
   ============================================================================= */

.ariksac-loading {
    display: none;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY( -50% );
    pointer-events: none;
}

.ariksac-loading[aria-hidden="false"] {
    display: inline-block;
}

/* Spinner — uses currentColor so it adapts to button text color. */
.ariksac-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ariksac-spin 0.8s linear infinite;
    opacity: 0.8;
}

@keyframes ariksac-spin {
    to {
        transform: rotate( 360deg );
    }
}

/* =============================================================================
   Loop / Archive Button
   ============================================================================= */

.ariksac-loop-button {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    box-sizing: border-box;
}

.ariksac-loop-button .ariksac-loading {
    right: 10px;
}

ul.products .ariksac-button-wrapper,
.products .ariksac-button-wrapper,
.wc-block-grid__product .ariksac-button-wrapper,
.wp-block-woocommerce-all-products .ariksac-button-wrapper {
    margin: 8px 0 0;
    width: 100%;
}

/* =============================================================================
   Notice Wrapper (used when WC notices wrapper is absent — block themes)
   ============================================================================= */

.ariksac-notice-wrapper {
    margin: 15px 0;
    width: 100%;
    box-sizing: border-box;
}

/* =============================================================================
   WooCommerce-style Notices
   ============================================================================= */

.ariksac-notice {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
}

.ariksac-notice.woocommerce-message,
.ariksac-notice.ariksac-notice-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border-left: 4px solid #4caf50;
}

.ariksac-notice.woocommerce-error,
.ariksac-notice.ariksac-notice-error {
    background-color: #ffebee;
    color: #c62828;
    border-left: 4px solid #f44336;
}

/* =============================================================================
   WooCommerce Single Product Integration
   ============================================================================= */

.single-product .ariksac-button-wrapper {
    clear: both;
}

.single-product .cart .ariksac-button-wrapper {
    margin-top: 15px;
}

.variations_form .ariksac-button-wrapper {
    margin-top: 20px;
}

/* =============================================================================
   Theme Compatibility — layout/font only
   ============================================================================= */

.storefront .ariksac-whatsapp-button,
.woocommerce .ariksac-whatsapp-button {
    font-family: inherit;
}

.astra-shop-thumbnail-wrap + .ariksac-button-wrapper {
    margin-top: 15px;
}

.oceanwp .ariksac-button-wrapper,
.product-page .ariksac-button-wrapper {
    margin-top: 15px;
}

/* Divi */
.et_pb_wc_add_to_cart .ariksac-button-wrapper {
    margin-top: 15px;
}

/* The7 */
.the7-woo-product-wrap .ariksac-button-wrapper,
[class*="dt-woo"] .ariksac-button-wrapper {
    margin-top: 15px;
}

/* Block themes (Twenty Twenty-Four, Spectra, Kadence Blocks, etc.) */
.wp-block-woocommerce-product-button .ariksac-button-wrapper,
.wp-block-woocommerce-product-details .ariksac-button-wrapper {
    margin-top: 15px;
}

/* =============================================================================
   Accessibility — Focus States
   ============================================================================= */

.ariksac-whatsapp-button:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ariksac-whatsapp-button:focus:not(:focus-visible) {
    outline: none;
}

.ariksac-whatsapp-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* =============================================================================
   Reduced Motion — respect user preference
   ============================================================================= */

@media ( prefers-reduced-motion: reduce ) {

    .ariksac-spinner {
        animation: none;
        border-top-color: currentColor;
        opacity: 0.5;
    }

    .ariksac-whatsapp-button,
    .ariksac-notice {
        transition: none !important;
    }
}

/* =============================================================================
   High Contrast Mode (Windows / Forced Colors)
   ============================================================================= */

@media ( forced-colors: active ) {

    .ariksac-whatsapp-button {
        border: 2px solid ButtonText;
    }

    .ariksac-whatsapp-button:focus,
    .ariksac-whatsapp-button:focus-visible {
        outline: 2px solid Highlight;
    }

    .ariksac-spinner {
        border-color: ButtonText;
        border-top-color: transparent;
    }

    .ariksac-notice {
        border: 1px solid CanvasText;
    }
}

/* =============================================================================
   Dark Mode (system preference)
   ============================================================================= */

@media ( prefers-color-scheme: dark ) {

    .ariksac-notice.woocommerce-message,
    .ariksac-notice.ariksac-notice-success {
        background-color: #1b3a1f;
        color: #a5d6a7;
        border-left-color: #4caf50;
    }

    .ariksac-notice.woocommerce-error,
    .ariksac-notice.ariksac-notice-error {
        background-color: #3b1a1a;
        color: #ef9a9a;
        border-left-color: #f44336;
    }
}

/* =============================================================================
   Mobile Responsive — layout/margin only.
   Padding and icon-size are user settings in dynamic CSS.
   ============================================================================= */

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

    .ariksac-button-wrapper {
        margin: 12px 0;
    }

    .ariksac-notice {
        font-size: 13px;
        padding: 12px;
    }
}

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

    .ariksac-button-wrapper {
        margin: 8px 0;
    }
}

/* =============================================================================
   RTL Support
   ============================================================================= */

[dir="rtl"] .ariksac-whatsapp-button {
    flex-direction: row-reverse;
}

[dir="rtl"] .ariksac-loading {
    right: auto;
    left: 15px;
}

[dir="rtl"] .ariksac-loop-button .ariksac-loading {
    left: 10px;
}

[dir="rtl"] .ariksac-notice.woocommerce-message,
[dir="rtl"] .ariksac-notice.woocommerce-error,
[dir="rtl"] .ariksac-notice.ariksac-notice-success,
[dir="rtl"] .ariksac-notice.ariksac-notice-error {
    border-left: none;
    border-right: 4px solid;
}

[dir="rtl"] .ariksac-notice.woocommerce-message,
[dir="rtl"] .ariksac-notice.ariksac-notice-success {
    border-right-color: #4caf50;
}

[dir="rtl"] .ariksac-notice.woocommerce-error,
[dir="rtl"] .ariksac-notice.ariksac-notice-error {
    border-right-color: #f44336;
}

/* =============================================================================
   Print — hide the WhatsApp button (not useful in printed pages)
   ============================================================================= */

@media print {

    .ariksac-button-wrapper,
    .ariksac-notice-wrapper,
    .ariksac-notice {
        display: none !important;
    }
}