@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .rv-circle { @apply inline-flex items-center justify-center rounded-full bg-gradient-to-br from-teal-500 to-cyan-500 text-white ring-4 ring-teal-50 shrink-0 aspect-square; }
  .rv-circle--sm { width: 2rem; height: 2rem; font-size: 0.875rem; font-weight: 600; }
  .rv-circle--md { width: 2.5rem; height: 2.5rem; }
  .rv-circle--lg { width: 3rem; height: 3rem; }

  /* Blog content styling (markdown) */
  .blog-content {
    @apply text-gray-600 leading-relaxed;
  }
  .blog-content h2 {
    @apply text-xl sm:text-2xl font-bold text-gray-900 mt-10 mb-4 pb-2 border-b border-gray-100 tracking-tight;
  }
  .blog-content h3 {
    @apply text-lg sm:text-xl font-bold text-gray-900 mt-8 mb-3 tracking-tight;
  }
  .blog-content p {
    @apply my-4 leading-relaxed;
  }
  .blog-content a {
    @apply text-cyan-600 font-medium hover:text-cyan-700 hover:underline;
  }
  .blog-content strong {
    @apply text-gray-900 font-semibold;
  }
  .blog-content ul {
    @apply my-6 pl-6 space-y-2;
  }
  .blog-content ol {
    @apply my-6 pl-6 space-y-2 list-decimal;
  }
  .blog-content li {
    @apply leading-relaxed;
  }
  .blog-content ul li {
    @apply relative;
  }
  .blog-content ul li::before {
    content: "•";
    @apply absolute -left-4 text-cyan-500 font-bold;
  }
  .blog-content blockquote {
    @apply border-l-4 border-cyan-500 bg-cyan-50/50 py-2 px-4 my-6 text-gray-700;
  }
  .blog-content code {
    @apply text-cyan-700 bg-cyan-50 px-1.5 py-0.5 rounded text-sm font-medium;
  }
  .blog-content img {
    @apply rounded-xl shadow-lg my-6;
  }

  /* Tables (markdown comparison tables) */
  .blog-content table {
    @apply w-full my-8 text-sm border-collapse rounded-xl shadow-sm ring-1 ring-gray-200;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .blog-content thead {
    @apply bg-gradient-to-r from-cyan-600 to-teal-600;
  }
  .blog-content thead th {
    @apply px-5 py-3.5 text-left text-xs font-bold text-white uppercase tracking-wider whitespace-nowrap;
  }
  .blog-content tbody tr {
    @apply border-b border-gray-100 transition-colors duration-150;
  }
  .blog-content tbody tr:hover {
    @apply bg-cyan-50/50;
  }
  .blog-content tbody tr:last-child {
    @apply border-b-0;
  }
  .blog-content tbody td {
    @apply px-5 py-3.5 text-gray-600;
  }
  .blog-content tbody td:first-child {
    @apply font-semibold text-gray-900 whitespace-nowrap;
  }
  .blog-content tbody tr:nth-child(even) {
    @apply bg-gray-50/60;
  }
  .blog-content tbody tr:nth-child(even):hover {
    @apply bg-cyan-50/50;
  }
  .blog-content hr {
    @apply my-8 border-gray-200;
  }

  /* FAQ content styling (markdown) */
  .faq-content {
    @apply text-gray-600 leading-relaxed;
  }
  .faq-content h2 {
    @apply text-lg sm:text-xl font-semibold text-cyan-700 mt-8 mb-3 first:mt-0;
  }
  .faq-content h3 {
    @apply text-base sm:text-lg font-semibold text-cyan-700 mt-6 mb-2;
  }
  .faq-content p {
    @apply my-3 leading-relaxed text-gray-700;
  }
  .faq-content a {
    @apply text-teal-600 font-medium hover:text-teal-700 hover:underline;
  }
  .faq-content strong {
    @apply text-gray-900 font-semibold;
  }
  .faq-content ul {
    @apply my-4 pl-6 space-y-2;
  }
  .faq-content ol {
    @apply my-4 pl-6 space-y-2 list-decimal;
  }
  .faq-content li {
    @apply leading-relaxed;
  }
  .faq-content ul li {
    @apply relative;
  }
  .faq-content ul li::before {
    content: "•";
    @apply absolute -left-4 text-cyan-500 font-bold;
  }

  .directions-trigger {
    @apply mt-1 inline-grid min-h-9 grid-flow-col items-center justify-end gap-1.5 whitespace-nowrap rounded-lg border border-cyan-200 bg-cyan-50 px-3 py-2 text-xs font-semibold text-cyan-700 shadow-sm transition-all duration-200 hover:border-cyan-300 hover:bg-cyan-100 hover:text-cyan-900 hover:shadow;
  }

  .directions-trigger svg {
    display: inline-block;
  }

  .directions-dialog {
    border: 0;
    padding: 0;
    width: min(92vw, 40rem);
    max-height: 90vh;
    background: transparent;
  }

  .directions-dialog::backdrop {
    background: radial-gradient(circle at top, rgba(8, 145, 178, 0.16), rgba(15, 23, 42, 0.68));
    backdrop-filter: blur(2px);
  }

  .directions-dialog__frame {
    @apply rounded-2xl border border-cyan-100/80 bg-white/95 p-4 shadow-2xl shadow-slate-900/20 sm:p-6;
    background-image: linear-gradient(145deg, rgba(240, 249, 255, 0.7), rgba(255, 255, 255, 0.96));
  }

  .directions-dialog__eyebrow {
    @apply text-xs font-semibold uppercase tracking-[0.18em] text-cyan-700;
  }

  .directions-dialog__title {
    @apply mt-1 text-lg font-semibold text-slate-900 sm:text-xl;
  }

  .directions-dialog__subtitle {
    @apply mt-1 text-sm text-slate-600;
  }

  .directions-grid {
    @apply mt-4 grid grid-cols-1 gap-2.5 sm:grid-cols-3;
  }

  .directions-option {
    @apply group flex flex-col items-center rounded-xl border border-slate-200 bg-white/90 p-3 text-center shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 focus-visible:ring-offset-2;
  }

  .directions-logo {
    @apply mb-2 inline-flex h-11 w-11 items-center justify-center rounded-2xl shadow-sm;
  }

  .directions-logo svg {
    @apply h-6 w-6;
  }

  .directions-logo--apple {
    @apply bg-slate-900 text-white;
  }

  .directions-logo--google {
    @apply bg-white ring-1 ring-slate-200;
  }

  .directions-logo--waze {
    @apply bg-sky-100;
  }

  .directions-option__name {
    @apply text-sm font-semibold text-slate-900;
  }

  .directions-option__hint {
    @apply mt-0.5 text-xs text-slate-500;
  }

  .directions-option--apple:hover {
    @apply border-slate-900/30;
  }

  .directions-option--google:hover {
    @apply border-blue-300;
  }

  .directions-option--waze:hover {
    @apply border-sky-300;
  }

  .directions-cancel {
    @apply rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50;
  }
}