/* =============================================================================
   Izimpx Configurator — design system
   Bootstrap 5 handles grid/layout, this file handles all visual styling.
   ============================================================================= */

/* ── Visibility ─────────────────────────────────────────────────────────────── */
.cfg-hidden { display: none !important; }

/* ── Configurator widget — separates from page background ───────────────────── */
#izimpx-cfg {
    background: #f8f9f9;
    border-radius: 12px;
    overflow: clip;  /* contains box-shadow without clipping sticky children */
    /* subtle inner shadow to lift it off the page */
    box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 4px 24px rgba(0,0,0,.06);
}

/* ── Hero section ───────────────────────────────────────────────────────────── */
.cfg-hero {
    background: #fff;
    border-bottom: 1px solid #ececec;
    padding: 3rem 0 2.5rem;
    text-align: center;
}
.cfg-hero-icon-wrap {
    width: 68px; height: 68px;
    background: var(--bs-primary);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; color: #fff;
    margin: 0 auto 1.25rem;
    box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb),.3);
}
.cfg-hero-title   { font-size: 1.625rem; font-weight: 700; letter-spacing: -.4px; margin-bottom: .4rem; }
.cfg-hero-subtitle { font-size: .9375rem; color: #6c757d; }

/* ── System cards grid ──────────────────────────────────────────────────────── */
.cfg-sys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 360px));
    gap: 1rem;
    justify-content: center;
    padding: 1.75rem 0 2.25rem;
}
.cfg-sys-card {
    cursor: pointer;
    border: 2px solid #e9ecef !important;
    border-radius: 16px !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    overflow: hidden;
}
.cfg-sys-card:hover {
    border-color: var(--bs-primary) !important;
    transform: translateY(-6px);
    box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,.09) !important;
}
.cfg-sys-icon-wrap {
    width: 56px; height: 56px;
    background: rgba(var(--bs-primary-rgb),.1);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--bs-primary);
    margin: 0 auto .9rem;
}
.cfg-sys-name  { font-size: .9375rem; font-weight: 700; margin-bottom: .3rem; }
.cfg-sys-desc  { font-size: .8125rem; color: #6c757d; line-height: 1.55; margin-bottom: .75rem; }
.cfg-sys-price {
    display: inline-block;
    background: var(--bs-primary); color: #fff;
    font-size: .7375rem; font-weight: 600;
    padding: 3px 12px; border-radius: 100px;
}

/* ── Steps content area ─────────────────────────────────────────────────────── */
#cfg-steps > .py-4 { padding: 1.25rem !important; }

/* ── Steps — progress bar area ──────────────────────────────────────────────── */
.cfg-topbar {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.07);
    padding: .85rem 1.25rem;
    position: sticky; top: 0; z-index: 10;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.cfg-progress-label { font-size: .78rem; color: #999; white-space: nowrap; }
/* Make progress bar more visible */
.progress { background: #e2e5e8; }

/* ── Step content area — white card on gray background ──────────────────────── */
.py-4 { padding: 1.5rem 1.25rem !important; }

/* ── Step question / hint ────────────────────────────────────────────────────  */
.cfg-step-q    { font-size: 1.2rem; font-weight: 700; letter-spacing: -.3px; margin-bottom: .3rem; }
.cfg-step-hint { font-size: .84375rem; color: #6c757d; margin-bottom: 1.4rem; }

/* ── Option cards ───────────────────────────────────────────────────────────── */
.cfg-opt-card {
    cursor: pointer;
    background: #fff;
    border: 2px solid #e4e6e8 !important;
    border-radius: 12px !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cfg-opt-card:hover           { border-color: var(--bs-primary) !important; }
.cfg-opt-card.selected {
    border-color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb),.035) !important;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb),.1) !important;
}
.cfg-opt-icon-wrap {
    width: 42px; height: 42px; flex-shrink: 0;
    background: rgba(var(--bs-primary-rgb),.1);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--bs-primary);
}
.cfg-opt-title { font-size: .875rem; font-weight: 600; line-height: 1.3; margin-bottom: .2rem; }
.cfg-opt-desc  { font-size: .78rem; color: #6c757d; line-height: 1.45; }
.cfg-opt-tag   {
    font-size: .7rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; align-self: flex-start;
    background: rgba(var(--bs-primary-rgb),.12); color: var(--bs-primary);
    padding: 3px 9px; border-radius: 100px;
}

/* ── Nav buttons area ───────────────────────────────────────────────────────── */
.cfg-nav-area  { padding-top: 1.25rem; margin-top: 1.5rem; }

/* ── Summary ────────────────────────────────────────────────────────────────── */
.cfg-sum-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.4px; }
.cfg-sum-warning {
    background: #fffbec; border: 1px solid #ffe69c !important;
    border-radius: 12px !important; font-size: .78rem; line-height: 1.6;
}
/* Summary + form: add padding since they sit on the gray cfg background */
#cfg-summary > *:first-child,
#cfg-quote-form > *:first-child { padding: 1.5rem 1.25rem 0; }
#cfg-summary,
#cfg-quote-form { padding: 0 0 1.5rem; }
.cfg-sum-table       { margin-bottom: 0; }
.cfg-sum-table td    { font-size: .84375rem; padding: .55rem .75rem; vertical-align: middle; }
.cfg-sum-table .cfg-sum-total td { font-weight: 700; border-top: 2px solid #dee2e6 !important; }
.cfg-sum-net  { font-size: 1rem; font-weight: 700; }
.cfg-sum-vat  { font-size: .78rem; color: #6c757d; }

.cfg-price-box {
    background: #111; color: #fff; border-radius: 16px; padding: 1.4rem 1.6rem;
}
.cfg-price-box-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.4); margin-bottom: .3rem; }
.cfg-price-box-main  { font-size: 2rem; font-weight: 700; letter-spacing: -1px; line-height: 1.1; }
.cfg-price-box-vat   { font-size: .82rem; color: rgba(255,255,255,.4); margin-top: .3rem; }

