@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* Color Variables */
:root {
    --wpc-bg-main: #f8fafc;
    --wpc-text-primary: #1e293b;
    --wpc-text-secondary: #64748b;
    --wpc-wood-primary: #c28833;
    --wpc-wood-hover: #df9c3c;
    --wpc-wood-light: #fdf6ec;
    --wpc-border-color: #e2e8f0;
    --wpc-card-bg: rgba(255, 255, 255, 0.85);
    --wpc-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    --wpc-accent-blue: #3b82f6;
    --wpc-danger: #ef4444;
}

.wpc-configurator-page-wrapper {
    font-family: 'Outfit', sans-serif;
    background-color: var(--wpc-bg-main);
    color: var(--wpc-text-primary);
    padding: 40px 20px;
    min-height: 100vh;
}

.wpc-configurator-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Active state for Impreza buttons in configurator */
.wpc-configurator-container .w-btn.active,
.wpc-configurator-sidebar .w-btn.active,
.wpc-options-flex .w-btn.active,
.wpc-shape-grid .w-btn.active,
.w-btn.us-btn-style_7.active,
.w-btn[class*="us-btn-style_"].active {
    --btn-hover-background: var(--color-content-text) !important;
    --btn-background: var(--color-content-text) !important;
}

/* Header */
.wpc-configurator-header {
    margin-bottom: 30px;
    text-align: center;
}

.wpc-configurator-header .wpc-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--wpc-text-primary);
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.wpc-configurator-header .wpc-subtitle {
    font-size: 1.1rem;
    color: var(--wpc-text-secondary);
    margin: 0;
}

/* 2-Column Layout */
.wpc-configurator-layout {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 30px;
    align-items: start;
}

/* Left Sidebar (Glassmorphism) */
.wpc-configurator-sidebar {
    background: var(--wpc-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 30px;
    box-shadow: var(--wpc-glass-shadow);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.wpc-form-section {
    margin-bottom: 25px;
    /* Theme Field Styles */
    --inputs-font-size: 1rem;
    --inputs-font-weight: 400;
    --inputs-letter-spacing: 0em;
    --inputs-text-transform: none;
    --inputs-height: 2.8rem;
    --inputs-padding: 0.8rem;
    --inputs-border-radius: var(--site-border-radius);
    --inputs-border-width: 2px;
    --inputs-checkbox-size: 1.5em;
    --inputs-background: #F9F9F8;
    --inputs-border-color: #E1C4AB;
    --inputs-text-color: #593F33;
    --inputs-focus-background: #F9F9F8;
    --inputs-focus-border-color: #D58B53;
    --inputs-focus-text-color: #593F33;
    --inputs-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.08);
    --inputs-focus-box-shadow: 0px 0px 0px 0px #D58B53;
    border-bottom: none;
}

.wpc-form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wpc-form-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: var(--wpc-text-primary);
    letter-spacing: -0.2px;
}

/* Attribute Cards (Classes, Thickneses, etc.) */
.wpc-attribute-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 15px 0 10px 0;
    color: var(--wpc-text-primary);
}

.wpc-attribute-title:first-child {
    margin-top: 0;
}

.wpc-options-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.wpc-option-card,
.wpc-option-wrapper {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.wpc-option-card input[type="radio"],
.wpc-option-wrapper input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}


.wpc-option-card .wpc-option-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #ffffff;
    border: 1.5px solid var(--wpc-border-color);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--wpc-text-secondary);
}

.wpc-option-card:hover .wpc-option-content {
    border-color: var(--wpc-wood-primary);
    color: var(--wpc-wood-primary);
    background: var(--wpc-wood-light);
}

.wpc-option-card input[type="radio"]:checked + .wpc-option-content {
    background: var(--wpc-wood-primary);
    border-color: var(--wpc-wood-primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(194, 136, 51, 0.25);
}

/* Shape Grid */
.wpc-shape-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.wpc-shape-card {
    /* Inherit background, border, colors from .w-btn */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 90px;
    padding: 15px 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

.wpc-shape-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Shape Icons */
.wpc-shape-icon {
    width: 32px;
    height: 32px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    margin-bottom: 8px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.wpc-shape-card:hover .wpc-shape-icon,
.wpc-shape-card.active .wpc-shape-icon {
    opacity: 1;
}

.wpc-shape-icon.rect {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="6" width="18" height="12" rx="1" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="6" width="18" height="12" rx="1" /></svg>');
}
.wpc-shape-icon.square {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="5" y="5" width="14" height="14" rx="1" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="5" y="5" width="14" height="14" rx="1" /></svg>');
}
.wpc-shape-icon.circle {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="9" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="9" /></svg>');
}
.wpc-shape-icon.half-circle {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8z" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8z" /></svg>');
}
.wpc-shape-icon.rhombus {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="12,2 22,12 12,22 2,12" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="12,2 22,12 12,22 2,12" /></svg>');
}
.wpc-shape-icon.triangle {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="12,3 2,21 22,21" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="12,3 2,21 22,21" /></svg>');
}
.wpc-shape-icon.trapezoid {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,5 18,5 22,19 2,19" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,5 18,5 22,19 2,19" /></svg>');
}
.wpc-shape-icon.rounded-rect {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="6" width="18" height="12" rx="3" ry="3" /></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="6" width="18" height="12" rx="3" ry="3" /></svg>');
}

.wpc-shape-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wpc-text-secondary);
    text-align: center;
    transition: color 0.2s ease;
}

/* Dimensions fields */
.wpc-input-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.wpc-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpc-input-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wpc-text-secondary);
}

