/*
 * tailwind-light.css
 * Minimal replacement for tailwindcss@2.2.19/dist/tailwind.min.css
 * Contains only the utility classes used across payment page templates.
 * Drop-in replacement — reference this file from storage instead of the CDN.
 */

/* ── Minimal preflight ─────────────────────────────────────────── */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: inherit; line-height: inherit; }
img, video { max-width: 100%; height: auto; display: block; }
input, button, select, textarea { font-family: inherit; font-size: 100%; margin: 0; padding: 0; line-height: inherit; color: inherit; }
button { cursor: pointer; background-color: transparent; background-image: none; }
a { color: inherit; text-decoration: inherit; }

/* ── Display ───────────────────────────────────────────────────── */
.flex  { display: flex; }
.grid  { display: grid; }
.block { display: block; }

/* ── Flex ──────────────────────────────────────────────────────── */
.flex-col     { flex-direction: column; }
.flex-grow    { flex-grow: 1; }
.items-center { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ── Sizing ────────────────────────────────────────────────────── */
.min-h-screen { min-height: 100vh; }
.h-auto       { height: auto; }
.h-12         { height: 3rem; }
.w-full       { width: 100%; }
.w-12         { width: 3rem; }
.w-1\/3       { width: 33.333333%; }
.w-1\/4       { width: 25%; }
.w-2\/3       { width: 66.666667%; }
.w-2\/4       { width: 50%; }
.max-w-full   { max-width: 100%; }

/* ── Gap & Space ───────────────────────────────────────────────── */
.gap-4 { gap: 1rem; }
.space-x-4 > * + * { margin-left: 1rem; }

/* ── Margin ────────────────────────────────────────────────────── */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-0 { margin-top: 0px; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Padding ───────────────────────────────────────────────────── */
.p-1  { padding: 0.25rem; }
.p-2  { padding: 0.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pt-4 { padding-top: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem;   padding-right: 2rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }

/* ── Typography ────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-xs     { font-size: 0.75rem;   line-height: 1rem; }
.text-sm     { font-size: 0.875rem;  line-height: 1.25rem; }
.font-bold   { font-weight: 700; }
.underline   { text-decoration-line: underline; }

/* ── Borders ───────────────────────────────────────────────────── */
.border          { border-width: 1px; }
.border-b-2      { border-bottom-width: 2px; }
.border-gray-300 { border-color: #d1d5db; }
.border-blue-500 { border-color: #3b82f6; }
.rounded-full    { border-radius: 9999px; }
.rounded-md      { border-radius: 0.375rem; }

/* ── Colors ────────────────────────────────────────────────────── */
.bg-gray-100   { background-color: #f3f4f6; }
.text-gray-700 { color: #374151; }

/* ── Animation ─────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ── Responsive: md (≥768px) ───────────────────────────────────── */
@media (min-width: 768px) {
  .md\:flex-1       { flex: 1 1 0%; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:p-2          { padding: 0.5rem; }
  .md\:p-8          { padding: 2rem; }
  .md\:rounded-l-lg { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
  .md\:rounded-r-lg { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
  .md\:w-2\/3       { width: 66.666667%; }
}