/* main.css — BlindBooks
   Place at public/assets/css/main.css
   Responsive, accessible styles for public, auth, account, and admin pages.
   Tweak brand colors, fonts, and spacing to suit your design.
*/

/* ========== Root variables ========== */
:root{
  --bg: #ffffff;
  --surface: #fbfbfd;
  --muted: #6b7280;
  --text: #0f1722;
  --brand: #0b5cff;
  --accent: #07c59b;
  --danger: #ef4444;
  --glass: rgba(15,23,34,0.04);
  --container-max: 1200px;
  --radius: 8px;
  --gap: 16px;
  --shadow-sm: 0 1px 2px rgba(11,92,255,0.06);
  --shadow-md: 0 8px 24px rgba(11,92,255,0.06);

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --base-font-size: 16px;
}

/* ========== Base ========== */
* { box-sizing: border-box; }
html,body{height:100%}
html{font-size:var(--base-font-size);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:linear-gradient(180deg,var(--surface),var(--bg));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  -webkit-tap-highlight-color: transparent;
}

/* ========== Layout container ========== */
.container{
  width:calc(100% - 32px);
  max-width:var(--container-max);
  margin:0 auto;
  padding:20px;
}

/* ========== Header & Nav ========== */
.site-header{
  background:var(--bg);
  border-bottom:1px solid rgba(15,23,34,0.04);
  position:sticky;
  top:0;
  z-index:60;
}
.site-header .container{display:flex;align-items:center;gap:12px;padding:12px 20px}
.brand{
  font-weight:700;
  font-size:1.1rem;
  color:var(--brand);
  text-decoration:none;
  margin-right:8px;
}
.main-nav{margin-left:auto}
.main-nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:12px;
  align-items:center;
}
.main-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:6px;
  display:inline-block;
  font-weight:500;
}
.main-nav a:hover, .main-nav a:focus{
  color:var(--text);
  background:var(--glass);
  outline: none;
}

/* ========== Hero ========== */
.hero{
  padding:48px 0;
  display:flex;
  align-items:center;
  gap:24px;
  border-radius:var(--radius);
  height: 450px;
}
.hero h1{font-size:1.9rem;margin:0 0 8px; color: white;}
.hero p{margin:0;color:var(--muted)}

/* ========== Buttons ========== */
.btn{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  border:1px solid rgba(11,92,255,0.12);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.btn.secondary{
  background:transparent;
  color:var(--brand);
  border:1px solid rgba(11,92,255,0.12);
}
.btn.ghost{
  background:transparent;color:var(--muted);border:none;
}
.btn.small{padding:6px 8px;font-size:.9rem;border-radius:6px}
.btn.danger{background:var(--danger);border-color:rgba(239,68,68,0.12)}

/* ========== Cards & Panels ========== */
.card{
  background: #fff;
  border-radius:var(--radius);
  padding:16px;
  box-shadow: var(--shadow-sm);
  border:1px solid rgba(15,23,34,0.04);
}
.card.padded{padding:24px}

/* ========== Grid & Lists ========== */
.genre-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--gap);
  margin:12px 0 24px;
  padding:0;
  list-style:none;
}
.genre-grid li{
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#fafafa);
  padding:16px;
  border:1px solid rgba(15,23,34,0.04);
}
.pack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--gap);
  margin:8px 0 24px;
}

/* ========== Forms ========== */
form{margin:0}
label{display:block;margin-bottom:10px;color:var(--muted);font-size:.95rem}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea,input[type="datetime-local"]{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(15,23,34,0.06);
  background:#fff;
  color:var(--text);
  font-size:1rem;
  transition:box-shadow .12s,border-color .12s;
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(11,92,255,0.06);
  border-color:var(--brand);
}

/* Inline form helpers */
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row > *{flex:1 1 240px}

/* Checkbox & radios */
input[type="checkbox"],input[type="radio"]{transform:scale(1.05);margin-right:8px;vertical-align:middle}

/* ========== Tables ========== */
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{padding:10px;border:1px solid rgba(15,23,34,0.04);text-align:left;vertical-align:middle}
.table thead th{background:rgba(15,23,34,0.02);font-weight:700;color:var(--muted)}
.table tbody tr:hover{background:rgba(11,92,255,0.02)}

