/**
 * Serenity Booking - Tailwind Utility Replacement
 * Covers all utility classes used in booking-page.php and booking-frontend.js
 *
 * @package Serenity_Booking
 * @since   1.0.0
 */

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }

/* ── Display ──────────────────────────────────────────────── */
.block         { display: block; }
.flex          { display: flex; }
.grid          { display: grid; }
.hidden        { display: none !important; }
.inline-block  { display: inline-block; }
.inline-flex   { display: inline-flex; }

/* ── Flex helpers ─────────────────────────────────────────── */
.flex-1          { flex: 1 1 0%; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ── Grid ─────────────────────────────────────────────────── */
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.col-span-full { grid-column: 1 / -1; }

@media (min-width: 768px) {
    .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\:col-span-2  { grid-column: span 2 / span 2; }
}

/* ── Sizing ───────────────────────────────────────────────── */
.w-3  { width: 0.75rem; }
.w-5  { width: 1.25rem; }
.w-6  { width: 1.5rem; }
.w-8  { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-full { width: 100%; }
.h-3  { height: 0.75rem; }
.h-5  { height: 1.25rem; }
.h-6  { height: 1.5rem; }
.h-8  { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-full { height: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-h-\[500px\] { max-height: 500px; }
.min-h-\[140px\] { min-height: 140px; }
.overflow-hidden   { overflow: hidden; }
.overflow-y-auto   { overflow-y: auto; }

/* ── Object fit ───────────────────────────────────────────── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Positioning ──────────────────────────────────────────── */
.relative  { position: relative; }
.absolute  { position: absolute; }
.sticky    { position: sticky; }
.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.top-0     { top: 0; }
.top-1\/2  { top: 50%; }
.bottom-2  { bottom: 0.5rem; }
.right-2   { right: 0.5rem; }
.right-3   { right: 0.75rem; }
.left-0    { left: 0; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.z-10  { z-index: 10; }
.z-50  { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Spacing — margin ─────────────────────────────────────── */
.m-0  { margin: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* ── Spacing — padding ────────────────────────────────────── */
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-8 { padding-bottom: 2rem; }
.pr-10 { padding-right: 2.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-8 { padding-top: 2rem; }

/* ── Typography ───────────────────────────────────────────── */
.font-bold      { font-weight: 700; }
.font-semibold  { font-weight: 600; }
.font-medium    { font-weight: 500; }
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.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-6xl  { font-size: 3.75rem;  line-height: 1; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.underline    { text-decoration: underline; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Colours — text ───────────────────────────────────────── */
.text-white     { color: #ffffff; }
.text-gray-400  { color: #9ca3af; }
.text-gray-500  { color: #6b7280; }
.text-gray-600  { color: #4b5563; }
.text-gray-700  { color: #374151; }
.text-gray-900  { color: #111827; }
.text-blue-600  { color: #2563eb; }
.text-blue-800  { color: #1e40af; }
.text-blue-900  { color: #1e3a8a; }
.text-green-600 { color: #16a34a; }
.text-green-800 { color: #166534; }
.text-red-600   { color: #dc2626; }

/* ── Colours — background ─────────────────────────────────── */
.bg-white      { background-color: #ffffff; }
.bg-gray-50    { background-color: #f9fafb; }
.bg-gray-100   { background-color: #f3f4f6; }
.bg-gray-200   { background-color: #e5e7eb; }
.bg-gray-300   { background-color: #d1d5db; }
.bg-blue-50    { background-color: #eff6ff; }
.bg-blue-100   { background-color: #dbeafe; }
.bg-blue-600   { background-color: #2563eb; }
.bg-green-50   { background-color: #f0fdf4; }
.bg-green-100  { background-color: #dcfce7; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #eff6ff), var(--tw-gradient-to, #dbeafe)); }
.from-blue-100 { --tw-gradient-from: #dbeafe; }
.to-blue-50    { --tw-gradient-to: #eff6ff; }
.from-blue-400 { --tw-gradient-from: #60a5fa; }
.to-transparent { --tw-gradient-to: transparent; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from, #60a5fa), var(--tw-gradient-to, transparent)); }

/* ── Borders ──────────────────────────────────────────────── */
.border          { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-0        { border-width: 0; }
.border-2        { border-width: 2px; border-style: solid; }
.border-4        { border-width: 4px; border-style: solid; }
.border-t        { border-top: 1px solid #e5e7eb; }
.border-b        { border-bottom: 1px solid #e5e7eb; }
.border-white    { border-color: #ffffff; }
.border-gray-300 { border-color: #d1d5db; }
.border-blue-200 { border-color: #bfdbfe; }
.border-blue-600 { border-color: #2563eb; }
.border-green-200 { border-color: #bbf7d0; }
.border-transparent { border-color: transparent; }
.rounded         { border-radius: 0.25rem; }
.rounded-md      { border-radius: 0.375rem; }
.rounded-lg      { border-radius: 0.5rem; }
.rounded-xl      { border-radius: 0.75rem; }
.rounded-full    { border-radius: 9999px; }

/* ── Shadows ──────────────────────────────────────────────── */
.shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.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); }

/* ── Cursor ───────────────────────────────────────────────── */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }

/* ── Transitions ──────────────────────────────────────────── */
.transition         { transition-property: color,background-color,border-color,fill,stroke,opacity,box-shadow,transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.transition-colors  { transition-property: color,background-color,border-color; transition-duration: 150ms; }
.duration-200       { transition-duration: 200ms; }

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

/* ── Opacity ──────────────────────────────────────────────── */
.opacity-50 { opacity: 0.5; }

/* ── Pseudo-classes ───────────────────────────────────────── */
.hover\:bg-blue-100:hover  { background-color: #dbeafe; }
.hover\:bg-blue-700:hover  { background-color: #1d4ed8; }
.hover\:bg-gray-100:hover  { background-color: #f3f4f6; }
.hover\:bg-gray-300:hover  { background-color: #d1d5db; }
.hover\:text-blue-700:hover { color: #1d4ed8; }
.hover\:text-gray-600:hover { color: #4b5563; }
.hover\:shadow-xl:hover    { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.focus\:ring-2:focus        { box-shadow: 0 0 0 2px rgba(37,99,235,.5); outline: none; }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px rgba(59,130,246,.5); }
.focus\:border-transparent:focus { border-color: transparent; }
.disabled\:opacity-50:disabled   { opacity: 0.5; }

/* ── Divider utility (h-px) ──────────────────────────────── */
.h-px { height: 1px; }
.flex-1 { flex: 1 1 0%; }

/* ── Body default ─────────────────────────────────────────── */
.serenity-booking-page {
    background-color: #f9fafb;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    color: #111827;
}

/* ── Time slot button ─────────────────────────────────────── */
.time-slot-btn {
    text-align: left;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
    transition: all 150ms;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}
.time-slot-btn:hover { background-color: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.time-slot-btn.selected { background-color: #2563eb; border-color: #2563eb; color: #ffffff; }
.time-slot-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Service icon ─────────────────────────────────────────── */
.service-icon-container { text-align: center; }
.service-icon-img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 0.5rem; margin: 0 auto; }