/* tailwind-utils.css — self-hosted Tailwind utility subset for flat4sale */
/* Covers all classes used in top_discover_banner_html.php + location_*.php  */

/* ── ANIMATIONS ─────────────────────────────────────────────────────────── */
@keyframes fadeIn  { 0%   { opacity:0; transform:translateY(20px) } 100% { opacity:1; transform:translateY(0) } }
@keyframes slideUp { 0%   { opacity:0; transform:translateY(40px) } 100% { opacity:1; transform:translateY(0) } }
@keyframes pulse   { 0%,100% { opacity:1 } 50% { opacity:.5 } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px) scale(.98) } to { opacity:1; transform:translateY(0) scale(1) } }

.animate-fade-in     { animation: fadeIn  0.6s ease-in-out; }
.animate-slide-up    { animation: slideUp 0.8s ease-out; }
.animate-pulse-slow  { animation: pulse   3s infinite; }
.animate-fade-in-up  { animation: fadeInUp 0.25s cubic-bezier(.2,.9,.4,1.1) forwards; }

/* ── DISPLAY ─────────────────────────────────────────────────────────────── */
.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 }
.contents     { display:contents }

/* ── FLEXBOX ─────────────────────────────────────────────────────────────── */
.flex-col       { flex-direction:column }
.flex-row       { flex-direction:row }
.flex-wrap      { flex-wrap:wrap }
.flex-1         { flex:1 1 0% }
.flex-auto      { flex:1 1 auto }
.flex-none      { flex:none }
.flex-shrink-0  { flex-shrink:0 }
.shrink-0       { flex-shrink:0 }
.grow           { flex-grow:1 }
.flex-grow      { flex-grow:1 }
.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-center    { align-self:center }

/* ── GRID ────────────────────────────────────────────────────────────────── */
.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)) }
.auto-rows-fr { grid-auto-rows:minmax(0,1fr) }

/* ── GAP ─────────────────────────────────────────────────────────────────── */
.gap-1   { gap:.25rem }  .gap-1\.5 { gap:.375rem } .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-x-2 { column-gap:.5rem }  .gap-y-2 { row-gap:.5rem }

/* ── 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-1   { padding-left:.25rem;  padding-right:.25rem }
.px-2   { padding-left:.5rem;   padding-right:.5rem }
.px-2\.5{ padding-left:.625rem; padding-right:.625rem }
.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-8   { padding-left:2rem;    padding-right:2rem }

.py-0\.5{ padding-top:.125rem; padding-bottom:.125rem }
.py-1   { padding-top:.25rem;  padding-bottom:.25rem }
.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-4   { padding-top:1rem;    padding-bottom:1rem }
.py-5   { padding-top:1.25rem; padding-bottom:1.25rem }
.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 }

.pt-0 { padding-top:0 }    .pt-2 { padding-top:.5rem }   .pt-4 { padding-top:1rem }
.pt-6 { padding-top:1.5rem } .pt-8 { padding-top:2rem }
.pb-2 { padding-bottom:.5rem }  .pb-4 { padding-bottom:1rem }
.pl-2 { padding-left:.5rem }    .pr-2 { padding-right:.5rem }

/* ── MARGIN ──────────────────────────────────────────────────────────────── */
.m-0   { margin:0 }
.mx-auto { margin-left:auto; margin-right:auto }
.my-4  { margin-top:1rem;    margin-bottom:1rem }
.my-6  { margin-top:1.5rem;  margin-bottom:1.5rem }

.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 }

.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 }

.ml-0    { margin-left:0 }      .ml-0\.5 { margin-left:.125rem }
.ml-1    { margin-left:.25rem } .ml-2    { margin-left:.5rem }
.ml-auto { margin-left:auto }
.mr-1    { margin-right:.25rem } .mr-2    { margin-right:.5rem } .mr-4  { margin-right:1rem }

