/* Commission calculator embed — HAND-AUTHORED to the pricing-page DNA
   (content/new-pages/DESIGN_STANDARDS.md). [DESIGN 2026-07-10]
   The importer (tools/import-native-tools.php) regenerates the fragment and
   JS but NEVER this file. Markup ids/classes come from the tool source at
   /home/leadlo5/tools.leadlocate.com/free/commission-calculator/. */

#llcc-embed{
  --primary:#259457;
  display:block;width:100%;max-width:1170px;margin:0 auto;padding:48px 20px 0;
  font-family:Rubik,Arial,sans-serif;font-size:16px;line-height:1.7;color:#33434e;
  box-sizing:border-box;background:transparent;
}
/* Hairline divider between the tool and the next page section
   (owner 2026-07-10: keep the transition clean and organized). */
#llcc-embed::after{
  content:'';display:block;height:1px;background:#e3e9ed;margin:56px 0 0;
}
#llcc-embed *,#llcc-embed *::before,#llcc-embed *::after{box-sizing:border-box}

/* --- structure resets (the old standalone app chrome goes away) --- */
#llcc-embed #mainContainer{display:block;background:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;max-width:none;overflow:visible}
#llcc-embed #scrollArea{display:block;background:none;border:0;box-shadow:none;padding:0;margin:0;overflow:visible}
#llcc-embed .section{margin:0 0 44px}

/* --- headings: site H2 scale, mixed case --- */
#llcc-embed .header{background:none;border:0;border-radius:0;padding:0;margin:0 0 26px;text-align:left}
#llcc-embed .header h2{margin:0;font-size:25px;line-height:31px;font-weight:600;color:#20303c;letter-spacing:0}
#llcc-embed .section-title,
#llcc-embed .deal-history-title{display:block;font-size:25px;line-height:31px;font-weight:600;color:#20303c;margin:0 0 18px;text-transform:none;letter-spacing:0}

/* --- summary stat cards: white cards, big green values --- */
#llcc-embed .summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
#llcc-embed .summary-card{
  background:#fff;border:1px solid #e3e9ed;border-radius:10px;padding:18px 14px 15px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);text-align:center;min-width:0;
}
#llcc-embed .summary-card .label{font-size:13px;font-weight:700;color:#5b6b76;letter-spacing:.02em;line-height:1.35}
#llcc-embed .summary-card .value{font-size:26px;line-height:1.15;font-weight:700;color:#1d7a48;white-space:nowrap}
/* Total Commission is the number that matters: give it the highlight card */
#llcc-embed .summary-card:last-child{background:#e9f5ee;border:2px solid #259457}

/* --- deal history --- */
#llcc-embed .deal-history-section{margin:0 0 44px;background:none;border:0;padding:0;box-shadow:none}
#llcc-embed .deal-history-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
#llcc-embed .salesperson-inline{display:flex;align-items:center;gap:10px}
#llcc-embed .salesperson-inline label{font-size:13px;font-weight:700;color:#5b6b76;margin:0}
#llcc-embed .salesperson-name-label-inline{font-size:15.5px;font-weight:600;color:#1d7a48}
#llcc-embed .deal-list{display:grid;gap:14px}
#llcc-embed .deal-card{
  background:#fff;border:1px solid #e3e9ed;border-radius:10px;padding:16px 18px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
#llcc-embed .deal-card-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
#llcc-embed .deal-card-header>span{display:inline-flex;align-items:center;background:#f5f8f6;border:1px solid #e3e9ed;border-radius:6px;padding:3px 10px;font-size:13.5px;font-weight:500;color:#33434e;max-width:100%}
#llcc-embed .deal-number{background:#259457!important;border-color:#259457!important;color:#fff!important;font-weight:700!important}
#llcc-embed .deal-card-header .badge{background:#259457;border:0;color:#fff;font-weight:600}
#llcc-embed .deal-half-indicator{background:#de9600!important;border-color:#de9600!important;color:#fff!important;font-weight:600!important}
#llcc-embed .deal-vehicle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
#llcc-embed .deal-actions{margin-left:auto;background:none!important;border:0!important;padding:0!important}
#llcc-embed .remove-btn{background:none;border:0;cursor:pointer;font-size:17px;color:#5b6b76;padding:4px 6px;border-radius:6px;line-height:1;transition:color .15s ease,background .15s ease}
#llcc-embed .remove-btn:hover{color:#de0000;background:#fdeaea}
#llcc-embed .deal-details-table{width:100%;border-collapse:collapse;font-size:15px}
#llcc-embed .deal-details-table td{padding:5px 10px 5px 0;vertical-align:top;border:0}
#llcc-embed .deal-details-table td.label{color:#5b6b76;font-size:13px;font-weight:700;white-space:nowrap}
#llcc-embed .deal-details-table td.value{color:#20303c;font-weight:500}
#llcc-embed .deal-details-table td.section-header{padding-top:12px;font-size:13px;font-weight:700;color:#1d7a48;letter-spacing:.02em}
#llcc-embed .backend-list{margin:0;padding-left:18px;font-size:14.5px;color:#33434e}
#llcc-embed .deal-total{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:#20303c;padding-top:12px}
/* the amount chip: the site's generic Bootstrap .badge is dark gray — restyle */
#llcc-embed .deal-total .badge{
  background:#e9f5ee;color:#1d7a48;border:1px solid #259457;border-radius:50px;
  padding:5px 16px;font-size:17px;font-weight:700;line-height:1.3;text-shadow:none;
}

