/* Lucide icon sizing */
.lucide { width: 1em; height: 1em; vertical-align: -0.125em; display: inline-block; }

/* Buttons (reused across HTML + JS, easier as utility classes) */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: .75rem; font-weight: 500; font-size: .875rem; border: none; cursor: pointer; transition: all .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-blue { background: #2563eb; color: #fff; }
.btn-blue:hover:not(:disabled) { background: #1d4ed8; }
.btn-green { background: #059669; color: #fff; }
.btn-green:hover:not(:disabled) { background: #047857; }
.btn-light { background: #f1f5f9; color: #475569; }
.btn-light:hover { background: #e2e8f0; }
.btn-icon { padding: .5rem; border-radius: .5rem; border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; }
.btn-icon:hover { background: #f8fafc; }
.btn-icon:disabled { opacity: .5; cursor: not-allowed; }

/* Star rating hover fill */
#starRating { display: inline-flex; }

/* Tabs */
.tab { display: flex; align-items: center; gap: .5rem; padding: .625rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; border: none; cursor: pointer; background: transparent; color: #475569; transition: all .15s; }
.tab:hover { color: #0f172a; background: rgba(226,232,240,.5); }
.tab.active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Spinner animation */
@keyframes spin { to { transform: rotate(360deg); } }
.spinning svg { animation: spin 1s linear infinite; }

/* Pagination component */
.pagination { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: .75rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); display: flex; justify-content: space-between; align-items: center; }
.pagination-info { font-size: .875rem; color: #64748b; }
.pagination-controls { display: flex; align-items: center; gap: .25rem; }
.pagination-numbers { display: flex; align-items: center; gap: .25rem; padding: 0 .25rem; }
.pagination-page { font-size: .875rem; font-weight: 500; min-width: 32px; height: 32px; border-radius: .375rem; border: 1px solid #e2e8f0; background: #fff; color: #334155; cursor: pointer; transition: background .15s; }
.pagination-page:hover:not(:disabled) { background: #f1f5f9; }
.pagination-page.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.pagination-ellipsis { font-size: .875rem; color: #94a3b8; padding: 0 .25rem; }