/* ═══════════════════════════════════════════════════════════════════
   GAZEBO BUILDER — Stylesheet
   Design: clean outdoor / nature palette
   Green primary: #2d6a4f  |  Accent: #f4a261  |  Dark: #1b2e22
═══════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────────────────────── */
:root {
    --gb-green:        #2d6a4f;
    --gb-green-mid:    #40916c;
    --gb-green-light:  #74c69d;
    --gb-green-pale:   #d8f3dc;
    --gb-green-xpale:  #f0f7f2;
    --gb-accent:       #f4a261;
    --gb-accent-dark:  #e07c3a;
    --gb-dark:         #1b2e22;
    --gb-text:         #2c3e2d;
    --gb-muted:        #6a7c6d;
    --gb-border:       #d0ddd0;
    --gb-card-bg:      #ffffff;
    --gb-page-bg:      #f4f7f4;
    --gb-wall-end:     #3a86ff;
    --gb-wall-side:    #ff6b35;
    --gb-wall-active:  #2d6a4f;
    --gb-radius:       12px;
    --gb-radius-sm:    8px;
    --gb-shadow:       0 4px 24px rgba(29,74,51,.10);
    --gb-shadow-lg:    0 12px 48px rgba(29,74,51,.18);
    --gb-transition:   0.22s cubic-bezier(.4,0,.2,1);
    --gb-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset / Base ──────────────────────────────────────────────── */
#gazebo-builder,
#gazebo-builder * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#gazebo-builder {
    font-family:    var(--gb-font);
    font-size:      15px;
    color:          var(--gb-text);
    line-height:    1.5;
    background:     var(--gb-page-bg);
    border-radius:  var(--gb-radius);
    overflow:       hidden;
    max-width:      1200px;
    margin:         24px auto;
    box-shadow:     var(--gb-shadow-lg);
}

/* ── HERO HEADER ────────────────────────────────────────────────── */
.gb-hero {
    background:     linear-gradient(135deg, var(--gb-dark) 0%, var(--gb-green) 100%);
    color:          #fff;
    padding:        32px 40px !important;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            20px;
}

.gb-hero-title {
    font-size:      26px;
    font-weight:    700;
    letter-spacing: -.02em;
    margin-bottom:  4px;
    color:          #fff;
}

.gb-hero-sub {
    font-size:      14px;
    opacity:        .80;
    font-weight:    400;
    color:          var(--gb-green-pale);
}

.gb-hero-badge {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     rgba(255,255,255,.12);
    border:         1.5px solid rgba(255,255,255,.25);
    border-radius:  var(--gb-radius-sm);
    padding:        10px 18px;
    min-width:      70px;
    text-align:     center;
    flex-shrink:    0;
}

.gb-badge-count {
    font-size:   32px;
    font-weight: 800;
    line-height: 1;
    color:       var(--gb-green-pale);
    transition:  color var(--gb-transition);
}

.gb-badge-count.has-panels {
    color: var(--gb-accent);
}

