/* ============================================================
   Geb PC Configurator — v3
   ============================================================ */

#geb-configurator {
    --c-bg:       #f0f2f5;
    --c-card:     #ffffff;
    --c-primary:  #0d1b2a;
    --c-accent:   #1565c0;
    --c-active:   #e53935;
    --c-green:    #2e7d32;
    --c-done:     #1565c0;
    --c-border:   #dde3ec;
    --c-text:     #1a1a2e;
    --c-muted:    #6b7a99;
    --r:          10px;
    --shadow-sm:  0 1px 4px rgba(0,0,0,.08);
    --shadow-md:  0 4px 20px rgba(0,0,0,.10);

    font-family: inherit;
    font-size:   14px;
    color:       var(--c-text);
    max-width:   1160px;
    margin:      0 auto;
    padding:     4px;
}

/* ── Step nav ─────────────────────────────────────────────── */
.geb-steps-nav {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             2px;
    background:      var(--c-card);
    border-radius:   var(--r);
    border:          1px solid var(--c-border);
    padding:         14px 16px;
    margin-bottom:   22px;
    box-shadow:      var(--shadow-sm);
}

.geb-pill {
    display:     flex;
    align-items: center;
    gap:         7px;
    padding:     6px 13px;
    border-radius: 24px;
    cursor:      default;
    user-select: none;
    transition:  all .2s;
    font-size:   12px;
    font-weight: 600;
    color:       var(--c-muted);
    border:      2px solid transparent;
}

.geb-pill--done {
    color:  var(--c-done);
    cursor: pointer;
}
.geb-pill--done:hover { background: #e8f0fe; }

.geb-pill--active {
    background:   var(--c-active);
    color:        #fff;
    border-color: var(--c-active);
    box-shadow:   0 3px 12px rgba(229,57,53,.35);
    transform:    scale(1.05);
}

.geb-pill-dot {
    width:           10px;
    height:          10px;
    border-radius:   50%;
    background:      var(--c-border);
    flex-shrink:     0;
    transition:      background .2s;
    font-size:       0;
    overflow:        hidden;
}
.geb-pill--active .geb-pill-dot { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.geb-pill--done   .geb-pill-dot { background: var(--c-done); font-size: 8px; color: #fff; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; }

.geb-pill-label { white-space: nowrap; }
.geb-pill-sep   { color: var(--c-border); font-size: 16px; padding: 0 1px; }

/* ── Step content ─────────────────────────────────────────── */
.geb-step-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    margin-bottom:   18px;
    padding-bottom:  14px;
    border-bottom:   2px solid var(--c-border);
}
.geb-step-header h2 {
    font-size:   24px;
    font-weight: 800;
    color:       var(--c-primary);
    margin:      0;
}
.geb-tag-opt {
    font-size:   11px;
    font-weight: 500;
    color:       var(--c-muted);
    background:  var(--c-bg);
    border:      1px solid var(--c-border);
    border-radius: 20px;
    padding:     2px 8px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── Brand picker ─────────────────────────────────────────── */
.geb-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 24px 0;
    max-width: 540px;
}
.geb-brand-card {
    background:    var(--c-card);
    border:        3px solid var(--c-border);
    border-radius: 16px;
    padding:       36px 24px;
    text-align:    center;
    cursor:        pointer;
    font-family:   inherit;
    transition:    all .2s;
    box-shadow:    var(--shadow-sm);
}
.geb-brand-card:hover { border-color: var(--c-accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.geb-brand-card--active {
    border-color: var(--c-active);
    background:   #fff5f5;
    box-shadow:   0 4px 20px rgba(229,57,53,.2);
    transform:    translateY(-3px);
}
.geb-brand-logo { font-size: 48px; margin-bottom: 12px; }
.geb-brand-name { font-size: 24px; font-weight: 800; color: var(--c-primary); margin-bottom: 6px; }
.geb-brand-sub  { font-size: 13px; color: var(--c-muted); }

/* ── Note compatibilità ───────────────────────────────────── */
.geb-note {
    background:    #fffde7;
    border:        1px solid #ffe082;
    border-left:   4px solid #f9a825;
    border-radius: 8px;
    padding:       9px 14px;
    font-size:     13px;
    color:         #5a4000;
    margin-bottom: 16px;
}
.geb-warn {
    background:    #fce4ec;
    border:        1px solid #f48fb1;
    border-left:   4px solid var(--c-active);
    border-radius: 8px;
    padding:       9px 14px;
    font-size:     13px;
    color:         #880e4f;
    margin-bottom: 16px;
}

/* ── Search ───────────────────────────────────────────────── */
.geb-search-wrap  { margin-bottom: 18px; }
.geb-search-input {
    width:         100%;
    max-width:     460px;
    padding:       10px 18px;
    border:        2px solid var(--c-border);
    border-radius: 30px;
    font-size:     13px;
    font-family:   inherit;
    outline:       none;
    background:    var(--c-card);
    transition:    border-color .2s, box-shadow .2s;
}
.geb-search-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(21,101,192,.12); }

/* ── Product grid ─────────────────────────────────────────── */
.geb-products-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                   16px;
    min-height:            200px;
}

/* ── Card ─────────────────────────────────────────────────── */
.geb-card {
    background:    var(--c-card);
    border:        2px solid var(--c-border);
    border-radius: var(--r);
    padding:       14px;
    display:       flex;
    flex-direction: column;
    gap:           10px;
    position:      relative;
    transition:    border-color .2s, box-shadow .2s, transform .15s;
    box-shadow:    var(--shadow-sm);
}
.geb-card:hover {
    border-color: var(--c-accent);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-3px);
}
.geb-card--sel {
    border-color: var(--c-active);
    box-shadow:   0 0 0 3px rgba(229,57,53,.15), var(--shadow-md);
    transform:    translateY(-3px);
}
.geb-card-check {
    position:    absolute;
    top:         10px;
    right:       10px;
    width:       24px;
    height:      24px;
    background:  var(--c-active);
    color:       #fff;
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   13px;
    font-weight: 700;
}
.geb-card-img {
    width:    100%;
    height:   110px;
    display:  flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    border-radius: 6px;
    overflow: hidden;
}
.geb-card-img img { max-width: 100%; max-height: 106px; object-fit: contain; }
.geb-card-body    { flex: 1; }
.geb-card-name {
    font-size:   12px;
    font-weight: 600;
    line-height: 1.45;
    color:       var(--c-text);
    margin-bottom: 6px;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}
.geb-card-price  { font-size: 15px; font-weight: 800; color: var(--c-active); }
.geb-card-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }

