/**
 * CFS WooCommerce Styling
 * Consistent product page styling to match the Product Designer aesthetic
 * For: Blocksy Theme + WooCommerce
 */

/* ==========================================================================
   CSS Variables - Match Designer Theme
   ========================================================================== */
:root {
    --cfs-primary: #1e3a5f;
    --cfs-primary-hover: #2a4a73;
    --cfs-accent: #3b82f6;
    --cfs-accent-light: #dbeafe;
    --cfs-text: #1e3a5f;
    --cfs-text-muted: #64748b;
    --cfs-border: #e2e8f0;
    --cfs-bg-light: #f0f4f8;
    --cfs-radius: 8px;
}

/* ==========================================================================
   CFS PLUGIN - Size Selector Section
   ========================================================================== */

/* Section container */
.cfs-size-selector,
.cfs-addon-selectors,
.cfs-addon-category {
    margin-bottom: 20px !important;
}

/* Labels (SELECT SIZE:, LAMINATE:) */
.cfs-size-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
}

/* Button container - 3 column grid */
.cfs-size-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

/* ==========================================================================
   CFS PLUGIN - Size Buttons (.cfs-size-btn)
   ========================================================================== */

/* Size button - unselected state (same height as Add to Cart) */
button.cfs-size-btn,
.cfs-size-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: auto !important;
    height: auto !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Size button - selected state (solid dark blue) */
button.cfs-size-btn.selected,
.cfs-size-btn.selected {
    background: #1e3a5f !important;
    border-color: #1e3a5f !important;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25) !important;
}

.cfs-size-btn.selected .cfs-size-name,
.cfs-size-btn.selected .cfs-size-price {
    color: #fff !important;
}

/* Size button - hover */
button.cfs-size-btn:hover:not(.selected),
.cfs-size-btn:hover:not(.selected) {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   CFS PLUGIN - Add-on Buttons (.cfs-addon-btn) - Laminate, etc
   ========================================================================== */

/* Add-on button - unselected state */
button.cfs-addon-btn,
.cfs-addon-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px !important;
    min-height: 70px !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Add-on button - selected state (light background with dark border) */
button.cfs-addon-btn.selected,
.cfs-addon-btn.selected {
    background: #f0f7ff !important;
    border: 2px solid #1e3a5f !important;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.12) !important;
}

/* Add-on button - hover */
button.cfs-addon-btn:hover:not(.selected),
.cfs-addon-btn:hover:not(.selected) {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   CFS PLUGIN - Button Inner Elements
   ========================================================================== */

/* Option name (size text, addon name) */
.cfs-size-btn .cfs-size-name,
.cfs-addon-btn .cfs-size-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e3a5f !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

/* Hide price in SIZE buttons (too cluttered with dimensions) */
.cfs-size-btn .cfs-size-price {
    display: none !important;
}

/* But keep price visible in ADDON buttons (Gloss, Matte, etc) */
.cfs-addon-btn .cfs-size-price {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3b82f6 !important;
    margin-top: 4px !important;
}

/* ==========================================================================
/* ==========================================================================
   PRODUCT ADD-ONS - Card Style (Gloss, Matte, etc)
   ========================================================================== */

/* Add-on container */
.product-addon,
.wc-pao-addon,
.wc-pao-addon-container {
    margin-bottom: 24px !important;
}

/* Add-on title */
.product-addon h3,
.wc-pao-addon-name,
.product-addon-title,
.wc-pao-addon-container .wc-pao-addon-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--cfs-text-muted) !important;
    margin-bottom: 12px !important;
}

/* Option cards grid */
.wc-pao-addon-content,
.product-addon .options,
.wc-pao-addon-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Individual option as card */
.wc-pao-addon-wrap label,
.product-addon label,
.wc-pao-addon-content label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 100px !important;
    min-height: 80px !important;
    padding: 16px !important;
    background: #fff !important;
    border: 1px solid var(--cfs-border) !important;
    border-radius: var(--cfs-radius) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Selected add-on card - light background with dark border */
