/*
================================================================================
CODESM  WooCommerce Add to Quote List - CSS Documentation
================================================================================

This stylesheet provides styles for the "Add to Quote List" functionality in a 
WooCommerce environment, including custom buttons, modal dialogs, quote list 
tables, and Contact Form 7 integration. It is designed to be responsive and 
compatible with WordPress color presets.

--------------------------------------------------------------------------------
Section Overview:
--------------------------------------------------------------------------------

1. Quote Buttons Wrapper
    - Layout and spacing for quote-related buttons.
    - Responsive flexbox design for wrapping and alignment.
    - Special styling for shop loop context.

2. Quote Buttons
    - Base styles for "Add to Quote List" and "View Quote List" buttons.
    - Color, padding, border, font, and transition effects.
    - State-based styles: hover, focus, disabled, product-added, action-taken.

3. Modal Styles
    - Overlay and modal content styling for quote list display.
    - Centered modal with padding, rounded corners, and shadow.
    - Close button styling and hover/focus effects.

4. Quote List Table
    - Table layout for displaying products in the quote list.
    - Cell padding, borders, image sizing, and link styles.
    - Remove button styling and empty quote message.

5. Contact Form 7 Integration
    - Form container, input, textarea, and submit button styles.
    - Response output and admin notice styling within modal.

6. Responsive Adjustments
    - Media queries for mobile devices (max-width: 600px).
    - Modal and table padding, button stacking, and word-break handling.

--------------------------------------------------------------------------------
Customization Notes:
--------------------------------------------------------------------------------

- Colors use WordPress CSS variables for easy theme integration.
- Button states (added, action-taken, disabled) use !important for override.
- Modal and table are designed for accessibility and usability.
- Responsive design ensures usability on mobile devices.

--------------------------------------------------------------------------------
Usage:
--------------------------------------------------------------------------------

- Apply relevant classes to elements in WooCommerce templates and modal dialogs.
- Integrate Contact Form 7 forms within the modal for quote requests.
- Use provided button classes for consistent UI/UX.

================================================================================
End of Documentation
================================================================================
*/
/* ==============================================================================
    1. Quote Buttons Wrapper
    ============================================================================== */

/* Layout and spacing for quote-related buttons */
.codesm-woocommerce-add-to-quote-list-buttons-wrapper {
     margin-bottom: 15px; /* Adjust spacing as needed */
     display: flex;
     flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
     gap: 8px; /* Space between buttons */
     align-items: center; /* Vertically align buttons */
}

/* Special styling for shop loop context */
.codesm-woocommerce-add-to-quote-list-buttons-wrapper.shop-loop-buttons {
     clear: both; /* Clear floats from previous elements in the shop loop */
     text-align: center; /* Center buttons in shop loop */
     margin-top: 10px; /* Space above buttons in shop loop */
}

/* ==============================================================================
    2. Quote Buttons
    ============================================================================== */