/* --- print button: site ghost button --- */
#llcc-embed .print-btn{
  display:inline-block;margin:18px auto 0;background:transparent;color:#259457;
  border:2px solid #259457;border-radius:50px;padding:11px 32px;
  font-family:Rubik,Arial,sans-serif;font-size:17px;font-weight:500;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
#llcc-embed .print-btn:hover{background:#259457;color:#fff}
#llcc-embed .deal-history-section .print-btn{display:block}

/* --- add-deal form: soft panel, np-calc field style --- */
#llcc-embed #commissionSection{background:#f5f8f6;border:1px solid #e3e9ed;border-radius:12px;padding:28px 30px 30px;margin-bottom:0}
#llcc-embed .deal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
#llcc-embed .deal-form-col{min-width:0}
#llcc-embed .deal-form-row{display:block;margin:0 0 15px}
#llcc-embed .deal-form-row label{display:block;font-size:13px;font-weight:700;color:#5b6b76;margin:0 0 5px}
#llcc-embed input[type=text],
#llcc-embed input[type=number],
#llcc-embed input[type=date],
#llcc-embed select{
  width:100%;padding:10px 12px;border:1px solid #d9e1e6;border-radius:7px;
  font-family:Rubik,Arial,sans-serif;font-size:15.5px;color:#20303c;background:#fff;
  outline:none;transition:border-color .15s ease,box-shadow .15s ease;height:auto;margin:0;
}
#llcc-embed input:focus,#llcc-embed select:focus{border-color:#259457;box-shadow:0 0 0 3px rgba(37,148,87,.14)}
#llcc-embed input::placeholder{color:#9aa7b0;opacity:1}
#llcc-embed .salesperson-inline input{width:220px;max-width:56vw}

/* backend product row: inline label/field pairs + Add */
#llcc-embed .backend-row{display:grid;grid-template-columns:auto 1.4fr auto 1fr auto .8fr auto;gap:10px 12px;align-items:center;margin:6px 0 4px;padding-top:18px;border-top:1px solid #e3e9ed}
#llcc-embed .backend-row label{font-size:13px;font-weight:700;color:#5b6b76;margin:0;white-space:nowrap}
#llcc-embed .add-backend-btn{
  background:transparent;color:#259457;border:2px solid #259457;border-radius:50px;
  padding:8px 22px;font-family:Rubik,Arial,sans-serif;font-size:14.5px;font-weight:500;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
#llcc-embed .add-backend-btn:hover{background:#259457;color:#fff}
#llcc-embed .backend-products-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0}
#llcc-embed .backend-products-list li{background:#fff;border:1px solid #e3e9ed;border-radius:50px;padding:6px 14px;font-size:14px;color:#33434e;display:inline-flex;align-items:center;gap:8px}
#llcc-embed .backend-products-list li button{background:none;border:0;color:#5b6b76;cursor:pointer;font-size:15px;padding:0;line-height:1}
#llcc-embed .backend-products-list li button:hover{color:#de0000}

/* deal type row */
#llcc-embed .deal-type-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 0;padding-top:16px;border-top:1px solid #e3e9ed}
#llcc-embed .deal-type-row label{font-size:13px;font-weight:700;color:#5b6b76;margin:0}
#llcc-embed .deal-type-row select{width:160px}
#llcc-embed .deal-type-row input{flex:1 1 220px;max-width:320px}

/* Add Deal: site primary button */
#llcc-embed .add-btn{
  display:block;margin:22px auto 0;background:#259457;color:#fff;border:0;border-radius:50px;
  padding:13px 44px;font-family:Rubik,Arial,sans-serif;font-size:18px;font-weight:500;
  cursor:pointer;transition:background .15s ease;
}
#llcc-embed .add-btn:hover{background:rgba(37,148,87,.85)}
#llcc-embed .add-btn b{font-weight:500}

/* --- mobile --- */
@media (max-width:900px){
  #llcc-embed .summary-grid{grid-template-columns:1fr 1fr}
  #llcc-embed .deal-form-grid{grid-template-columns:1fr}
  #llcc-embed .backend-row{grid-template-columns:auto 1fr;padding-top:16px}
  #llcc-embed .backend-row .add-backend-btn{grid-column:1/-1;justify-self:start}
  #llcc-embed .deal-vehicle{max-width:100%;white-space:normal}
}
@media (max-width:600px){
  #llcc-embed{padding:32px 12px 0;font-size:15.5px}
  #llcc-embed .header h2,#llcc-embed .section-title,#llcc-embed .deal-history-title{font-size:22px;line-height:28px}
  #llcc-embed .summary-grid{grid-template-columns:1fr 1fr;gap:10px}
  #llcc-embed .summary-card .value{font-size:21px}
  #llcc-embed #commissionSection{padding:20px 16px 22px}
  #llcc-embed .deal-details-table td{display:inline-block;padding:3px 12px 3px 0}
  #llcc-embed .deal-details-table tr{display:block;margin-bottom:6px}
  #llcc-embed .salesperson-inline{width:100%}
  #llcc-embed .salesperson-inline input{flex:1;width:auto;max-width:none}
  #llcc-embed .add-btn,#llcc-embed .print-btn{width:100%}
  #llcc-embed .deal-type-row input{max-width:none}
}