/**
 * Eodyne Code Provider - WooCommerce Specific Styles
 *
 * Version: 1.0.0
 * This file contains styles specifically for the WooCommerce checkout page.
 */

/* --- Checkout Two-Column Layout --- */

/*
 * The .ecp-checkout-wrapper div is added via hooks in the main plugin file.
 * We use Flexbox to create the two-column layout.
 */

/* Target the form itself as the flex container, as it's the direct parent of the columns. */
.ecp-checkout-wrapper form.checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 4%; /* Creates a gutter between the two columns */
    align-items: flex-start; /* Prevent columns from stretching to equal height */
}

/*
 * The checkout form's children are now:
 * 1. .col2-set#customer_details (the left column).
 * 2. .ecp-order-review-column (our new wrapper for the right column).
 */

/* Common styles for both columns to create a "card" effect */
.ecp-checkout-wrapper form.checkout .col2-set#customer_details,
.ecp-checkout-wrapper form.checkout .ecp-order-review-column {
    background-color: #fff;
    padding: 2.5em;
    border-radius: 8px;
}
.ecp-checkout-wrapper form.checkout .col2-set#customer_details {
    flex: 2; /* This column will be roughly twice as wide as the order review. */
    min-width: 300px; /* Prevents columns from becoming too narrow */
}

/* Our new wrapper for the order review acts as the second column. */
.ecp-checkout-wrapper form.checkout .ecp-order-review-column {
    flex: 1;
    min-width: 300px; /* Prevents columns from becoming too narrow */
}

/* On smaller screens (tablets and below), stack the columns vertically */
@media (max-width: 1024px) { /* Widen the breakpoint to catch more tablet sizes */
    .ecp-checkout-wrapper form.checkout {
        flex-direction: column;
        gap: var(--ecp-spacing-vertical); /* Use standard vertical spacing when stacked */
    }

    /* Ensure columns take full width on smaller screens */
    .ecp-checkout-wrapper form.checkout .col2-set#customer_details,
    .ecp-checkout-wrapper form.checkout .ecp-order-review-column {
        flex: none; /* Disable flex behavior for the items */
        width: 100%; /* Force them to take full width */
    }

    /* Reset the bottom margin on the first column to rely solely on the 'gap' property for spacing. */
    .ecp-checkout-wrapper form.checkout .col2-set#customer_details {
        margin-bottom: 0;
    }
}

/* --- Cancel Button on Checkout Page --- */

.ecp-cancel-checkout-btn {
    display: block; /* Ensure it's a block element */
    width: 100%; /* Make full width to match the place order button */
    text-align: center;
    padding: 10px 20px;
    margin-top: 1em; /* Space between this and the notice above */
    background-color: #fff;
    border: 1px solid var(--ecp-primary-color);
    border-radius: 50px; /* Stadium/Pill shape */
    color: var(--ecp-primary-color);
    font-size: 16px; /* Match the Place Order button */
    font-weight: 600; /* Match the Place Order button */
}

.ecp-cancel-checkout-btn:hover,
.ecp-cancel-checkout-btn:focus {
    background-color: #f8f9fa; /* A very light grey, almost white */
    /* The color and border-color remain the same as the base state for a subtle effect */
}

/* Simple text notice for the "Only one subscription" message */
.ecp-checkout-notice {
    font-size: 0.9em;
    color: #515151;
    text-align: left;
    margin-top: 1.5em; /* Add top margin */
    margin-bottom: 0.5em; /* Reduce bottom margin to be closer to the button */
    display: block;
    width: 100%;
}

/* --- WooCommerce Primary Button Overrides --- */
/* Style the main "Place Order" button to match our theme */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    width: 100% !important;
    background-color: var(--ecp-primary-color) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 50px; /* Stadium/Pill shape */
    border: none !important;
    transition: background-color 0.2s;
}

.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
    background-color: var(--ecp-primary-color-dark) !important;
}

/* --- WooCommerce Notices --- */
/* Style for informational notices on the checkout page, like the coupon toggle and payment gateway warnings. */
.woocommerce .woocommerce-info {
    background-color: var(--ecp-color-proposal); /* Use the same color as the dashboard proposal box */
    border-left: 5px solid var(--ecp-color-proposal-border); /* Use a matching border color */
    padding: 1em 1.5em 1em 3.5em; /* Top, Right, Bottom, Left padding */
    margin-bottom: var(--ecp-spacing-vertical);
    position: relative;
    color: #0d3a68;
    border-radius: 5px;
    list-style: none outside; /* Remove list bullets if any */
}

.woocommerce .woocommerce-info::before {
    font-family: "WooCommerce";
    content: "\e015"; /* Info icon from WooCommerce font */
    font-size: 1.5em;
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
}

/* --- WooCommerce Coupon Form Tweaks --- */
/* Style the coupon form to stand out and remove the top gap. */
.ecp-checkout-wrapper .woocommerce-form-coupon {
    padding: 1.5em; /* Add consistent padding */
    margin-bottom: var(--ecp-spacing-vertical); /* Add space below the form */
    background-color: var(--ecp-color-warning);
    border: 1px solid var(--ecp-color-warning-border);
    border-radius: 5px;
    /* Use flexbox for a robust layout */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 1em;
    align-items: flex-start; /* Align items to the top */
}

