/**
 * Dual Mini-Cart Summary Styles
 *
 * Styles for the checkout options summary appended to WooCommerce mini-cart drawer.
 */

/* Summary container */
.cg-dual-summary {
    margin-top: 20px;
    padding: 16px;
    border-top: 2px solid #e5e7eb;
    background: #f9fafb;
}

.cg-dual-summary-header {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Individual sections */
.cg-dual-section {
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.cg-dual-section:last-child {
    margin-bottom: 0;
}

/* Offset section - CG Green theme */
.cg-dual-offset {
    background: #E6F5EC; /* CG Green 050 */
    border: 1px solid #8DD4AC; /* CG Green 200 */
}

/* Removal section - CG Blue theme */
.cg-dual-removal {
    background: #EDF4F9; /* CG Blue 050 */
    border: 1px solid #C5DAE9; /* CG Blue 200 */
}

/* Section info */
.cg-dual-section-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cg-dual-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0F1720; /* CG Ink */
}

.cg-dual-section-count {
    font-size: 12px;
    color: #6b7280;
}

.cg-dual-section-total {
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    color: #111827;
}

/* Checkout buttons */
.cg-dual-checkout-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease;
}

/* Primary buttons - CG Orange Vivid for both offset and removal */
.cg-dual-checkout-offset,
.cg-dual-checkout-removal {
    background: #FF6B00; /* CG Orange Vivid */
    color: white;
}

.cg-dual-checkout-offset:hover,
.cg-dual-checkout-removal:hover {
    background: #E55C00; /* CG Orange 600 */
}

/* Filtered cart page banner
 * Uses CG Brand Palette:
 * - Offset (Green): CG Green 600 (#067F38), Green 050 (#E6F5EC)
 * - Removal (Blue): CG Blue 700 (#1A4A73), Blue 050 (#EDF4F9)
 */
.cg-filtered-cart-banner {
    padding: 12px 16px;
    border-radius: 0;
    margin-bottom: 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.cg-filtered-cart-banner a {
    margin-left: auto;
    font-weight: 600;
    text-decoration: none;
}

.cg-filtered-cart-banner a:hover {
    text-decoration: underline;
}

/* Offset banner - CG Green palette */
.cg-offset-banner {
    background: #E6F5EC; /* CG Green 050 */
    border: 1px solid #067F38; /* CG Green 600 */
    border-left: 4px solid #067F38;
    color: #067F38; /* CG Green 600 */
}

/* Link to removal cart uses blue */
.cg-offset-banner a {
    color: #1A4A73; /* CG Blue 700 */
}

.cg-offset-banner a:hover {
    color: #153d5e; /* CG Blue 800 */
}

/* Removal banner - CG Blue palette */
.cg-removal-banner {
    background: #EDF4F9; /* CG Blue 050 */
    border: 1px solid #1A4A73; /* CG Blue 700 */
    border-left: 4px solid #1A4A73;
    color: #1A4A73; /* CG Blue 700 */
}

/* Link to offset cart uses green */
.cg-removal-banner a {
    color: #067F38; /* CG Green 600 */
}

.cg-removal-banner a:hover {
    color: #056830; /* CG Green 700 */
}

.cg-banner-icon {
    font-size: 16px;
}

/* ===========================================
 * Dual Footer Labels (for cloned WC footers)
 * =========================================== */

.cg-footer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 16px 8px;
}

.cg-footer-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* CG Brand Tree Icon styling */
.cg-footer-label-icon .cg-cart-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cg-footer-label-text {
    flex-shrink: 0;
}

.cg-footer-label-count {
    font-weight: 500;
    color: #6B7785; /* CG Neutral 500 */
}

/* Offset footer label - CG Green theme */
.cg-footer-label--offset {
    color: #056830; /* CG Green 700 */
    border-top: 1px solid #E5E7EB; /* CG Neutral 200 */
}

