.afr-wrap{margin:24px 0;}
.afr-title{font-size:28px;font-weight:900;margin:0 0 16px;}
.afr-card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:18px;padding:18px;}
.afr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.afr-field{display:flex;flex-direction:column;gap:6px;}
.afr-label{font-weight:800;}
.afr-slots{margin-top:16px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08);}
.afr-slots__title{font-weight:900;margin-bottom:10px;}
.afr-slots__list{display:flex;flex-wrap:wrap;gap:10px;}
.afr-slot{border:1px solid rgba(0,0,0,.14);background:#fff;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;}
.afr-muted{opacity:.7;}
.afr-error{color:#b91c1c;font-weight:800;}
@media (max-width:768px){
  .afr-grid{grid-template-columns:1fr;}
}

.afr-slot.is-active{border-color:rgba(0,0,0,.6);}


/* layout similar to services list (card on light background) */
.afr-wrap{padding:24px 0;}
.afr-page{max-width:1100px;margin:0 auto;padding:0 16px;}
.afr-card{box-shadow:0 6px 24px rgba(0,0,0,.06);}
.afr-title{letter-spacing:.2px;}
#afr-slots-list{display:flex;flex-wrap:wrap;gap:10px;}
.afr-slot{border:1px solid rgba(0,0,0,.14);background:#fff;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;line-height:1;}
.afr-slot:hover{transform:translateY(-1px);}
.afr-slot.is-active{border-color:rgba(0,0,0,.6);}
@media (max-width:768px){
  .afr-grid{grid-template-columns:1fr;}
  .afr-card{border-radius:16px;padding:14px;}
}

.afr-card--details{ margin-top:16px; }
.afr-grid--details{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.afr-field--wide{ grid-column: 1 / -1; }
.afr-actions{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.afr-btn{ padding:12px 18px; font-weight:700; text-transform:uppercase; }
.afr-status{ font-size:14px; }
.afr-status.is-error{ color:#b00020; }
.afr-status.is-ok{ color:#0b6b0b; }
.afr-pre{ margin-top:10px; padding:10px; border:1px dashed rgba(0,0,0,.2); border-radius:8px; max-height:140px; overflow:auto; background:#fff; }
@media (max-width: 900px){
  .afr-grid--details{ grid-template-columns: 1fr; }
  .afr-actions{ flex-direction:column; align-items:stretch; }
}


/* === Minimal mobile-first redesign === */
.afr-card {
  border-radius: 16px;
  padding: 20px;
  background: #fff;
}

.afr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.afr-grid--details {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .afr-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .afr-grid--details {
    grid-template-columns: repeat(3, 1fr);
  }
}

.afr-label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
}

.afr-slot {
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  background: #f4f6f8;
  border: 1px solid #e0e0e0;
}

.afr-slot.is-active {
  background: #2bb3c0;
  color: #fff;
  border-color: #2bb3c0;
}

.afr-slot.is-disabled {
  background: #eee;
  color: #aaa;
  border-style: dashed;
  pointer-events: none;
}

.afr-actions {
  margin-top: 20px;
}

.afr-btn {
  width: 100%;
  border-radius: 999px;
  padding: 14px;
  font-size: 15px;
}

@media (min-width: 768px) {
  .afr-btn {
    width: auto;
    min-width: 220px;
  }
}