.wpc-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.wpc-input-wrapper input[type="number"] {
    width: 100%;
    padding-right: 45px !important; /* Keep room for unit */
    transition: all 0.2s ease;
}

.wpc-input-wrapper input[type="number"]:focus {
    /* Rely on theme focus styles */
}

.wpc-input-unit {
    position: absolute;
    right: 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wpc-text-secondary);
}

.wpc-range-slider-group {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpc-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wpc-text-secondary);
}

.wpc-slider-labels span {
    font-weight: 600;
    color: var(--wpc-wood-primary);
}

.wpc-slider-control-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}

.wpc-slider-track-container {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.wpc-range-slider-group input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--wpc-border-color);
    border-radius: 3px;
    outline: none;
    position: relative;
    z-index: 2;
}

/* Custom Vertical Bar Thumb (Pionowa kreska zamiast kropki) */
.wpc-range-slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 24px;
    border-radius: 3px;
    background: var(--wpc-wood-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, transform 0.15s;
}

.wpc-range-slider-group input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--wpc-wood-hover);
    transform: scaleX(1.3);
}

.wpc-range-slider-group input[type="range"]::-moz-range-thumb {
    width: 6px;
    height: 24px;
    border-radius: 3px;
    border: none;
    background: var(--wpc-wood-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, transform 0.15s;
}

.wpc-range-slider-group input[type="range"]::-moz-range-thumb:hover {
    background: var(--wpc-wood-hover);
}

/* Tick Marks (Kreski pod suwakiem co 15 stopi) */
.wpc-slider-ticks {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    pointer-events: none;
    z-index: 1;
}

.wpc-tick-mark {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 1px;
    background: #cbd5e1;
    transform: translateX(-50%);
}

.wpc-tick-mark.major-tick {
    background: #94a3b8;
}

.wpc-tick-mark.center-tick {
    width: 2px;
    background: var(--wpc-wood-primary);
    top: -2px;
    bottom: -2px;
}

.wpc-range-slider-group input[type="range"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wpc-range-slider-group input[type="range"]:disabled::-webkit-slider-thumb {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}

/* Action / Pricing Box */
.wpc-action-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wpc-qty-price-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.wpc-qty-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    max-width: none;
}

.wpc-qty-group label {
    margin-bottom: 0;
    white-space: nowrap;
}

.wpc-qty-group input[type="number"] {
    text-align: center;
    font-weight: 600;
    width: 120px;
    /* Impreza handles padding, border, radius, etc. */
}

.wpc-pricing-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.wpc-price-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    font-size: 0.85rem;
    color: var(--wpc-text-secondary);
    gap: 2px;
}

.wpc-price-row .wpc-price-val {
    font-weight: 600;
    color: var(--wpc-text-primary);
}

.wpc-price-row.wpc-price-total {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wpc-text-primary);
}

.wpc-price-row.wpc-price-total .wpc-price-val {
    color: var(--wpc-text-primary);
}

.wpc-price-row.wpc-price-total-gross {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wpc-wood-primary);
}

.wpc-price-row.wpc-price-total-gross .wpc-price-val {
    color: var(--wpc-wood-primary);
}

/* Add to Cart Button Disabled State */
.wpc-add-to-cart-wrapper button:disabled,
.wpc-add-to-cart-wrapper button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Right Visualizer Panel */
.wpc-configurator-preview-pane {
    position: sticky;
    top: 40px;
    background: #ffffff;
    border: 1px solid var(--wpc-border-color);
    border-radius: 32px;
    height: 550px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.wpc-preview-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wpc-svg-canvas-container {
    width: 100%;
    height: 100%;
    background-color: #fafbfc;
    background-image: 
        radial-gradient(#e2e8f0 1.2px, transparent 1.2px), 
        radial-gradient(#e2e8f0 1.2px, #fafbfc 1.2px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* SVG Elements styles */
.wpc-svg-canvas-container svg {
    max-width: 90%;
    max-height: 90%;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.08));
}

.wpc-svg-shape {
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.2, 1);
}

/* Dimension arrows styling inside SVG */
.wpc-svg-dimension-line {
    stroke: #64748b;
    stroke-width: 1.5;
    stroke-dasharray: 4,4;
}

.wpc-svg-dimension-arrow {
    stroke: #64748b;
    stroke-width: 1.5;
    fill: none;
}

.wpc-svg-dimension-text {
    font-size: 15px;
    font-weight: 600;
    fill: #475569;
    text-anchor: middle;
}

/* Loader */
.wpc-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: var(--wpc-text-secondary);
    font-weight: 500;
}

/* Helpers */
.wpc-hidden {
    display: none !important;
}

