/* ==========================================================================
   SARTORIAL LEE - BESPOKE CUSTOMIZER STYLESHEET
   --------------------------------------------------------------------------
   WARNING: THIS STYLESHEET CONTAINS ABSOLUTELY ZERO CSS VARIABLES (var(--*))
   AS EXPLICITLY REQUESTED. ALL VALUES ARE DECLARED DIRECTLY.
   ========================================================================== */

/* --- Import Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');


/* --- Base Reset and Layout --- */
.customizer-grid :is(h1, h2, h3, h4, h5, h6) {
    font-family: "Quicksand", serif;
}

.bos-plugin,
.bos-plugin * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bos-plugin {
    font-family: "Quicksand", sans-serif;
    background-color: #080d19;
    /* Ultra dark luxury navy background */
    color: #cbd5e1;
    /* Slate-300 default color */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    border-radius: 8px;
}

/* Custom premium scrollbar for modern lists */
.bos-plugin ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.bos-plugin ::-webkit-scrollbar-track {
    background: #020617;
}

.bos-plugin ::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}

.bos-plugin ::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Selection Highlight */
.bos-plugin ::selection {
    background-color: rgba(245, 158, 11, 0.3);
    /* Amber-500 with opacity */
    color: #b9935b;
    /* Amber-500 text color */
}

/* --- Dynamic Background Accent (Gold radial glow) --- */
.bg-gradient-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: radial-gradient(ellipse 200% 100% at 50% -20%, rgba(194, 149, 69, 0.1), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* --- Brand Header Layout --- */
.bos-plugin header {
    border-bottom: 1px solid rgba(30, 41, 59, 0.8);
    background-color: rgba(2, 6, 17, 0.4);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
    transition: all 0.3s ease;
}

.bos-plugin header .header-container {
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #d97706, #b45309);
    /* Amber-600 to Amber-700 */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(245, 158, 11, 0.2);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(245, 158, 11, 0.1);
    flex-shrink: 0;
}

.logo-box svg {
    width: 20px;
    height: 20px;
    color: #fef3c7;
    /* Amber-100 */
}

.brand-text h1 {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f8fafc;
    /* Slate-50 */
    line-height: 1.2;
}

.brand-text p {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    color: #64748b;
    /* Slate-500 */
    margin-top: 2px;
    letter-spacing: 0.05em;
}

/* Prefill Action button and helpers */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

#btn-prefill-test {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    color: #b9935b;
    /* Amber-500 */
    font-weight: 600;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

#btn-prefill-test:hover {
    background-color: #1e293b;
    border-color: #334155;
    transform: translateY(-1px);
}

#btn-prefill-test:active {
    transform: translateY(0);
}

.time-helper {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    /* Slate-500 */
    font-family: "Quicksand", sans-serif;
    font-size: 12px;
}

.time-helper svg {
    width: 12px;
    height: 12px;
    color: #b9935b;
    /* Amber-600 */
}

/* --- Main Layout Container --- */
.bos-plugin main {
    flex: 1;
    margin: 0 auto;
    padding: 24px 16px 32px 16px;
    width: 100%;
    position: relative;
    z-index: 10;
}

/* --- Step Progress Bar --- */
.stepper-section {
    margin-bottom: 32px;
}

.stepper-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stepper-header .label {
    font-family: "Quicksand", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
}

.stepper-header #step-badge {
    font-size: 14px;
    color: #fff;
    font-family: "Quicksand", sans-serif;
}

.stepper-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid rgba(30, 41, 59, 0.8);
    border-radius: 8px;
    padding: 6px;
    background-color: rgba(2, 6, 17, 0.6);
    backdrop-filter: blur(8px);
}

.step-indicator {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    background: transparent;
    color: #64748b;
    /* default pending state */
}

.step-indicator:hover {
    color: #cbd5e1;
    /* Slate-300 */
}

.step-indicator span {
    font-family: "Quicksand", sans-serif;
    font-size: 9px;
    opacity: 0.6;
    margin-right: 4px;
}

/* Stepper state modifiers classes */
.step-indicator.active {
    background-color: #b9935b;
    /* Amber-600 */
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(217, 119, 6, 0.3);
}

