:root{
  --ui-text:#0f172a; --ui-muted:#64748b; --ui-border:#d7dfea; --ui-bg:#fff;
  --ui-focus:#3b82f6; --ui-good:#22c55e; --ui-bad:#ef4444; --ui-shadow:0 10px 30px rgba(15,23,42,.06);

  /* Defaults (overridden by inline vars from settings) */
  --ui-font-base:16px;
  --ui-font-label:13px;
  --ui-label-weight:600;
  --ui-input-h:44px;
  --ui-radius:12px;
  --ui-border-w:1.5px;
}

/* Scope: keep fonts & resets local to the widget */
.ielts-wrap,
.ielts-wrap *{
  font-family: inherit;
  box-sizing: border-box;
}

/* Layout */
.ielts-wrap{max-width:1000px;margin:24px auto;padding:0 16px;font-size:var(--ui-font-base)}
.ielts-tabs{border:1px solid var(--ui-border);border-radius:var(--ui-radius);overflow:hidden;background:linear-gradient(180deg,#fff,#fafcff);box-shadow:var(--ui-shadow)}
.ielts-tab-bar{display:flex;gap:8px;background:#f8fafc;border-bottom:1px solid var(--ui-border);padding:8px}
.ielts-tab{flex:1;padding:12px 16px;background:#eef2ff;border:1px solid transparent;border-radius:calc(var(--ui-radius) - 6px);cursor:pointer;font-weight:800}
.ielts-tab.active{background:#fff;border-color:var(--ui-border);box-shadow:var(--ui-shadow);color:#2563eb}
.ielts-tab.disabled{opacity:.55;cursor:not-allowed}
.ielts-panel{display:none;padding:28px;background:#fff}
.ielts-panel.active{display:block}
.ielts-closed-note{padding:18px;background:linear-gradient(180deg,#fff7ed,#fff2e0);border:1px solid #ffedd5;border-radius:var(--ui-radius);color:#9a3412;font-weight:700}

/* Grid */
.ielts-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.ielts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.ielts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Fields */
.ui-field{display:block;margin:16px 0}
.ui-label{display:block;font-weight:var(--ui-label-weight);font-size:var(--ui-font-label);line-height:1.2;color:var(--ui-text);margin-bottom:6px}
.ui-control{position:relative}

/* Stronger reset for inputs/selects to avoid theme bleed */
.ielts-wrap .ui-input,
.ielts-wrap .ui-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:100%;
  height:var(--ui-input-h);
  border:var(--ui-border-w) solid var(--ui-border);
  border-radius:var(--ui-radius);
  background:var(--ui-bg);
  padding:10px 44px 10px 14px;
  font-weight:600;
  transition:border .2s,box-shadow .2s,background .2s;
  color:inherit;
}
.ui-input::placeholder{color:#94a3b8}
.ui-input:focus,.ui-select:focus{outline:none;border-color:var(--ui-focus);box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.ui-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2312233' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:18px;padding-right:42px}

/* Status icons + states */
.ui-status{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:none}
.ui-field.is-valid .ui-status, .ui-field.is-invalid .ui-status{display:block}
.ui-field.is-valid .ui-status{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%2322c55e' stroke-width='2'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px 22px no-repeat}
.ui-field.is-valid .ui-input,.ui-field.is-valid .ui-select{border-color:var(--ui-good);box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.ui-field.is-invalid .ui-status{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23ef4444' stroke-width='2'/%3E%3Cline x1='12' y1='7' x2='12' y2='13' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.8' fill='%23ef4444' /%3E%3C/svg%3E") center/22px 22px no-repeat}
.ui-field.is-invalid .ui-input,.ui-field.is-invalid .ui-select{border-color:var(--ui-bad);box-shadow:0 0 0 4px rgba(239,68,68,.15)}

/* smaller error labels */
.ui-error{display:none;margin-top:4px;color:var(--ui-bad);font-weight:600;font-size:.75rem;line-height:1.25}
.ui-field.is-invalid .ui-error{display:block}

/* Buttons (use same radius) */
.btn-outline{background:#fff;border:1px solid #e2e8f0;padding:10px 14px;border-radius:var(--ui-radius);cursor:pointer;font-weight:800}
.btn-primary{background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff;border:0;padding:10px 16px;border-radius:var(--ui-radius);cursor:pointer;font-weight:800}
.ielts-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

/* Loading */
.ielts-submit.loading{position:relative;pointer-events:none;opacity:.85}
.ielts-submit.loading::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid rgba(255,255,255,.6);border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.ielts-form-msg{margin-top:10px;font-weight:800}
.ielts-form-msg.ok{color:#16a34a}.ielts-form-msg.err{color:#ef4444}

/* Payment panel */
.ielts-payment-box{display:flex;gap:20px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.ielts-pay-left img{width:160px;height:auto;border-radius:var(--ui-radius);border:1px solid var(--ui-border);box-shadow:var(--ui-shadow)}
.ielts-exam-date{background:#f8fafc;border:1px dashed var(--ui-border);padding:10px;border-radius:var(--ui-radius)}

/* Modal & Calendar */
.ielts-modal{position:fixed;inset:0;display:none;z-index:9999}
.ielts-modal[aria-hidden="false"]{display:block}
.ielts-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.55)}
.ielts-modal-dialog{position:relative;background:#fff;border-radius:var(--ui-radius);max-width:480px;width:92vw;margin:10vh auto;box-shadow:var(--ui-shadow);display:flex;flex-direction:column;overflow:hidden}
.ielts-modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e2e8f0}
.ielts-modal-body{padding:16px;text-align:center}
.ielts-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e2e8f0}
.ok-icon{display:flex;align-items:center;justify-content:center;margin:6px auto 12px;width:76px;height:76px;border-radius:50%;border:3px solid var(--ui-good)}
.ok-icon svg{width:38px;height:38px}

/* Calendar */
.ielts-calendar{border:1px solid #e2e8f0;border-radius:var(--ui-radius);overflow:hidden}
.cal-header{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;padding:8px 12px;border-bottom:1px solid #e2e8f0}
.cal-header .month{font-weight:900;color:#0f172a}
.cal-header button{background:#fff;border:1px solid #e2e8f0;border-radius:calc(var(--ui-radius) - 8px);padding:8px 10px;cursor:pointer}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px 8px 0 8px;font-size:.85rem;color:#64748b}
.cal-weekdays div{text-align:center;font-weight:800}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px}
.cal-day{padding:12px;border-radius:calc(var(--ui-radius) - 8px);text-align:center;border:1px solid #e2e8f0;background:#ffffff;color:#0f172a}
.cal-day.disabled{opacity:.45;filter:grayscale(1)}
.cal-day.allowed{background:#dcfce7;border-color:#86efac;cursor:pointer}
.cal-day.selected{outline:3px solid #2563eb}

/* Title row & slot badge */
.ielts-title-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.slot-badge{background:#eef2ff; color:#1d4ed8; border:1px solid #c7d2fe; font-weight:800; border-radius:999px; padding:6px 10px; line-height:1}

/* Full days helper (if you later mark full days in JS) */
.cal-day.full{opacity:.5; position:relative;}
.cal-day.full::after{content:'FULL';display:block;font-size:.65rem;color:#ef4444;font-weight:800;margin-top:4px}
/* Subheading under PNP title */
.ielts-subhead{
  margin-top:-6px;
  margin-bottom:12px;
  color:var(--ui-muted);
  font-weight:700;
  font-size:.9rem;
}