/**
 * Dock Widget Custom Styling
 * 
 * This file provides scoped CSS to make the Dock widget visually consistent
 * with the Printways native calculator design. Targets the dynamically
 * generated widget elements only.
 */

/* Widget Container Wrapper */
.dock-widget-wrapper {
    width: 100%;
}

/* Widget Container */
#dock-widget {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

#dock-widget solopress-configurator {
    display: block !important;
    width: 100% !important;
}

/* Target all elements in the widget with maximum specificity */
#dock-widget *,
#dock-widget *::before,
#dock-widget *::after,
#dock-widget solopress-configurator *,
#dock-widget solopress-configurator *::before,
#dock-widget solopress-configurator *::after {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    box-sizing: border-box !important;
}

/* Widget Card/Container styling - maximum specificity */
#dock-widget > div,
#dock-widget solopress-configurator > div,
#dock-widget .dock-widget-container,
#dock-widget [class*="widget"],
#dock-widget [class*="configurator"],
#dock-widget div[class*="container"],
#dock-widget div[class*="wrapper"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    padding: 1.5rem !important;
}

/* Form Labels - maximum specificity */
#dock-widget label,
#dock-widget [class*="label"],
#dock-widget [class*="Label"],
#dock-widget span[class*="label"],
#dock-widget div[class*="label"] {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
}

/* Input Fields - maximum specificity */
#dock-widget input,
#dock-widget input[type="text"],
#dock-widget input[type="number"],
#dock-widget input[type="email"],
#dock-widget input[type="tel"],
#dock-widget textarea,
#dock-widget select,
#dock-widget solopress-configurator input,
#dock-widget solopress-configurator textarea,
#dock-widget solopress-configurator select {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

#dock-widget input:focus,
#dock-widget textarea:focus,
#dock-widget select:focus,
#dock-widget solopress-configurator input:focus,
#dock-widget solopress-configurator textarea:focus,
#dock-widget solopress-configurator select:focus {
    background: #ffffff !important;
    border-color: #10b981 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Radio Buttons/Option Cards - maximum specificity */
#dock-widget [class*="radio"],
#dock-widget [class*="option"],
#dock-widget [class*="card"],
#dock-widget [class*="selection"],
#dock-widget [class*="item"],
#dock-widget div[role="radio"],
#dock-widget div[role="option"],
#dock-widget button[role="radio"],
#dock-widget button[role="option"] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    padding: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

#dock-widget [class*="radio"]:hover,
#dock-widget [class*="option"]:hover,
#dock-widget [class*="card"]:hover,
#dock-widget [class*="selection"]:hover,
#dock-widget [class*="item"]:hover,
#dock-widget div[role="radio"]:hover,
#dock-widget div[role="option"]:hover,
#dock-widget button[role="radio"]:hover,
#dock-widget button[role="option"]:hover {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
}

#dock-widget [class*="radio"][class*="selected"],
#dock-widget [class*="radio"][class*="active"],
#dock-widget [class*="radio"][aria-selected="true"],
#dock-widget [class*="option"][class*="selected"],
#dock-widget [class*="option"][class*="active"],
#dock-widget [class*="option"][aria-selected="true"],
#dock-widget [class*="card"][class*="selected"],
#dock-widget [class*="card"][class*="active"],
#dock-widget [class*="card"][aria-selected="true"],
#dock-widget [class*="selection"][class*="selected"],
#dock-widget [class*="selection"][class*="active"],
#dock-widget [class*="selection"][aria-selected="true"],
#dock-widget div[role="radio"][aria-selected="true"],
#dock-widget div[role="option"][aria-selected="true"],
#dock-widget button[role="radio"][aria-selected="true"],
#dock-widget button[role="option"][aria-selected="true"] {
    border-color: #10b981 !important;
    background: #ecfdf5 !important;
    box-shadow: 0 0 0 1px #10b981 !important;
}

/* Quantity Controls - maximum specificity */
#dock-widget [class*="quantity"],
#dock-widget [class*="Quantity"],
#dock-widget div[class*="quantity"],
#dock-widget div[class*="Quantity"] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#dock-widget [class*="quantity"] button,
#dock-widget [class*="Quantity"] button,
#dock-widget div[class*="quantity"] button,
#dock-widget div[class*="Quantity"] button {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#dock-widget [class*="quantity"] button:hover,
#dock-widget [class*="Quantity"] button:hover,
#dock-widget div[class*="quantity"] button:hover,
#dock-widget div[class*="Quantity"] button:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}