.geb-btn-sel {
    width:         100%;
    padding:       8px 0;
    border:        2px solid var(--c-accent);
    border-radius: 6px;
    background:    transparent;
    color:         var(--c-accent);
    font-size:     12px;
    font-weight:   700;
    font-family:   inherit;
    cursor:        pointer;
    transition:    all .18s;
}
.geb-btn-sel:hover       { background: var(--c-accent); color: #fff; }
.geb-btn-sel--on         { background: var(--c-active); border-color: var(--c-active); color: #fff; }
.geb-btn-sel--on:hover   { background: #c62828; border-color: #c62828; }
.geb-btn-sel[disabled]   { opacity: .35; cursor: not-allowed; }

/* ── Badge ────────────────────────────────────────────────── */
.geb-badge {
    display:       inline-block;
    font-size:     10px;
    padding:       2px 7px;
    background:    var(--c-bg);
    border:        1px solid var(--c-border);
    border-radius: 5px;
    color:         var(--c-muted);
    font-weight:   600;
}

/* ── RAM qty inline sulla card ────────────────────────────── */
.geb-card-qty {
    display:    flex;
    gap:        4px;
    flex-wrap:  wrap;
    padding:    6px 0 2px;
    border-top: 1px solid var(--c-border);
    margin-top: 2px;
}
.geb-qty-btn {
    flex:          1;
    min-width:     0;
    padding:       5px 4px;
    border:        2px solid var(--c-border);
    border-radius: 7px;
    background:    #fff;
    cursor:        pointer;
    font-size:     11px;
    font-weight:   700;
    font-family:   inherit;
    text-align:    center;
    transition:    all .15s;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           2px;
    line-height:   1.2;
}
.geb-qty-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.geb-qty-btn.active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.geb-qty-gb {
    font-size:   9px;
    font-weight: 500;
    opacity:     .85;
}

/* ── Multi selected list ──────────────────────────────────── */
.geb-multi-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.geb-multi-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    var(--c-card);
    border:        1px solid var(--c-border);
    border-radius: 8px;
    padding:       8px 12px;
    box-shadow:    var(--shadow-sm);
}
.geb-multi-item img  { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.geb-multi-item span { flex: 1; font-size: 12px; font-weight: 600; }

/* ── Buttons ──────────────────────────────────────────────── */
.geb-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           6px;
    padding:       10px 22px;
    border:        none;
    border-radius: 8px;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   700;
    font-family:   inherit;
    transition:    all .18s;
    white-space:   nowrap;
    text-decoration: none;
}
.geb-btn:active { transform: scale(.97); }

.geb-btn-next {
    background: var(--c-primary);
    color:      #fff;
    padding:    11px 28px;
    font-size:  14px;
    box-shadow: 0 3px 12px rgba(13,27,42,.25);
}
.geb-btn-next:hover:not([disabled]) { background: var(--c-accent); box-shadow: 0 4px 16px rgba(21,101,192,.35); }
.geb-btn-next--disabled, .geb-btn-next[disabled] { opacity: .35; cursor: not-allowed; transform: none; }

.geb-btn-back {
    background:  transparent;
    color:       var(--c-accent);
    border:      2px solid var(--c-accent);
    padding:     10px 22px;
    font-size:   14px;
}
.geb-btn-back:hover { background: var(--c-accent); color: #fff; }

.geb-btn-skip {
    background:  transparent;
    color:       var(--c-muted);
    border:      1px solid var(--c-border);
    font-size:   12px;
    padding:     7px 16px;
}
.geb-btn-skip:hover { background: var(--c-bg); color: var(--c-text); }

.geb-btn-pdf {
    background: var(--c-green);
    color:      #fff;
    font-size:  14px;
    padding:    11px 26px;
    box-shadow: 0 3px 12px rgba(46,125,50,.25);
}
.geb-btn-pdf:hover    { background: #1b5e20; }
.geb-btn-pdf:disabled { opacity: .6; cursor: wait; }

.geb-btn-submit {
    background: var(--c-active);
    color:      #fff;
    font-size:  14px;
    padding:    12px 30px;
    box-shadow: 0 3px 12px rgba(229,57,53,.3);
}
.geb-btn-submit:hover    { background: #c62828; }
.geb-btn-submit:disabled { opacity: .6; cursor: wait; }

.geb-btn-reset {
    background:  transparent;
    color:       var(--c-muted);
    border:      1px solid var(--c-border);
    font-size:   12px;
    padding:     8px 18px;
}
.geb-btn-reset:hover { background: var(--c-bg); }

.geb-btn-remove {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      #ccc;
    font-size:  14px;
    padding:    4px 8px;
    border-radius: 5px;
    transition: all .15s;
    flex-shrink: 0;
}
.geb-btn-remove:hover { color: var(--c-active); background: #fce4ec; }

/* ── Step footer ──────────────────────────────────────────── */
.geb-step-footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      24px;
    padding-top:     18px;
    border-top:      1px solid var(--c-border);
    gap:             10px;
    flex-wrap:       wrap;
}

/* ── Pagination ───────────────────────────────────────────── */
.geb-pagination { margin-top: 18px; }
.geb-pagination-inner { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.geb-pg-info { font-size: 12px; color: var(--c-muted); margin-right: 6px; }
.geb-pg {
    min-width: 34px; height: 34px; padding: 0 10px;
    border: 2px solid var(--c-border); border-radius: 7px;
    background: var(--c-card); cursor: pointer; font-size: 12px;
    font-weight: 700; font-family: inherit; transition: all .15s;
}
.geb-pg.active      { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.geb-pg:hover:not(.active) { border-color: var(--c-accent); color: var(--c-accent); }

/* ── States ───────────────────────────────────────────────── */
.geb-loading, .geb-empty, .geb-error {
    grid-column: 1/-1;
    text-align: center;
    padding: 52px 20px;
    color: var(--c-muted);
    font-size: 14px;
}
.geb-error { color: #c62828; }
.geb-spinner {
    display:         inline-block;
    width:           18px;
    height:          18px;
    border:          2px solid var(--c-border);
    border-top-color: var(--c-accent);
    border-radius:   50%;
    animation:       geb-spin .7s linear infinite;
    margin-right:    8px;
    vertical-align:  middle;
}
@keyframes geb-spin { to { transform: rotate(360deg); } }

/* ── Summary ──────────────────────────────────────────────── */
.geb-summary-scroll    { overflow-x: auto; margin-bottom: 22px; }
.geb-summary-table     { width: 100%; border-collapse: collapse; }
.geb-summary-table thead tr { background: var(--c-primary); color: #fff; }
.geb-summary-table thead th { padding: 9px 11px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; text-align: left; }
.geb-summary-table tbody tr { transition: background .1s; }
.geb-summary-table tbody tr:nth-child(even) { background: var(--c-bg); }
.geb-summary-table tbody tr:hover { background: #e8f0fe; }
.geb-summary-table td { padding: 9px 11px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.geb-s-cat   { font-size: 10px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; width: 110px; }
.geb-s-img   { width: 46px; text-align: center; }
.geb-s-img img { width: 36px; height: 36px; object-fit: contain; display: block; margin: auto; }
.geb-s-price { text-align: right; font-weight: 800; white-space: nowrap; width: 95px; }
.geb-s-del   { width: 36px; text-align: center; }
.geb-s-totlbl { font-weight: 800; font-size: 15px; padding-top: 14px !important; }
.geb-s-totval { text-align: right; font-weight: 800; font-size: 17px; color: var(--c-active); padding-top: 14px !important; white-space: nowrap; }

/* ── Summary actions ──────────────────────────────────────── */
.geb-summary-actions { margin-bottom: 26px; }

/* ── Quote form ───────────────────────────────────────────── */
.geb-quote-form {
    background:    var(--c-card);
    border:        1px solid var(--c-border);
    border-radius: var(--r);
    padding:       24px;
    margin-bottom: 22px;
    box-shadow:    var(--shadow-sm);
}
.geb-quote-form h3  { font-size: 18px; font-weight: 800; color: var(--c-primary); margin: 0 0 6px; }
.geb-form-note      { font-size: 12px; color: var(--c-muted); margin: 0 0 18px; }
.geb-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.geb-form-row          { margin-bottom: 12px; }
.geb-form-row label    { display: block; font-size: 11px; font-weight: 700; color: var(--c-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.geb-form-row input,
.geb-form-row textarea {
    width: 100%; padding: 10px 13px;
    border: 2px solid var(--c-border); border-radius: 8px;
    font-size: 13px; font-family: inherit; outline: none;
    transition: border-color .18s, box-shadow .18s;
    background: #fafbfc; box-sizing: border-box;
}
.geb-form-row input:focus,
.geb-form-row textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(21,101,192,.1); background: #fff; }

.geb-form-msg          { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; display: none; }
.geb-form-msg:not(:empty) { display: block; }
.geb-msg-success       { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.geb-msg-error         { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }

/* ── Assemblaggio step ────────────────────────────────────── */
.geb-assemblaggio-wrap {
    padding: 20px 0;
}

.geb-assemblaggio-card {
    display:        flex;
    align-items:    center;
    gap:            20px;
    background:     var(--c-card);
    border:         2px solid var(--c-border);
    border-radius:  var(--r);
    padding:        24px 28px;
    cursor:         pointer;
    transition:     border-color .2s, box-shadow .2s, background .2s;
    box-shadow:     var(--shadow-sm);
}

.geb-assemblaggio-card:hover {
    border-color:   var(--c-accent);
    box-shadow:     var(--shadow-md);
}

.geb-assemblaggio-card--active {
    border-color:   var(--c-green) !important;
    background:     #f1f8f1 !important;
    box-shadow:     0 0 0 3px rgba(46,125,50,.15) !important;
}

.geb-assemblaggio-icon {
    font-size:  48px;
    flex-shrink: 0;
}

.geb-assemblaggio-info {
    flex: 1;
}

.geb-assemblaggio-info strong {
    font-size:   17px;
    font-weight: 700;
    display:     block;
    margin-bottom: 6px;
    color:       var(--c-text);
}

.geb-assemblaggio-info p {
    margin:    0;
    font-size: 13px;
    color:     var(--c-muted);
    line-height: 1.5;
}

.geb-assemblaggio-price {
    font-size:   22px;
    font-weight: 800;
    color:       var(--c-accent);
    flex-shrink: 0;
}

.geb-assemblaggio-toggle {
    flex-shrink: 0;
}

.geb-ass-status {
    display:       inline-block;
    padding:       8px 18px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   700;
    background:    var(--c-border);
    color:         var(--c-muted);
    transition:    background .2s, color .2s;
}

.geb-assemblaggio-card--active .geb-ass-status {
    background: var(--c-green);
    color:      #fff;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 700px) {
    .geb-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .geb-pill-label    { display: none; }
    .geb-pill          { padding: 5px; }
    .geb-pill-sep      { display: none; }
    .geb-step-header h2 { font-size: 18px; }
    .geb-brand-grid    { grid-template-columns: 1fr 1fr; }
    .geb-s-cat         { display: none; }
    .geb-form-grid     { grid-template-columns: 1fr; }
    .geb-assemblaggio-card { flex-wrap: wrap; gap: 14px; }
    .geb-assemblaggio-icon { font-size: 36px; }
    .geb-assemblaggio-price { font-size: 18px; }
}