/* Removal footer label - CG Blue theme */
.cg-footer-label--removal {
    color: #1A4A73; /* CG Blue 700 */
    border-top: 1px solid #E5E7EB; /* CG Neutral 200 */
    margin-top: 16px;
}

/* Ensure cloned footers display properly */
.cg-footer-removal {
    display: block;
}

/* ===========================================
 * Hide Mini-Cart on Cart/Checkout Pages
 * The mini-cart icon should not appear on cart or checkout pages
 * WooCommerce may still render it in the header block
 * =========================================== */

/* Hide mini-cart on cart pages */
.woocommerce-cart .wc-block-mini-cart,
.woocommerce-cart .wp-block-woocommerce-mini-cart,
body.woocommerce-cart .wc-block-mini-cart,
body[class*="page-template"] .wp-block-woocommerce-cart .wc-block-mini-cart,
.wp-block-woocommerce-cart ~ .wc-block-mini-cart,
.wc-block-cart .wc-block-mini-cart {
    display: none !important;
}

/* Hide mini-cart on checkout pages */
.woocommerce-checkout .wc-block-mini-cart,
.woocommerce-checkout .wp-block-woocommerce-mini-cart,
body.woocommerce-checkout .wc-block-mini-cart,
.wp-block-woocommerce-checkout .wc-block-mini-cart,
.wc-block-checkout .wc-block-mini-cart {
    display: none !important;
}

/* ===========================================
 * Mini-Cart Badge Override
 * WooCommerce renders badge with white background by default
 * These styles ensure the badge is visible with correct colors
 * Using !important to override inline styles from WC Blocks React
 * =========================================== */

/* Ensure the quantity badge wrapper has relative positioning */
.wc-block-mini-cart__quantity-badge {
    position: relative !important;
}

/* Override the mini-cart badge styling */
/* Using CG Orange Vivid (#FF6B00) for high-visibility CTA */
/* Safari fix: Reset CSS custom properties that may override our styles */
.wc-block-mini-cart__badge {
    --wc-badge-background: #FF6B00 !important;
    --wp--preset--color--background: #FF6B00 !important;
    background: #FF6B00 !important;
    background-color: #FF6B00 !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    z-index: 1 !important;
}

/* Safari-specific fix: Use higher specificity selector */
html body .wc-block-mini-cart .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge,
html body .wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge {
    background: #FF6B00 !important;
    background-color: #FF6B00 !important;
    color: #FFFFFF !important;
}

/* Override inline styles using attribute selector */
.wc-block-mini-cart__badge[style] {
    background: #FF6B00 !important;
    background-color: #FF6B00 !important;
    color: #FFFFFF !important;
}

/* Target the specific inline style WooCommerce incorrectly sets */
.wc-block-mini-cart__badge[style*="background:#FFFFFF"],
.wc-block-mini-cart__badge[style*="background: #FFFFFF"],
.wc-block-mini-cart__badge[style*="background-color"] {
    background: #FF6B00 !important;
    background-color: #FF6B00 !important;
}