#dock-widget [class*="quantity"] input,
#dock-widget [class*="Quantity"] input,
#dock-widget div[class*="quantity"] input,
#dock-widget div[class*="Quantity"] input {
    text-align: center !important;
    font-weight: 700 !important;
    min-width: 60px !important;
}

/* Pricing Display - maximum specificity */
#dock-widget [class*="price"],
#dock-widget [class*="Price"],
#dock-widget [class*="total"],
#dock-widget [class*="Total"],
#dock-widget span[class*="price"],
#dock-widget span[class*="Price"],
#dock-widget span[class*="total"],
#dock-widget span[class*="Total"] {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

#dock-widget [class*="price"][class*="highlight"],
#dock-widget [class*="Price"][class*="highlight"],
#dock-widget span[class*="price"][class*="highlight"],
#dock-widget span[class*="Price"][class*="highlight"] {
    color: #10b981 !important;
}

/* Buttons - maximum specificity */
#dock-widget button,
#dock-widget [class*="button"],
#dock-widget [class*="Button"],
#dock-widget [class*="btn"],
#dock-widget [class*="Btn"],
#dock-widget button[type="submit"],
#dock-widget button[type="button"],
#dock-widget solopress-configurator button {
    background: #10b981 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3) !important;
}

#dock-widget button:hover,
#dock-widget [class*="button"]:hover,
#dock-widget [class*="Button"]:hover,
#dock-widget [class*="btn"]:hover,
#dock-widget [class*="Btn"]:hover,
#dock-widget button[type="submit"]:hover,
#dock-widget button[type="button"]:hover,
#dock-widget solopress-configurator button:hover {
    background: #059669 !important;
    box-shadow: 0 6px 8px -1px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-1px) !important;
}

#dock-widget button:active,
#dock-widget [class*="button"]:active,
#dock-widget [class*="Button"]:active,
#dock-widget [class*="btn"]:active,
#dock-widget [class*="Btn"]:active,
#dock-widget button[type="submit"]:active,
#dock-widget button[type="button"]:active,
#dock-widget solopress-configurator button:active {
    transform: translateY(0) !important;
}

#dock-widget button:disabled,
#dock-widget [class*="button"]:disabled,
#dock-widget [class*="Button"]:disabled,
#dock-widget [class*="btn"]:disabled,
#dock-widget [class*="Btn"]:disabled,
#dock-widget button[type="submit"]:disabled,
#dock-widget button[type="button"]:disabled,
#dock-widget solopress-configurator button:disabled {
    background: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Dropdown/Select styling - maximum specificity */
#dock-widget select,
#dock-widget solopress-configurator select {
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.2em 1.2em !important;
    padding-right: 2.5rem !important;
}

/* Spacing and Layout - maximum specificity */
#dock-widget [class*="section"],
#dock-widget [class*="Section"],
#dock-widget [class*="group"],
#dock-widget [class*="Group"],
#dock-widget div[class*="section"],
#dock-widget div[class*="Section"],
#dock-widget div[class*="group"],
#dock-widget div[class*="Group"] {
    margin-bottom: 1.5rem !important;
}

#dock-widget [class*="row"],
#dock-widget [class*="Row"],
#dock-widget div[class*="row"],
#dock-widget div[class*="Row"] {
    display: flex !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

#dock-widget [class*="grid"],
#dock-widget [class*="Grid"],
#dock-widget div[class*="grid"],
#dock-widget div[class*="Grid"] {
    display: grid !important;
    gap: 0.75rem !important;
}

/* Error Messages - maximum specificity */
#dock-widget [class*="error"],
#dock-widget [class*="Error"],
#dock-widget [class*="warning"],
#dock-widget [class*="Warning"],
#dock-widget div[class*="error"],
#dock-widget div[class*="Error"],
#dock-widget div[class*="warning"],
#dock-widget div[class*="Warning"] {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
}

