/**
 * AES Hub WordPress & WooCommerce Brand Integration Stylesheet
 *
 * Enforces the Alpha-Ecostar Ventures brand identity on WooCommerce elements,
 * WooCommerce modern cart/checkout blocks, WordPress block editor content,
 * buttons, notices, and form inputs.
 *
 * @package AES_Hub
 */

/* ==========================================================================
   1. Brand Buttons & Links for WooCommerce
   ========================================================================== */

/* Standard legacy WooCommerce buttons, loop buttons, and shortcode buttons */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .woocommerce-message .button,
.woocommerce-page button.button,
.woocommerce-page a.button,
.woocommerce-page input.button,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce-checkout #payment #place_order {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--border-radius, 8px) !important;
    cursor: pointer !important;
    transition: var(--transition, all 0.3s cubic-bezier(0.4, 0, 0.2, 1)) !important;
    text-decoration: none !important;
    font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    white-space: nowrap !important;
    gap: 8px !important;
    min-height: 48px !important;
    line-height: 1.2 !important;
    background-color: var(--primary, #03487f) !important;
    color: var(--white, #ffffff) !important;
    box-shadow: 0 6px 14px rgba(3, 72, 127, 0.22) !important;
}

/* Button Hover State */
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page button.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-checkout #payment #place_order:hover {
    background-color: var(--primary-dark, #02365f) !important;
    color: var(--white, #ffffff) !important;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)) !important;
    text-decoration: none !important;
}

/* Button Focus State */
.woocommerce button.button:focus,
.woocommerce button.button:focus-visible,
.woocommerce a.button:focus,
.woocommerce a.button:focus-visible,


/* ==========================================================================
   2. Modern WooCommerce Blocks (Cart & Checkout Blocks)
   ========================================================================== */

.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button,
.wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--border-radius, 8px) !important;
    cursor: pointer !important;
    transition: var(--transition, all 0.3s cubic-bezier(0.4, 0, 0.2, 1)) !important;
    text-decoration: none !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    min-height: 48px !important;
    line-height: 1.2 !important;
    background-color: var(--primary, #03487f) !important;
    color: var(--white, #ffffff) !important;
    box-shadow: 0 6px 14px rgba(3, 72, 127, 0.22) !important;
}

.wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-button__link:hover {
    background-color: var(--primary-dark, #02365f) !important;
    color: var(--white, #ffffff) !important;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   3. WooCommerce Forms, Inputs & Cards
   ========================================================================== */

/* Inputs are also styled generically in assets/css/style.css ("FORMS").
   These values must stay in step with that block, otherwise checkout fields
   drift out of line with the rest of the site. Two traps worth noting:
     - font-size must stay at 1rem. The base sheet sets this deliberately so
       iOS Safari does not zoom the viewport when a field is focused; a value
       below 16px brings that zoom back on the checkout email field.
     - the padding shorthand below also resets padding-right, so selects
       re-declare it further down to keep the dropdown arrow clear of the
       selected text. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input[type='text'],
.wc-block-components-text-input input[type='email'],
.wc-block-components-text-input input[type='tel'] {
    width: 100%;
    padding: 12px 16px !important;
    min-height: 44px;
    border: 1px solid var(--gray-300, #cbd5e1) !important;
    border-radius: var(--border-radius, 8px) !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1rem !important;
    line-height: 1.4;
    background-color: var(--white, #ffffff) !important;
    color: var(--secondary, #0f172a) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Re-state the right gutter the shorthand above clears. Without this the
   arrow from style.css is drawn on top of the selected option. */
.woocommerce form .form-row select {
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M6 8 0 2h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

.woocommerce form .form-row textarea {
    min-height: 120px;
    resize: vertical;
}

/* Mirror the base-sheet placeholder treatment (Firefox lowers opacity). */
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
    color: var(--gray-400, #94a3b8) !important;
    opacity: 1;
}

/* Focus state uses the brand primary with a matching tinted ring, as in
   style.css. The old amber ring here clashed with the navy button set. */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input[type='text']:focus,
.wc-block-components-text-input input[type='email']:focus,
.wc-block-components-text-input input[type='tel']:focus {
    border-color: var(--primary, #03487f) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(3, 72, 127, 0.12) !important;
}

/* Labels and row rhythm, so checkout matches the site-wide form spacing. */
.woocommerce form .form-row {
    margin-bottom: 1.1rem;
    padding: 0;
}

.woocommerce form .form-row label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--secondary, #0f172a);
}

/* Required marker: plain text, not an underlined asterisk. */
.woocommerce form .form-row label .required {
    color: var(--error, #ef4444) !important;
    text-decoration: none;
    border: 0;
}

/* Hide native number steppers, as the base sheet does elsewhere.
   Prefixed + standard pairing mirrors assets/css/style.css. */
.woocommerce form .form-row input.input-text[type='number'] {
    -moz-appearance: textfield;    /* legacy Firefox (< 80) */
    appearance: textfield;         /* standard: Chrome 84+, Edge 84+, Safari 15.4+, FF 80+ */
}
.woocommerce form .form-row input.input-text[type='number']::-webkit-outer-spin-button,
.woocommerce form .form-row input.input-text[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ==========================================================================
   4. Notices, Messages, Badges & Cookie Banner
   ========================================================================== */

.woocommerce-message {
    border-top-color: var(--success, #10b981) !important;
    border-radius: var(--border-radius, 8px);
    background-color: #f0fdf4 !important;
    color: #166534 !important;
}

.woocommerce-info {
    border-top-color: var(--primary, #03487f) !important;
    border-radius: var(--border-radius, 8px);
    background-color: var(--light-bg, #f8fafc) !important;
    color: var(--dark-text, #0f172a) !important;
}

.woocommerce-error {
    border-top-color: var(--error, #ef4444) !important;
    border-radius: var(--border-radius, 8px);
    background-color: #fef2f2 !important;
    color: #991b1b !important;
}

.woocommerce span.onsale {
    background-color: var(--accent, #f59e0b) !important;
    color: var(--white, #ffffff) !important;
    font-family: var(--font-heading, 'Poppins', sans-serif) !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    min-height: auto !important;
    line-height: 1 !important;
}

/* Suppress duplicate cookie banners */
body.cookieadmin-active .cookie-banner,
#cookieadmin_banner + .cookie-banner {
    display: none !important;
}

/* Header Cart Count Badge */
.aes-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent, #f59e0b);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 9999px;
    padding: 0 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.woocommerce input.button:focus,
.woocommerce input.button:focus-visible {
    outline: 3px solid var(--accent, #f59e0b) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--focus-ring, rgba(245, 158, 11, 0.45)) !important;
}

/* Secondary & Ghost Buttons (e.g., Return to shop, coupon apply) */
.woocommerce .woocommerce-cart-form button[name="apply_coupon"],
.woocommerce a.button.wc-backward {
    background-color: var(--white, #ffffff) !important;
    color: var(--secondary, #1e293b) !important;
    border: 2px solid var(--gray-300, #cbd5e1) !important;
    box-shadow: none !important;
}

.woocommerce .woocommerce-cart-form button[name="apply_coupon"]:hover,
.woocommerce a.button.wc-backward:hover {
    background-color: #eef2f7 !important;
    color: var(--gray-700, #334155) !important;
    border-color: var(--gray-400, #94a3b8) !important;
}