/* ── SIZING ──────────────────────────────────────────────────────────────── */
.w-0\.5 { width:.125rem }  .w-1  { width:.25rem }  .w-2  { width:.5rem }
.w-3    { width:.75rem }   .w-4  { width:1rem }    .w-5  { width:1.25rem }
.w-6    { width:1.5rem }   .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-24 { width:6rem }
.w-auto { width:auto }     .w-full { width:100% }   .w-screen { width:100vw }

.h-0\.5 { height:.125rem } .h-1  { height:.25rem }  .h-2  { height:.5rem }
.h-3    { height:.75rem }  .h-4  { height:1rem }    .h-5  { height:1.25rem }
.h-6    { height:1.5rem }  .h-8  { height:2rem }    .h-10 { height:2.5rem }
.h-12   { height:3rem }    .h-14 { height:3.5rem }  .h-16 { height:4rem }
.h-full { height:100% }    .h-screen { height:100vh }
.min-h-0 { min-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% }

/* ── POSITION ────────────────────────────────────────────────────────────── */
.static   { position:static }    .relative { position:relative }
.absolute { position:absolute }  .fixed    { position:fixed }
.sticky   { position:sticky; top:0 }

.inset-0   { top:0; right:0; bottom:0; left:0 }
.inset-x-0 { left:0; right:0 }
.top-0  { top:0 }    .top-3  { top:.75rem }  .top-4 { top:1rem }
.right-0{ right:0 }  .right-3{ right:.75rem } .right-4{ right:1rem }
.bottom-0{ bottom:0 } .bottom-3{ bottom:.75rem }
.left-0 { left:0 }   .left-3 { left:.75rem }

.z-0  { z-index:0 }   .z-10 { z-index:10 }  .z-20 { z-index:20 }
.z-30 { z-index:30 }  .z-40 { z-index:40 }  .z-50 { z-index:50 }

/* ── OVERFLOW ────────────────────────────────────────────────────────────── */
.overflow-hidden  { overflow:hidden }
.overflow-auto    { overflow:auto }
.overflow-y-auto  { overflow-y:auto }
.overflow-x-hidden{ overflow-x:hidden }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */
.text-\[10px\]{ font-size:10px; line-height:1 }
.text-\[11px\]{ font-size:11px; line-height:1 }
.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 }

.font-light    { font-weight:300 }  .font-normal   { font-weight:400 }
.font-medium   { font-weight:500 }  .font-semibold { font-weight:600 }
.font-bold     { font-weight:700 }  .font-extrabold{ font-weight:800 }
.font-sans     { font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,sans-serif }

.text-left   { text-align:left }    .text-center  { text-align:center }
.text-right  { text-align:right }
.uppercase   { text-transform:uppercase }  .lowercase { text-transform:lowercase }
.capitalize  { text-transform:capitalize } .italic    { font-style:italic }
.whitespace-nowrap { white-space:nowrap }
.leading-none  { line-height:1 }    .leading-tight { line-height:1.25 }
.leading-snug  { line-height:1.375 }.leading-normal{ line-height:1.5 }
.tracking-tight { letter-spacing:-.025em } .tracking-normal{ letter-spacing:0 }
.tracking-wide  { letter-spacing:.025em }  .tracking-wider { letter-spacing:.05em }
.tracking-widest{ letter-spacing:.1em }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.space-y-1 > * + * { margin-top:.25rem }
.space-y-2 > * + * { margin-top:.5rem }
.space-y-3 > * + * { margin-top:.75rem }
.space-y-4 > * + * { margin-top:1rem }