.step-indicator.past {
    color: rgba(245, 158, 11, 0.8);
    background-color: rgba(15, 23, 42, 0.2);
}

.step-indicator.past:hover {
    color: #b9935b;
    /* Amber-500 */
}

/* --- Responsive Double Column Grid --- */
.customizer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

/* --- Left input options customizer card --- */
.left-customizer-panel {
    background-color: rgba(2, 6, 17, 0.4);
    border: 1px solid rgba(15, 23, 42, 0.6);
    border-radius: 24px;
    padding: 20px;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.panel-header-desc {
    margin-bottom: 24px;
}

.panel-header-desc h3 {
    font-size: 18px;
    font-weight: 600;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-header-desc h3 svg {
    color: #b9935b;
    /* Amber-500 */
    width: 20px;
    height: 20px;
}

.panel-header-desc p {
    font-size: 12px;
    color: #94a3b8;
    /* Slate-400 */
    margin-top: 4px;
}

/* Option Sections grid layouts */
.option-section {
    margin-bottom: 24px;
}

.option-section-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    /* Slate-400 */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

/* Manual Fabric Input panel */
.manual-fabric-box {
    background-color: rgba(15, 23, 42, 0.5);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(30, 41, 59, 0.8);
    margin-bottom: 24px;
}

.manual-fabric-box label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    /* Slate-300 */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.manual-fabric-form {
    display: flex;
    gap: 8px;
}

.manual-fabric-form input {
    flex: 1;
    background-color: #020617;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: #f8fafc;
    transition: border-color 0.2s ease;
}

.manual-fabric-form input::placeholder {
    color: #475569;
}

.manual-fabric-form input:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.5);
}

.manual-fabric-form button {
    background-color: #1e293b;
    border: none;
    color: #cbd5e1;
    font-weight: 600;
    padding: 0 16px;
    font-size: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.manual-fabric-form button:hover {
    background-color: #334155;
}

/* Fabric Catalogue grid */
.fabric-catalogue-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.fabric-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    background-color: rgba(15, 23, 42, 0.4);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.fabric-card:hover {
    border-color: #334155;
    background-color: rgba(15, 23, 42, 0.6);
}

.fabric-card.active {
    border-color: #b9935b;
    /* Amber-500 */
    background-color: rgba(245, 158, 11, 0.05);
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.05);
}