.wc-pao-addon-wrap label:has(input:checked),
.product-addon label:has(input:checked),
.wc-pao-addon-content label:has(input:checked) {
    border: 2px solid var(--cfs-primary) !important;
    background: var(--cfs-bg-light) !important;
}

/* Add-on label text */
.wc-pao-addon-label,
.product-addon .addon-name,
.wc-pao-addon-content .addon-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cfs-text) !important;
    margin-bottom: 4px !important;
}

/* Add-on price */
.wc-pao-addon-price,
.product-addon .addon-price,
.wc-pao-addon-content .price {
    font-size: 12px !important;
    color: var(--cfs-accent) !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   QUANTITY SELECTOR
   ========================================================================== */

.woocommerce .quantity,
.ct-quantity-container,
form.cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--cfs-border) !important;
    border-radius: var(--cfs-radius) !important;
    overflow: hidden !important;
    background: #fff !important;
}

.woocommerce .quantity .qty,
.ct-quantity-container input,
form.cart .quantity input.qty {
    width: 50px !important;
    text-align: center !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--cfs-text) !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    padding: 10px 5px !important;
    background: transparent !important;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.woocommerce .quantity .minus,
.woocommerce .quantity .plus,
.ct-quantity-container button,
form.cart .quantity button {
    width: 40px !important;
    height: 40px !important;
    background: var(--cfs-bg-light) !important;
    border: none !important;
    color: var(--cfs-text) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce .quantity button:hover,
.ct-quantity-container button:hover {
    background: var(--cfs-border) !important;
}

/* ==========================================================================
   ADD TO CART BUTTON
   ========================================================================== */

.woocommerce div.product form.cart .single_add_to_cart_button,
button.single_add_to_cart_button,
.ct-cart-form .single_add_to_cart_button,
form.cart button[type="submit"],
.add_to_cart_button,
button[name="add-to-cart"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 32px !important;
    background: var(--cfs-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 200px !important;
    flex: 1 !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
form.cart button[type="submit"]:hover {
    background: var(--cfs-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3) !important;
}

/* ==========================================================================
   PRICE DISPLAY
   ========================================================================== */

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--cfs-text) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {

    .woocommerce div.product form.cart .single_add_to_cart_button,
    button.single_add_to_cart_button {
        width: 100% !important;
        min-width: unset !important;
    }
}

/* ==========================================================================
   BULK PRICING TABLE - Vistaprint Quality
   ========================================================================== */

.everpack-bulk-container {
    margin: 24px 0 !important;
    /* Container styling removed per user request */
}

.everpack-bulk-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--cfs-text-muted) !important;
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.everpack-bulk-title .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.everpack-bulk-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.everpack-bulk-table th {
    text-align: left !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--cfs-text-muted) !important;
    padding: 8px 12px 12px !important;
    border-bottom: 1px solid var(--cfs-border) !important;
}

