/* Modern minimal UI — RTL friendly */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root{
  --bg1: #f6fbf9;
  --bg2: #edf7f4;

  /* Brand */
  --brand-dark: #062824;
  --brand-deep: #0f4f47;
  --brand-primary: #17947b;
  --brand-accent: #06aa89;
  --brand-soft: #e9f8f4;

  --text-dark: #062824;
  --text-title: #0a332e;
  --text-body: #31554f;
  --text-soft: #6b7f7b;
  --text-muted: #8aa19c;
  --text-white: #ffffff;

  --card: #ffffff;
  --line: rgba(6, 40, 36, .10);

  --danger: #ef4444;
  --danger-700: #dc2626;
  --secondary: #334155;
  --secondary-700: #1f2937;

  --r: 16px;
  --shadow-sm: 0 10px 24px rgba(2, 6, 23, .06);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:"Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text-dark);
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(23,148,123,.14), transparent 60%),
    radial-gradient(900px 480px at -10% 20%, rgba(6,170,137,.08), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
}

.container{
  max-width:1120px;
  margin:28px auto;
  padding:0 16px;
}

.card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
}

h1,h2{
  margin:0 0 10px;
  letter-spacing:-.2px;
}

h1{
  font-size:22px;
  color:var(--text-title);
}

h2{
  font-size:18px;
  color:var(--text-title);
}

small{
  color:var(--text-muted);
  line-height:1.4;
}

hr{
  border:0;
  border-top:1px solid var(--line);
  margin:14px 0;
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.col{
  flex:1;
  min-width:260px;
}

label{
  font-weight:800;
  font-size:13px;
  color:var(--text-dark);
}

input,select,textarea,button{
  font:inherit;
}

input,select,textarea{
  width:auto;
  padding:10px 12px;
  border:1px solid rgba(6,40,36,.14);
  border-radius:14px;
  background:rgba(255,255,255,.95);
  color:var(--text-dark);
  outline:0;
  transition:.15s ease;
}

textarea{
  width:100%;
  min-height:92px;
  resize:vertical;
}

input:focus,select:focus,textarea:focus{
  border-color:rgba(23,148,123,.55);
  box-shadow:0 0 0 4px rgba(23,148,123,.14);
}

.btn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, var(--brand-primary), var(--brand-deep));
  color:var(--text-white);
  padding:10px 14px;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(23,148,123,.22);
  transition:.15s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(23,148,123,.26);
}

.btn:active{
  transform:translateY(0px);
  box-shadow:0 10px 22px rgba(23,148,123,.20);
}

.btn.secondary{
  background:linear-gradient(135deg, var(--secondary), var(--secondary-700));
  box-shadow:0 10px 22px rgba(2,6,23,.18);
}

.btn.danger{
  background:linear-gradient(135deg, var(--danger), var(--danger-700));
  box-shadow:0 10px 22px rgba(239,68,68,.18);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand-primary);
  border:1px solid rgba(23,148,123,.20);
  font-weight:900;
  font-size:12px;
}

/* table */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}

th,td{
  padding:10px;
  border-bottom:1px solid rgba(6,40,36,.08);
  vertical-align:top;
  text-align:right;
  font-size:13px;
}

thead th{
  background:rgba(23,148,123,.06);
  color:var(--text-dark);
  font-weight:900;
  position:sticky;
  top:0;
  z-index:1;
}

tbody tr:nth-child(odd){
  background:rgba(2,6,23,.02);
}

tbody tr:hover{
  background:rgba(23,148,123,.06);
}

.details .d{
  margin-top:6px;
}

.details textarea{
  min-height:74px;
}

/* builder: compact helpers */
.btn.btn-sm{
  padding:8px 10px;
  border-radius:12px;
  font-size:13px;
}

.btn.btn-xs{
  padding:6px 10px;
  border-radius:12px;
  font-size:12px;
  box-shadow:none;
}

.mini-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}

.mini-table th,.mini-table td{
  padding:8px 10px;
  font-size:13px;
}

.mini-table thead th{
  background:rgba(23,148,123,.06);
  font-weight:900;
}

.ce-title{
  font-weight:1000;
  font-size:13px;
}

.ce-bulk summary{
  cursor:pointer;
}

.ce-bulk summary small{
  color:var(--text-muted);
  font-weight:700;
}

/* ===== Stage 2: wizard (sections + progress) ===== */
.progress-wrap{
  margin:0 0 14px;
}

.progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.progress-meta span{
  font-weight:900;
  font-size:12px;
  color:var(--text-muted);
}

.progress{
  height:12px;
  border-radius:999px;
  background:rgba(6,40,36,.08);
  overflow:hidden;
  border:1px solid rgba(6,40,36,.10);
}

.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(135deg, var(--brand-primary), var(--brand-deep));
  transition:width .2s ease;
}

.page{display:none;}
.page.active{display:block;}
.page.is-hidden{display:none !important;}

.section-head{
  margin:4px 0 12px;
}

.section-head h2{
  margin:0 0 6px;
  font-size:18px;
}

.section-head p{
  margin:0;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.5;
}

.wizard-nav{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
}

.wizard-nav .left{
  display:flex;
  gap:10px;
  align-items:center;
}

.wizard-nav .right{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Question wrapper */
.q{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid transparent;
}

.q.q-error{
  border-color:rgba(239,68,68,.38);
  background:rgba(239,68,68,.05);
}

.q .q-err{
  display:none;
  color:var(--danger-700);
  font-weight:900;
  font-size:12px;
  margin-top:6px;
}

.q.q-error .q-err{
  display:block;
}

/* ===== Conditional hide ===== */
.is-hidden{
  display:none !important;
}

/* ===== Likert ===== */
.likert{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.likert-item{
  position:relative;
}

.likert-item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.likert-item span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(6,40,36,.14);
  background:rgba(255,255,255,.95);
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  transition:.15s ease;
  min-width:84px;
}

.likert-item input:checked + span{
  border-color:rgba(23,148,123,.55);
  box-shadow:0 0 0 4px rgba(23,148,123,.14);
  background:rgba(23,148,123,.08);
}

/* ===== Searchable dropdown (combo) ===== */
.combo{
  position:relative;
  max-width:520px;
}

.combo-input{
  width:100%;
}

.combo-list{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:50;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(6,40,36,.14);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  max-height:260px;
  overflow:auto;
  display:none;
}

.combo.open .combo-list{
  display:block;
}

.combo-opt{
  width:100%;
  text-align:right;
  padding:10px 12px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-weight:800;
}

.combo-opt:hover{
  background:rgba(23,148,123,.08);
}

.combo-hint{
  display:block;
  margin-top:6px;
}

/* ===== Select-multiple search ===== */
.sm-filter{
  width:100%;
  margin-top:6px;
  margin-bottom:8px;
}

/* ===== Rating (stars) ===== */
.rating{
  display:inline-flex;
  gap:6px;
  direction:ltr;
  align-items:center;
  margin-top:8px;
}

.rating input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.rating label{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(6,40,36,.14);
  background:rgba(255,255,255,.95);
  cursor:pointer;
  font-size:18px;
  transition:.15s ease;
}

.rating label:hover{
  transform:translateY(-1px);
}

.rating label.is-on{
  background:rgba(23,148,123,.10);
  border-color:rgba(23,148,123,.40);
}