.swatch-visualizer {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

/* Pattern simulations */
.swatch-weave-herringbone {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, #fff 2px, #fff 4px);
}

.swatch-weave-pinstripe {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background: linear-gradient(90deg, transparent 10px, #fff 10px, #fff 12px);
    background-size: 16px 100%;
}

.swatch-weave-plaid {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background: linear-gradient(90deg, transparent 6px, #fff 6px, #fff 8px),
        linear-gradient(0deg, transparent 6px, #fff 6px, #fff 8px);
}

.fabric-card-info {
    flex: 1;
    min-width: 0;
}

.fabric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fabric-card-name {
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.fabric-card:hover .fabric-card-name {
    color: #b9935b;
}

.fabric-card-info .check-icon {
    width: 16px;
    height: 16px;
    color: #b9935b;
    flex-shrink: 0;
    display: none;
    /* jQuery toggles this */
}

.fabric-card-code {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fabric-card-multiplier {
    font-size: 14px;
    color: rgba(245, 158, 11, 0.8);
    font-weight: 600;
    margin-top: 4px;
}

/* Button Option Grids (Fit profiles, options selectors, etc.) */
.grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.fit-card,
.design-btn {
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    background-color: rgba(15, 23, 42, 0.4);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fit-card:hover,
.design-btn:hover {
    border-color: #334155;
    color: #cbd5e1;
}

.fit-card.active,
.design-btn.active-btn {
    border-color: #b9935b;
    background-color: rgba(245, 158, 11, 0.05);
    color: #b9935b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.fit-card .title,
.design-btn .title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.fit-card .desc,
.design-btn .desc {
    display: block;
    font-size: 9px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.3;
}

/* Modifiers for single values in custom design grids */
.design-btn .desc-sm {
    font-size: 9.5px;
    color: #64748b;
    margin-top: 6px;
    line-height: 1.3;
}

.active-btn .title {
    color: #b9935b !important;
}

.active-btn.text-slate-100 .title {
    color: #b9935b !important;
}

/* Custom grid for 6 options */
.grid-six-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.design-btn-card-left {
    text-align: left;
    align-items: flex-start;
}

.design-btn-card-left .title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.design-btn-card-left.active-btn .title {
    color: #b9935b;
}

.design-btn-card-left .desc {
    font-size: 14px;
    color: #64748b;
    margin-top: 4px;
}

/* Double sub-column inside form panels */
.sub-panel-flex-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sub-panel-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub-panel-box-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sub-panel-btn-pill {
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    background-color: rgba(15, 23, 42, 0.4);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #cbd5e1;
    border-color: #1e293b;
}

.sub-panel-btn-pill:hover {
    border-color: #334155;
}

.sub-panel-btn-pill.active-btn {
    border-color: #b9935b;
    background-color: rgba(245, 158, 11, 0.05);
    color: #b9935b;
}

.sub-panel-btn-pill span {
    display: block;
}

.sub-panel-btn-pill .title {
    font-size: 12px;
    font-weight: 600;
}

.sub-panel-btn-pill .desc {
    font-size: 9px;
    color: #64748b;
}

.sub-panel-btn-half {
    grid-column: span 1;
}

.sub-panel-btn-pill-double-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Next / Prev Stepper Tab Controls under left customizer panel */
.stepper-pagination-bar {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-pagination-control {
    font-size: 12px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

#btn-prev-tab-bottom {
    border: 1px solid #1e293b;
    background-color: #020617;
    color: #94a3b8;
}

#btn-prev-tab-bottom:hover {
    color: #e2e8f0;
    border-color: #334155;
}

#btn-prev-tab-bottom.is-disabled,
#btn-prev-tab-bottom:disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.couture-signature {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    color: #fff;
}

#btn-next-tab-bottom {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    color: #cbd5e1;
}

#btn-next-tab-bottom:hover {
    background-color: #1e293b;
}

/* Button Panel Submit & Step Actions */
.panel-submit-container {
    padding-top: 16px;
    border-top: 0px solid #1e293b;
    display: flex;
    justify-content: flex-end;
}

.btn-panel-action {
    background-color: #b9935b;
    /* Amber-600 */
    color: #ffffff;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(217, 119, 6, 0.2);
    border: none;
}

.btn-panel-action:hover {
    background-color: #b9935b;
    /* Amber-500 */
    transform: translateY(-1px);
}

.btn-panel-action:active {
    transform: translateY(0);
}

/* --- Numerical Measurement Tab specific structures --- */
.measurement-guide-panel {
    background-color: #020617;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 16px;
    min-height: 90px;
    transition: all 0.3s ease;
    display: flex;
    align-items: start;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.guide-icon-box {
    padding: 8px;
    background-color: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    color: #b9935b;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-icon-box svg {
    width: 20px;
    height: 20px;
}

.guide-info-details {
    flex: 1;
    z-index: 2;
}

#guide-title {
    font-family: "Quicksand", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: block;
}

#guide-desc {
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}

.measurement-guide-panel .subtle-bg-graphic {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.measurement-guide-panel .subtle-bg-graphic svg {
    width: 96px;
    height: 96px;
    color: #cbd5e1;
}

.measurement-table-section {
    margin-bottom: 24px;
}

.measurement-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.summary-customer-card p {
    margin-bottom: 0;
}

.measurement-table-header .section-title {
    font-family: "Quicksand", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #b9935b;
}

.measurement-table-header .unit-label {
    font-family: "Quicksand", sans-serif;
    font-size: 12px;
    color: #fff;
}

.measurement-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.measurement-field-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.measurement-field-box label {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.measurement-input {
    width: 100%;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    text-align: center;
    font-size: 14px;
    font-family: "Quicksand", sans-serif;
    border-radius: 8px;
    padding: 6px 10px;
    color: #e2e8f0;
    transition: all 0.2s ease;
}

.measurement-input::placeholder {
    color: #334155;
}

.measurement-input:focus {
    outline: none;
}

.measurement-input.is-highlight {
    border-color: #b9935b;
    background-color: rgba(245, 158, 11, 0.05);
    color: #fbbf24;
}

#guide-title.is-highlight {
    color: #b9935b;
}

#guide-desc.is-highlight {
    color: #cbd5e1;
    margin-bottom: 0;
}

.measurement-note-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.measurement-note-box label {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.measurement-note-box input {
    width: 100%;
    background-color: #fff;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    color: #cbd5e1;
    transition: border-color 0.2s ease;
    min-height: 60px;
}

.measurement-note-box input::placeholder {
    color: #334155;
}

.measurement-note-box input:focus {
    outline: none;
    border-color: #334155;
}

/* --- Customer Delivery Form panel styles --- */
.customer-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.customer-field-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.customer-field-box label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.customer-input {
    width: 100%;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: #e2e8f0;
    transition: border-color 0.2s ease;
}

.customer-input::placeholder {
    color: #334155;
}

.customer-input:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.5);
}

.customer-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-stats-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.customer-stats-field label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.customer-stats-field input {
    width: 100%;
    background-color: #fff;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    text-align: center;
    font-family: "Quicksand", sans-serif;
    color: #000;
    transition: border-color 0.2s ease;
    min-height: 38.9px;
}

.customer-stats-field input::placeholder {
    color: #334155;
}

.customer-stats-field input:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.5);
}

.customer-textarea-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.customer-textarea-box label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.customer-textarea {
    width: 100%;
    background-color: #fff;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    color: #000;
    transition: border-color 0.2s ease;
    resize: none;
}

.customer-textarea::placeholder {
    color: #334155;
}

.customer-textarea:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.5);
}