/* The <p> tags are the flex items, reset their default margins */
.ecp-checkout-wrapper .woocommerce-form-coupon .form-row {
    /* Reset theme styles that interfere with flexbox */
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
}

/* Make the input field container grow */
.ecp-checkout-wrapper .woocommerce-form-coupon .form-row-first {
    flex: 1 1 auto;
}

/* Make the button container shrink to fit */
.ecp-checkout-wrapper .woocommerce-form-coupon .form-row-last {
    flex-shrink: 0;
}

/* Style the coupon input field */
/* Use a more specific selector to override theme styles */
.ecp-checkout-wrapper form.woocommerce-form-coupon .input-text {
    width: 100%; /* Ensure it fills its container */
    font-size: 16px; /* Match other form inputs/buttons */
    padding: 10px 15px;
    box-sizing: border-box; /* Important for width and padding */
}

/* Style the "Apply Coupon" button to match our primary button style */
.ecp-checkout-wrapper .woocommerce-form-coupon .button {
    background-color: var(--ecp-primary-color);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    transition: background-color 0.2s;
    width: auto; /* Let the button size to its content */
    height: auto; /* Ensure height is not fixed by theme */
}

.eac-checkout-wrapper .woocommerce-form-coupon .button:hover {
    background-color: var(--eac-primary-color-dark);
    color: #fff;
}

/* On mobile (< 600px), stack the coupon input and button */
@media (max-width: 600px) {
    .eac-checkout-wrapper .woocommerce-form-coupon {
        flex-direction: column;
    }
    /* On mobile, force the containers to be full-width */
    .eac-checkout-wrapper .woocommerce-form-coupon .form-row {
        width: 100%;
    }
    .eac-checkout-wrapper .woocommerce-form-coupon .form-row-first {
        margin-bottom: 0.5em; /* Reduce the excessive margin on mobile */
        flex: none; /* Reset flex behavior to allow the item to be full-width */
    }
    .eac-checkout-wrapper .woocommerce-form-coupon .button {
        width: 100%; /* Make button full width on mobile */
        margin: 0; /* Reset any margins from the theme on the button itself */
    }
}

/* The coupon form includes a <div class="clear"></div> for legacy float layouts.
 * In our flexbox layout, this becomes an unnecessary flex item that adds extra space. We hide it. */
.eac-checkout-wrapper .woocommerce-form-coupon .clear {
    display: none;
}

/* --- WooCommerce Error Notice Fix --- */
/* When a validation error appears, it becomes a flex item. Force it to take full width. */
.eac-checkout-wrapper form.checkout .woocommerce-NoticeGroup {
    flex-basis: 100%; /* Take up the full width of the flex container */
    width: 100%; /* Be explicit to override potential theme styles */
    margin-bottom: var(--eac-spacing-vertical);
}

/* The error list itself can have its own default margins, so we reset them. */
/* We use a more specific selector to override default theme/WooCommerce margins on the error list. */
.eac-checkout-wrapper form.checkout .woocommerce-NoticeGroup .woocommerce-error {
    margin: 0;
}

/* --- Thank You Page - Activation Code Block Styles --- */

.ecp-thankyou-code {
    padding: 2em;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

/* Apply card styling to the right column on all screen sizes */
.ecp-thankyou-column--right {
    padding: 2em;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-sizing: border-box; /* Ensure padding is included in width calculation */
}


.ecp-thankyou-code h2 {
    margin-top: 0;
}

.ecp-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border: 1px dashed #ccc;
    padding: 1em 1.5em;
    border-radius: 5px;
    margin-top: 1em;
}

.ecp-code-box__code {
    font-family: monospace;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--ecp-primary-color);
}

.ecp-code-box__button {
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center;
    gap: 0.5em; /* Space between icon and text */
    background-color: #f0f0f0; /* Light grey background */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s;
}

.ecp-code-box__button:hover {
    background-color: #e0e0e0; /* Darker grey on hover */
}

.ecp-code-box__button .dashicons {
    font-size: 20px;
    color: #555;
    line-height: 1; /* Ensure icon is vertically centered */
}

.ecp-code-box__button .ecp-copy-feedback {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #333;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    margin-right: 10px;
    opacity: 0;
    transition: opacity 0.2s;
}

.ecp-code-box__button .ecp-copy-feedback.is-visible {
    opacity: 1;
}

/* Apply our custom error styling to WooCommerce validation errors for consistency */
.woocommerce .woocommerce-error {
    background-color: var(--eac-color-error);
    color: #721c24;
    border-top: 3px solid var(--eac-color-error-border);
    border-radius: 5px;
    padding: 1em 1.5em;
    list-style: none outside;
    margin: 0;
}

/* --- Thank You Page - QR Code & Button Container --- */