/* Base button styles from WooCommerce, extended for quote buttons */
.codesm-woocommerce-add-to-quote-list-button,
.codesm-woocommerce-add-to-quote-list-view-quote-list-button {
     cursor: pointer;
     display: inline-block;
     background-color: var(--wp--preset--color--contrast, #0073aa); /* Default WordPress primary color */
     border-radius: .33rem;
     border-color: var(--wp--preset--color--contrast, #0073aa);
     border-width: 0;
     color: var(--wp--preset--color--base, #fff); /* Default WordPress base color */
     font-family: inherit;
     font-size: var(--wp--preset--font-size--small, 14px);
     font-style: normal;
     font-weight: 500;
     line-height: inherit;
     padding-top: 0.6rem;
     padding-right: 1rem;
     padding-bottom: 0.6rem;
     padding-left: 1rem;
     text-decoration: none;
     text-align: center; /* Ensure text is centered within the button */
     white-space: nowrap; /* Prevent text wrapping */
     box-sizing: border-box; /* Include padding and border in the element's total width and height */
     transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Button hover state */
.codesm-woocommerce-add-to-quote-list-button:hover,
.codesm-woocommerce-add-to-quote-list-view-quote-list-button:hover {
     background-color: var(--wp--preset--color--contrast-2, #005177); /* Darker shade on hover */
     border-color: var(--wp--preset--color--contrast-2, #005177);
     color: var(--wp--preset--color--base, #fff);
}

/* Button focus state */
.codesm-woocommerce-add-to-quote-list-button:focus,
.codesm-woocommerce-add-to-quote-list-view-quote-list-button:focus {
     background-color: var(--wp--preset--color--contrast-2, #005177);
     border-color: var(--wp--preset--color--contrast-2, #005177);
     color: var(--wp--preset--color--base, #fff);
     outline: 2px solid var(--wp--preset--color--contrast, #0073aa); /* Focus outline */
     outline-offset: 2px;
}

/* State: Product added to quote list */
.codesm-woocommerce-add-to-quote-list-button.product-added {
     background-color: #d10606 !important; /* Red for "Remove from Quote List" */
     border-color: #d10606 !important;
}

/* Hover/focus state for product-added */
.codesm-woocommerce-add-to-quote-list-button.product-added:hover,
.codesm-woocommerce-add-to-quote-list-button.product-added:focus {
     background-color: #a00505 !important; /* Darker red on hover/focus */
     border-color: #a00505 !important;
     outline-color: #d10606 !important;
}

/* State: Temporary action taken (e.g., just added/removed) */
.codesm-woocommerce-add-to-quote-list-button.action-taken {
     background-color: #e9b819 !important; /* Yellow for "Added to Quote List" / "Removed from Quote List" temporary state */
     border-color: #e9b819 !important;
}

/* Hover/focus state for action-taken */
.codesm-woocommerce-add-to-quote-list-button.action-taken:hover,
.codesm-woocommerce-add-to-quote-list-button.action-taken:focus {
     background-color: #c99c0a !important; /* Darker yellow on hover/focus */
     border-color: #c99c0a !important;
     outline-color: #e9b819 !important;
}

/* Disabled button state */
.codesm-woocommerce-add-to-quote-list-button[disabled],
.codesm-woocommerce-add-to-quote-list-button[disabled]:hover,
.codesm-woocommerce-add-to-quote-list-button[disabled]:focus {
     opacity: 0.6;
     cursor: not-allowed;
     background-color: #ccc !important; /* Grey out when disabled */
     border-color: #ccc !important;
     color: #666 !important;
     box-shadow: none;
     outline: none;
}

/* ==============================================================================
    3. Modal Styles
    ============================================================================== */

/* Modal overlay */
.codesm-woocommerce-add-to-quote-list-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     overflow-y: auto; /* Enable scrolling for modal content */
     padding: 20px; /* Add some padding around the modal on smaller screens */
     box-sizing: border-box;
}

/* Modal content container */
.codesm-woocommerce-add-to-quote-list-modal-content {
     background-color: #fff;
     padding: 30px; /* More padding inside */
     border-radius: 8px; /* Slightly more rounded corners */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Stronger shadow */
     max-width: 700px; /* Wider modal */
     width: 95%; /* Responsive width */
     position: relative;
     max-height: 90vh; /* Max height to fit within viewport, enable scrolling */
     overflow-y: auto; /* Scroll modal content if it overflows */
}

/* Modal headings */
.codesm-woocommerce-add-to-quote-list-modal-content h2,
.codesm-woocommerce-add-to-quote-list-modal-content h3 {
     text-align: center;
     color: #333;
     margin-top: 0;
     margin-bottom: 20px;
}

.codesm-woocommerce-add-to-quote-list-modal-content h3 {
     margin-top: 30px; /* More space above the form heading */
}

/* Modal close button */
.codesm-woocommerce-add-to-quote-list-close {
     position: absolute;
     top: 15px;
     right: 20px;
     color: #aaa;
     font-size: 32px; /* Larger close button */
     font-weight: bold;
     cursor: pointer;
     line-height: 1; /* Adjust line height for better alignment */
     padding: 5px; /* Make it easier to click */
}

.codesm-woocommerce-add-to-quote-list-close:hover,
.codesm-woocommerce-add-to-quote-list-close:focus {
     color: #333;
     text-decoration: none;
}

/* ==============================================================================
    4. Quote List Table
    ============================================================================== */

/* Table container and layout */
#codesm-woocommerce-add-to-quote-list-table table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 25px; /* Space below table */
     font-size: 14px;
}

/* Table cells */
#codesm-woocommerce-add-to-quote-list-table th,
#codesm-woocommerce-add-to-quote-list-table td {
     border: 1px solid #ddd;
     padding: 10px; /* More padding */
     text-align: left;
     vertical-align: middle;
}

/* Table header */
#codesm-woocommerce-add-to-quote-list-table th {
     background-color: #f5f5f5;
     font-weight: bold;
     color: #555;
}

/* Product image in table */
#codesm-woocommerce-add-to-quote-list-table td img {
     max-width: 60px; /* Larger product image */
     height: auto;
     display: block; /* Remove extra space below image */
     margin: 0 auto; /* Center image */
}

/* Product name link */
#codesm-woocommerce-add-to-quote-list-table .product-name a {
     color: #0073aa; /* Link color */
     text-decoration: none;
}

#codesm-woocommerce-add-to-quote-list-table .product-name a:hover {
     text-decoration: underline;
}

/* Remove product button */
#codesm-woocommerce-add-to-quote-list-table .codesm-woocommerce-add-to-quote-list-remove-product {
     background-color: #dc3232; /* Red remove button */
     color: #fff;
     border: none;
     padding: 8px 12px; /* Sufficient padding */
     border-radius: 4px;
     cursor: pointer;
     font-size: 13px;
     transition: background-color 0.2s ease;
}

#codesm-woocommerce-add-to-quote-list-table .codesm-woocommerce-add-to-quote-list-remove-product:hover {
     background-color: #b02626;
}

/* Total price row */
#codesm-woocommerce-add-to-quote-list-table .total-price-row td {
     font-weight: bold;
     background-color: #f9f9f9;
}

/* Empty quote message */
#codesm-woocommerce-add-to-quote-list-table .empty-quote-message {
     text-align: center;
     color: #777;
     padding: 20px 0;
     font-style: italic;
}

