.csf-input { padding:10px; font-size:14px; border:1px solid #ddd; border-radius:4px; width:100%; box-sizing:border-box; }
.csf-button { padding:10px 14px; font-size:14px; border:1px solid #ddd; background:#f5f5f5; border-radius:4px; cursor:pointer; }
.csf-button.csf-animating { position: relative; pointer-events: none; opacity: 0.9; }
.csf-button.csf-animating::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: csf-rotate 0.8s linear infinite;
}
@keyframes csf-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.csf-search-results { margin-top:10px; }
.csf-no-results { padding:10px; color:#666; }



/* CSF Search - additional skins and animation */
.csf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.csf-grid.csf-cols-1 { grid-template-columns: 1fr; }
.csf-grid.csf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.csf-grid.csf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.csf-grid.csf-cols-4 { grid-template-columns: repeat(4, 1fr); }

.csf-card { border:1px solid #eee; padding:12px; border-radius:8px; display:flex; gap:12px; align-items:flex-start; transition: transform .18s ease, box-shadow .18s ease; background:#fff; }
.csf-card-thumb img { width:84px; height:84px; object-fit:cover; border-radius:6px; }
.csf-card .csf-card-body { flex:1; }
.csf-minimal-item { padding:6px 0; border-bottom:1px solid #f2f2f2; }

.csf-hover-lift:hover { transform: translateY(-6px); }
.csf-hover-shadow:hover { box-shadow:0 6px 18px rgba(0,0,0,0.08); }

.csf-img-square .csf-thumb img, .csf-card-thumb img { object-fit:cover; width:100%; height:180px; }
.csf-img-landscape .csf-thumb img { height:140px; object-fit:cover; }

.csf-loading { opacity:0.6; min-height:40px; position:relative; }
.csf-loading:after { content:''; position:absolute; right:12px; top:12px; width:18px; height:18px; border:3px solid #999; border-top-color:transparent; border-radius:50%; animation:csf-rot 1s linear infinite; }
@keyframes csf-rot { to { transform: rotate(360deg);} }

/* Accessibility focus */
.csf-item:focus, .csf-item.csf-focus { outline:2px solid #5b9dd9; outline-offset:2px; }

/* Responsive tweaks */
@media (max-width:800px) {
  .csf-grid.csf-cols-3 { grid-template-columns: repeat(2,1fr); }
  .csf-grid.csf-cols-4 { grid-template-columns: repeat(2,1fr); }
}

.csf-search-input { display:inline-block; }
.csf-search-button { display:inline-block; cursor:pointer; border:none; }


/* Basic layout to support controls */
.csf-search-wrapper { width:100%; }
.csf-search-controls { display:flex; gap:8px; align-items:center; }
.csf-layout-stacked .csf-search-controls { flex-direction:column; align-items:stretch; }
.csf-search-input { box-sizing:border-box; padding:8px 12px; }
.csf-search-button { cursor:pointer; padding:8px 16px; }
.csf-grid { display:grid; gap:16px; }
.csf-cols-1 { grid-template-columns:1fr; }
.csf-cols-2 { grid-template-columns:repeat(2,1fr); }
.csf-cols-3 { grid-template-columns:repeat(3,1fr); }
.csf-cols-4 { grid-template-columns:repeat(4,1fr); }
.csf-loading:after { content:''; display:inline-block; width:16px; height:16px; border:3px solid #999; border-top-color:transparent; border-radius:50%; animation:csf-rot 1s linear infinite; }
@keyframes csf-rot { to { transform:rotate(360deg);} }


/* Ensure button text & icon are centered by default and support alignment overrides */
.csf-search-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  
  gap: 8px;
}
.csf-search-button .csf-button-icon { display:inline-flex; align-items:center; justify-content:center; }
/* alignment override classes */
.csf-search-button.align-top { align-items: flex-start !important; }
.csf-search-button.align-middle { align-items: center !important; }
.csf-search-button.align-bottom { align-items: flex-end !important; }
.csf-search-button.justify-left { justify-content: flex-start !important; }
.csf-search-button.justify-center { justify-content: center !important; }
.csf-search-button.justify-right { justify-content: flex-end !important; }
/* transition var fallback */
.csf-search-button { transition: all 300ms ease; }