.ecp-qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;           /* Ensure container takes full width */
    max-width: 200px;      /* Set the max-width on the container */
    /* Center the block by setting horizontal margins to auto */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em; /* Keep the bottom margin */
}

.ecp-qr-code-image {
    max-width: 200px; /* Set a max-width for the QR code */
    height: auto;
    display: block;
    margin-bottom: 1em;
}

/* --- Thank You Page - Activation Button --- */

/* Style for the activation button on the Thank You page */
.ecp-thankyou-code .ecp-btn {
    display: block; /* Use block to fill the container's width */
    width: 100%;    /* Make the button take the full width of its container */
    padding: 12px 15px; /* Add vertical padding for height and some horizontal for text spacing */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    line-height: 1.5; /* Ensures text is vertically centered */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.ecp-thankyou-code .ecp-btn--primary {
    background-color: #24ABB7;
    color: #ffffff;
    border-color: #24ABB7;
}

.ecp-thankyou-code .ecp-btn--primary:hover,
.ecp-thankyou-code .ecp-btn--primary:focus {
    background-color: #1d8a94; /* A slightly darker shade for hover */
    color: #ffffff;
    border-color: #1d8a94;
}

/* Instructions block on Thank You page */
.ecp-instructions {
    margin-top: 2.5em;
    text-align: left;
    max-width: 600px; /* Keep the max-width for readability on wide screens */
    margin-left: 0;   /* Remove auto margin to align left */
    margin-right: 0;  /* Remove auto margin */
    padding: 0;       /* The parent container already has padding */
}

/* --- Thank You Page - Two Column Layout --- */

@media (min-width: 1024px) {
    /* The .woocommerce-order container will hold our two columns */
    .woocommerce-order {
        display: flex;
        flex-wrap: wrap;
        gap: 2em; /* Space between columns */
        align-items: stretch; /* Make columns equal height */
    }

    /* Both columns will grow and shrink as needed */
    .ecp-thankyou-column--left,
    .ecp-thankyou-column--right {
        flex: 1 1 0; /* Allow columns to grow and shrink */
        min-width: 0; /* Prevents overflow */
    }
    
    /* Ensure the card inside the left column stretches to fill its container */
    .ecp-thankyou-column--left .ecp-thankyou-code {
        height: 100%;
        box-sizing: border-box; /* Ensure padding is included in height calculation */
    }

    /* On desktop, show the desktop text and hide the mobile text */
    .ecp-desktop-only-text {
        display: inline;
    }
    .ecp-mobile-only-text {
        display: none;
    }
}

@media (max-width: 1023px) {
    /* On mobile, show the mobile text and hide the desktop text */
    .ecp-mobile-only-text {
        display: inline;
    }
    .ecp-desktop-only-text {
        display: none;
    }

    /* Reduce excessive top padding from the theme on mobile */
    .woocommerce-order-received .row.double-top-padding {
        padding-top: 27px !important;
    }
    /* Add vertical spacing between the stacked columns on mobile */
    .ecp-thankyou-column--left {
        margin-bottom: 27px;
    }
}

/* Hide elements meant only for mobile on larger screens */
@media (min-width: 768px) {
    /* Increase specificity to ensure this rule is applied */
    .ecp-thankyou-code .ecp-redeem-link {
        display: none;
    }
}

/* On mobile, the redeem link should be visible */
@media (max-width: 767px) {
    .ecp-redeem-link {
        display: block;
        margin-top: 18px;
    }
}

/* Hide the main page title H1 */
/* On the Thank You page, hide the entire title wrapper to remove any residual spacing */
.woocommerce-order-received .post-title-wrapper {
    display: none !important;
}

/* Remove the default top margin from the "Your Order" notice to align it with the top of the card on all screen sizes */
.ecp-thankyou-column--right .woocommerce-notice {
    margin-top: 0;
}

/* Adjust the top margin of the order details block for better spacing on all screen sizes */
/* Target the table directly with a highly specific selector and !important */
.woocommerce-order .ecp-thankyou-column--right .order-details table.shop_table {
    margin-top: 18px !important;
}


/* --- Thank You Page - Table Padding Adjustment --- */
/* Reduce the vertical padding in the order details table for a cleaner look */
/* Use a very specific selector and !important to override theme/WooCommerce default styles */
.woocommerce-order .ecp-thankyou-column--right .order-details table.shop_table th,
.woocommerce-order .ecp-thankyou-column--right .order-details table.shop_table td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* --- Thank You Page - Table Header Styling --- */
/* Make the "Product" and "Total" headers bold and uppercase */
.woocommerce-order .ecp-thankyou-column--right table.shop_table.order_details thead th {
    font-weight: bold !important;
    text-transform: uppercase;
}

/* Responsive display for QR code and activation button on Thank You page */
@media (min-width: 768px) {
    .ecp-mobile-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .ecp-desktop-only {
        display: none !important;
    }

    /* Stack the activation code and copy button on mobile */
    .ecp-code-box {
        flex-direction: column;
        gap: 1em; /* Add space between code and button */
    }
}