/* =============================================================
   Booklio — Design System
   Tailwind utilities (compiled by hand) + custom components.
   Tokens are CSS variables; tweak them in :root to re-skin.
   ============================================================= */

:root {
  /* Brand */
  --c-brand: #3c06d9;
  --c-brand-light: #6b21f0;
  --c-brand-dark: #2d0599;
  --c-cyan: #00f2ff;

  /* Accents */
  --c-amber: #d97706;
  --c-amber-light: #fbbf24;
  --c-amber-dark: #b45309;
  --c-success: #059669;
  --c-error: #dc2626;
  --c-info: #2563eb;

  /* Neutrals */
  --c-ink: #000028;
  --c-charcoal: #2d2d2d;
  --c-smoke: #9ca3af;
  --c-pearl: #f9fafb;
  --c-cream: #fefdfb;
  --c-paper: #ffffff;

  --c-gray-100: #f3f4f6;
  --c-gray-200: #e5e7eb;
  --c-gray-300: #d1d5db;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
  --shadow-brand: 0 8px 20px rgba(60, 6, 217, 0.2);
}

/* =============================================================
   Typography base
   ============================================================= */
.font-sans { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.font-serif { font-family: 'Literata', 'Libre Baskerville', Georgia, serif; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.text-xs   { font-size: .75rem;   line-height: 1rem; }
.text-sm   { font-size: .875rem;  line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-6xl  { font-size: 3.75rem;  line-height: 1; }
.text-\[10px\] { font-size: 10px; line-height: 1; }

.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.1\] { line-height: 1.1; }

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.uppercase   { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }

.italic { font-style: italic; }
.underline { text-decoration: underline; }
.hover\:underline:hover { text-decoration: underline; }
.line-through { text-decoration: line-through; }

/* =============================================================
   Colors — text
   ============================================================= */
.text-white       { color: #fff; }
.text-ink         { color: var(--c-ink); }
.text-charcoal    { color: var(--c-charcoal); }
.text-smoke       { color: var(--c-smoke); }
.text-brand       { color: var(--c-brand); }
.text-brand-dark  { color: var(--c-brand-dark); }
.text-cyan        { color: var(--c-cyan); }
.text-amber       { color: var(--c-amber); }
.text-success     { color: var(--c-success); }
.text-error       { color: var(--c-error); }
.text-info        { color: var(--c-info); }
.text-transparent { color: transparent; }
.text-white\/90 { color: rgba(255,255,255,.9); }
.text-white\/80 { color: rgba(255,255,255,.8); }

/* =============================================================
   Colors — background
   ============================================================= */
.bg-white  { background-color: #fff; }
.bg-ink    { background-color: var(--c-ink); }
.bg-brand  { background-color: var(--c-brand); }
.bg-brand-dark  { background-color: var(--c-brand-dark); }
.bg-brand-light { background-color: var(--c-brand-light); }
.bg-cyan   { background-color: var(--c-cyan); }
.bg-amber  { background-color: var(--c-amber); }
.bg-pearl  { background-color: var(--c-pearl); }
.bg-cream  { background-color: var(--c-cream); }
.bg-success { background-color: var(--c-success); }
.bg-error   { background-color: var(--c-error); }

.bg-white\/95 { background-color: rgba(255,255,255,.95); }
.bg-white\/90 { background-color: rgba(255,255,255,.9); }
.bg-white\/15 { background-color: rgba(255,255,255,.15); }
.bg-white\/10 { background-color: rgba(255,255,255,.1); }
.bg-cyan\/90  { background-color: rgba(0,242,255,.9); }
.bg-brand\/10 { background-color: rgba(60,6,217,.1); }

/* Gradient utility: requires bg-gradient-to-* + from-/via-/to- */
.bg-gradient-to-b  { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right,  var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }

.from-brand        { --tw-gradient-from: var(--c-brand);       --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-brand-light   { --tw-gradient-stops: var(--tw-gradient-from), var(--c-brand-light), var(--tw-gradient-to, transparent); }
.to-cyan           { --tw-gradient-to: var(--c-cyan); }
.from-cyan         { --tw-gradient-from: var(--c-cyan);        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-white        { --tw-gradient-from: #fff;                 --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-white          { --tw-gradient-to: #fff; }
.to-pearl          { --tw-gradient-to: var(--c-pearl); }
.from-brand-light  { --tw-gradient-from: var(--c-brand-light); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* Background-clip text (gradient text) */
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }

/* =============================================================
   Borders
   ============================================================= */
.border       { border: 1px solid var(--c-gray-200); }
.border-2     { border-width: 2px; border-style: solid; }
.border-t     { border-top: 1px solid var(--c-gray-200); }
.border-b-2   { border-bottom: 2px solid currentColor; }

.border-gray-100 { border-color: var(--c-gray-100); }
.border-gray-200 { border-color: var(--c-gray-200); }
.border-gray-300 { border-color: var(--c-gray-300); }
.border-brand    { border-color: var(--c-brand); }
.border-brand\/30 { border-color: rgba(60,6,217,.3); }
.border-white\/40 { border-color: rgba(255,255,255,.4); }
.border-white\/30 { border-color: rgba(255,255,255,.3); }
.border-white\/20 { border-color: rgba(255,255,255,.2); }
.border-white\/10 { border-color: rgba(255,255,255,.1); }

.rounded-md   { border-radius: .375rem; }
.rounded-lg   { border-radius: .5rem; }
.rounded-xl   { border-radius: .75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* =============================================================
   Layout — display, position
   ============================================================= */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.top-0     { top: 0; }
.right-0   { right: 0; }
.bottom-0  { bottom: 0; }
.left-0    { left: 0; }
.left-6    { left: 1.5rem; }
.top-10    { top: 2.5rem; }
.bottom-10 { bottom: 2.5rem; }
.-top-0\.5  { top: -.125rem; }
.-right-0\.5 { right: -.125rem; }

.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* =============================================================
   Flexbox / Grid alignment
   ============================================================= */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-auto    { flex: 1 1 auto; }

.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }

/* =============================================================
   Spacing — gap
   ============================================================= */
.gap-0   { gap: 0; }
.gap-1   { gap: .25rem; }
.gap-2   { gap: .5rem; }
.gap-3   { gap: .75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }

/* space-y-* (between flex/block children) */
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-x-2 > * + * { margin-left: .5rem; }
.space-x-3 > * + * { margin-left: .75rem; }
.space-x-4 > * + * { margin-left: 1rem; }

/* =============================================================
   Spacing — margin
   ============================================================= */
.m-0   { margin: 0; }
.m-2   { margin: .5rem; }
.m-4   { margin: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0   { margin-top: 0; }
.mt-1   { margin-top: .25rem; }
.mt-2   { margin-top: .5rem; }
.mt-3   { margin-top: .75rem; }
.mt-4   { margin-top: 1rem; }
.mt-5   { margin-top: 1.25rem; }
.mt-6   { margin-top: 1.5rem; }
.mt-8   { margin-top: 2rem; }
.mt-10  { margin-top: 2.5rem; }
.mt-12  { margin-top: 3rem; }
.mt-14  { margin-top: 3.5rem; }
.mt-0\.5 { margin-top: .125rem; }

.mb-0   { margin-bottom: 0; }
.mb-1   { margin-bottom: .25rem; }
.mb-2   { margin-bottom: .5rem; }
.mb-3   { margin-bottom: .75rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.25rem; }
.mb-6   { margin-bottom: 1.5rem; }
.mb-8   { margin-bottom: 2rem; }
.mb-10  { margin-bottom: 2.5rem; }
.mb-12  { margin-bottom: 3rem; }
.mb-16  { margin-bottom: 4rem; }

.ml-1   { margin-left: .25rem; }
.ml-2   { margin-left: .5rem; }
.ml-3   { margin-left: .75rem; }
.ml-4   { margin-left: 1rem; }
.mr-1   { margin-right: .25rem; }
.mr-2   { margin-right: .5rem; }
.mr-3   { margin-right: .75rem; }
.mr-4   { margin-right: 1rem; }

/* =============================================================
   Spacing — padding
   ============================================================= */
.p-0   { padding: 0; }
.p-1   { padding: .25rem; }
.p-2   { padding: .5rem; }
.p-3   { padding: .75rem; }
.p-4   { padding: 1rem; }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.p-10  { padding: 2.5rem; }
.p-12  { padding: 3rem; }

.px-0  { padding-left: 0; padding-right: 0; }
.px-1  { padding-left: .25rem; padding-right: .25rem; }
.px-2  { padding-left: .5rem; padding-right: .5rem; }
.px-3  { padding-left: .75rem; padding-right: .75rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7  { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8  { padding-left: 2rem; padding-right: 2rem; }

.py-0  { padding-top: 0; padding-bottom: 0; }
.py-1  { padding-top: .25rem; padding-bottom: .25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2  { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3  { padding-top: .75rem; padding-bottom: .75rem; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }

.pt-0  { padding-top: 0; }
.pt-2  { padding-top: .5rem; }
.pt-3  { padding-top: .75rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-16 { padding-top: 4rem; }
.pb-0\.5 { padding-bottom: .125rem; }
.pb-2  { padding-bottom: .5rem; }
.pb-4  { padding-bottom: 1rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pl-2  { padding-left: .5rem; }
.pl-4  { padding-left: 1rem; }
.pr-2  { padding-right: .5rem; }
.pr-4  { padding-right: 1rem; }

/* =============================================================
   Sizing — width / height
   ============================================================= */
.w-full   { width: 100%; }
.w-auto   { width: auto; }
.w-3\.5   { width: .875rem; }
.w-4      { width: 1rem; }
.w-5      { width: 1.25rem; }
.w-6      { width: 1.5rem; }
.w-7      { width: 1.75rem; }
.w-8      { width: 2rem; }
.w-10     { width: 2.5rem; }
.w-12     { width: 3rem; }
.w-14     { width: 3.5rem; }
.w-16     { width: 4rem; }
.w-20     { width: 5rem; }
.w-40     { width: 10rem; }
.w-64     { width: 16rem; }
.w-0\.5   { width: .125rem; }

.h-full   { height: 100%; }
.h-auto   { height: auto; }
.h-3\.5   { height: .875rem; }
.h-4      { height: 1rem; }
.h-5      { height: 1.25rem; }
.h-6      { height: 1.5rem; }
.h-7      { height: 1.75rem; }
.h-8      { height: 2rem; }
.h-10     { height: 2.5rem; }
.h-12     { height: 3rem; }
.h-14     { height: 3.5rem; }
.h-16     { height: 4rem; }
.h-20     { height: 5rem; }
.h-56     { height: 14rem; }

.min-h-full        { min-height: 100%; }
.min-h-screen      { min-height: 100vh; }
.min-h-\[85vh\]    { min-height: 85vh; }
.max-h-0           { max-height: 0; }

.max-w-xs   { max-width: 20rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; }
.max-w-full { max-width: 100%; }

/* =============================================================
   Effects — shadow, opacity, blur, fill
   ============================================================= */
.shadow      { box-shadow: var(--shadow-md); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-2xl  { box-shadow: var(--shadow-2xl); }
.shadow-brand { box-shadow: var(--shadow-brand); }

.opacity-0   { opacity: 0; }
.opacity-10  { opacity: .1; }
.opacity-20  { opacity: .2; }
.opacity-50  { opacity: .5; }
.opacity-90  { opacity: .9; }
.opacity-100 { opacity: 1; }

.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.fill-current { fill: currentColor; }
.stroke-current { stroke: currentColor; }

/* =============================================================
   Transitions & cursor
   ============================================================= */
.transition          { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.transition-all      { transition-property: all; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.transition-colors   { transition-property: color, background-color, border-color, fill, stroke; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.transition-transform { transition-property: transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }

.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* =============================================================
   Hover variants
   ============================================================= */
.hover\:bg-brand:hover       { background-color: var(--c-brand); }
.hover\:bg-brand-dark:hover  { background-color: var(--c-brand-dark); }
.hover\:bg-pearl:hover       { background-color: var(--c-pearl); }
.hover\:bg-white:hover       { background-color: #fff; }
.hover\:bg-white\/10:hover   { background-color: rgba(255,255,255,.1); }
.hover\:bg-white\/90:hover   { background-color: rgba(255,255,255,.9); }
.hover\:bg-cyan\/90:hover    { background-color: rgba(0,242,255,.9); }
.hover\:bg-brand\/10:hover   { background-color: rgba(60,6,217,.1); }

.hover\:text-brand:hover     { color: var(--c-brand); }
.hover\:text-white:hover     { color: #fff; }
.hover\:text-ink:hover       { color: var(--c-ink); }

.hover\:border-brand:hover       { border-color: var(--c-brand); }
.hover\:border-brand\/30:hover   { border-color: rgba(60,6,217,.3); }

.hover\:shadow:hover     { box-shadow: var(--shadow-md); }
.hover\:shadow-md:hover  { box-shadow: var(--shadow-md); }
.hover\:shadow-lg:hover  { box-shadow: var(--shadow-lg); }
.hover\:shadow-xl:hover  { box-shadow: var(--shadow-xl); }
.hover\:shadow-brand:hover { box-shadow: var(--shadow-brand); }

.hover\:translate-x-1:hover { transform: translateX(.25rem); }
.hover\:gap-3:hover         { gap: .75rem; }
.hover\:opacity-90:hover    { opacity: .9; }

/* =============================================================
   Group hover (parent .group)
   ============================================================= */
.group:hover .group-hover\:bg-brand        { background-color: var(--c-brand); }
.group:hover .group-hover\:bg-brand\/10    { background-color: rgba(60,6,217,.1); }
.group:hover .group-hover\:text-white      { color: #fff; }
.group:hover .group-hover\:text-brand      { color: var(--c-brand); }
.group:hover .group-hover\:shadow-lg       { box-shadow: var(--shadow-lg); }
.group:hover .group-hover\:shadow-xl       { box-shadow: var(--shadow-xl); }
.group:hover .group-hover\:translate-x-1   { transform: translateX(.25rem); }

/* =============================================================
   Component classes (semantic, optional, used here & there)
   ============================================================= */
.container-x { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px)  { .container-x { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container-x { padding-left: 2rem;   padding-right: 2rem; } }

/* WP-specific: skip link */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; position: absolute;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1; clip: auto !important; clip-path: none;
  color: #21759b; display: block; font-size: .875rem; font-weight: 700;
  height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px;
  text-decoration: none; top: 5px; width: auto; z-index: 100000;
}

/* =============================================================
   Responsive utilities — sm (≥640), md (≥768), lg (≥1024), xl (≥1280)
   ============================================================= */
@media (min-width: 640px) {
  .sm\:flex      { display: flex; }
  .sm\:hidden    { display: none; }
  .sm\:block     { display: block; }
  .sm\:inline    { display: inline; }
  .sm\:grid      { display: grid; }

  .sm\:px-6      { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-28     { padding-top: 7rem; padding-bottom: 7rem; }

  .sm\:text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-5xl  { font-size: 3rem; line-height: 1; }
  .sm\:p-10      { padding: 2.5rem; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:flex-row  { flex-direction: row; }
}

@media (min-width: 768px) {
  .md\:flex        { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:hidden      { display: none; }
  .md\:block       { display: block; }
  .md\:inline      { display: inline; }
  .md\:grid        { display: grid; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }

  .md\:flex-row  { flex-direction: row; }
}

@media (min-width: 1024px) {
  .lg\:flex      { display: flex; }
  .lg\:hidden    { display: none; }
  .lg\:block     { display: block; }
  .lg\:grid      { display: grid; }

  .lg\:flex-row  { flex-direction: row; }
  .lg\:flex-col  { flex-direction: column; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }

  .lg\:px-8      { padding-left: 2rem; padding-right: 2rem; }

  .lg\:text-6xl  { font-size: 3.75rem; line-height: 1; }
}

/* =============================================================
   WordPress core block / content fallbacks
   (used by the editor & page templates that render the_content)
   ============================================================= */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide  { max-width: 80rem; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100%; }

/* =============================================================
   Mobile menu animation (for header.php)
   ============================================================= */
.booklio-mobile-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.booklio-mobile-menu.is-open { max-height: 500px; }

/* =============================================================
   Phase 2 additions — Συγγραφείς / Αυτοέκδοση
   ============================================================= */

/* Extra spacing utilities used by autoekdosi */
.pt-24 { padding-top: 6rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-8  { padding-bottom: 2rem; }
.pb-4  { padding-bottom: 1rem; }
.pl-5  { padding-left: 1.25rem; }
.pl-3  { padding-left: .75rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }

.min-h-\[80vh\] { min-height: 80vh; }

/* Extra colors — accent semantic palette */
.text-red-400     { color: #f87171; }
.text-red-800     { color: #991b1b; }
.bg-red-50        { background-color: #fef2f2; }
.border-red-100   { border-color: #fee2e2; }

.text-emerald-500 { color: #10b981; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.bg-emerald-50    { background-color: #ecfdf5; }
.bg-emerald-100   { background-color: #d1fae5; }
.border-emerald-100 { border-color: #d1fae5; }

/* Brand & cyan with opacity */
.bg-brand\/5    { background-color: rgba(60,6,217,.05); }
.bg-brand\/20   { background-color: rgba(60,6,217,.2); }
.bg-cyan\/5     { background-color: rgba(0,242,255,.05); }
.bg-cyan\/10    { background-color: rgba(0,242,255,.1); }

/* White overlays */
.bg-white\/20   { background-color: rgba(255,255,255,.2); }
.text-white\/70 { color: rgba(255,255,255,.7); }
.text-white\/50 { color: rgba(255,255,255,.5); }
.border-white\/30 { border-color: rgba(255,255,255,.3); }

/* Brand-light fill (for case study card gradient) */
.to-brand-light { --tw-gradient-to: var(--c-brand-light); }
.to-charcoal    { --tw-gradient-to: var(--c-charcoal); }
.from-ink       { --tw-gradient-from: var(--c-ink); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-pearl     { --tw-gradient-from: var(--c-pearl); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* Hover utilities introduced for autoekdosi */
.hover\:bg-brand\/5:hover { background-color: rgba(60,6,217,.05); }
.hover\:bg-cyan\/90:hover { background-color: rgba(0,242,255,.9); }

/* Borders / shapes */
.border-l-4 { border-left: 4px solid currentColor; border-style: solid; }
.border-2   { border-width: 2px; border-style: solid; }

/* Transitions */
.transition-shadow { transition-property: box-shadow; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }

/* =============================================================
   FAQ accordion — toggled via .open on .faq-item
   ============================================================= */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item.is-open .faq-answer { max-height: 500px; }

.faq-icon {
  display: inline-block;
  transition: transform .3s ease;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

/* =============================================================
   Case-study tabs — toggled via .case-tab.is-active / .case-panel.is-active
   ============================================================= */
.case-panel { display: block; }
.case-panel.is-hidden { display: none; }

.case-tab {
  background-color: #fff;
  color: var(--c-charcoal);
  border-color: var(--c-gray-200);
}
.case-tab.is-active {
  background-color: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}

/* =============================================================
   Phase 3 additions — Case Studies
   ============================================================= */

/* Spacing */
.pt-20 { padding-top: 5rem; }
.pt-28 { padding-top: 7rem; }
.pt-4  { padding-top: 1rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }

/* Sizing */
.h-22 { height: 5.5rem; }
.h-32 { height: 8rem; }
.h-44 { height: 11rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-60 { height: 15rem; }
.h-64 { height: 16rem; }
.w-22 { width: 5.5rem; }
.w-24 { width: 6rem; }
.w-44 { width: 11rem; }
.w-48 { width: 12rem; }

/* Negative offsets */
.-mt-2     { margin-top: -.5rem; }
.-bottom-3 { bottom: -.75rem; }
.-right-3  { right: -.75rem; }
.-z-10     { z-index: -10; }

/* Transitions / hover translate */
.hover\:-translate-y-0\.5:hover { transform: translateY(-.125rem); }
.hover\:-translate-y-1:hover    { transform: translateY(-.25rem); }
.hover\:bg-gray-50:hover        { background-color: #f9fafb; }

/* Borders */
.border-y          { border-top: 1px solid var(--c-gray-200); border-bottom: 1px solid var(--c-gray-200); }
.border-gray-50    { border-color: #f9fafb; }

/* Extended palette — used by case-study card covers and badges */
.text-red-500     { color: #ef4444; }
.bg-red-100       { background-color: #fee2e2; }

.bg-emerald-100    { background-color: #d1fae5; }
.text-emerald-700  { color: #047857; }
.from-emerald-50   { --tw-gradient-from: #ecfdf5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-teal-50        { --tw-gradient-to: #f0fdfa; }
.bg-emerald-600\/90 { background-color: rgba(5,150,105,.9); }

.text-purple-600   { color: #9333ea; }
.bg-purple-100     { background-color: #f3e8ff; }
.bg-purple-600\/90 { background-color: rgba(147,51,234,.9); }
.from-purple-100   { --tw-gradient-from: #f3e8ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-pink-50        { --tw-gradient-to: #fdf2f8; }

.bg-amber\/10      { background-color: rgba(217,119,6,.1); }
.bg-amber\/90      { background-color: rgba(217,119,6,.9); }
.text-amber        { color: var(--c-amber); }
.text-amber\/30    { color: rgba(217,119,6,.3); }
.text-amber\/40    { color: rgba(217,119,6,.4); }
.text-amber-light\/40 { color: rgba(251,191,36,.4); }
.border-amber-200  { border-color: #fde68a; }
.from-amber-50     { --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-amber-50       { --tw-gradient-to: #fffbeb; }
.from-rose-50      { --tw-gradient-from: #fff1f2; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-orange-50      { --tw-gradient-to: #fff7ed; }

.from-blue-50      { --tw-gradient-from: #eff6ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-indigo-50      { --tw-gradient-to: #eef2ff; }
.border-blue-200   { border-color: #bfdbfe; }
.text-blue-400\/50 { color: rgba(96,165,250,.5); }

.bg-brand\/10      { background-color: rgba(60,6,217,.1); }
.bg-brand\/90      { background-color: rgba(60,6,217,.9); }
.text-brand\/20    { color: rgba(60,6,217,.2); }
.text-brand\/40    { color: rgba(60,6,217,.4); }
.from-brand\/10    { --tw-gradient-from: rgba(60,6,217,.1); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-cyan\/10       { --tw-gradient-to: rgba(0,242,255,.1); }
.from-brand\/5     { --tw-gradient-from: rgba(60,6,217,.05); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-white         { --tw-gradient-stops: var(--tw-gradient-from), #fff, var(--tw-gradient-to, transparent); }
.to-cyan\/5        { --tw-gradient-to: rgba(0,242,255,.05); }

.text-white\/30    { color: rgba(255,255,255,.3); }
.text-white\/40    { color: rgba(255,255,255,.4); }

.opacity-60        { opacity: .6; }

/* Filter tabs (archive) */
.filter-btn {
  background-color: #fff;
  color: var(--c-charcoal);
  border-color: var(--c-gray-200);
  cursor: pointer;
}
.filter-btn:hover {
  border-color: rgba(60,6,217,.3);
  color: var(--c-brand);
}
.filter-btn.is-active {
  background-color: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}
.filter-btn.is-active:hover { color: #fff; }

/* Case-study card hover lift, fade-in transition for filtering */
.cs-card {
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cs-card.is-hidden { display: none; }

/* Default cover backgrounds when no featured image is set,
   colored by the term slug applied as data-category. */
.cs-cover {
  background: linear-gradient(135deg, rgba(60,6,217,.1), rgba(0,242,255,.1));
}
.cs-card[data-category="novelist"]     .cs-cover { background: linear-gradient(135deg, #f3e8ff, #fdf2f8); }
.cs-card[data-category="professional"] .cs-cover { background: linear-gradient(135deg, #fffbeb, #fff7ed); }
.cs-card[data-category="publisher"]    .cs-cover { background: linear-gradient(135deg, #ecfdf5, #f0fdfa); }
.cs-card[data-category="educator"]     .cs-cover { background: linear-gradient(135deg, rgba(60,6,217,.1), rgba(0,242,255,.1)); }

/* =============================================================
   Phase 4 additions — Marketplace / WooCommerce
   ============================================================= */

/* Aspect ratio for book cover thumbs (3:4 portrait). */
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* Sticky sidebar */
.sticky        { position: sticky; }
.top-24        { top: 6rem; }

/* Sizing extras */
.w-36 { width: 9rem; }
.h-52 { height: 13rem; }
.pl-12 { padding-left: 3rem; }

/* Overflow utilities + horizontal scrolling category strip */
.overflow-x-auto { overflow-x: auto; }
.scrollbar-hide  { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Cart badge & ribbon negative offsets (already have -top-0.5 / -right-0.5) */

/* Rotate utilities for the featured-book mockup hover */
.-rotate-3        { transform: rotate(-3deg); }
.hover\:rotate-0:hover { transform: rotate(0); }

/* Strikethrough sale price */
.line-through    { text-decoration: line-through; }

/* Extra palette — used by marketplace product covers, badges, ribbons */

/* Reds (sale ribbon) */
.bg-red-500       { background-color: #ef4444; }

/* Greens (Νέο, success) */
.bg-emerald-500   { background-color: #10b981; }
.text-emerald-500\/50 { color: rgba(16,185,129,.5); }
.from-emerald-100 { --tw-gradient-from: #d1fae5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* Roses / pinks */
.bg-rose-100      { background-color: #ffe4e6; }
.from-rose-100    { --tw-gradient-from: #ffe4e6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.text-rose-400\/50 { color: rgba(251,113,133,.5); }
.text-rose-600    { color: #e11d48; }
.bg-rose-100      { background-color: #ffe4e6; }
.bg-pink-100      { background-color: #fce7f3; }
.from-pink-100    { --tw-gradient-from: #fce7f3; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-pink-100      { --tw-gradient-to: #fce7f3; }
.text-pink-400\/50 { color: rgba(244,114,182,.5); }
.to-purple-100    { --tw-gradient-to: #f3e8ff; }

/* Ambers / yellows */
.bg-amber-100     { background-color: #fef3c7; }
.from-amber-100   { --tw-gradient-from: #fef3c7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.bg-yellow-50     { background-color: #fefce8; }
.to-yellow-50     { --tw-gradient-to: #fefce8; }

/* Blues / indigos */
.bg-blue-100      { background-color: #dbeafe; }
.from-blue-100    { --tw-gradient-from: #dbeafe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

/* Slates */
.bg-slate-800     { background-color: #1e293b; }
.bg-slate-900     { background-color: #0f172a; }
.from-slate-800   { --tw-gradient-from: #1e293b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-slate-900     { --tw-gradient-to: #0f172a; }

/* Cyan opacities for tags */
.bg-cyan\/20      { background-color: rgba(0,242,255,.2); }
.bg-cyan\/30      { background-color: rgba(0,242,255,.3); }
.text-cyan\/50    { color: rgba(0,242,255,.5); }

/* Ink with opacity (tags on light covers) */
.bg-ink\/10       { background-color: rgba(0,0,40,.1); }

/* Brand opacity helpers used in marketplace */
.focus\:ring-brand\/30:focus  { box-shadow: 0 0 0 3px rgba(60,6,217,.3); }
.focus\:border-brand:focus    { border-color: var(--c-brand); }
.focus\:outline-none:focus    { outline: none; }

/* Centering helpers */
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translateY(-50%); }

/* Grid extras */
@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Form controls — checkboxes/radios/selects matching the design */
.booklio-control input[type="checkbox"],
.booklio-control input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--c-brand);
}
.booklio-select,
.booklio-input {
  width: 100%;
  font-size: .875rem;
  border: 1px solid var(--c-gray-200);
  border-radius: .5rem;
  padding: .5rem .75rem;
  background: #fff;
  color: var(--c-charcoal);
}
.booklio-select:focus,
.booklio-input:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(60,6,217,.3);
}

/* =============================================================
   Book cover placeholder palettes (when no featured image is set)
   Picked by (product_id % 6).
   ============================================================= */
.bk-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--c-brand), var(--c-brand-dark));
  color: #fff;
}
.bk-cover[data-palette="0"] { background: linear-gradient(135deg, var(--c-brand), var(--c-brand-dark)); color: #fff; }
.bk-cover[data-palette="1"] { background: linear-gradient(135deg, var(--c-ink), var(--c-charcoal)); color: #fff; }
.bk-cover[data-palette="2"] { background: linear-gradient(135deg, #d1fae5, #f0fdfa); color: var(--c-ink); }
.bk-cover[data-palette="3"] { background: linear-gradient(135deg, #ffe4e6, #fffbeb); color: var(--c-charcoal); }
.bk-cover[data-palette="4"] { background: linear-gradient(135deg, #dbeafe, #eef2ff); color: var(--c-ink); }
.bk-cover[data-palette="5"] { background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; }
.bk-cover[data-palette="6"] { background: linear-gradient(135deg, #fef3c7, #fefce8); color: var(--c-ink); }
.bk-cover[data-palette="7"] { background: linear-gradient(135deg, #fce7f3, #f3e8ff); color: var(--c-ink); }

/* Tag colour pairs — light covers use ink-tinted tags, dark covers use white-tinted tags. */
.bk-cover[data-palette="0"] .bk-tag,
.bk-cover[data-palette="1"] .bk-tag,
.bk-cover[data-palette="5"] .bk-tag {
  background: rgba(255,255,255,.2);
  color: #fff;
}
.bk-cover[data-palette="2"] .bk-tag,
.bk-cover[data-palette="3"] .bk-tag,
.bk-cover[data-palette="4"] .bk-tag,
.bk-cover[data-palette="6"] .bk-tag,
.bk-cover[data-palette="7"] .bk-tag {
  background: rgba(0,0,40,.1);
  color: var(--c-ink);
}

.bk-cover .bk-author {
  color: rgba(255,255,255,.5);
}
.bk-cover[data-palette="2"] .bk-author,
.bk-cover[data-palette="3"] .bk-author,
.bk-cover[data-palette="4"] .bk-author,
.bk-cover[data-palette="6"] .bk-author,
.bk-cover[data-palette="7"] .bk-author {
  color: var(--c-smoke);
}

/* =============================================================
   Marketplace search bar (collapsible header overlay)
   ============================================================= */
.booklio-searchbar {
  position: fixed;
  top: 4rem;
  left: 0; right: 0;
  background: #fff;
  z-index: 40;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.booklio-searchbar.is-open { max-height: 120px; }
body.admin-bar .booklio-searchbar { top: calc(4rem + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .booklio-searchbar { top: calc(4rem + 46px); }
}

/* =============================================================
   WooCommerce reset / integration
   Strip the default theme wrapper styles WC injects so our markup
   wraps things instead.
   ============================================================= */
.woocommerce-page #primary,
.woocommerce-page #content { width: 100%; max-width: none; padding: 0; margin: 0; }

/* WC notices look reasonable inside our shell */
.woocommerce-notices-wrapper { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--c-pearl);
  border-left: 4px solid var(--c-brand);
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  margin: 1rem 0;
  font-size: .875rem;
}
.woocommerce-error { border-left-color: var(--c-error); background: #fef2f2; }
.woocommerce-message { border-left-color: var(--c-success); background: #ecfdf5; }
.woocommerce-message a.button,
.woocommerce-info a.button {
  margin-left: .5rem;
  text-decoration: underline;
}

/* WC quantity inputs / forms */
.quantity .qty {
  width: 4rem;
  text-align: center;
  border: 1px solid var(--c-gray-200);
  border-radius: .5rem;
  padding: .5rem;
}

/* Add-to-cart / generic Woo buttons keep our brand look */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.wc-block-components-button {
  background-color: var(--c-brand);
  color: #fff;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: .75rem;
  border: 0;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--c-brand-dark);
  box-shadow: var(--shadow-brand);
}

/* WC tables (cart, checkout) */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .875rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: .75rem;
  border-bottom: 1px solid var(--c-gray-200);
  text-align: left;
}
.woocommerce table.shop_table tfoot th { font-weight: 700; }

/* Star ratings */
.star-rating { color: var(--c-amber); }

/* =============================================================
   Phase 5 additions — Wizard (Εργαλείο Κοστολόγησης)
   ============================================================= */

/* Visually-hidden but accessible — used by wizard radio inputs */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Step panels (only the active one is shown). */
.step-panel { display: none; }
.step-panel.active {
  display: block;
  animation: booklio-fadeIn .3s ease;
}
@keyframes booklio-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes booklio-spin { to { transform: rotate(360deg); } }

/* Format / service / interactive selectable cards */
.format-card,
.service-card,
.interactive-card {
  transition: all .2s ease;
  cursor: pointer;
}
.format-card.selected,
.service-card.selected,
.interactive-card.selected {
  border-color: var(--c-brand);
  background: rgba(60, 6, 217, 0.04);
  box-shadow: 0 0 0 2px rgba(60, 6, 217, 0.2);
}

/* Native checkmark "check" indicator */
.fmt-check {
  width: 24px; height: 24px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.format-card.selected .fmt-check,
.interactive-card.selected .fmt-check,
.service-card.selected .fmt-check {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.fmt-check svg { opacity: 0; color: #fff; width: 16px; height: 16px; }
.format-card.selected .fmt-check svg,
.interactive-card.selected .fmt-check svg,
.service-card.selected .fmt-check svg { opacity: 1; }

/* Range slider — used for τιράζ */
input[type="range"].booklio-range,
.wizard-range {
  -webkit-appearance: none; appearance: none;
  height: 6px;
  width: 100%;
  background: var(--c-gray-200);
  border-radius: 3px;
  outline: none;
}
input[type="range"].booklio-range::-webkit-slider-thumb,
.wizard-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--c-brand);
  border-radius: 50%;
  cursor: pointer;
  border: 0;
}
input[type="range"].booklio-range::-moz-range-thumb,
.wizard-range::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--c-brand);
  border-radius: 50%;
  cursor: pointer;
  border: 0;
}

/* Spinner used by file analysis */
.wizard-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(60,6,217,.2);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  margin: 0 auto;
  animation: booklio-spin 1s linear infinite;
}

/* Tailwind has-[:checked] is unsupported pre-v3.4 — emulate it. The wizard
   uses <input type="radio" class="sr-only"> inside <label>. */
.wizard-radio-card { transition: all .2s; }
.wizard-radio-card:has(input:checked) {
  border-color: var(--c-brand);
  background: rgba(60,6,217,.05);
}

/* Wizard-specific background tones used in success / error panels. */
.bg-purple-50      { background-color: #faf5ff; }
.border-purple-200 { border-color: #e9d5ff; }
.bg-amber-50       { background-color: #fffbeb; }
.border-amber-200  { border-color: #fde68a; }
.text-amber-700    { color: #b45309; }
.text-amber-800    { color: #92400e; }
.text-amber-600    { color: #d97706; }
.text-emerald-200  { color: #a7f3d0; }
.border-emerald-200 { border-color: #a7f3d0; }
.text-red-700      { color: #b91c1c; }
.bg-red-50         { background-color: #fef2f2; }
.border-red-200    { border-color: #fecaca; }
.border-red-400    { border-color: #f87171; }

/* Larger spacing utility used by sticky pricing sidebar */
.flex-1 { flex: 1 1 0%; }

/* Wizard 2-col layout with sticky sidebar — 1fr for main, 350px sidebar.
   Tailwind syntax `lg:grid-cols-[1fr_350px]` is supported by JIT but not
   by our hand-written CSS, so we emulate via a real selector. */
.wizard-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .wizard-grid { grid-template-columns: 1fr 350px; }
}