/* ── TEXT COLOURS ────────────────────────────────────────────────────────── */
.text-white { color:#fff }  .text-black { color:#000 }  .text-transparent { color:transparent }
.text-slate-400 { color:#94a3b8 }  .text-slate-500 { color:#64748b }
.text-slate-600 { color:#475569 }  .text-slate-700 { color:#334155 }
.text-slate-800 { color:#1e293b }  .text-slate-900 { color:#0f172a }
.text-gray-400  { color:#9ca3af }  .text-gray-500  { color:#6b7280 }
.text-sky-600   { color:#0284c7 }
.text-orange-600{ color:#ea580c }
.text-teal-600  { color:#0d9488 }
.text-lime-600  { color:#65a30d }
.text-pink-600  { color:#db2777 }
.text-violet-600{ color:#7c3aed }  .text-violet-700{ color:#6d28d9 }
.text-fuchsia-600{color:#c026d3 }  .text-fuchsia-700{color:#a21caf }
.text-rose-600  { color:#e11d48 }  .text-rose-700  { color:#be123c }
.text-amber-600 { color:#d97706 }  .text-amber-700 { color:#b45309 }
.text-emerald-600{color:#059669 }
.text-green-700 { color:#15803d }
.text-indigo-400{ color:#818cf8 }  .text-indigo-500{ color:#6366f1 }
.text-indigo-700{ color:#4338ca }
.text-blue-600  { color:#2563eb }
.text-purple-600{ color:#9333ea }

/* opacity text variants */
.text-white\/80 { color:rgba(255,255,255,.8) }

/* ── BACKGROUND COLOURS ──────────────────────────────────────────────────── */
.bg-white       { background-color:#fff }
.bg-black       { background-color:#000 }
.bg-transparent { background-color:transparent }
.bg-slate-50    { background-color:#f8fafc }  .bg-slate-100   { background-color:#f1f5f9 }
.bg-slate-200   { background-color:#e2e8f0 }  .bg-slate-800   { background-color:#1e293b }
.bg-slate-900   { background-color:#0f172a }
.bg-gray-50     { background-color:#f9fafb }  .bg-gray-100    { background-color:#f3f4f6 }
.bg-gray-900    { background-color:#111827 }
.bg-sky-100     { background-color:#e0f2fe }  .bg-sky-500     { background-color:#0ea5e9 }
.bg-orange-100  { background-color:#ffedd5 }  .bg-orange-500  { background-color:#f97316 }
.bg-teal-100    { background-color:#ccfbf1 }  .bg-teal-500    { background-color:#14b8a6 }
.bg-lime-100    { background-color:#ecfccb }  .bg-lime-500    { background-color:#84cc16 }
.bg-pink-100    { background-color:#fce7f3 }  .bg-pink-500    { background-color:#ec4899 }
.bg-violet-100  { background-color:#ede9fe }  .bg-violet-200  { background-color:#ddd6fe }
.bg-violet-500  { background-color:#8b5cf6 }
.bg-fuchsia-100 { background-color:#fae8ff }  .bg-fuchsia-200 { background-color:#f5d0fe }
.bg-fuchsia-500 { background-color:#d946ef }
.bg-rose-50     { background-color:#fff1f2 }  .bg-rose-100    { background-color:#ffe4e6 }
.bg-rose-200    { background-color:#fecdd3 }  .bg-rose-500    { background-color:#f43f5e }
.bg-amber-50    { background-color:#fffbeb }  .bg-amber-100   { background-color:#fef3c7 }
.bg-amber-200   { background-color:#fde68a }  .bg-amber-500   { background-color:#f59e0b }
.bg-emerald-50  { background-color:#ecfdf5 }  .bg-emerald-100 { background-color:#d1fae5 }
.bg-emerald-500 { background-color:#10b981 }
.bg-indigo-50   { background-color:#eef2ff }  .bg-indigo-100  { background-color:#e0e7ff }
.bg-indigo-600  { background-color:#4f46e5 }
.bg-blue-100    { background-color:#dbeafe }  .bg-blue-500    { background-color:#3b82f6 }
.bg-purple-100  { background-color:#f3e8ff }  .bg-purple-500  { background-color:#a855f7 }

/* opacity bg variants */
.bg-black\/70   { background-color:rgba(0,0,0,.7) }
.bg-black\/95   { background-color:rgba(0,0,0,.95) }
.bg-white\/80   { background-color:rgba(255,255,255,.8) }
.bg-white\/90   { background-color:rgba(255,255,255,.9) }
.bg-white\/95   { background-color:rgba(255,255,255,.95) }
.bg-slate-900\/80 { background-color:rgba(15,23,42,.8) }

/* ── GRADIENTS ───────────────────────────────────────────────────────────── */
.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-slate-50   { --tw-gradient-from:#f8fafc;  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(248,250,252,0)) }
.from-slate-900  { --tw-gradient-from:#0f172a;  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(15,23,42,0)) }
.from-indigo-500 { --tw-gradient-from:#6366f1;  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(99,102,241,0)) }
.via-blue-500    { --tw-gradient-stops:var(--tw-gradient-from),#3b82f6,var(--tw-gradient-to,rgba(59,130,246,0)) }
.via-white       { --tw-gradient-stops:var(--tw-gradient-from),#fff,var(--tw-gradient-to,rgba(255,255,255,0)) }
.to-slate-100    { --tw-gradient-to:#f1f5f9 }
.to-slate-800    { --tw-gradient-to:#1e293b }
.to-emerald-500  { --tw-gradient-to:#10b981 }
.to-indigo-50\/30{ --tw-gradient-to:rgba(238,242,255,.3) }

/* ── BORDER ──────────────────────────────────────────────────────────────── */
.border   { border-width:1px; border-style:solid }
.border-0 { border-width:0 }
.border-t { border-top-width:1px; border-top-style:solid }
.border-b { border-bottom-width:1px; border-bottom-style:solid }
.border-l { border-left-width:1px; border-left-style:solid }
.border-r { border-right-width:1px; border-right-style:solid }

.border-transparent   { border-color:transparent }
.border-white         { border-color:#fff }
.border-slate-100     { border-color:#f1f5f9 }
.border-slate-200     { border-color:#e2e8f0 }
.border-slate-200\/80 { border-color:rgba(226,232,240,.8) }
.border-indigo-200    { border-color:#c7d2fe }
.border-violet-200    { border-color:#ddd6fe }
.border-fuchsia-200   { border-color:#f5d0fe }
.border-rose-200      { border-color:#fecdd3 }
.border-amber-200     { border-color:#fde68a }
.border-white\/20     { border-color:rgba(255,255,255,.2) }
.border-white\/60     { border-color:rgba(255,255,255,.6) }

/* ── BORDER RADIUS ───────────────────────────────────────────────────────── */
.rounded-none { border-radius:0 }        .rounded-sm { border-radius:.125rem }
.rounded      { border-radius:.25rem }   .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 }

/* ── SHADOWS ─────────────────────────────────────────────────────────────── */
.shadow-none { box-shadow:none }
.shadow-sm   { box-shadow:0 1px 2px 0 rgba(0,0,0,.05) }
.shadow      { box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1) }
.shadow-md   { box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1) }
.shadow-lg   { box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1) }
.shadow-xl   { box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1) }
.shadow-2xl  { box-shadow:0 25px 50px -12px rgba(0,0,0,.25) }
.shadow-slate-300\/40 { box-shadow:0 25px 50px -12px rgba(203,213,225,.4) }
.shadow-indigo-100\/40{ box-shadow:0 20px 25px -5px rgba(224,231,255,.4) }

/* ── OPACITY ─────────────────────────────────────────────────────────────── */
.opacity-0  { opacity:0 }   .opacity-50 { opacity:.5 }  .opacity-75 { opacity:.75 }
.opacity-80 { opacity:.8 }  .opacity-90 { opacity:.9 }  .opacity-100{ opacity:1 }

/* ── OBJECT FIT ──────────────────────────────────────────────────────────── */
.object-cover   { object-fit:cover }    .object-contain { object-fit:contain }
.object-center  { object-position:center }

/* ── ASPECT RATIO ────────────────────────────────────────────────────────── */
.aspect-video   { aspect-ratio:16/9 }
.aspect-\[4\/3\]{ aspect-ratio:4/3 }

/* ── BACKDROP ────────────────────────────────────────────────────────────── */
.backdrop-blur-sm { backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px) }
.backdrop-blur    { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }

/* ── RING ────────────────────────────────────────────────────────────────── */
.ring-1              { box-shadow:inset 0 0 0 1px rgba(59,130,246,.5) }
.ring-inset          { box-shadow:inset 0 0 0 1px rgba(59,130,246,.5) }
.ring-indigo-200\/70 { box-shadow:inset 0 0 0 1px rgba(199,210,254,.7) }

/* ── CURSOR / SELECT ─────────────────────────────────────────────────────── */
.cursor-pointer { cursor:pointer }   .cursor-default { cursor:default }
.select-none    { user-select:none }

/* ── TRANSITIONS ─────────────────────────────────────────────────────────── */
.transition        { transition-property:color,background-color,border-color,opacity,box-shadow,transform,filter; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms }
.transition-all    { transition-property:all;   transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms }
.transition-colors { transition-property:color,background-color,border-color; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms }
.transition-transform { transition-property:transform; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms }
.duration-100 { transition-duration:100ms }  .duration-150 { transition-duration:150ms }
.duration-200 { transition-duration:200ms }  .duration-300 { transition-duration:300ms }
.duration-500 { transition-duration:500ms }  .duration-700 { transition-duration:700ms }
.ease-in      { transition-timing-function:cubic-bezier(.4,0,1,1) }
.ease-out     { transition-timing-function:cubic-bezier(0,0,.2,1) }
.ease-in-out  { transition-timing-function:cubic-bezier(.4,0,.2,1) }

/* ── TRANSFORM / SCALE ───────────────────────────────────────────────────── */
.scale-100 { transform:scale(1) }   .scale-105 { transform:scale(1.05) }
.scale-110 { transform:scale(1.1) } .scale-\[1\.02\] { transform:scale(1.02) }

/* ── HOVER STATES ────────────────────────────────────────────────────────── */
.hover\:bg-slate-50:hover   { background-color:#f8fafc }
.hover\:bg-violet-200:hover { background-color:#ddd6fe }
.hover\:bg-fuchsia-200:hover{ background-color:#f5d0fe }
.hover\:bg-rose-200:hover   { background-color:#fecdd3 }
.hover\:bg-amber-200:hover  { background-color:#fde68a }
.hover\:bg-indigo-600:hover { background-color:#4f46e5 }
.hover\:shadow-xl:hover     { box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1) }
.hover\:border-violet-200:hover { border-color:#ddd6fe }
.hover\:border-fuchsia-200:hover{ border-color:#f5d0fe }
.hover\:border-rose-200:hover   { border-color:#fecdd3 }
.hover\:border-amber-200:hover  { border-color:#fde68a }
.hover\:border-indigo-200:hover { border-color:#c7d2fe }
.hover\:scale-110:hover { transform:scale(1.1) }
.hover\:scale-\[1\.05\]:hover { transform:scale(1.05) }
.hover\:text-white:hover { color:#fff }

/* ── GROUP HOVER ─────────────────────────────────────────────────────────── */
.group:hover .group-hover\:bg-violet-200  { background-color:#ddd6fe }
.group:hover .group-hover\:bg-fuchsia-200 { background-color:#f5d0fe }
.group:hover .group-hover\:bg-rose-200    { background-color:#fecdd3 }
.group:hover .group-hover\:bg-amber-200   { background-color:#fde68a }
.group:hover .group-hover\:bg-indigo-600  { background-color:#4f46e5 }
.group:hover .group-hover\:text-violet-700{ color:#6d28d9 }
.group:hover .group-hover\:text-fuchsia-700{color:#a21caf }
.group:hover .group-hover\:text-rose-700  { color:#be123c }
.group:hover .group-hover\:text-amber-700 { color:#b45309 }
.group:hover .group-hover\:text-white     { color:#fff }
.group:hover .group-hover\:scale-110      { transform:scale(1.1) }

/* Named group variant group/card */
.group\/card:hover .group-hover\/card\:scale-110 { transform:scale(1.1) }
.group\/card:hover .group-hover\/card\:bg-indigo-600 { background-color:#4f46e5 }
.group\/card:hover .group-hover\/card\:text-white    { color:#fff }

/* ── RESPONSIVE — sm ≥640px ──────────────────────────────────────────────── */
@media (min-width:640px) {
  .sm\:block        { display:block }        .sm\:hidden       { display:none }
  .sm\:inline-flex  { display:inline-flex }  .sm\:flex         { display:flex }
  .sm\:flex-row     { flex-direction:row }   .sm\:flex-col     { flex-direction:column }
  .sm\:flex-shrink-0{ flex-shrink:0 }        .sm\:flex-1       { flex:1 1 0% }
  .sm\:items-center { align-items:center }   .sm\:justify-between { justify-content:space-between }
  .sm\:grid-cols-2  { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sm\:grid-cols-3  { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .sm\:gap-2  { gap:.5rem }   .sm\:gap-6  { gap:1.5rem }
  .sm\:p-6    { padding:1.5rem }  .sm\:p-8 { padding:2rem }
  .sm\:px-6   { padding-left:1.5rem; padding-right:1.5rem }
  .sm\:px-8   { padding-left:2rem;   padding-right:2rem }
  .sm\:py-4   { padding-top:1rem;    padding-bottom:1rem }
  .sm\:py-12  { padding-top:3rem;    padding-bottom:3rem }
  .sm\:mt-12  { margin-top:3rem }   .sm\:mb-0  { margin-bottom:0 }
  .sm\:mr-4   { margin-right:1rem } .sm\:ml-auto { margin-left:auto }
  .sm\:text-sm   { font-size:.875rem; line-height:1.25rem }
  .sm\:text-base { font-size:1rem;    line-height:1.5rem }
  .sm\:text-lg   { font-size:1.125rem;line-height:1.75rem }
  .sm\:text-xl   { font-size:1.25rem; line-height:1.75rem }
  .sm\:text-2xl  { font-size:1.5rem;  line-height:2rem }
  .sm\:text-3xl  { font-size:1.875rem;line-height:2.25rem }
  .sm\:w-auto    { width:auto }      .sm\:w-full { width:100% }
}

/* ── RESPONSIVE — md ≥768px ──────────────────────────────────────────────── */
@media (min-width:768px) {
  .md\:block    { display:block }  .md\:hidden { display:none }
  .md\:flex     { display:flex }   .md\:flex-row { flex-direction:row }
  .md\:items-center   { align-items:center }
  .md\:justify-between{ justify-content:space-between }
  .md\:text-base { font-size:1rem;   line-height:1.5rem }
  .md\:text-xl   { font-size:1.25rem;line-height:1.75rem }
  .md\:text-2xl  { font-size:1.5rem; line-height:2rem }
  .md\:mx-0 { margin-left:0; margin-right:0 }
}

/* ── RESPONSIVE — lg ≥1024px ─────────────────────────────────────────────── */
@media (min-width:1024px) {
  .lg\:block  { display:block }  .lg\:hidden { display:none }
  .lg\:flex   { display:flex }
  .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\:px-8   { padding-left:2rem; padding-right:2rem }
  .lg\:py-16  { padding-top:4rem;  padding-bottom:4rem }
  .lg\:p-12   { padding:3rem }
  .lg\:text-lg  { font-size:1.125rem;line-height:1.75rem }
  .lg\:text-xl  { font-size:1.25rem; line-height:1.75rem }
  .lg\:text-2xl { font-size:1.5rem;  line-height:2rem }
  .lg\:text-3xl { font-size:1.875rem;line-height:2.25rem }
  .lg\:text-4xl { font-size:2.25rem; line-height:2.5rem }
}

/* ── RESPONSIVE — xl ≥1280px ─────────────────────────────────────────────── */
@media (min-width:1280px) {
  .xl\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .xl\:text-5xl    { font-size:3rem; line-height:1 }
}