/* ==============================================================================
    5. Contact Form 7 Integration
    ============================================================================== */

/* Contact Form 7 container */
div.wpcf7 {
     margin-top: 20px;
     background-color: #f9f9f9;
     padding: 25px;
     border: 1px solid #eee;
     border-radius: 5px;
}

div.wpcf7 form {
     margin-bottom: 0;
}

/* Form fields */
div.wpcf7 input[type="text"],
div.wpcf7 input[type="email"],
div.wpcf7 textarea {
     width: 100%;
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #ddd;
     border-radius: 4px;
     box-sizing: border-box;
}

/* Submit button */
div.wpcf7 input[type="submit"] {
     background-color: #2271b1; /* WordPress blue */
     color: #fff;
     border: none;
     padding: 12px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s ease;
}

div.wpcf7 input[type="submit"]:hover {
     background-color: #1a5e8f;
}

/* Response output styling */
div.wpcf7 .wpcf7-response-output {
     margin: 0;
     padding: 10px;
     border-radius: 4px;
     font-size: 14px;
     margin-top: 15px;
}

/* Admin notice for CF7 in modal */
.codesm-woocommerce-add-to-quote-list-modal-content .notice.notice-warning {
     margin-top: 20px;
     padding: 10px 15px;
     border-left: 4px solid #f0b849;
     background-color: #fffbe5;
     box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.codesm-woocommerce-add-to-quote-list-modal-content .notice.notice-warning p {
     margin: 0;
     color: #555;
     font-size: 14px;
}

.codesm-woocommerce-add-to-quote-list-modal-content .notice.notice-warning a {
     color: #007cba;
     text-decoration: none;
}

.codesm-woocommerce-add-to-quote-list-modal-content .notice.notice-warning a:hover {
     text-decoration: underline;
}

/* ==============================================================================
    6. Responsive Adjustments
    ============================================================================== */

@media (max-width: 600px) {
     /* Modal content padding */
     .modal-content {
          padding: 20px;
     }

     /* Table cell padding */
     #quote-list-table-container th,
     #quote-list-table-container td {
          padding: 8px;
     }

     /* Allow long words to break in table */
     #quote-list-table-container td:nth-child(2), /* Product Name */
     #quote-list-table-container td:nth-child(3), /* Price */
     #quote-list-table-container td:nth-child(4) { /* Remove button */
          word-break: break-word; /* Allow long words to break */
     }

     /* Stack buttons vertically on small screens */
     .codesm-woocommerce-add-to-quote-list-buttons-wrapper {
          flex-direction: column;
          align-items: stretch; /* Stretch buttons to full width */
     }

     /* Full width for buttons */
     .codesm-woocommerce-add-to-quote-list-buttons-wrapper .button {
          width: 100%;
     }

     /* Remove left margin for stacked buttons */
     .codesm-woocommerce-add-to-quote-list-buttons-wrapper.shop-loop-buttons .button {
          margin-left: 0;
     }
}