/* Ensure badge stays visible on hover states */
.wc-block-mini-cart__button:hover .wc-block-mini-cart__badge,
.wc-block-mini-cart__button:focus .wc-block-mini-cart__badge,
.wc-block-mini-cart:hover .wc-block-mini-cart__badge {
    background: #E65F00 !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide badge when empty (count is 0) */
.wc-block-mini-cart__badge:empty {
    display: none !important;
}

/* ===========================================
 * Mini-Cart Icon Border/Outline
 * Remove dark border from focus/hover states
 * =========================================== */

.wc-block-mini-cart__button,
.wc-block-mini-cart__button:focus,
.wc-block-mini-cart__button:focus-visible,
.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===========================================
 * Mini-Cart Drawer Border/Outline
 * Remove dark borders from drawer elements
 * =========================================== */

.wc-block-mini-cart__drawer a,
.wc-block-mini-cart__drawer a:focus,
.wc-block-mini-cart__drawer a:focus-visible,
.wc-block-mini-cart__drawer a:hover,
.wc-block-mini-cart__drawer a:active,
.wc-block-mini-cart__drawer .wc-block-components-product-name,
.wc-block-mini-cart__drawer .wc-block-components-product-name:focus,
.wc-block-mini-cart__drawer .wc-block-cart-item__image,
.wc-block-mini-cart__drawer .wc-block-cart-item__image a,
.wc-block-mini-cart__drawer .wc-block-cart-item__image a:focus,
.wc-block-mini-cart__drawer .wc-block-cart-items__row,
.wc-block-mini-cart__drawer .wc-block-cart-items__row:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

/* ===========================================
 * Mini-Cart Drawer Buttons
 * Override WooCommerce default button colors with CG Orange Vivid
 * =========================================== */

/* View cart and Checkout buttons in mini-cart drawer */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-components-button,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions a.wc-block-components-button {
    background: #FF6B00 !important; /* CG Orange Vivid */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 3px !important;
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-components-button:hover,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions a.wc-block-components-button:hover {
    background: #E55C00 !important; /* CG Orange 600 */
    color: #FFFFFF !important;
}

/* Outlined/secondary button variant - CG Design System */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-components-button--outlined {
    background: #FFFFFF !important;
    color: #0F1720 !important; /* CG Ink */
    border: 1px solid #D4D8DD !important; /* CG Neutral 300 */
    border-radius: 3px !important;
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-components-button--outlined:hover {
    background: #F9FAFB !important; /* CG Neutral 050 */
    color: #0F1720 !important;
    border-color: #9CA3AF !important; /* CG Neutral 400 */
}

/* ===========================================
 * Mini-Cart Drawer Close Button
 * Override WooCommerce green with CG Orange Vivid Dark
 * =========================================== */

/* Close button in drawer header */
.wc-block-mini-cart__drawer .components-button,
.wc-block-mini-cart__drawer button.components-button,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close,
.wc-block-mini-cart__drawer button[aria-label="Close"] {
    background: #CC5600 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
}

.wc-block-mini-cart__drawer .components-button:hover,
.wc-block-mini-cart__drawer button.components-button:hover,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover,
.wc-block-mini-cart__drawer button[aria-label="Close"]:hover {
    background: #A34500 !important;
    color: #FFFFFF !important;
}

.wc-block-mini-cart__drawer .components-button:focus,
.wc-block-mini-cart__drawer button.components-button:focus,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus,
.wc-block-mini-cart__drawer button[aria-label="Close"]:focus {
    background: #CC5600 !important;
    color: #FFFFFF !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ===========================================
 * Carbon Removal/Offset Product Buttons
 * Override WordPress theme.json green with CG Blue
 * =========================================== */

/* Removal button - CG Blue 700 */
.cg-btn-removal,
a.cg-btn-removal,
.wp-block-button__link.cg-btn-removal,
.wp-element-button.cg-btn-removal {
    --wp--preset--color--cg-green-600: #1A4A73;
    --wp--preset--color--cg-green-300: #153d5e;
    background: #1A4A73 !important;
    background-color: #1A4A73 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
}

.cg-btn-removal:hover,
a.cg-btn-removal:hover,
.wp-block-button__link.cg-btn-removal:hover,
.wp-element-button.cg-btn-removal:hover {
    background: #153d5e !important;
    background-color: #153d5e !important;
    color: #fff !important;
}

/* Offset button - CG Green 600 (ensure consistent with theme) */
.cg-btn-offset,
a.cg-btn-offset,
.wp-block-button__link.cg-btn-offset,
.wp-element-button.cg-btn-offset {
    background: #067F38 !important;
    background-color: #067F38 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
}

.cg-btn-offset:hover,
a.cg-btn-offset:hover,
.wp-block-button__link.cg-btn-offset:hover,
.wp-element-button.cg-btn-offset:hover {
    background: #056830 !important;
    background-color: #056830 !important;
    color: #fff !important;
}