/* Loading States - maximum specificity */
#dock-widget [class*="loading"],
#dock-widget [class*="Loading"],
#dock-widget [class*="spinner"],
#dock-widget [class*="Spinner"],
#dock-widget div[class*="loading"],
#dock-widget div[class*="Loading"],
#dock-widget div[class*="spinner"],
#dock-widget div[class*="Spinner"] {
    border-color: #e2e8f0 !important;
    border-top-color: #10b981 !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #dock-widget > div,
    #dock-widget solopress-configurator > div,
    #dock-widget .dock-widget-container {
        padding: 1rem !important;
    }
    
    #dock-widget [class*="row"],
    #dock-widget [class*="Row"],
    #dock-widget div[class*="row"],
    #dock-widget div[class*="Row"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    #dock-widget button,
    #dock-widget [class*="button"],
    #dock-widget [class*="Button"],
    #dock-widget solopress-configurator button {
        width: 100% !important;
    }
}

/* Checkmark icons for selected options - maximum specificity */
#dock-widget [class*="selected"]::before,
#dock-widget [class*="active"]::before,
#dock-widget [aria-selected="true"]::before {
    content: "✓" !important;
    color: #10b981 !important;
    font-weight: bold !important;
}

/* Force override any inline styles */
#dock-widget [style],
#dock-widget solopress-configurator [style] {
    /* Let our scoped styles take precedence */
}

/* Hide confidential information - Dock widget price and delivery */
#dock-widget [class*="price"],
#dock-widget [class*="Price"],
#dock-widget [class*="total"],
#dock-widget [class*="Total"],
#dock-widget span[class*="price"],
#dock-widget span[class*="Price"],
#dock-widget span[class*="total"],
#dock-widget span[class*="Total"],
#dock-widget div[class*="price"],
#dock-widget div[class*="Price"],
#dock-widget div[class*="total"],
#dock-widget div[class*="Total"] {
    display: none !important;
}

/* Hide delivery information */
#dock-widget [class*="delivery"],
#dock-widget [class*="Delivery"],
#dock-widget [class*="shipping"],
#dock-widget [class*="Shipping"],
#dock-widget span[class*="delivery"],
#dock-widget span[class*="Delivery"],
#dock-widget span[class*="shipping"],
#dock-widget span[class*="Shipping"],
#dock-widget div[class*="delivery"],
#dock-widget div[class*="Delivery"],
#dock-widget div[class*="shipping"],
#dock-widget div[class*="Shipping"] {
    display: none !important;
}

/* Hide any pricing-related sections */
#dock-widget div[class*="pricing"],
#dock-widget div[class*="Pricing"],
#dock-widget section[class*="pricing"],
#dock-widget section[class*="Pricing"] {
    display: none !important;
}

/* Hide calculation breakdowns */
#dock-widget [class*="breakdown"],
#dock-widget [class*="Breakdown"],
#dock-widget [class*="summary"],
#dock-widget [class*="Summary"] {
    display: none !important;
}

/* Hide Dock widget's own add-to-basket/submit buttons */
#dock-widget button[type="submit"],
#dock-widget button[class*="add"],
#dock-widget button[class*="Add"],
#dock-widget button[class*="basket"],
#dock-widget button[class*="Basket"],
#dock-widget button[class*="cart"],
#dock-widget button[class*="Cart"],
#dock-widget [class*="button"][class*="submit"],
#dock-widget [class*="Button"][class*="submit"],
#dock-widget button:not([disabled]):not([aria-disabled="true"]):not(.hidden) {
    display: none !important;
}

/* Hide any action buttons from Dock widget */
#dock-widget [class*="action"],
#dock-widget [class*="Action"],
#dock-widget [class*="cta"],
#dock-widget [class*="CTA"],
#dock-widget [class*="proceed"],
#dock-widget [class*="Proceed"],
#dock-widget [class*="continue"],
#dock-widget [class*="Continue"] {
    display: none !important;
}

/* Hide footer/summary sections with pricing */
#dock-widget footer,
#dock-widget [class*="footer"],
#dock-widget [class*="Footer"],
#dock-widget [class*="bottom"],
#dock-widget [class*="Bottom"] {
    display: none !important;
}

/* Hide all buttons in Dock widget except for option selection buttons */
#dock-widget button:not([role="radio"]):not([role="option"]):not([aria-selected]) {
    display: none !important;
}

/* Hide steps navigation header/bar */
#dock-widget .sp-steps,
#dock-widget [class*="sp-steps"],
#dock-widget [class*="steps-header"],
#dock-widget [class*="step-nav"],
#dock-widget [class*="steps-nav"],
#dock-widget .sp-step-nav,
#dock-widget .sp-progress,
#dock-widget .sp-progress-bar {
    display: none !important;
}