.btn-submit-order-form {
    width: 100%;
    background-color: #b9935b;
    /* Amber-500 */
    color: #020617;
    /* Dark slate */
    padding: 14px 28px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.1);
    text-align: center;
    font-family: "Quicksand", sans-serif;
}

.btn-submit-order-form:hover {
    background-color: #fbbf24;
    /* Amber-400 */
    transform: translateY(-1px);
}

.btn-submit-order-form:active {
    transform: translateY(0);
}

/* --- Right Sticky Preview Panel --- */
.right-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Sticky layout rules for LG screen heights */
@media (min-width: 1024px) {
    .right-preview-panel {
        position: sticky;
        top: 96px;
    }
}

/* SVG Visualizer Container styling */


.visualizer-brand-title span {
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-family: "Quicksand", sans-serif;
    color: #64748b;
    display: block;
}

.visualizer-brand-title h4 {
    font-size: 14px;
    font-weight: 600;
    color: #cbd5e1;
    font-family: quicksand, sans-serif;
}

.visualizer-brand-title p {
    font-family: "Quicksand", sans-serif;
    font-size: 12px;
    color: rgba(245, 158, 11, 0.8);
    margin-top: 2px;
}

.visualizer-angle-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 4px;
    background-color: rgba(2, 6, 17, 0.8);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.visualizer-angle-toggle button {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.visualizer-angle-toggle button.active {
    background-color: #b9935b;
    /* Amber-600 */
    color: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.visualizer-badges-overlay {
    position: absolute;
    bottom: 16px;
    left: 24px;
    z-index: 10;
}

.visualizer-badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 320px;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    color: #94a3b8;
}

.visualizer-badges-list span {
    padding: 2px 8px;
    background-color: #020617;
    border: 1px solid #1e293b;
    border-radius: 6px;
}

.visualizer-badges-list span.amber-badge {
    background-color: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.2);
    color: #b9935b;
}

/* Canvas SVG container scale */
.svg-render-area {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
    min-height: 360px;
    position: relative;
}

.svg-render-area svg {
    width: 100%;
    max-width: 280px;
    height: auto;
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.55));
}