.gb-badge-label {
    font-size:   11px;
    opacity:     .75;
    margin-top:  2px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── BODY LAYOUT ────────────────────────────────────────────────── */
.gb-body {
    display:  grid;
    grid-template-columns: 1fr 380px;
    gap:      0;
    min-height: 600px;
}

/* ── VISUAL COLUMN ──────────────────────────────────────────────── */
.gb-visual-col {
    background:  #fff;
    border-right: 1px solid var(--gb-border);
    padding:     28px;
    display:     flex;
    flex-direction: column;
    gap:         24px;
}

/* ── PHOTO STAGE — Canvas composite area ────────────────────────── */
.gb-photo-stage {
    position:      relative;
    background:    linear-gradient(145deg, #f0f4f0 0%, #e6ede6 100%);
    border-radius: var(--gb-radius);
    border:        1px solid var(--gb-border);
    overflow:      hidden;
    min-height:    380px;
    /* Let the canvas define height via its own aspect ratio */
}

/* Canvas fills the stage; JS sizes it to the natural base-image ratio */
.gb-canvas {
    display:     block;
    width:       100%;
    height:      100%;
    min-height:  380px;
    border-radius: var(--gb-radius);
}

/* Loading spinner overlay */
.gb-canvas-loading {
    position:        absolute;
    inset:           0;
    background:      rgba(240,244,240,.75);
    backdrop-filter: blur(2px);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    border-radius:   var(--gb-radius);
    font-size:       12px;
    color:           var(--gb-muted);
    font-weight:     500;
}

.gb-canvas-loading svg {
    animation: gb-spin 1s linear infinite;
    color:     var(--gb-green-mid);
}

/* ── FLOOR PLAN SECTION ─────────────────────────────────────────── */
.gb-plan-section {
    background:     var(--gb-green-xpale);
    border:         1px solid var(--gb-border);
    border-radius:  var(--gb-radius);
    padding:        16px 16px 14px;
}

.gb-plan-label {
    font-size:      12px;
    color:          var(--gb-muted);
    display:        flex;
    align-items:    center;
    gap:            6px;
    margin-bottom:  12px;
    font-weight:    500;
}

.gb-plan-svg {
    width:      100%;
    height:     auto;
    display:    block;
    cursor:     default;
}

/* Compass labels */
.gb-plan-compass {
    font-size:     10px;
    fill:          var(--gb-muted);
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family:   var(--gb-font);
}

/* Interior text */
.gb-plan-interior {
    font-size:     14px;
    fill:          var(--gb-green);
    font-weight:   700;
    letter-spacing: .08em;
    font-family:   var(--gb-font);
}
.gb-plan-interior-sub {
    font-size:     10px;
    fill:          var(--gb-green-mid);
    font-family:   var(--gb-font);
}

/* ── SVG WALL ZONES ─────────────────────────────────────────────── */
.gb-wall-zone {
    cursor: pointer;
    outline: none;
}

.gb-wall-zone:focus-visible .gb-wall-stroke {
    stroke-width: 3 !important;
    stroke: var(--gb-accent) !important;
}

/* Default wall fill & stroke */
.gb-wall-fill {
    opacity: .6;
    transition: opacity var(--gb-transition);
}

.gb-wall-fill-end  { fill: #dbeafe; }
.gb-wall-fill-side { fill: #fde8dc; }

.gb-wall-stroke {
    stroke: #94a3b8;
    stroke-dasharray: 6 3;
    transition: stroke var(--gb-transition), stroke-dasharray var(--gb-transition);
}

.gb-wall-active-fill {
    opacity: 0;
    transition: opacity var(--gb-transition), fill var(--gb-transition);
}

.gb-wall-text {
    font-family:  var(--gb-font);
    fill:         #475569;
    pointer-events: none;
    transition:   fill var(--gb-transition);
}

.gb-wall-label-text {
    font-size:    9px;
    font-weight:  600;
}

.gb-wall-hint {
    font-size:    10px;
    fill:         #94a3b8;
    font-family:  var(--gb-font);
    transition:   fill var(--gb-transition);
}

.gb-wall-add-hint {
    font-weight: 700;
}

/* Check badge — hidden by default */
.gb-wall-check-bg {
    fill:     var(--gb-green);
    opacity:  0;
    transition: opacity var(--gb-transition);
}
.gb-wall-check-icon {
    font-size:  9px;
    fill:       #fff;
    font-family: var(--gb-font);
    opacity:    0;
    transition: opacity var(--gb-transition);
}

/* Hover state */
.gb-wall-zone:hover .gb-wall-fill-end   { fill: #bfdbfe; opacity: .9; }
.gb-wall-zone:hover .gb-wall-fill-side  { fill: #fed7c3; opacity: .9; }
.gb-wall-zone:hover .gb-wall-stroke     { stroke: #64748b; stroke-dasharray: none; }
.gb-wall-zone:hover .gb-wall-hint       { fill: var(--gb-green-mid); }

/* Active / selected state */
.gb-wall-zone.active .gb-wall-fill-end,
.gb-wall-zone.active .gb-wall-fill-side {
    opacity: 0;
}
.gb-wall-zone.active .gb-wall-active-fill {
    fill:    var(--gb-green);
    opacity: .18;
}
.gb-wall-zone.active .gb-wall-stroke {
    stroke:           var(--gb-green);
    stroke-dasharray: none;
    stroke-width:     3 !important;
}
.gb-wall-zone.active .gb-wall-text     { fill: var(--gb-dark); font-weight: 700; }
.gb-wall-zone.active .gb-wall-add-hint { fill: var(--gb-green-mid); }
.gb-wall-zone.active .gb-wall-check-bg  { opacity: 1; }
.gb-wall-zone.active .gb-wall-check-icon { opacity: 1; }

/* ── THUMBNAIL ROW ──────────────────────────────────────────────── */
.gb-thumb-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.gb-thumb-slot {
    aspect-ratio: 4/3;
    border-radius: var(--gb-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--gb-transition), box-shadow var(--gb-transition);
}

.gb-thumb-slot:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.gb-thumb-empty {
    height:          100%;
    background:      var(--gb-green-xpale);
    border:          2px dashed var(--gb-border);
    border-radius:   var(--gb-radius-sm);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    color:           var(--gb-muted);
    font-size:       11px;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .05em;
    transition:      background var(--gb-transition), border-color var(--gb-transition);
}

.gb-thumb-empty:hover {
    background:     var(--gb-green-pale);
    border-color:   var(--gb-green-light);
    color:          var(--gb-green);
}

.gb-thumb-plus {
    font-size:   22px;
    line-height: 1;
    font-weight: 300;
    color:       var(--gb-green-light);
}

.gb-thumb-filled {
    position:   relative;
    height:     100%;
    background: #111;
    border-radius: var(--gb-radius-sm);
    overflow:   hidden;
}

.gb-thumb-filled img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform var(--gb-transition);
}

.gb-thumb-slot:hover .gb-thumb-filled img {
    transform: scale(1.04);
}

.gb-thumb-filled-label {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color:      #fff;
    font-size:  10px;
    font-weight: 600;
    padding:    14px 6px 5px;
    text-align: center;
}

.gb-thumb-remove {
    position:    absolute;
    top:         4px;
    right:       4px;
    width:       20px;
    height:      20px;
    border-radius: 50%;
    background:  rgba(0,0,0,.55);
    color:       #fff;
    border:      none;
    cursor:      pointer;
    font-size:   13px;
    line-height: 20px;
    text-align:  center;
    padding:     0;
    opacity:     0;
    transition:  opacity var(--gb-transition), background var(--gb-transition);
}

.gb-thumb-slot:hover .gb-thumb-remove {
    opacity: 1;
}

.gb-thumb-remove:hover {
    background: #e53e3e;
}

/* ── CONFIG COLUMN ──────────────────────────────────────────────── */
.gb-config-col {
    background:  var(--gb-page-bg);
    padding:     24px 20px;
    overflow-y:  auto;
}

.gb-config-card {
    background:    var(--gb-card-bg);
    border-radius: var(--gb-radius);
    border:        1px solid var(--gb-border);
    overflow:      hidden;
    box-shadow:    var(--gb-shadow);
}

/* ── STATUS LINE ────────────────────────────────────────────────── */
.gb-status-line {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     14px 20px;
    font-size:   13px;
    line-height: 1.6;
    color:       var(--gb-muted);
    background:  var(--gb-green-xpale);
    border-bottom: 1px solid var(--gb-border);
    min-height:  44px;
    font-style:  italic;
}

.gb-status-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--gb-border);
    flex-shrink:   0;
    transition:    background var(--gb-transition);
}

.gb-status-line.has-panels .gb-status-dot {
    background:    var(--gb-green-mid);
    box-shadow:    0 0 0 3px rgba(64,145,108,.20);
}

/* ── SECTIONS ───────────────────────────────────────────────────── */
.gb-section {
    padding:       20px;
    border-bottom: 1px solid var(--gb-border);
}

.gb-section-head {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 16px;
}

.gb-section-head h4 {
    font-size:   13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:       var(--gb-green);
    flex:        1;
}

.gb-section-icon {
    width:       18px;
    height:      18px;
    color:       var(--gb-green-mid);
    flex-shrink: 0;
}

.gb-section-cap {
    font-size:   11px;
    color:       var(--gb-muted);
    background:  var(--gb-green-xpale);
    border:      1px solid var(--gb-border);
    border-radius: 20px;
    padding:     2px 8px;
    font-weight: 500;
}

/* ── PANEL ROWS ─────────────────────────────────────────────────── */
.gb-panel-row {
    margin-bottom: 14px;
    background:    var(--gb-page-bg);
    border:        1px solid var(--gb-border);
    border-radius: var(--gb-radius-sm);
    overflow:      hidden;
    transition:    border-color var(--gb-transition), box-shadow var(--gb-transition);
}

.gb-panel-row:last-child {
    margin-bottom: 0;
}

.gb-panel-row.is-active {
    border-color: var(--gb-green-light);
    box-shadow:   0 0 0 3px rgba(45,106,79,.08);
}

.gb-row-top {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     12px 14px;
}

/* ── TOGGLE SWITCH ──────────────────────────────────────────────── */
.gb-toggle {
    position:   relative;
    display:    inline-block;
    flex-shrink: 0;
    cursor:     pointer;
}

.gb-toggle-input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.gb-toggle-track {
    display:       block;
    width:         40px;
    height:        22px;
    background:    #d1d5db;
    border-radius: 11px;
    position:      relative;
    transition:    background var(--gb-transition);
}

.gb-toggle-input:checked + .gb-toggle-track {
    background: var(--gb-green);
}

.gb-toggle-thumb {
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         16px;
    height:        16px;
    background:    #fff;
    border-radius: 50%;
    box-shadow:    0 1px 4px rgba(0,0,0,.25);
    transition:    transform var(--gb-transition), box-shadow var(--gb-transition);
}

.gb-toggle-input:checked + .gb-toggle-track .gb-toggle-thumb {
    transform:  translateX(18px);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.gb-toggle:focus-within .gb-toggle-track {
    outline:        2px solid var(--gb-accent);
    outline-offset: 2px;
}

/* ── ROW LABEL & BUTTON ─────────────────────────────────────────── */
.gb-row-label {
    flex:        1;
    font-size:   13px;
    font-weight: 500;
    color:       var(--gb-text);
    line-height: 1.5;
}

.gb-choose-btn {
    background:    transparent;
    border:        1.5px solid var(--gb-border);
    border-radius: 20px;
    padding:       4px 12px;
    font-size:     12px;
    font-weight:   600;
    color:         var(--gb-muted);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    all var(--gb-transition);
}

.gb-choose-btn:hover {
    background:    var(--gb-green);
    border-color:  var(--gb-green);
    color:         #fff;
}

.gb-choose-arrow {
    transition: transform var(--gb-transition);
    display:    inline-block;
}

.gb-choose-btn:hover .gb-choose-arrow {
    transform: translateX(3px);
}

/* ── SELECT WRAPPER ─────────────────────────────────────────────── */
.gb-row-select-wrap {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 12px 10px;
    background:    var(--gb-green-xpale);
    border-top:    1px solid var(--gb-border);
    animation:     gb-slide-down .18s ease-out;
}

@keyframes gb-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gb-panel-select {
    flex:          1;
    appearance:    none;
    background:    #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a7c6d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    border:        1.5px solid var(--gb-border);
    border-radius: var(--gb-radius-sm);
    padding:       7px 30px 7px 10px;
    font-size:     13px;
    font-family:   var(--gb-font);
    color:         var(--gb-text);
    cursor:        pointer;
    transition:    border-color var(--gb-transition), box-shadow var(--gb-transition);
}

.gb-panel-select:focus {
    outline:      none;
    border-color: var(--gb-green);
    box-shadow:   0 0 0 3px rgba(45,106,79,.12);
}

/* Mini preview thumbnail */
.gb-mini-preview {
    width:         52px;
    height:        40px;
    border-radius: 5px;
    overflow:      hidden;
    flex-shrink:   0;
    background:    #111;
    border:        1px solid var(--gb-border);
}

.gb-mini-img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
}

/* ── PRICE SECTION ──────────────────────────────────────────────── */
.gb-price-section {
    padding: 20px;
    border-bottom: 1px solid var(--gb-border);
}

.gb-price-header {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     12px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:         var(--gb-green);
    margin-bottom: 14px;
}

.gb-price-breakdown {
    display:   flex;
    flex-direction: column;
    gap:       10px;
    margin-bottom: 12px;
}

.gb-price-row {
    display:     flex;
    justify-content: space-between;
    align-items: baseline;
    font-size:   13px;
    line-height: 1.5;
    gap:         8px;
}

.gb-price-row span:first-child {
    color:      var(--gb-muted);
    min-width:  0;
}

.gb-price-row span:last-child {
    font-weight:  600;
    white-space:  nowrap;
    color:        var(--gb-text);
    padding-left: 10px;
}

.gb-price-base span:first-child {
    font-weight: 500;
    color:       var(--gb-text);
}

.gb-price-divider {
    height:       1px;
    background:   var(--gb-border);
    margin:       10px 0;
}

.gb-price-total {
    display:     flex;
    justify-content: space-between;
    align-items: baseline;
    font-size:   15px;
}

.gb-price-total span {
    font-weight: 600;
    color:       var(--gb-text);
}

.gb-price-total strong {
    font-size:   20px;
    font-weight: 800;
    color:       var(--gb-green);
    letter-spacing: -.01em;
}

.gb-price-note {
    font-size:   11px;
    color:       var(--gb-muted);
    margin-top:  10px;
    font-style:  italic;
    line-height: 1.4;
}

/* ── CTA ────────────────────────────────────────────────────────── */
.gb-cta {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gb-add-btn {
    width:         100%;
    padding:       14px 24px;
    background:    linear-gradient(135deg, var(--gb-green) 0%, var(--gb-green-mid) 100%);
    color:         #fff;
    border:        none;
    border-radius: var(--gb-radius-sm);
    font-size:     15px;
    font-weight:   700;
    font-family:   var(--gb-font);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           10px;
    transition:    transform var(--gb-transition), box-shadow var(--gb-transition), background var(--gb-transition);
    box-shadow:    0 4px 16px rgba(45,106,79,.30);
    letter-spacing: .01em;
    position:      relative;
    overflow:      hidden;
}

.gb-add-btn::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
    pointer-events: none;
}

.gb-add-btn:hover:not(:disabled) {
    transform:  translateY(-2px);
    box-shadow: 0 8px 24px rgba(45,106,79,.40);
    background: linear-gradient(135deg, var(--gb-dark) 0%, var(--gb-green) 100%);
}

.gb-add-btn:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: 0 2px 8px rgba(45,106,79,.20);
}

.gb-add-btn:disabled {
    cursor:  not-allowed;
    opacity: .7;
}

.gb-add-btn.gb-btn-no-stock {
    background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
}

.gb-add-btn.loading .gb-btn-label  { opacity: 0; }
.gb-add-btn.loading .gb-btn-spinner { display: flex !important; }

.gb-add-btn.success {
    background: linear-gradient(135deg, #276749 0%, #38a169 100%);
}

.gb-add-btn.error {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}

.gb-cart-icon {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
}

.gb-btn-label {
    transition: opacity .15s;
}

.gb-btn-spinner {
    position: absolute;
    display:  none;
    align-items: center;
    justify-content: center;
}

.gb-btn-spinner svg {
    width:     20px;
    height:    20px;
    animation: gb-spin 1s linear infinite;
}

@keyframes gb-spin {
    to { transform: rotate(360deg); }
}

.gb-view-cart-btn {
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       11px 24px;
    background:    transparent;
    border:        2px solid var(--gb-green);
    border-radius: var(--gb-radius-sm);
    color:         var(--gb-green);
    font-size:     14px;
    font-weight:   700;
    text-decoration: none;
    transition:    all var(--gb-transition);
    font-family:   var(--gb-font);
}

.gb-view-cart-btn:hover {
    background: var(--gb-green-pale);
    color:      var(--gb-dark);
}

/* ── MODAL ──────────────────────────────────────────────────────── */
.gb-modal {
    position:  fixed;
    inset:     0;
    z-index:   99999;
    display:   flex;
    align-items: center;
    justify-content: center;
    padding:   20px;
    opacity:   0;
    visibility: hidden;
    transition: opacity .20s ease, visibility .20s ease;
}

.gb-modal.open {
    opacity:    1;
    visibility: visible;
}

.gb-modal-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(20, 35, 24, .65);
    backdrop-filter: blur(3px);
    cursor:     pointer;
}

.gb-modal-box {
    position:     relative;
    background:   var(--gb-card-bg);
    border-radius: var(--gb-radius);
    width:        100%;
    max-width:    680px;
    max-height:   88vh;
    overflow:     hidden;
    display:      flex;
    flex-direction: column;
    box-shadow:   var(--gb-shadow-lg);
    transform:    scale(.92) translateY(16px);
    transition:   transform .22s cubic-bezier(.34,1.46,.64,1);
}

.gb-modal.open .gb-modal-box {
    transform: scale(1) translateY(0);
}

.gb-modal-head {
    display:       flex;
    align-items:   center;
    padding:       18px 24px;
    border-bottom: 1px solid var(--gb-border);
    background:    linear-gradient(135deg, var(--gb-dark) 0%, var(--gb-green) 100%);
}

.gb-modal-title {
    flex:        1;
    font-size:   17px;
    font-weight: 700;
    color:       #fff;
}

.gb-modal-close {
    background:  rgba(255,255,255,.15);
    border:      none;
    border-radius: 50%;
    width:       32px;
    height:      32px;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       #fff;
    transition:  background var(--gb-transition);
    padding:     0;
    flex-shrink: 0;
}

.gb-modal-close:hover {
    background: rgba(255,255,255,.30);
}

.gb-modal-close svg {
    width:  16px;
    height: 16px;
}

.gb-modal-body {
    overflow-y:  auto;
    padding:     20px 24px;
    flex:        1;
}

/* ── MODAL OPTION GRID ──────────────────────────────────────────── */
.gb-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.gb-option-card {
    background:     var(--gb-page-bg);
    border:         2px solid var(--gb-border);
    border-radius:  var(--gb-radius);
    overflow:       hidden;
    cursor:         pointer;
    transition:     border-color var(--gb-transition), transform var(--gb-transition), box-shadow var(--gb-transition);
    position:       relative;
}

.gb-option-card:hover {
    border-color: var(--gb-green-mid);
    transform:    translateY(-2px);
    box-shadow:   0 6px 20px rgba(0,0,0,.10);
}

.gb-option-card.selected {
    border-color: var(--gb-green);
    box-shadow:   0 0 0 3px rgba(45,106,79,.15);
}

.gb-option-img-wrap {
    background:   #111;
    aspect-ratio: 4/3;
    overflow:     hidden;
    position:     relative;
}

.gb-option-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform var(--gb-transition);
}

.gb-option-card:hover .gb-option-img-wrap img {
    transform: scale(1.04);
}

.gb-option-none-icon {
    background:    var(--gb-page-bg);
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.gb-option-none-icon svg {
    width:   40px;
    height:  40px;
    color:   var(--gb-border);
}

.gb-option-info {
    padding: 10px 12px 12px;
}

.gb-option-info h4 {
    font-size:   13px;
    font-weight: 700;
    color:       var(--gb-text);
    margin-bottom: 2px;
}

.gb-option-info p {
    font-size:   11px;
    color:       var(--gb-muted);
    line-height: 1.3;
    margin-bottom: 6px;
}

.gb-option-price {
    font-size:   13px;
    font-weight: 700;
    color:       var(--gb-green);
}

.gb-option-price.is-zero {
    color:     var(--gb-muted);
    font-style: italic;
}

.gb-no-stock-tag {
    font-size:    10px;
    font-weight:  700;
    color:        #c0392b;
    margin-left:  4px;
    letter-spacing: .02em;
}

.gb-option-card.gb-out-of-stock {
    opacity: .75;
}

.gb-option-check {
    position:      absolute;
    top:           8px;
    right:         8px;
    width:         24px;
    height:        24px;
    background:    var(--gb-green);
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #fff;
    font-size:     13px;
    font-weight:   700;
    opacity:       0;
    transition:    opacity var(--gb-transition), transform var(--gb-transition);
    transform:     scale(.6);
}

.gb-option-card.selected .gb-option-check {
    opacity:   1;
    transform: scale(1);
}

/* ── MODALBODY scrollbar styling ─── */
.gb-modal-body::-webkit-scrollbar       { width: 6px; }
.gb-modal-body::-webkit-scrollbar-track { background: transparent; }
.gb-modal-body::-webkit-scrollbar-thumb { background: var(--gb-border); border-radius: 3px; }
.gb-modal-body::-webkit-scrollbar-thumb:hover { background: var(--gb-green-light); }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .gb-body {
        grid-template-columns: 1fr;
    }

    .gb-visual-col {
        border-right:  none;
        border-bottom: 1px solid var(--gb-border);
    }

    .gb-config-col {
        padding: 20px 16px;
    }

    .gb-hero {
        padding: 20px 24px !important;
    }

    .gb-hero-title {
        font-size: 20px;
    }
}

@media (max-width: 560px) {
    .gb-thumb-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .gb-modal-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gb-hero-badge {
        display: none;
    }
}

@media (max-width: 380px) {
    .gb-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* ── PRINT ──────────────────────────────────────────────────────── */
@media print {
    .gb-modal, .gb-cta, .gb-plan-section { display: none !important; }
}

/* ── body.gb-no-scroll (when modal open) ─ */
body.gb-no-scroll {
    overflow: hidden;
}