.everpack-bulk-table td {
    padding: 12px !important;
    font-size: 14px !important;
    color: var(--cfs-text) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.everpack-bulk-table tr:last-child td {
    border-bottom: none !important;
}

/* Quantity Cell */
.bulk-qty-cell {
    font-weight: 600 !important;
}

/* Discount Cell - Green Pill style text */
.bulk-discount-cell {
    color: #10b981 !important;
    font-weight: 700 !important;
    width: 100px;
}

/* Price Cell */
.bulk-price-cell {
    font-weight: 700 !important;
    text-align: right !important;
    color: var(--cfs-primary) !important;
}

/* Row Hover */
.everpack-bulk-table tbody tr {
    transition: background 0.2s ease !important;
}

.everpack-bulk-table tbody tr:hover {
    background: var(--cfs-bg-light) !important;
}

/* Active Tier (Future proofing) */
.everpack-bulk-table tr.active-tier {
    background: #f0f9ff !important;
}

.everpack-bulk-table tr.active-tier .bulk-price-cell {
    color: var(--cfs-accent) !important;
}

/* ==========================================================================
   BUTTON ANIMATIONS - Premium Feel
   ========================================================================== */

.cfs-size-btn,
.cfs-addon-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cfs-size-btn:active,
.cfs-addon-btn:active {
    transform: scale(0.97) !important;
}

/* Add to Cart - Premium Shimmer Effect */
.single_add_to_cart_button {
    position: relative !important;
    overflow: hidden !important;
}

.single_add_to_cart_button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.single_add_to_cart_button:hover::after {
    left: 100%;
}

/* ==========================================================================
   HIDE ADD TO CART IN LOOPS (Final Aggressive + Blocks)
   ========================================================================== */

/* 1. Standard Loop Targets */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .add_to_cart_button,
a.button.add_to_cart_button,

/* 2. Cart Page Specific (Cross-sells, Up-sells, Product Grids) */
.woocommerce-cart .product .add_to_cart_button,
.woocommerce-cart .product .button:not(.checkout-button):not(.wc-forward),
.woocommerce-cart .product button.button:not(.checkout-button),
.woocommerce-cart .products .add_to_cart_button,
.woocommerce-cart li.product .add_to_cart_button,

/* 3. WooCommerce Blocks (High Specificity for "New in store") */
body .wc-block-grid .wc-block-grid__product-add-to-cart,
body .wc-block-grid .wp-block-button__link.add_to_cart_button,
body .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-add-to-cart,
.wc-block-grid__product-add-to-cart,

/* 4. Catch-all */
.woocommerce .products .add_to_cart_button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   BLOCKSY QUANTITY BUTTONS - Full Styling
   ========================================================================== */

body .quantity[data-type="type-2"] {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 140px !important;
    height: 58.4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body .quantity[data-type="type-2"]:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

body .quantity[data-type="type-2"]:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

body .quantity[data-type="type-2"] .ct-decrease,
body .quantity[data-type="type-2"] .ct-increase {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    cursor: pointer !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    position: static !important;
    top: 0 !important;
    border: none !important;
}

/* Hide any theme-injected SVG icons or text */
body .quantity[data-type="type-2"] .ct-decrease svg,
body .quantity[data-type="type-2"] .ct-increase svg,
body .quantity[data-type="type-2"] .minus,
body .quantity[data-type="type-2"] .plus {
    display: none !important;
}

body .quantity[data-type="type-2"] .ct-decrease,
body .quantity[data-type="type-2"] .ct-increase {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    cursor: pointer !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 0 !important;
    /* Hide native text like + or - if text node exists */
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    position: static !important;
    top: 0 !important;
    border: none !important;
}

body .quantity[data-type="type-2"] .ct-decrease:hover,
body .quantity[data-type="type-2"] .ct-increase:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

body .quantity[data-type="type-2"] .ct-decrease:active,
body .quantity[data-type="type-2"] .ct-increase:active {
    background: #e2e8f0 !important;
}

/* Re-order elements: Minus | Input | Plus */
body .quantity[data-type="type-2"] .ct-decrease {
    order: 1 !important;
}

body .quantity[data-type="type-2"] input.qty {
    order: 2 !important;
}

body .quantity[data-type="type-2"] .ct-increase {
    order: 3 !important;
}

/* Restore ::before and ::after pseudo-elements with content */
body .quantity[data-type="type-2"] .ct-decrease::before {
    content: '-';
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 20px;
}

body .quantity[data-type="type-2"] .ct-increase::before {
    content: '+';
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 20px;
}

body .quantity[data-type="type-2"] .ct-decrease::after,
body .quantity[data-type="type-2"] .ct-increase::after {
    display: none !important;
}

body .quantity[data-type="type-2"] input.qty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    width: 50px !important;
    min-width: 50px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    color: #1e293b !important;
    font-family: inherit !important;
}

body .quantity[data-type="type-2"] input.qty:focus {
    outline: none !important;
}

body .quantity[data-type="type-2"] input.qty::-webkit-outer-spin-button,
body .quantity[data-type="type-2"] input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Global Form Styling Updates */
/* Force white background on text inputs */
.everpack_input_text,
.everpack_textarea,
input[type="text"].everpack-text-input,
textarea.everpack-text-input {
    background-color: #ffffff !important;
}