.visualizer-pricing-bar {
    width: 100%;
    margin-top: 8px;
    background-color: rgba(2, 6, 17, 0.8);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pricing-info span.label {
    font-size: 14px;
    color: #64748b;
    font-family: "Quicksand", sans-serif;
    letter-spacing: 0.05em;
    display: block;
}

.pricing-fabric-meta {
    text-align: right;
    font-size: 14px;
    color: #94a3b8;
}

.pricing-fabric-meta p.name {
    font-weight: 600;
    display: block;
}

.pricing-fabric-meta span.type {
    color: #64748b;
    font-family: "Quicksand", sans-serif;
}

/* Order Summary Collapsible/Constant Card styling */
.summary-card {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0px solid #1e293b;
    padding-bottom: 0px;
}

.summary-card-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-card-title h3 svg {
    color: #b9935b;
    width: 20px;
    height: 20px;
}

.summary-card-title p {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

#btn-print-bill {
    padding: 8px 12px;
    background-color: #1e293b;
    border: none;
    color: #cbd5e1;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

#btn-print-bill:hover {
    background-color: #334155;
    color: #f8fafc;
}

/* Summary Grid design sheets summaries */
.summary-designs-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    font-size: 12px;
}

.summary-design-box {
    background-color: rgba(2, 6, 17, 0.6);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(30, 41, 59, 0.8);
}

.summary-design-box .box-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: "Quicksand", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    color: #b9935b;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.summary-design-box .bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #b9935b;
    display: inline-block;
}

.summary-design-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #cbd5e1;
    font-weight: 500;
}

.summary-field-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(2, 6, 17, 0.45);
    padding-bottom: 4px;
}

.summary-field-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-field-row span.label {
    color: #fff;
    font-size: 14px;
}

.summary-field-row span.val {
    color: #f8fafc;
    font-weight: 700;
    text-transform: uppercase;
}

.summary-field-row span.val-shirt {
    color: #f8fafc;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
}

/* Numeric measurements summaries details */
.summary-measure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.summary-measure-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-measure-box span.section-title {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 4px;
    display: block;
}

.summary-measure-rows-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 4px;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.summary-measure-row {
    display: flex;
    justify-content: space-between;
    color: #cbd5e1;
}

.summary-measure-row span.label {
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-measure-row span.val {
    color: #e2e8f0;
    font-weight: 700;
}

.summary-note-text-preview {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
    font-style: italic;
}

/* Delivery card at bottom of bill summary */
.summary-customer-card {
    background-color: #020617;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    font-size: 14px;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-customer-card p.name-head {
    color: #cbd5e1;
    font-weight: 700;
    font-size: 14px;
}

.summary-customer-card p.name-head span {
    color: #b9935b;
    font-weight: 800;
}

.summary-customer-card span.meta-val {
    color: #e2e8f0;
    font-weight: 600;
    font-family: "Quicksand", sans-serif;
}

.summary-customer-card span.meta-val-text {
    color: #e2e8f0;
    font-weight: 600;
}

.summary-customer-card p.addr-val {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-customer-card p.note-preview {
    color: #fff;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    padding-top: 4px;
    font-style: italic;
}

/* Preview billing action buttons */
.summary-actions-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
}

.summary-actions-group button {
    width: 100%;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

#btn-reset-order-summary {
    border: 1px solid #1e293b;
    background-color: #020617;
    color: #94a3b8;
}

#btn-reset-order-summary:hover {
    background-color: #0f172a;
    color: #e2e8f0;
}

#btn-submit-order-summary {
    background-color: #b9935b;
    /* Amber-500 */
    color: #020617;
    border: none;
    font-family: "Quicksand", sans-serif;
    letter-spacing: 0.05em;
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.1);
}

#btn-submit-order-summary:hover {
    background-color: #fbbf24;
    transform: scale(1.01);
}

#btn-submit-order-summary:active {
    transform: scale(1.0);
}

/* --- Premium Footer --- */
.bos-plugin footer.brand-footer {
    border-top: 1px solid rgba(30, 41, 59, 0.6);
    background-color: rgba(2, 6, 17, 0.6);
    backdrop-filter: blur(12px);
    padding: 24px 16px;
    margin-top: 0px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
    font-family: "Quicksand", sans-serif;
}

