/* Restaurant Tasks – polished responsive UI */
.rtasks-wrap{
  --rt-text:#1f2228;
  --rt-muted:#6b7280;
  --rt-line:#d8dce3;
  --rt-surface:#ffffff;
  --rt-surface-soft:#f8fafc;
  --rt-strong:#0f172a;
  --rt-strong-2:#020617;
  --rt-focus:rgba(14, 116, 144, .28);
  --rt-danger:#c1121f;
  --rt-danger-soft:#ffe9ec;
  --rt-ok:#1f7a47;
  --rt-no:#9f1239;
  --rt-na:#7c5a12;
  --rt-space:14px;
  --rt-card-pad:calc(var(--rt-space) + 4px);
  --rt-card-radius:calc(var(--rt-card-pad) + 10px);
  --rt-control-py:14px;
  --rt-control-px:16px;
  --rt-control-radius:calc(var(--rt-control-py) + 10px);
  max-width:840px;
  margin:0 auto;
  padding:20px 14px 24px;
  color:var(--rt-text);
  font-family:"Avenir Next","Nunito Sans","Segoe UI","Helvetica Neue",sans-serif;
}

.rtasks-card{
  background:linear-gradient(180deg,var(--rt-surface) 0%,#fbfdff 100%);
  border:1px solid var(--rt-line);
  border-radius:var(--rt-card-radius);
  padding:var(--rt-card-pad);
  margin:14px 0;
  box-shadow:0 2px 16px rgba(15,23,42,.06);
}

.rtasks-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.rtasks-header h2{
  margin:0;
  font-size:clamp(28px, 3.1vw, 44px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--rt-strong);
}

.rtasks-push{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
}

.rtasks-row{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rtasks-row label{
  font-size:clamp(17px, 2.1vw, 26px);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--rt-strong);
}

.rtasks-row input[type="text"],
.rtasks-row select,
.rtasks-row textarea{
  width:100%;
  padding:var(--rt-control-py) var(--rt-control-px);
  border-radius:var(--rt-control-radius);
  border:1px solid #c6ccd6;
  background:var(--rt-surface-soft);
  color:var(--rt-text);
  font-size:clamp(17px, 2.1vw, 20px);
  line-height:1.25;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.rtasks-row input::placeholder,
.rtasks-row textarea::placeholder{
  color:#8d96a5;
}

.rtasks-row select{
  appearance:none;
  padding-right:52px;
  background-image:
    linear-gradient(45deg, transparent 50%, #677082 50%),
    linear-gradient(135deg, #677082 50%, transparent 50%);
  background-position:
    calc(100% - 26px) calc(50% - 4px),
    calc(100% - 19px) calc(50% - 4px);
  background-size:8px 8px, 8px 8px;
  background-repeat:no-repeat;
}

.rtasks-row textarea{
  min-height:130px;
  resize:vertical;
}

.rtasks-row input[type="text"]:focus,
.rtasks-row select:focus,
.rtasks-row textarea:focus{
  outline:none;
  border-color:#0ea5a3;
  background:#fff;
  box-shadow:0 0 0 4px var(--rt-focus);
}

.rtasks-btn{
  --rt-btn-py:12px;
  --rt-btn-px:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:var(--rt-btn-py) var(--rt-btn-px);
  border-radius:calc(var(--rt-btn-py) + 16px);
  border:1px solid #b9c1ce;
  background:linear-gradient(180deg,#fff,#f4f7fb);
  color:#111827;
  cursor:pointer;
  font-size:clamp(17px, 2.1vw, 22px);
  font-weight:600;
  letter-spacing:-.01em;
  transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}

.rtasks-btn:hover{
  border-color:#8f9aad;
  box-shadow:0 4px 16px rgba(15,23,42,.12);
}

.rtasks-btn:active{
  transform:translateY(1px);
}

.rtasks-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

.rtasks-btn-primary{
  --rt-btn-py:16px;
  background:linear-gradient(180deg,var(--rt-strong),var(--rt-strong-2));
  color:#fff;
  border-color:var(--rt-strong);
}

.rtasks-help-btn{
  width:56px;
  height:56px;
  border-radius:28px;
  border:1px solid #b9c1ce;
  background:#fff;
  color:#111827;
  cursor:pointer;
  font-size:27px;
  font-weight:700;
  line-height:1;
  transition:box-shadow .15s ease, transform .08s ease;
}

.rtasks-help-btn:hover{
  box-shadow:0 4px 14px rgba(15,23,42,.12);
}

.rtasks-help-popup{
  position:absolute;
  top:66px;
  right:0;
  z-index:20;
  background:#fff;
  border:1px solid var(--rt-line);
  border-radius:22px;
  padding:14px;
  box-shadow:0 10px 30px rgba(15,23,42,.18);
  width:min(380px,92vw);
}

.rtasks-help-popup ul{
  margin:10px 0 12px 20px;
  padding:0;
}

.rtasks-help-popup li{
  margin:0 0 8px 0;
  font-size:14px;
  color:#334155;
}

.rtasks-muted{
  color:var(--rt-muted);
  font-size:14px;
}

.rtasks-error{
  color:var(--rt-danger);
}

.rtasks-list{
  border:1px solid var(--rt-line);
  border-radius:calc(var(--rt-card-radius) - 6px);
  padding:16px 18px;
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#fafcff);
  transition:box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}

.rtasks-list:hover{
  border-color:#b6c2d3;
  box-shadow:0 7px 18px rgba(15,23,42,.09);
  transform:translateY(-1px);
}

.rtasks-list-info{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rtasks-list-title{
  font-size:clamp(21px, 2.4vw, 34px);
  line-height:1.15;
}

.rtasks-list-meta{
  font-size:clamp(16px, 1.8vw, 22px);
  color:#64748b;
}

.rtasks-task{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 12px;
  border-radius:calc(var(--rt-card-radius) - 10px);
  border:1px solid #dbe1ea;
  background:#fff;
  margin-top:10px;
}

.rtasks-task[data-type="choice_ynna"]{
  display:block;
}

.rtasks-task-check{
  display:flex;
  align-items:flex-start;
  gap:14px;
  width:100%;
}

.rtasks-task-check input[type="checkbox"]{
  appearance:none;
  width:30px;
  height:30px;
  margin-top:3px;
  border-radius:10px;
  border:2px solid #8d96a5;
  background:#fff;
  display:grid;
  place-items:center;
  flex:0 0 30px;
  transition:all .15s ease;
}

.rtasks-task-check input[type="checkbox"]::before{
  content:"";
  width:12px;
  height:7px;
  border-left:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(-45deg) scale(0);
  transition:transform .12s ease;
}

.rtasks-task-check input[type="checkbox"]:checked{
  border-color:var(--rt-strong);
  background:var(--rt-strong);
  box-shadow:0 3px 12px rgba(15,23,42,.2);
}

.rtasks-task-check input[type="checkbox"]:checked::before{
  transform:rotate(-45deg) scale(1);
}

.rtasks-task-check span{
  color:var(--rt-text);
  font-size:clamp(18px, 2.1vw, 24px);
  line-height:1.36;
}

.rtasks-task-title{
  font-weight:700;
  color:var(--rt-text);
  font-size:clamp(18px, 2.1vw, 24px);
  line-height:1.35;
}

.rtasks-task-choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.rtasks-choice-pill{
  display:inline-flex;
  cursor:pointer;
  position:relative;
}

.rtasks-choice-pill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.rtasks-choice-pill span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid #b8c2d1;
  border-radius:999px;
  background:#f8fafc;
  font-size:16px;
  font-weight:600;
  color:#1f2937;
  line-height:1.2;
  transition:all .15s ease;
}

.rtasks-choice-pill:hover span{
  border-color:#96a3b8;
}

.rtasks-choice-pill input[value="yes"]:checked + span{
  background:var(--rt-ok);
  color:#fff;
  border-color:var(--rt-ok);
}

.rtasks-choice-pill input[value="no"]:checked + span{
  background:var(--rt-no);
  color:#fff;
  border-color:var(--rt-no);
}

.rtasks-choice-pill input[value="na"]:checked + span{
  background:var(--rt-na);
  color:#fff;
  border-color:var(--rt-na);
}

.rtasks-choice-pill-wide span{
  white-space:normal;
  line-height:1.25;
  padding-top:9px;
  padding-bottom:9px;
}

.rtasks-required{
  display:inline-block;
  margin-left:3px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--rt-danger-soft);
  color:var(--rt-danger);
  font-style:normal;
  font-size:12px;
  font-weight:700;
}

.rtasks-progress{
  margin-top:8px;
  color:#64748b;
  font-size:14px;
  font-weight:600;
}

@media (max-width: 700px){
  .rtasks-wrap{
    --rt-control-py:13px;
    --rt-control-px:14px;
    --rt-card-pad:14px;
    padding:12px 10px 18px;
  }

  .rtasks-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .rtasks-push{
    width:100%;
  }

  .rtasks-push .rtasks-btn{
    flex:1 1 auto;
  }

  .rtasks-list{
    flex-direction:column;
    align-items:flex-start;
  }

  .rtasks-list .rtasks-start{
    width:100%;
  }
}