/*
 * tookan2.ai – responsive rules. Load after tookan-main.css.
 *
 * Part 1: the export's Tailwind breakpoint utilities (sm 40rem, md 48rem, lg 64rem), verbatim and
 *         still inside @layer utilities, so they cascade exactly as in the original single file.
 * Part 2: booking card breakpoints.
 */
@layer utilities {
  @media (width >= 40rem) {
  .tookan-export .sm\:mx-0 { margin-inline: 0px; }
  .tookan-export .sm\:mt-0 { margin-top: 0px; }
  .tookan-export .sm\:mt-4 { margin-top: calc(var(--spacing) * 4); }
  .tookan-export .sm\:mt-10 { margin-top: calc(var(--spacing) * 10); }
  .tookan-export .sm\:flex { display: flex; }
  .tookan-export .sm\:grid { display: grid; }
  .tookan-export .sm\:hidden { display: none; }
  .tookan-export .sm\:h-24 { height: calc(var(--spacing) * 24); }
  .tookan-export .sm\:max-h-96 { max-height: calc(var(--spacing) * 96); }
  .tookan-export .sm\:max-w-sm { max-width: var(--container-sm); }
  .tookan-export .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .tookan-export .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .tookan-export .sm\:flex-row { flex-direction: row; }
  .tookan-export .sm\:flex-wrap { flex-wrap: wrap; }
  .tookan-export .sm\:justify-center { justify-content: center; }
  .tookan-export .sm\:justify-end { justify-content: flex-end; }
  .tookan-export .sm\:gap-2\.5 { gap: calc(var(--spacing) * 2.5); }
  .tookan-export .sm\:gap-10 { gap: calc(var(--spacing) * 10); }
  .tookan-export :where(.sm\:space-x-2 > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); }
  .tookan-export .sm\:overflow-visible { overflow: visible; }
  .tookan-export .sm\:rounded-lg { border-radius: var(--radius); }
  .tookan-export .sm\:p-8 { padding: calc(var(--spacing) * 8); }
  .tookan-export .sm\:px-0 { padding-inline: 0px; }
  .tookan-export .sm\:px-5 { padding-inline: calc(var(--spacing) * 5); }
  .tookan-export .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); }
  .tookan-export .sm\:text-left { text-align: left; }
  .tookan-export .sm\:text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); }
  .tookan-export .sm\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); }
  .tookan-export .sm\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); }
  .tookan-export .sm\:text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); }
  .tookan-export .sm\:text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); }
}
  @media (width >= 48rem) {
  .tookan-export .md\:absolute { position: absolute; }
  .tookan-export .md\:col-span-2 { grid-column: span 2 / span 2; }
  .tookan-export .md\:col-span-3 { grid-column: span 3 / span 3; }
  .tookan-export .md\:block { display: block; }
  .tookan-export .md\:flex { display: flex; }
  .tookan-export .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] { width: var(--radix-navigation-menu-viewport-width); }
  .tookan-export .md\:w-auto { width: auto; }
  .tookan-export .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .tookan-export .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .tookan-export .md\:flex-row { flex-direction: row; }
  .tookan-export .md\:text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }
  .tookan-export .md\:opacity-0 { opacity: 0; }
  .tookan-export .md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant="inset"] ~ *) { margin: calc(var(--spacing) * 2); }
  .tookan-export .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant="inset"] ~ *) { margin-left: 0px; }
  .tookan-export .md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant="inset"] ~ *) { border-radius: calc(var(--radius) + 4px); }
  .tookan-export .md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant="inset"] ~ *) { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
  .tookan-export .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state="collapsed"] ~ *):is(:where(.peer)[data-variant="inset"] ~ *) { margin-left: calc(var(--spacing) * 2); }
}
  @media (width >= 48rem) {
  .tookan-export .after\:md\:hidden::after { display: none; }
}
  @media (width >= 64rem) {
  .tookan-export .lg\:order-none { order: 0; }
  .tookan-export .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .tookan-export .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .tookan-export .lg\:p-12 { padding: calc(var(--spacing) * 12); }
}
}

/* =============================================================================
   tookan2.ai – booking card breakpoints
   Desktop keeps the original widget layout: form left, calendar right.
   Below 900px the calendar stacks under the form.
   ============================================================================= */
@media (min-width: 900px) {
  .tookan-export .tk2-booking__grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  /* The form column is long (questions), so the calendar column follows the scroll and the
     calendar is in view when "Continue" is clicked at the bottom. */
  .tookan-export .tk2-booking__calendar {
    position: sticky;
    top: calc(16px + var(--wp-admin--admin-bar--height, 0px));
    align-self: start;
    border-top: 0;
  }
  .tookan-export .tk2-booking__form { padding-bottom: 28px; }
}

@media (max-width: 899.98px) {
  .tookan-export .tk2-booking__calendar { min-height: 0; }
  .tookan-export [data-state="loading"].tk2-booking__calendar,
  .tookan-export [data-state="error"].tk2-booking__calendar { min-height: 380px; }
  .tookan-export [data-state="ready"].tk2-booking__calendar { min-height: 0; }
}

@media (max-width: 520px) {
  .tookan-export .tk2-booking { margin: 16px 0 32px; }
  .tookan-export .tk2-booking__form,
  .tookan-export .tk2-booking__calendar { padding: 20px 16px; }
  .tookan-export [data-state="ready"].tk2-booking__calendar { padding: 4px 0; }
  .tookan-export .tk2-steps { gap: 8px; padding: 10px 12px; font-size: 13px; }
  .tookan-export .tk2-steps__sep { width: 14px; }
  .tookan-export .tk2-cal__ph-grid { gap: 6px; }
  .tookan-export .tk2-cal__overlay { padding: 16px; }
}

@media (max-width: 360px) {
  .tookan-export .tk2-row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .tookan-export .tk2-expand,
  .tookan-export .tk2-steps__item,
  .tookan-export .tk2-steps__dot,
  .tookan-export .tk2-input,
  .tookan-export .tk2-btn { transition: none; }
  .tookan-export [data-state="ready"] .tk2-cal__embed { animation: none; }
  .tookan-export .tk2-spinner,
  .tookan-export .tk2-status--busy .tk2-status__icon { animation-duration: 1.6s; }
}