.bos-plugin footer.brand-footer {
    font-size: 14px;
    color: #fff;
}

.bos-plugin footer.brand-footer p.sub-addr {
    margin-top: 6px;
    color: #475569;
    font-size: 14px;
}

/* --- Notification Toast Alert (Bottom Right) --- */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    background-color: #0f172a;
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #b9935b;
    padding: 12px 16px;
    border-radius: 8px;
    display: none;
    /* jQuery toggles this */
    align-items: center;
    gap: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-width: 380px;
}

#toast-container .toast-pulse-icon {
    color: #b9935b;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    animation: pulse-glow 2s infinite;
}

#toast-container .toast-pulse-icon svg {
    width: 20px;
    height: 20px;
}

#toast-container #toast-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.95);
    }
}

/* --- Successful Contract Submission Modal Popup --- */
.success-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(2, 6, 17, 0.8);
    backdrop-filter: blur(8px);
    display: none;
    /* jQuery toggles this */
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

.success-modal-card {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 24px;
    padding: 24px;
    max-width: 512px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.success-modal-icon-box {
    width: 64px;
    height: 64px;
    background-color: rgba(245, 158, 11, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #b9935b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.success-modal-icon-box svg {
    width: 32px;
    height: 32px;
}

.success-modal-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: #f8fafc;
    font-family: "Quicksand", sans-serif;
    letter-spacing: 0.05em;
}

.success-modal-title p {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 8px;
}

.success-modal-title p span {
    color: #b9935b;
    font-weight: 700;
}

.success-modal-receipt {
    background-color: rgba(2, 6, 17, 0.8);
    border: 1px solid rgba(30, 41, 59, 0.8);
    border-radius: 8px;
    padding: 16px;
    font-family: "Quicksand", sans-serif;
    font-size: 12px;
    color: #cbd5e1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.success-modal-receipt #success-order-num {
    color: #b9935b;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 6px;
    margin-bottom: 6px;
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
}

.success-modal-receipt-row {
    display: flex;
    justify-content: space-between;
}

.success-modal-receipt-row span.label {
    color: #64748b;
}

.success-modal-receipt-row span.val {
    color: #f8fafc;
    font-weight: 700;
}

.success-modal-receipt-row span.val-fabric {
    color: #fbbf24;
    font-weight: 700;
}

.success-modal-receipt-row span.val-caps {
    color: #f8fafc;
    font-weight: 700;
    text-transform: uppercase;
}

.success-modal-receipt-row-total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #1e293b;
    padding-top: 6px;
    margin-top: 6px;
}

.success-modal-receipt-row-total span.label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
}

.success-modal-disclaimer {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    max-width: 384px;
    margin: 0 auto;
}

.success-modal-disclaimer span {
    color: #cbd5e1;
    font-weight: 700;
}

.success-modal-actions {
    display: flex;
    gap: 12px;
}

.success-modal-actions button {
    flex: 1;
    padding: 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
}

#btn-success-close {
    background-color: #1e293b;
    color: #cbd5e1;
}

#btn-success-close:hover {
    background-color: #334155;
    color: #f8fafc;
}

#btn-success-new-order {
    background-color: #b9935b;
    /* Amber-600 */
    color: #ffffff;
}

#btn-success-new-order:hover {
    background-color: #b9935b;
    /* Amber-500 */
}

/* --- Media Queries Responsive Breakpoints --- */

@media (max-width: 639px) {

    /* Smaller Header padding */
    .bos-plugin header .header-container {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        padding: 12px 16px;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
    }

    #btn-prefill-test {
        width: 100%;
        justify-content: center;
    }

    /* Compact grid columns */
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sub-panel-box-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .measurement-input-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 640px) {

    /* Fabrics catalog swatches in two columns */
    .fabric-catalogue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Modals padding */
    .success-modal-card {
        padding: 32px;
    }

    .left-customizer-panel {
        padding: 28px;
    }

    /* Grid layouts overrides on tablet/desktop */
    .grid-six-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .measurement-input-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .customer-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-designs-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sub-panel-flex-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .svg-render-area svg {
        max-width: 340px;
    }
}

