.ctb-form {
  border:1px solid #e5e7eb;
  padding:16px;
  border-radius:12px;
  background:#fff;
  width:100%;
  max-width:100%;
  position: relative;
}
.ctb-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.ctb-field { display:flex; flex-direction:column; gap:6px }
.ctb-radio { display:flex; gap:16px; flex-wrap:wrap }
.ctb-checkboxes { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.ctb-field input, .ctb-field select, .ctb-field textarea { padding:10px; border:1px solid #d1d5db; border-radius:8px; transition:all 0.3s ease; }
.ctb-field input.ctb-highlight, .ctb-field select.ctb-highlight, .ctb-field textarea.ctb-highlight { border:2px solid #ef4444; background-color:#fef2f2; box-shadow:0 0 5px rgba(239, 68, 68, 0.5); }
.ctb-required { color:#ef4444; font-weight:bold; margin-left:2px; }
.ctb-form-note { margin-bottom:16px; font-size:14px; color:#6b7280; font-style:italic; }
.ctb-wide { grid-column:1 / -1 }
.ctb-summary { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px dashed #e5e7eb }
.ctb-submit { padding:10px 16px; border-radius:10px; background:#111827; color:white; border:none; cursor:pointer }
.ctb-submit.loading { opacity: 0.7; cursor: wait; }

/* Preloader styles */
.ctb-preloader {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
}

.ctb-preloader.active {
  display: flex;
}

.ctb-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #111827;
  border-radius: 50%;
  animation: ctb-spin 1s linear infinite;
}

@keyframes ctb-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ctb-alert { padding:12px; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px }
#ctb-total { font-size:20px }

/* Row layouts */
.ctb-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.ctb-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px }
.ctb-row-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.ctb-subfield { display:flex; flex-direction:column; gap:6px }

@media (max-width:900px){
  .ctb-row-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .ctb-grid { grid-template-columns:1fr }
  .ctb-checkboxes { grid-template-columns:1fr }
  .ctb-row-2, .ctb-row-3, .ctb-row-4 { grid-template-columns:1fr }
}