/* Main Wrapper */
#pbc-configurator-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
}
.pbc-steps-container {
    flex: 1 1 500px; border: 1px solid #e5e5e5; padding: 25px;
    border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.pbc-preview-container {
    flex: 1 1 400px; border: 1px solid #e5e5e5; padding: 25px;
    border-radius: 8px; text-align: center; background: #fafafa;
    display: flex; flex-direction: column; align-items: center;
}
.pbc-step-nav {
    display: flex; list-style: none; padding: 0; margin: 0 0 25px 0;
    border-bottom: 2px solid #f0f0f0;
}
.pbc-step-nav li {
    flex: 1; text-align: center; padding: 12px 10px; cursor: pointer;
    font-weight: 600; color: #999; font-size: 14px; transition: all 0.3s;
}
.pbc-step-nav li.active { color: #000; border-bottom: 2px solid #000; }
.pbc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px; margin-top: 20px; max-height: 400px; overflow-y: auto; padding-right: 5px;
}
.pbc-grid::-webkit-scrollbar { width: 8px; }
.pbc-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.pbc-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.pbc-grid::-webkit-scrollbar-thumb:hover { background: #aaa; }
.pbc-item {
    border: 2px solid #eee; padding: 15px 10px; text-align: center;
    cursor: pointer; border-radius: 6px; transition: all 0.2s ease; background: #fff;
}
.pbc-item:hover { border-color: #ccc; }
.pbc-item.selected { border-color: #000; background: #f9f9f9; }
.pbc-item h4 { margin: 0 0 5px 0; font-size: 14px; }
.pbc-item p { margin: 0; font-size: 13px; color: #666; }
.pbc-filters { margin-bottom: 15px; display: flex; gap: 10px; }
.pbc-filters button {
    padding: 6px 15px; cursor: pointer; border: 1px solid #ddd;
    background: #fff; border-radius: 20px; font-size: 13px; transition: all 0.2s;
}
.pbc-filters button.active, .pbc-filters button:hover {
    background: #000; color: #fff; border-color: #000;
}
#pbc-preview-canvas {
    background: #fff; border: 1px solid #eaeaea; border-radius: 8px;
    max-width: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.pbc-form-group { margin-bottom: 20px; text-align: left; }
.pbc-form-group label { display: block; font-weight: bold; margin-bottom: 8px; }
.pbc-form-group input[type="text"], .pbc-form-group select {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;
}
.pbc-logo-tabs { display: flex; margin-bottom: 15px; border-bottom: 2px solid #eee; }
.pbc-logo-tab {
    flex: 1; background: #f9f9f9; border: none; padding: 10px;
    cursor: pointer; font-weight: bold; color: #666;
}
.pbc-logo-tab.active { background: #333; color: #fff; }
.pbc-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pbc-swatch {
    width: 30px; height: 30px; border-radius: 4px; border: 2px solid #ccc;
    cursor: pointer; transition: transform 0.2s;
}
.pbc-swatch:hover { transform: scale(1.1); }
.pbc-swatch.active { border-color: #000; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.pbc-navigation-buttons { margin-top: 30px; display: flex; justify-content: space-between; }
.pbc-navigation-buttons button, #pbc-add-to-cart {
    padding: 10px 20px; background: #000; color: #fff; border: none;
    border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px;
}
.pbc-navigation-buttons button:hover, #pbc-add-to-cart:hover { background: #333; }
.pbc-summary {
    margin-top: 20px; width: 100%; display: flex;
    justify-content: space-between; align-items: center;
}
#pbc-price-display { font-size: 18px; font-weight: bold; }
@media (max-width: 768px) {
    #pbc-configurator-wrapper { flex-direction: column; }
    .pbc-step-nav { flex-wrap: wrap; }
    .pbc-step-nav li { flex: 1 1 50%; font-size: 13px; padding: 10px 5px; }
    .pbc-steps-container, .pbc-preview-container { padding: 15px; }
}
.pbc-logo-tabs {
    background: #f5f5f5; border-radius: 8px; padding: 4px;
    border-bottom: none !important; gap: 4px;
}
.pbc-logo-tab {
    background: transparent !important; border-radius: 6px;
    transition: all 0.3s; color: #666 !important;
}
.pbc-logo-tab.active {
    background: #fff !important; color: #000 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.pbc-tip-note {
    background: #fff8e6; border-left: 3px solid #c9a96e;
    padding: 10px 14px; border-radius: 4px; font-size: 13px;
    color: #6b5d3e; margin-bottom: 18px; display: flex;
    align-items: center; gap: 8px;
}
.pbc-upload-area { margin-bottom: 15px; }
.pbc-upload-label {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 30px 20px;
    border: 2px dashed #d0d0d0; border-radius: 8px;
    background: #fafafa; cursor: pointer; transition: all 0.3s; text-align: center;
}
.pbc-upload-label:hover { border-color: #c9a96e; background: #fffaf0; }
.pbc-upload-icon { font-size: 36px; margin-bottom: 8px; color: #c9a96e; }
.pbc-upload-label strong { display: block; color: #333; font-size: 15px; margin-bottom: 4px; }
.pbc-upload-label span { display: block; color: #888; font-size: 12px; }
#pbc-add-text-btn {
    width: 100%; background: #000 !important; color: #fff !important;
    border: none !important; padding: 10px !important; border-radius: 4px !important;
    cursor: pointer; font-weight: bold; font-size: 14px; transition: background 0.2s;
}
#pbc-add-text-btn:hover { background: #333 !important; }
.pbc-added-elements { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eee; }
.pbc-elements-title { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0; }
.pbc-elements-list { display: flex; flex-direction: column; gap: 8px; }
.pbc-element-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; background: #fafafa;
    border: 1px solid #eee; border-radius: 6px; transition: all 0.2s;
}
.pbc-element-item:hover { background: #f5f5f5; border-color: #ddd; }
.pbc-element-preview {
    width: 40px; height: 40px; object-fit: contain;
    background: #fff; border: 1px solid #eee; border-radius: 4px;
    flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; font-weight: bold;
    color: #c9a96e; font-size: 18px;
}
.pbc-element-info { flex: 1; overflow: hidden; }
.pbc-element-type {
    display: block; font-size: 11px; color: #999;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.pbc-element-label {
    display: block; font-size: 13px; color: #333;
    font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pbc-remove-element {
    background: #fff; border: 1px solid #e5e5e5; color: #999;
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
}
.pbc-remove-element:hover { background: #ffe5e5; border-color: #ff6b6b; color: #ff3333; }

/* ===========================================================
   REQUEST A QUOTE MODAL — Black + Gold luxury theme
   =========================================================== */
.pbc-modal {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    animation: pbcFadeIn 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.pbc-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pbc-modal-container {
    position: relative; background: #fff; width: 92%;
    max-width: 780px; max-height: 92vh; overflow-y: auto;
    padding: 45px 50px 40px; border-radius: 6px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
    animation: pbcSlideUp 0.4s ease;
    border-top: 4px solid #c9a96e;
}
@keyframes pbcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pbcSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pbc-modal-close {
    position: absolute; top: 14px; right: 16px;
    width: 38px; height: 38px; background: transparent;
    border: none; font-size: 30px; color: #333; cursor: pointer;
    line-height: 1; padding: 0; border-radius: 50%;
    transition: all 0.25s; display: flex; align-items: center; justify-content: center;
}
.pbc-modal-close:hover { color: #c9a96e; background: #f7f3eb; transform: rotate(90deg); }

.pbc-modal-title {
    font-size: 28px; font-weight: 600; margin: 0 0 28px 0;
    color: #1a1a1a; font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.3px;
}

/* ============ NEW LAYOUT: image LEFT, details RIGHT ============ */
.pbc-modal-preview {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 32px;
    padding: 20px;
    background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}

.pbc-modal-bottle-wrap {
    position: relative;
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}
.pbc-bottle-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(201, 169, 110, 0.22) 0%, rgba(201, 169, 110, 0.08) 40%, transparent 70%);
    border-radius: 50%; z-index: 0;
    animation: pbcGlow 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pbcGlow {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
}
#pbc-modal-bottle-img {
    position: relative; z-index: 1;
    max-width: 160px; max-height: 220px; object-fit: contain;
    animation: pbcFloat 3.8s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    display: inline-block;
}
@keyframes pbcFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(0.5deg); }
}
.pbc-modal-zoom {
    position: absolute; top: 5px; right: -5px;
    width: 36px; height: 36px; background: #fff;
    border: 1px solid #e5e5e5; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #c9a96e; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    transition: all 0.25s; z-index: 2; padding: 0;
}
.pbc-modal-zoom:hover {
    background: #c9a96e; color: #fff; border-color: #c9a96e;
    transform: scale(1.1); box-shadow: 0 5px 15px rgba(201, 169, 110, 0.4);
}

.pbc-modal-bottle-details {
    flex: 1;
    min-width: 0; /* allow shrinking */
}
.pbc-modal-details-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px 0;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #c9a96e;
    padding-bottom: 8px;
    display: inline-block;
}
.pbc-modal-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pbc-modal-details-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}
.pbc-modal-details-list li:last-child { border-bottom: none; }
.pbc-modal-details-list .pbc-detail-label {
    display: flex;
    align-items: center;
    color: #333;
    font-weight: 500;
}
.pbc-modal-details-list .pbc-detail-label::before {
    content: '';
    width: 6px; height: 6px;
    border: 1px solid #c9a96e;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
    flex-shrink: 0;
}
.pbc-modal-details-list .pbc-detail-value {
    color: #666;
    text-align: right;
    margin-left: 12px;
}
.pbc-modal-details-list .pbc-detail-empty {
    color: #999;
    font-style: italic;
    font-size: 13px;
}

/* ============ FORM (DYNAMIC) ============ */
.pbc-quote-form { width: 100%; }
.pbc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.pbc-field-wrap { position: relative; }
.pbc-field-wrap.pbc-width-full { grid-column: 1 / -1; }

/* Floating-label inputs (text/email/password/tel/number/url/date) */
.pbc-field-wrap > input[type="text"],
.pbc-field-wrap > input[type="email"],
.pbc-field-wrap > input[type="password"],
.pbc-field-wrap > input[type="tel"],
.pbc-field-wrap > input[type="number"],
.pbc-field-wrap > input[type="url"],
.pbc-field-wrap > input[type="date"] {
    width: 100%;
    padding: 18px 14px 14px 14px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font-size: 14px;
    background: #fff;
    color: #1a1a1a;
    transition: all 0.25s;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.2;
}
.pbc-field-wrap > input:hover { border-color: #b8b8b8; }
.pbc-field-wrap > input:focus {
    outline: none;
    border-color: #c9a96e;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}

/* Floating label */
.pbc-field-wrap > label.pbc-floating-label {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #888;
    font-size: 14px;
    pointer-events: none;
    background: #fff;
    padding: 0 4px;
    transition: all 0.2s ease;
}
.pbc-field-wrap > label.pbc-floating-label .pbc-req { color: #c9a96e; }

.pbc-field-wrap > input:focus + label.pbc-floating-label,
.pbc-field-wrap > input:not(:placeholder-shown) + label.pbc-floating-label {
    top: 0;
    font-size: 11px;
    color: #c9a96e;
    font-weight: 500;
}

/* Textarea */
.pbc-field-wrap > textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    resize: vertical;
    box-sizing: border-box;
    min-height: 110px;
    transition: all 0.25s;
    line-height: 1.5;
}
.pbc-field-wrap > textarea:hover { border-color: #b8b8b8; }
.pbc-field-wrap > textarea:focus {
    outline: none;
    border-color: #c9a96e;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}
.pbc-field-wrap > textarea::placeholder { color: #999; }

/* Static (above-field) label — used for textarea/select/radio/checkbox groups */
.pbc-field-wrap > label.pbc-static-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 6px;
}
.pbc-field-wrap > label.pbc-static-label .pbc-req { color: #c9a96e; margin-left: 2px; }

/* Select */
.pbc-field-wrap > select {
    width: 100%;
    padding: 14px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font-size: 14px;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    transition: all 0.25s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23c9a96e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.pbc-field-wrap > select:hover { border-color: #b8b8b8; }
.pbc-field-wrap > select:focus {
    outline: none; border-color: #c9a96e;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}

/* Radio + Checkbox groups */
.pbc-options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 2px;
}
.pbc-option-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    user-select: none;
}
.pbc-option-item input[type="radio"],
.pbc-option-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin: 0 8px 0 0;
    border: 1.5px solid #c0c0c0;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}
.pbc-option-item input[type="radio"] { border-radius: 50%; }
.pbc-option-item input[type="checkbox"] { border-radius: 3px; }
.pbc-option-item:hover input { border-color: #c9a96e; }

.pbc-option-item input[type="radio"]:checked {
    border-color: #c9a96e;
}
.pbc-option-item input[type="radio"]:checked::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 9px; height: 9px;
    background: #c9a96e;
    border-radius: 50%;
}
.pbc-option-item input[type="checkbox"]:checked {
    background: #c9a96e;
    border-color: #c9a96e;
}
.pbc-option-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px; left: 5px;
    width: 4px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Single checkbox (no options) */
.pbc-single-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

/* Submit Button */
.pbc-quote-submit {
    background: #000; color: #fff; border: none;
    padding: 15px 42px; font-size: 13px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
    border-radius: 2px; transition: all 0.3s;
    position: relative; overflow: hidden; font-family: inherit;
}
.pbc-quote-submit:hover {
    background: #c9a96e; transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(201, 169, 110, 0.45);
}
.pbc-quote-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Success State */
.pbc-form-success { text-align: center; padding: 40px 20px; animation: pbcFadeIn 0.4s ease; }
.pbc-form-success .pbc-success-icon {
    width: 72px; height: 72px; margin: 0 auto 22px;
    background: linear-gradient(135deg, #c9a96e 0%, #b8975a 100%);
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; box-shadow: 0 8px 20px rgba(201, 169, 110, 0.35);
    animation: pbcPop 0.5s ease;
}
@keyframes pbcPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.pbc-form-success h3 {
    margin: 0 0 10px; font-size: 24px; color: #1a1a1a;
    font-family: Georgia, serif; font-weight: 600;
}
.pbc-form-success p { color: #666; margin: 0; font-size: 14px; line-height: 1.6; }

/* Zoom Modal */
.pbc-zoom-modal {
    position: fixed; inset: 0; z-index: 9999999;
    display: flex; align-items: center; justify-content: center;
    animation: pbcFadeIn 0.25s ease;
}
.pbc-zoom-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.94); }
#pbc-zoom-img {
    position: relative; max-width: 82vw; max-height: 82vh; object-fit: contain;
    animation: pbcZoomIn 0.35s ease;
    filter: drop-shadow(0 10px 30px rgba(201, 169, 110, 0.25));
}
@keyframes pbcZoomIn { from { transform: scale(0.75); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pbc-zoom-close {
    position: absolute; top: 25px; right: 30px;
    background: transparent; border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff; font-size: 28px; cursor: pointer;
    z-index: 10; line-height: 1; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s; padding: 0;
}
.pbc-zoom-close:hover { color: #c9a96e; border-color: #c9a96e; transform: rotate(90deg); }

body.pbc-modal-open { overflow: hidden; }

/* Responsive */
@media (max-width: 720px) {
    .pbc-modal-container {
        padding: 35px 22px 28px; width: 94%; max-height: 94vh;
    }
    .pbc-modal-preview {
        flex-direction: column;
        gap: 18px;
        padding: 18px;
    }
    .pbc-modal-bottle-wrap {
        flex: 0 0 auto;
        min-height: 180px;
    }
    .pbc-modal-bottle-details {
        width: 100%;
    }
    .pbc-form-grid { grid-template-columns: 1fr; gap: 14px; }
    .pbc-modal-title { font-size: 22px; margin-bottom: 22px; }
    #pbc-modal-bottle-img { max-width: 140px; max-height: 180px; }
    .pbc-bottle-glow { width: 170px; height: 170px; }
    .pbc-modal-zoom { width: 34px; height: 34px; }
    .pbc-quote-submit { width: 100%; padding: 14px; }
    .pbc-zoom-close { top: 15px; right: 15px; }
}