/* Base CSS and Shadcn Variables */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 217 91% 60%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 217 91% 60%;
  --radius: 0.75rem;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: hsl(var(--border)); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted-foreground)); }

/* =============================================
   DRAMADAY INJECTED CONTENT — full formatting
   ============================================= */
.dramaday-content {
    font-size: 0.925rem;
    line-height: 1.75;
    color: hsl(var(--foreground));
}

/* Every paragraph gets breathing room */
.dramaday-content p {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.75;
}

/* First paragraph (poster) should not have top margin */
.dramaday-content p:first-child {
    margin-top: 0;
}

/* Poster image inside content */
.dramaday-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
    margin-bottom: 1.25rem;
}

/* Info text lines (Title, Genre, Director, etc) */
.dramaday-content p > strong,
.dramaday-content .entry-meta strong {
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* Links */
.dramaday-content a {
    color: hsl(var(--primary));
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}
.dramaday-content a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Download links inside table cells → MOVIE ONLY → look like buttons */
.dramaday-content.is-movie td a {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background-color: hsl(var(--primary));
    color: #fff !important;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    margin: 0.15rem 0.2rem;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}
.dramaday-content.is-movie td a:hover {
    background-color: hsl(217 91% 50%);
    transform: translateY(-1px);
    opacity: 1;
}

/* Download table */
.dramaday-content table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.875rem;
}
.dramaday-content th,
.dramaday-content td {
    padding: 0.6rem 0.875rem;
    border-bottom: 1px solid hsl(var(--border));
    text-align: left;
}
.dramaday-content tr:last-child td {
    border-bottom: none;
}
.dramaday-content th {
    background-color: hsl(var(--muted));
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
}
.dramaday-content tr:nth-child(even) td {
    background-color: hsl(var(--muted) / 0.4);
}

/* Headings inside injected content */
.dramaday-content h2,
.dramaday-content h3,
.dramaday-content h4 {
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.dramaday-content h2 { font-size: 1.25rem; }
.dramaday-content h3 { font-size: 1.1rem; }

/* iframes (trailers) */
.dramaday-content iframe {
    max-width: 100%;
    border-radius: var(--radius);
    margin: 1rem 0;
}

/* Separators */
.dramaday-content hr {
    border: none;
    border-top: 1px solid hsl(var(--border));
    margin: 1.5rem 0;
}

/* Download loading skeleton */
.download-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: hsl(var(--muted) / 0.5);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}