@media (min-width: 768px) {
    .stepper-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {

    /* Desktop side-by-side grids layout */
    .customizer-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .left-customizer-panel {
        grid-column: span 5;
    }

    .right-preview-panel {
        grid-column: span 7;
    }
}

/* --- Dynamic SVG Visualizer Path styling attributes --- */
.suit-mannequin {
    fill: #2d1d12;
    stroke: #1c1109;
    stroke-width: 2;
}

.suit-hanger-metal {
    fill: #cfab7a;
}

.suit-hanger-metal-hook {
    fill: none;
    stroke: #cfab7a;
    stroke-width: 3;
}

.suit-white-shirt {
    fill: #ffffff;
}

.suit-shirt-cuff-left,
.suit-shirt-cuff-right {
    fill: #ffffff;
    stroke: #cbd5e1;
    stroke-width: 0.5px;
}

.suit-shirt-collar {
    fill: #f0f4f8;
    stroke: #cbd5e1;
    stroke-width: 1px;
}

.suit-red-tie {
    fill: #991b1b;
    stroke: #7f1d1d;
    stroke-width: 1px;
}

.suit-red-tie-knot {
    fill: #7f1d1d;
}

.suit-black-bowtie {
    fill: #0f172a;
}

.suit-waistcoat-fabric {
    fill: #334155;
    stroke: #1e293b;
    stroke-width: 1.5px;
}

.suit-waistcoat-button {
    fill: #b9935b;
}

.suit-back-lining-half-base {
    fill: #334155;
}

.suit-back-lining-stitch {
    stroke: #475569;
    stroke-width: 1px;
    stroke-dasharray: 4;
}

.suit-back-crease {
    stroke: #000;
    stroke-width: 1.2px;
    opacity: 0.3;
}

.suit-back-seam {
    fill: none;
    stroke: #000;
    stroke-width: 0.8px;
    opacity: 0.2;
}

.suit-back-vent-line {
    stroke: #b9935b;
    stroke-width: 2px;
}

.suit-back-vent-fold {
    fill: #0f172a;
    opacity: 0.3;
}

.suit-back-collar-base {
    fill: #0f172a;
    stroke: #000;
    stroke-width: 0.5px;
}

.suit-crease-line {
    stroke: #000;
    stroke-width: 1.5px;
    opacity: 0.3;
}

.suit-shadow-overlay {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
    opacity: 0.15;
}

.suit-pocket-chest {
    fill: #0f172a;
    stroke: #000;
    stroke-width: 0.5px;
    opacity: 0.8;
}

.suit-pocket-chest-shine {
    stroke: #ffffff;
    stroke-width: 0.7px;
    opacity: 0.3;
}

.suit-lower-pocket-flap {
    stroke: #0f172a;
    stroke-width: 0.5px;
}

.suit-lower-pocket-topline {
    stroke: #000;
    stroke-width: 1px;
}

.suit-lower-pocket-round-crease {
    stroke: #000;
    stroke-width: 1px;
    fill: none;
    opacity: 0.4;
}

.suit-lower-pocket-patch {
    stroke: #000;
    stroke-width: 1px;
    opacity: 0.9;
}

.suit-lower-pocket-piped-base {
    fill: #000000;
    opacity: 0.8;
}

.suit-lower-pocket-piped-shine {
    stroke: #ffffff;
    stroke-width: 0.5px;
    opacity: 0.4;
}

.suit-pleats-crease {
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-dasharray: 2 1;
}

.suit-beltloop-sidetab-buckle {
    fill: #94a3b8;
    stroke: #475569;
    stroke-width: 1px;
}

.suit-beltloop-sidetab-shine {
    stroke: #ffffff;
    stroke-width: 1.5px;
}

.suit-beltloop-gurkha-band {
    stroke: #0f172a;
    stroke-width: 1px;
}

.suit-beltloop-gurkha-buckle {
    fill: #cfab7a;
    stroke: #475569;
    stroke-width: 0.5px;
}

.suit-beltloop-gurkha-hole {
    fill: #0f172a;
}

.suit-beltloop-normal-loop {
    fill: #0f172a;
}

.suit-trouser-cuff-fold {
    stroke: #0f172a;
    stroke-width: 1px;
    opacity: 0.9;
}

.suit-cufflink-link {
    fill: #cfab7a;
    stroke: #d2b48c;
    stroke-width: 1px;
}

.suit-lapel-notch-cut {
    stroke: #0f172a;
    stroke-width: 2.5px;
}

.suit-lapel-peak-cut {
    stroke: #0f172a;
    stroke-width: 2.5px;
}

.suit-lapel-shawl-satin {
    fill: #ffffff;
}

.suit-button-horn {
    fill: #1e1b18;
    stroke-width: 0.5px;
}

.suit-button-horn-stitch {
    stroke: #374151;
    stroke-width: 0.5px;
}

.suit-button-tuxedo-silk {
    fill: #020617;
    stroke: #334155;
    stroke-width: 1px;
}

.measurement-field-box input {
    border-radius: 5px;
}

.customer-field-box input {
    border-radius: 8px;
}

/* ==========================================================================
   CSS PRINT STYLING SHEET
   ========================================================================== */
@media print {
    .bos-plugin {
        background-color: #ffffff !important;
        color: #000000 !important;
        font-size: 12px !important;
    }

    /* Hide unnecessary dynamic browser accessories */
    .bos-plugin header,
    .bos-plugin .stepper-section,
    .bos-plugin .stepper-pagination-bar,
    .bos-plugin .panel-submit-container,
    .bos-plugin .pricing-info,
    .bos-plugin .pricing-fabric-meta,
    .bos-plugin .visualizer-angle-toggle,
    .bos-plugin .visualizer-brand-title,
    .bos-plugin .visualizer-badges-overlay,
    .bos-plugin .svg-render-area,
    .bos-plugin .visualizer-pricing-bar,
    .bos-plugin .svg-visualizer-card,
    .bos-plugin .summary-actions-group,
    .bos-plugin #btn-print-bill,
    .bos-plugin footer.brand-footer,
    .bos-plugin #toast-container,
    .bos-plugin .success-modal-backdrop,
    .bos-plugin .left-customizer-panel {
        display: none !important;
    }

    /* Restructure print columns to fit full A4 page width */
    .bos-plugin .customizer-grid {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .bos-plugin .right-preview-panel {
        display: block !important;
        width: 100% !important;
        position: static !important;
    }

    .bos-plugin .summary-card {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .bos-plugin .summary-card-header {
        border-bottom: 2px solid #000000 !important;
        padding-bottom: 8px !important;
    }

    .bos-plugin .summary-card-title h3 {
        color: #000000 !important;
    }

    .bos-plugin .summary-card-title p {
        color: #334155 !important;
    }

    .bos-plugin .summary-designs-layout {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .bos-plugin .summary-design-box {
        background-color: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #000000 !important;
    }

    .bos-plugin .summary-design-box .box-title {
        color: #000000 !important;
        border-bottom: 1px solid #cbd5e1 !important;
        padding-bottom: 4px !important;
    }

    .bos-plugin .summary-field-row {
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .bos-plugin .summary-field-row span.label {
        color: #475569 !important;
    }

    .bos-plugin .summary-field-row span.val,
    .bos-plugin .summary-field-row span.val-shirt {
        color: #000000 !important;
    }

    .bos-plugin .summary-measure-row span.label {
        color: #475569 !important;
    }

    .bos-plugin .summary-measure-row span.val {
        color: #000000 !important;
    }

    .bos-plugin .summary-customer-card {
        background-color: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #000000 !important;
        margin-top: 16px !important;
    }

    .bos-plugin .summary-customer-card p.name-head {
        color: #000000 !important;
    }

    .bos-plugin .summary-customer-card p.name-head span {
        color: #b45309 !important;
    }

    .bos-plugin .summary-customer-card span.meta-val,
    .bos-plugin .summary-customer-card span.meta-val-text {
        color: #000000 !important;
    }
}