.cfg-sum-info {
    font-size: .8rem; color: #6c757d; line-height: 1.65;
    background: #f8f9fa; border-radius: 10px; padding: .9rem 1rem;
}
.cfg-sum-actions-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #999; }

/* ── Action buttons ─────────────────────────────────────────────────────────── */
.cfg-action-btn {
    cursor: pointer;
    border: 2px solid #e9ecef !important;
    border-radius: 14px !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cfg-action-btn:hover {
    border-color: var(--bs-primary) !important;
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.75rem rgba(var(--bs-primary-rgb),.14) !important;
}
.cfg-action-icon-wrap {
    width: 52px; height: 52px;
    background: rgba(var(--bs-primary-rgb),.1);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: var(--bs-primary);
    margin: 0 auto .7rem;
}
.cfg-action-label { font-size: .8125rem; font-weight: 600; line-height: 1.4; color: #333; }

/* ── Contact form ────────────────────────────────────────────────────────────  */
.cfg-form-card    { border-radius: 18px !important; border: 1px solid #e9ecef !important; }
.cfg-form-heading { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.3px; }
.cfg-form-sub     { font-size: .8125rem; color: #6c757d; }
.cfg-form-info    {
    background: #f8f9fa; border-radius: 8px;
    padding: .55rem .9rem; font-size: .8125rem; color: #495057;
    display: flex; align-items: center; gap: .5rem;
}

/* ── Success ────────────────────────────────────────────────────────────────── */
.cfg-success-icon  { font-size: 4.5rem; color: #198754; }
.cfg-success-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -.5px; }
.cfg-success-text  { font-size: .9375rem; color: #6c757d; max-width: 420px; margin: 0 auto; }

/* ── Honeypot ────────────────────────────────────────────────────────────────  */
.cfg-honeypot {
    position: absolute; left: -99999px; top: -99999px;
    width: 0; height: 0; opacity: 0; overflow: hidden; pointer-events: none;
}