/* Ngjyra kryesore */
:root {
  --ksc-primary:#33cc66;
  --ksc-bg:#f8fafb;
  --ksc-text:#111827;
  --ksc-muted:#6b7280;
  --ksc-card:#ffffff;
  --ksc-border:#e5e7eb;
}

.ksc-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ksc-text);background:var(--ksc-bg);border:1px solid var(--ksc-border);border-radius:16px;padding:16px;box-sizing:border-box;max-width:100%;overflow:hidden}
.ksc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ksc-brand{display:flex;align-items:center;gap:10px}
.ksc-dot{width:10px;height:10px;background:var(--ksc-primary);border-radius:999px;display:inline-block}
.ksc-title{font-weight:700}

.ksc-grid{display:grid;gap:12px}
@media (min-width:900px){
  .ksc-grid{grid-template-columns:1fr 1fr}
}

.ksc-card{background:var(--ksc-card);border:1px solid var(--ksc-border);border-radius:14px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.04);box-sizing:border-box;min-width:0}
.ksc-card-title{font-weight:700;margin-bottom:8px}

.ksc-toggle-group{display:inline-flex;border:1px solid var(--ksc-border);border-radius:10px;overflow:hidden;justify-content:center;align-items:center;box-sizing:border-box;max-width:100%}
.ksc-row.ksc-row-between{justify-content:center}
.ksc-toggle{padding:8px 14px;border:none;background:#fff;cursor:pointer;border-radius:8px;min-width:100px;white-space:nowrap;text-align:center;box-sizing:border-box;flex:1}
.ksc-toggle-active{background:var(--ksc-primary);color:#fff}

/* Make reset button visually identical to the toggle buttons */
.ksc-reset{padding:6px 10px;border:none;background:#fff;cursor:pointer;border-radius:8px}
.ksc-reset:hover{border-color:var(--ksc-border)}
.ksc-reset.ksc-active{background:var(--ksc-primary);color:#fff}

.ksc-input-row{display:flex;align-items:center;gap:8px;margin:10px 0;box-sizing:border-box}
.ksc-step{width:40px;height:40px;border:1px solid var(--ksc-border);border-radius:10px;background:#fff;flex-shrink:0}
.ksc-input{flex:1;border:1px solid var(--ksc-border);border-radius:10px;padding:10px 12px;font-size:18px;text-align:right;box-sizing:border-box;min-width:0}

.ksc-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.ksc-key{padding:16px 12px;border:1px solid var(--ksc-border);background:#fff;border-radius:10px;cursor:pointer;font-size:18px;height:56px}
.ksc-key-eq{background:var(--ksc-primary);color:#fff;border-color:var(--ksc-primary)}
.ksc-key-clear{background:#fffaf0}

.ksc-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.ksc-row-strong{font-weight:800}
.ksc-important{background:linear-gradient(90deg, rgba(51,204,102,0.04), rgba(255,255,255,0));border-radius:8px;padding:8px;margin:6px 0;font-weight:700}
.ksc-row-between{display:flex;justify-content:space-between;align-items:center}
.ksc-divider{height:1px;background:var(--ksc-border);margin:6px 0}

.ksc-out{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.ksc-switch{gap:10px}
.ksc-switcher{position:relative;width:44px;height:26px}
/* Keep the input visually hidden but make it cover the switch so clicks toggle it */
.ksc-switcher input{opacity:0;position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;z-index:2}
.ksc-switcher span{position:absolute;cursor:pointer;inset:0;background:#e5e7eb;border-radius:99px;transition:.2s;z-index:1}
.ksc-switcher span:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ksc-switcher input:checked + span{background:var(--ksc-primary)}
.ksc-switcher input:checked + span:before{transform:translateX(18px)}

.ksc-hint{font-size:12px;color:var(--ksc-muted);margin-top:8px}
.ksc-label-small{font-size:12px;color:var(--ksc-muted)}

.ksc-table{width:100%;border-collapse:separate;border-spacing:0}
.ksc-table th,.ksc-table td{border:1px solid var(--ksc-border);padding:10px;text-align:right}
.ksc-table thead th{background:#f3f4f6;font-weight:700}

.ksc-share textarea.ksc-summary{width:100%;min-height:96px;border:1px solid var(--ksc-border);border-radius:10px;padding:10px;background:#fdfdfd;font-family:inherit;box-sizing:border-box;resize:vertical}
.ksc-share-actions{display:flex;gap:10px;margin-top:8px;box-sizing:border-box}
.ksc-btn{padding:8px 12px;border:1px solid var(--ksc-border);background:#fff;border-radius:10px;cursor:pointer;box-sizing:border-box;flex:1;text-align:center;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s ease}
.ksc-btn:hover{border-color:var(--ksc-primary);color:var(--ksc-primary)}
.ksc-btn.ksc-wa{background:#e8fff0;border-color:#bce5cd;color:#25d366}
.ksc-btn.ksc-wa:hover{background:#d4f7e0;border-color:#25d366}
.ksc-btn.ksc-email{background:#f0f8ff;border-color:#bdd7ee;color:#0066cc}
.ksc-btn.ksc-email:hover{background:#e0f0ff;border-color:#0066cc}

.ksc-icon{width:18px;height:18px;flex-shrink:0}
.ksc-btn-text{font-size:14px;font-weight:500}

/* Hide text on very small screens, show only icons */
@media (max-width:480px){
  .ksc-btn{padding:10px;min-width:44px}
  .ksc-btn-text{display:none}
  .ksc-icon{width:20px;height:20px}
}

/* Share section inside results card */
.ksc-share-section{margin-top:12px;margin-bottom:16px}
.ksc-share-title{font-weight:700;margin-bottom:8px;font-size:14px;color:var(--ksc-muted)}
.ksc-share-section textarea.ksc-summary{width:100%;height:auto;min-height:100px;border:1px solid var(--ksc-border);border-radius:10px;padding:10px;background:#fdfdfd;font-family:inherit;box-sizing:border-box;resize:vertical;margin-bottom:8px;line-height:1.4;overflow:hidden}
.ksc-share-section .ksc-share-actions{display:flex;gap:8px;box-sizing:border-box;flex-wrap:nowrap}

/* Wide screens: side-by-side layout for share section */
@media (min-width:768px){
  .ksc-share-section{display:grid;grid-template-columns:3fr 1fr;gap:12px;align-items:start}
  .ksc-share-title{grid-column:1 / -1}
  .ksc-share-section textarea.ksc-summary{grid-column:1;margin-bottom:0;height:calc(3 * (36px + 2px) + 2 * 8px);min-height:calc(3 * (36px + 2px) + 2 * 8px)}
  .ksc-share-section .ksc-share-actions{grid-column:2;flex-direction:column;margin-bottom:0}
}

/* Legacy share card styles (kept for backward compatibility) */
.ksc-share{grid-column:1 / -1;display:grid;gap:12px;box-sizing:border-box}
.ksc-share .ksc-card-title{grid-column:1 / -1}

/* Mobile-first: single column layout */
.ksc-share .ksc-summary{grid-column:1 / -1;box-sizing:border-box;min-width:0}
.ksc-share .ksc-share-actions{grid-column:1 / -1;align-self:start;display:flex;flex-direction:row;justify-content:flex-start;flex-wrap:wrap}

/* Desktop: two column layout for share card content */
@media (min-width:600px){
  .ksc-share{grid-template-columns:1fr auto}
  .ksc-share .ksc-summary{grid-column:1 / 2}
  .ksc-share .ksc-share-actions{grid-column:2 / 3;flex-direction:column;flex-wrap:nowrap}
}

/* Wide screens: place share card in second column with results */
@media (min-width:900px){
  .ksc-share{grid-column:2 / 3;grid-template-columns:1fr auto}
}