/* ========== Utilities ========== */
.kv {display:flex;gap:8px;align-items:center}
.small{font-size:.9rem;color:#a3a3a3}
.meta{color:var(--muted);font-size:.95rem}
.center{text-align:center}
.muted{color:var(--muted)}
.divider{height:1px;background:rgba(15,23,34,0.04);margin:16px 0;border-radius:2px}

/* ========== Footer ========== */
.site-footer{
  border-top:1px solid rgba(15,23,34,0.04);
  background:transparent;
  padding:18px 0;
  margin-top:32px;
}
.site-footer small{color:var(--muted)}

/* ========== Responsive header collapse (mobile) ========== */
@media (max-width:900px){
  .main-nav ul{gap:8px}
  .hero{padding:28px 0}
  .brand{font-size:1rem}
  .container{padding:14px}
}

/* ========== Account / Auth specifics ========== */
.account-grid{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:20px;
}
.account-sidebar{
  background:#fff;border-radius:10px;padding:12px;border:1px solid rgba(15,23,34,0.04)
}
.account-sidebar ul{list-style:none;padding:0;margin:6px 0}
.account-sidebar a{display:block;padding:8px;border-radius:6px;color:var(--muted);text-decoration:none}
.account-sidebar a:hover{background:var(--glass);color:var(--text)}
.account-welcome{margin-bottom:12px;font-weight:600}

/* ========== Admin area specifics ========== */
.admin-toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap}
.admin-pane{display:block;padding:12px;background:#fff;border-radius:10px;border:1px solid rgba(15,23,34,0.04)}
.admin-high {background:linear-gradient(90deg,#fff,#f8fbff);box-shadow:var(--shadow-md)}

/* compact table adjustments for admin lists */
.table.admin td,.table.admin th{padding:8px;font-size:.95rem}

/* ========== Accessibility helpers ========== */
.sr-only{
  position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px
}
[role="alert"]{border-left:4px solid var(--brand);padding:12px;background:rgba(11,92,255,0.04);color:var(--text)}

/* ========== Tiny components ========== */
.badge{display:inline-block;padding:6px 8px;border-radius:999px;font-weight:700;background:rgba(11,92,255,0.08);color:var(--brand);font-size:.85rem}
.tag{display:inline-block;padding:6px 10px;border-radius:6px;background:#f3f4f6;color:var(--muted);font-size:.85rem;margin-right:6px}

/* ========== Form buttons grouping ========== */
.form-actions{display:flex;gap:8px;align-items:center;margin-top:12px}
.form-actions .btn{min-width:120px}

/* ========== Minor components: cart, pack card, order box ========== */
.pack-card{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:10px;background:#fff;border:1px solid rgba(15,23,34,0.04)}
.pack-card .meta{font-size:.9rem}
.cart-summary{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:8px;background:#fff;border:1px solid rgba(15,23,34,0.04)}

/* ========== Forms: inline small actions ========== */
.inline-form{display:inline-flex;gap:6px;align-items:center}
.inline-form input[type="number"]{width:80px}

/* ========== Print styles ========== */
@media print{
  .site-header, .site-footer, .main-nav, .btn {display:none!important}
  .container{padding:0}
}

/* ========== Tiny responsive tweaks ========== */
@media (max-width:720px){
  .account-grid{grid-template-columns:1fr;gap:12px}
  .main-nav ul{flex-wrap:wrap}
  .pack-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.4rem}
}

/* Form controls - unified baseline */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
select,
textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,34,0.06);
  background: #ffffff;
  color: var(--text, #0f1722);
  font-size: 1rem;
  line-height: 1.4;
  transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  caret-color: var(--brand, #0b5cff);
}

/* Textarea sizing */
textarea { min-height: 120px; resize: vertical; }

/* Select fallback and caret spacing */
select { padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted, #6b7280) 50%), linear-gradient(135deg, var(--muted, #6b7280) 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

/* Focus state (accessible, not aggressive) */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand, #0b5cff);
  box-shadow: 0 0 0 4px rgba(11,92,255,0.06);
}

/* Disabled / readonly states */
.form-control[disabled],
input[disabled],
select[disabled],
textarea[disabled],
.form-control[readonly],
input[readonly],
select[readonly],
textarea[readonly] {
  background: #f8fafc;
  color: var(--muted, #6b7280);
  cursor: not-allowed;
  opacity: 0.95;
}

/* Validation states (HTML5 :invalid) */
input:invalid, textarea:invalid, select:invalid {
  /* border-color: var(--danger, #ef4444); */
  box-shadow: 0 0 0 4px rgba(239,68,68,0.06);
}

/* Small / compact inputs (for inline forms) */
.input-sm { padding: 6px 8px; font-size: 0.95rem; border-radius: 8px; }

/* Input group wrapper (label + field spacing) */
.form-row { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }

/* Inline helper text and errors */
.form-help { font-size: .9rem; color: var(--muted, #6b7280); margin-top:6px; }
.form-error { color: var(--danger, #ef4444); font-size:.9rem; margin-top:6px; }

/* File input: styled button + filename */
.input-file {
  display:flex; gap:8px; align-items:center;
  background:#fff; padding:8px; border-radius:10px; border:1px solid rgba(15,23,34,0.06);
}
.input-file input[type="file"] { display:inline-block; }

/* Checkboxes & radios: visually consistent larger controls */
input[type="checkbox"],
input[type="radio"] {
  width:18px; height:18px; margin-right:8px; vertical-align:middle;
  accent-color: var(--brand, #0b5cff);
}

/* Buttons associated with forms */
.form-actions { display:flex; gap:8px; align-items:center; margin-top:12px; }
.button-primary {
  background: var(--brand, #0b5cff); color: #fff; padding:10px 14px; border-radius:10px; border: 1px solid rgba(11,92,255,0.12);
}
.button-secondary {
  background: transparent; color: var(--brand, #0b5cff); padding:10px 14px; border-radius:10px; border:1px solid rgba(11,92,255,0.08);
}

/* Responsive: stack inline fields on small screens */
@media (min-width:720px) {
  .form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
}
@media (max-width:719px) {
  .form-grid { display:block; }
}

/* Accessibility tiny helpers */
label { font-weight:600; color:var(--muted, #6b7280); font-size:.95rem; display:block; margin-bottom:6px; }
input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder { color: rgba(15,23,34,0.35); }

/* Slight hover lift for interactive fields (mouse only) */
@media (hover: hover) {
  .form-control:hover { transform: translateY(-1px); }
}

.how-it-works .steps {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
.how-it-works .step h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.how-it-works .cta .btn {
  margin-right: 12px;
}

.genre-page h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}
.genre-page .lead {
  font-size: 1.1rem;
  color: #555;
}
.genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.genre-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.genre-card:hover {
  transform: translateY(-2px);
}
.genre-image img {
  width: 64px;
  height: 64px;
  
}
.genre-info h2 {
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.genre-info p {
  font-size: 0.95rem;
  color: #666;
}

.cart-page { padding:24px 0; }
.cart-list { list-style:none; margin:24px 0; padding:0; }
.cart-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  margin-bottom:12px;
  border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
}
.cart-summary {
  padding:24px;
  text-align:right;
  margin-top:16px;
  border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
}


/* ========== End of file ========== */