/* Base - theme-aware variables (fallbacks provided) */
:root{
    --saas-primary: var(--saas-primary, #6b46ff);
    --saas-accent: var(--saas-accent, #10b981);
    --saas-muted: var(--saas-muted, #6b7280);
    --saas-panel-bg: var(--saas-panel-bg, #fff);
    --saas-left-bg: var(--saas-left-bg, #f6f7fb);
    --saas-card-border: var(--saas-card-border, #eef2ff);
    --saas-backdrop: rgba(10,11,13,0.6);
}

#saas-estimator-root { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

.saas-btn {
    background: #f3f3f3;
    color: #000;
    padding: 8px 16px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.2s, border-color 0.2s;
}

.saas-btn:hover {
    background: #e5e5e5;
    border-color: #999;
}

/* Button Size Variants */
.saas-btn-small {
    padding: 5px 10px;
    font-size: 12px;
}

.saas-btn-medium {
    padding: 8px 16px;
    font-size: 13px;
}

.saas-btn-large {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
}

.saas-modal {
    position:fixed;
    inset:0;
    background:var(--saas-backdrop);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:30px;
}

.saas-modal.active { display:flex; }

.saas-box {
    background:transparent;
    width:100%;
    max-width:1100px;
    border-radius:12px;
    display:flex;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(2,6,23,0.6);
}

.saas-left { flex:1; background:var(--saas-left-bg); max-height:80vh; overflow:auto; padding:26px 22px; }
.a-left-inner{ background:var(--saas-panel-bg); border-radius:10px; padding:18px; }
.saas-right { width:360px; background:var(--saas-panel-bg); padding:26px; border-radius:8px; margin-left:18px; max-height:80vh; overflow:auto; }

.saas-header-left{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.saas-header-left h2{ margin:0; font-size:20px; }
.saas-close-btn{ background:none; border:none; font-size:20px; color:#94a3b8; cursor:pointer; }

.saas-item{
    display:flex; flex-direction:column; gap:10px; padding:18px; margin-bottom:12px; border-radius:12px; border:1.5px solid var(--saas-card-border); background:var(--saas-card-bg, #fbfbff);
}
.saas-item.active{ border-color:var(--saas-primary); box-shadow:0 6px 18px rgba(107,70,255,0.06); }
.service-main{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.service-main-left{ max-width:72%; }
.service-main-left strong{ display:block; font-size:16px; margin-bottom:6px; }
.service-desc{ color:var(--saas-muted); font-size:13px; }
.price-pill{ color:var(--saas-primary); font-weight:700; font-size:15px; display:flex; align-items:center; gap:10px; }

.saas-checkbox-container{ display:inline-flex; align-items:center; justify-content:center; position:relative; }
.saas-checkbox-container input{ position:absolute; opacity:0; cursor:pointer; }
.checkmark{ width:28px; height:28px; border-radius:8px; border:2px solid rgba(199,185,255,0.8); display:inline-flex; background:transparent; align-items:center; justify-content:center; position:relative; }
.saas-checkbox-container input:checked + .checkmark{ background:var(--saas-primary); border-color:var(--saas-primary); }
.checkmark:after{ content:'✓'; color:#3b9b40; font-size:16px; font-weight:bold; line-height:1; display:none; }
.saas-checkbox-container input:checked + .checkmark:after{ display:inline; }

.qty-input{ display:none; }

/* Right column */
.summary-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.summary-top .count{ color:var(--saas-muted); }
.summary-box{ background:var(--saas-left-bg); padding:10px; border-radius:8px; margin-bottom:14px; }
.summary-list{ display:flex; flex-direction:column; gap:10px; max-height:220px; overflow:auto; padding-right:8px; }
.summary-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.summary-item .tag{ display:none; }
.saas-total-row{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.saas-total-row .total-amount{ color:var(--saas-primary); font-weight:800; font-size:20px; }
.book-btn{ width:100%; background:var(--saas-accent); color:var(--saas-btn-color, #fff); padding:14px; border-radius:12px; border:none; font-weight:700; margin-top:18px; }

@media(max-width:900px){
    .saas-box{ flex-direction:column; }
    .saas-right{ width:100%; margin-left:0; margin-top:12px; }
}

.saas-page-container{ width:100%; padding:20px; }
.saas-box-page{ display:flex; gap:20px; margin:0 auto; }
@media(max-width:900px){
    .saas-box-page{ flex-direction:column; }
    .saas-page-container .saas-right{ width:100%; }
}