/* Responsive grid */
@media(max-width: 1024px) {
    .wpc-configurator-layout {
        grid-template-columns: 1fr;
    }
    
    .wpc-configurator-preview-pane {
        position: relative;
        top: 0;
        height: 500px;
    }
}

/* Custom Plywood Material Dropdown */
.wpc-material-dropdown-container {
    position: relative;
    width: 100%;
    margin: 15px 0 10px 0;
}

.wpc-material-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--inputs-height, 2.8rem);
    padding: 0 var(--inputs-padding, 0.8rem);
    background: var(--inputs-background, #ffffff);
    border: var(--inputs-border-width, 2px) solid var(--inputs-border-color, var(--wpc-border-color));
    border-radius: var(--inputs-border-radius, 14px);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--inputs-font-size, 1rem);
    font-weight: var(--inputs-font-weight, 600);
    letter-spacing: var(--inputs-letter-spacing, 0em);
    text-transform: var(--inputs-text-transform, none);
    color: var(--inputs-text-color, var(--wpc-text-primary));
    box-shadow: var(--inputs-box-shadow, 0 2px 8px rgba(0,0,0,0.02));
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.wpc-material-dropdown-btn:hover {
    border-color: var(--inputs-focus-border-color, var(--wpc-wood-primary));
}

.wpc-material-dropdown-btn.open {
    border-color: var(--inputs-focus-border-color, var(--wpc-wood-primary));
    background: var(--inputs-focus-background, #ffffff);
    color: var(--inputs-focus-text-color, var(--wpc-text-primary));
    box-shadow: var(--inputs-focus-box-shadow, none);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.wpc-material-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--inputs-focus-background, #ffffff);
    border: var(--inputs-border-width, 2px) solid var(--inputs-focus-border-color, var(--wpc-wood-primary));
    border-top: none;
    border-bottom-left-radius: var(--inputs-border-radius, 14px);
    border-bottom-right-radius: var(--inputs-border-radius, 14px);
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 100;
    box-shadow: var(--inputs-focus-box-shadow, 0 10px 25px rgba(0,0,0,0.08));
    max-height: 250px;
    overflow-y: auto;
}

.wpc-material-dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wpc-material-dropdown-item:hover {
    background: var(--wpc-wood-light);
}

.wpc-material-dropdown-item.active {
    background: var(--wpc-wood-light);
    font-weight: 600;
}

.wpc-material-dropdown-item:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Material dropdown thumbnail images */
.wpc-material-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 12px;
    border: 1.5px solid var(--wpc-border-color);
}

.wpc-material-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    margin-right: 12px;
    background-color: var(--wpc-wood-light);
    border: 1.5px solid var(--wpc-border-color);
}

.wpc-material-name {
    flex: 1;
    text-align: left;
}

.wpc-chevron {
    width: 16px;
    height: 16px;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>');
    background-color: var(--wpc-text-secondary);
    transition: transform 0.2s ease;
}

.wpc-material-dropdown-btn.open .wpc-chevron {
    transform: rotate(180deg);
}

.wpc-no-stock {
    color: var(--wpc-danger);
    font-weight: 600;
    padding: 10px 0;
}

/* Active style for option cards when styled as theme buttons */
.wpc-option-card.w-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    text-decoration: none;
    vertical-align: middle;
    transition: all 0.2s ease;
    
    /* Fallback default styling if the chosen us-btn-style_X class is not compiled in theme CSS */
    padding: 10px 20px;
    background: #ffffff;
    border: 1.5px solid var(--wpc-border-color);
    border-radius: 12px;
    color: var(--wpc-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

.wpc-option-card.w-btn .w-btn-label {
    display: inline-block;
}

.wpc-option-card.w-btn:hover {
    border-color: var(--wpc-wood-primary);
    color: var(--wpc-wood-primary);
    background: var(--wpc-wood-light);
}

.wpc-option-card.w-btn.active {
    background: var(--wpc-wood-primary);
    border-color: var(--wpc-wood-primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(194, 136, 51, 0.25);
    transform: translateY(-2px);
}

/* Quick Calculator Styling */
.wpc-quick-calc-wrapper {
    display: block;
    width: 100%;
    background: transparent;
    padding: 15px 0;
}

.wpc-quick-calc-form {
    width: 100%;
}

.wpc-quick-calc-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    justify-content: center;
}

.wpc-quick-calc-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    flex: 1 1 auto;
}

.wpc-quick-calc-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wpc-text-primary, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wpc-quick-calc-group .wpc-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.wpc-quick-calc-group .wpc-input-wrapper input[type="number"] {
    width: 100%;
    padding-right: 45px !important;
    transition: all 0.2s ease;
}

.wpc-quick-calc-button-group {
    flex: 0 0 auto;
}

.wpc-quick-calc-submit {
    height: 48px;
    padding: 0 35px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
}

@media (max-width: 768px) {
    .wpc-quick-calc-inputs {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .wpc-quick-calc-group {
        width: 100%;
    }
    .wpc-quick-calc-button-group {
        width: 100%;
    }
    .wpc-quick-calc-submit {
        width: 100%;
    }
}