/* ==========================================================================
   ILoveQuickTools.com Premium Design System - v2.0
   Layered Architecture: Reset > Variables > Layout > Components > Utilities
   ========================================================================== */

/* Google Fonts — Outfit (weights: 400, 500, 600, 700, 800) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');


/* --------------------------------------------------------------------------
   LAYER 1: RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Prevent anchor links from hiding under fixed header */
    scroll-padding-top: calc(var(--header-height) + 20px);
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-top: var(--header-height);
    /* Header Height Reserved Space */
}

/* Icon Sizing to prevent collapse */
[data-icon] {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    max-width: 100%;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/* --------------------------------------------------------------------------
   LAYER 2: VARIABLES (THEME TOKENS)
   -------------------------------------------------------------------------- */
:root {
    /* Spacing Scale (8px Grid) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;

    /* Layout Dimensions */
    --header-height: 80px;

    /* Typography — Outfit is declared via @import in HTML; system stack as fallback */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows - Soft & Premium */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Light Theme (Default) */
    --primary: #ffd300;
    /* Yellow 500 */
    --primary-hover: #e6be00;
    /* Yellow 600 */
    --primary-light: rgba(255, 211, 0, 0.15);
    /* Yellow tint */

    --bg-main: #E5E9F0;
    /* Darker background for better contrast */
    --bg-card: #FFFFFF;
    --bg-input: #F1F5F9;
    /* Slate 100 */

    --text-main: #0F172A;
    /* Slate 900 */
    --text-muted: #64748B;
    /* Slate 500 */

    --border: #E2E8F0;
    /* Slate 200 */
    --border-hover: #CBD5E1;
    /* Slate 300 */

    --accent-success: #10B981;
    --accent-error: #EF4444;
    --accent-warning: #F59E0B;

    /* Slider Tokens */
    --slider-track-empty: var(--bg-input);
}

[data-theme="dark"] {
    --primary: #ffd300;
    /* Yellow Accent */
    --primary-hover: #e6be00;
    /* Darker Yellow on hover */
    --primary-light: rgba(255, 211, 0, 0.1);
    /* Light yellow tint */

    --bg-main: #121212;
    /* Background */
    --bg-card: #1E1E1E;
    /* Surface */
    --bg-input: #2A2A2A;
    /* Slightly lighter for inputs */

    --text-main: #FFFFFF;
    /* Pure white text */
    --text-muted: #B0B0B0;
    /* Muted gray */

    --border: #333333;
    /* Subtle border */
    --border-hover: #444444;
    /* Lighter on hover */
    color-scheme: dark;

    /* Theme override for sliders */
    --slider-track-empty: #FFFFFF;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-sans);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* --------------------------------------------------------------------------
   LAYER 3: LAYOUT
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

/* 2-Column Grid for Tools */
.tool-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 1024px) {
    .tool-layout {
        grid-template-columns: 350px 1fr;
        /* Sidebar controls | Main content */
        align-items: start;
    }

    .tool-layout.cropper-layout {
        grid-template-columns: 1fr 420px;
        /* Main editor | Sidebar/Preview */
    }
}

/* --------------------------------------------------------------------------
   LAYER 4: COMPONENTS
   -------------------------------------------------------------------------- */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    /* ~12px 24px */
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    border: 2px solid transparent;
    min-height: 48px;
    /* Touch target size */
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: #ffd300;
    /* Bright Yellow */
    color: #000000;
    /* Bold Black */
    font-weight: 800;
    /* Extra Bold */
    border: 2px solid #000000;
}

.btn-primary:hover {
    background-color: #e6be00;
    /* Slightly darker yellow */
    box-shadow: 0 4px 12px rgba(255, 211, 0, 0.4);
    transform: translateY(-1px);
}

.btn-accent {
    background-color: var(--primary);
    color: #000000;
    border: 2px solid #000000;
    font-weight: 800;
}

.btn-accent:hover {
    background-color: var(--primary-hover);
    border-color: #000000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 211, 0, 0.4);
    color: #000000;
}

.btn-outline {
    background-color: transparent;
    border-color: var(--text-main);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--bg-main);
}

.btn-icon {
    padding: var(--space-1);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    transition: all var(--transition-normal);
}

.card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Inputs */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="email"],
textarea,
select {
    width: 100%;
    padding: var(--space-2);
    background: var(--bg-input);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    width: auto;
    max-width: 100%;
    padding: var(--space-2);
    background: var(--bg-input);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 1rem;
    transition: all var(--transition-fast);
    accent-color: var(--primary);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px var(--primary-light);
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* File Input Styling */
input[type="file"] {
    padding: var(--space-3);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    cursor: pointer;
    transition: all var(--transition-fast);
}

input[type="file"]:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

input[type="file"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

input[type="file"]::file-selector-button {
    padding: var(--space-2) var(--space-4);
    margin-right: var(--space-3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

input[type="file"]::file-selector-button:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

/* Range Sliders — Premium "Dynamic Pill" Style */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    background: var(--slider-track-empty);
    border-radius: var(--radius-full);
    outline: none;
    border: 2px solid #000;
    /* Bold Black Border */
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

/* Hover Effect — Glow & Scale */
input[type="range"]:hover {
    background: var(--slider-track-empty);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-light), inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

input[type="range"]:active {
    transform: scale(0.98);
}

/* Webkit (Chrome, Safari, Edge) — High-Precision Track Anchor */
input[type="range"]::-webkit-slider-runnable-track {
    height: 40px;
    border-radius: var(--radius-full);
    /* Unified Anchor Point: calc(20px + (100% - 40px) * (var(--val-num, 0) / 100)) */
    background-image:
        radial-gradient(circle at calc(20px + (100% - 40px) * (var(--val-num, 0) / 100)), var(--primary) 19.5px, transparent 20.5px),
        linear-gradient(to right, var(--primary) calc(20px + (100% - 40px) * (var(--val-num, 0) / 100)), transparent 0);
    background-color: var(--slider-track-empty);
    background-repeat: no-repeat;
    /* No transition on background-image to ensure it stays "hard-linked" to the thumb */
}

/* Note: To use --val-num, we update initSliders to set both --val and --val-num */

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    /* Full height circle */
    height: 40px;
    background: #000000;
    /* Black Circle Thumb */
    border-radius: 50%;
    border: none;
    position: relative;
    z-index: 2;
    transition: all 0.2s;
    cursor: grab;
    /* We no longer use box-shadow trick for fill, track handles it now for rounding */
}

input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(0.9);
}

/* Firefox */
input[type="range"]::-moz-range-track {
    height: 40px;
    background: var(--slider-track-empty);
    border-radius: var(--radius-full);
    border: none;
}

input[type="range"]::-moz-range-thumb {
    width: 40px;
    height: 40px;
    background: #000000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

input[type="range"]::-moz-range-progress {
    background: var(--primary);
    height: 40px;
    border-radius: var(--radius-full) 40px 40px var(--radius-full);
}

input[type="range"]:focus {
    box-shadow: 0 0 0 4px var(--primary-light);
}

/* --------------------------------------------------------------------------
   LAYER 4.5: ICON SYSTEM
   -------------------------------------------------------------------------- */
/* Wrapper for icon + text alignment */
.tool-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Base tool icon – 20px for tool listings */
.tool-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Header icons – slightly smaller */
.site-header .tool-icon {
    width: 18px;
    height: 18px;
}

/* Blog icons – compact */
.blog .tool-icon {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   LAYER 5: NAVIGATION (Mobile & Desktop)
   -------------------------------------------------------------------------- */
/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--border);
    z-index: 10001;
    overflow: visible;
    /* Must be visible for absolute dropdowns to escape header height */
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

[data-theme="dark"] .site-header {
    background: rgba(15, 23, 42, 0.95);
}

.nav-container {
    height: 100%;
    display: flex;
    align-items: center;
    /* No justify-content: space-between — right group uses margin-left:auto instead.
       This keeps buttons pinned to the right regardless of whether desktop-nav
       is display:none (mobile) or display:flex (desktop), preventing the jump. */
    gap: var(--space-2);
    flex-wrap: nowrap;
    min-width: 0;
    /* No overflow:hidden here — dropdowns must escape this container */
}

/* Right-side button group — always pinned to far right */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    /* Never allow this group to be compressed */
    margin-left: auto;
    /* KEY: pushes group to far right whether desktop-nav is visible or not */
}

/* Home button inside the nav — compact padding, no text wrap */
.nav-home-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    /* Fixed px, immune to rem-zoom inflation */
    white-space: nowrap;
    text-decoration: none;
    min-width: 0;
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo-wrapper {
    height: 48px;
    /* Larger logo for better brand visibility */
    display: flex;
    align-items: center;
}

.logo-img {
    height: 100%;
    width: auto;
    display: block;
    pointer-events: none;
    /* Add subtle shadow for visibility in light theme */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    transition: filter var(--transition-normal);
    content: url('../logo-light.svg');
}

[data-theme="dark"] .logo-img {
    content: url('../logo-dark.svg');
    filter: none;
}

.hero-logo {
    display: block;
    height: 90px;
    /* Slightly larger for better visibility */
    width: auto;
    max-width: 90%;
    margin: 0 auto var(--space-4) auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    content: url('../logo-light.svg');
}

[data-theme="dark"] .hero-logo {
    content: url('../logo-dark.svg');
}

/* Desktop Nav */
.desktop-nav {
    display: none;
    gap: 4px;
    flex: 1 1 0%;
    min-width: 0;
    justify-content: center;
    overflow: visible;
    /* Dropdowns must escape this container */
    align-items: center;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex;
    }
}

.nav-item {
    position: relative;
    cursor: pointer;
    font-weight: 500;
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 1;
    min-width: 0;
    overflow: visible;
}

.nav-item:hover {
    color: var(--text-main);
    background: var(--primary-light);
}

/* Mega Menu / Dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    min-width: 220px;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    color: var(--text-main);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.dropdown-link:hover {
    background: var(--primary-light);
    color: var(--text-main);
}

/* Mobile Nav Trigger */
.mobile-menu-btn {
    display: flex;
    /* Flex on mobile */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .mobile-menu-btn {
        display: none;
    }
}

/* Responsive Utilities */
.hide-mobile {
    display: inline;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

/* Mobile Drawer */
.mobile-drawer {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: var(--bg-main);
    z-index: 10000;
    padding: var(--space-3);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
}

/* Footer Styles */
.site-footer {
    background: var(--bg-card);
    border-top: 2px solid var(--border);
    margin-top: var(--space-6);
    padding: var(--space-4) 0 var(--space-3);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.footer-brand h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-1);
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.footer-links {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-bottom {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    text-align: center;
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.mobile-drawer.active {
    transform: translateX(0);
}

/* --------------------------------------------------------------------------
   LAYER 6: SPECIFIC TOOL STYLES (Spinning Wheel)
   -------------------------------------------------------------------------- */
.wheel-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 1/1;
}

.wheel-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    transform-origin: center;
    /* Transformation handled by JS */
}

.wheel-arrow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 50px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    z-index: 10;
}

.winner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-2xl);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-bounce);
    border: 2px solid var(--primary);
    min-width: 280px;
    z-index: 50;
}

[data-theme="dark"] .winner-overlay {
    background: rgba(30, 41, 59, 0.95);
}

.winner-overlay.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

/* Confetti Container */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd300;
}

/* Tool Header Layout */
.tool-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.tool-header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.tool-header-section {
    margin-top: var(--space-4);
    margin-bottom: var(--space-6);
}

.tool-header-section p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 1000px;
}

/* Related Tools Section */
.related-tools-section {
    margin-top: var(--space-8);
}

.related-tools-section h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.related-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4);
}

.related-tool-card {
    text-decoration: none;
    transition: all var(--transition-normal);
    display: block;
}

.related-tool-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: var(--space-2);
}

.related-tool-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   LAYER 7: UTILITIES
   -------------------------------------------------------------------------- */
.text-center {
    text-align: center;
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.hidden {
    display: none !important;
}

/* Toast Notification (re-styled) */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 9999999 !important;
    pointer-events: none;
    /* Allow clicking through container */
}

.toast {
    background: #333;
    /* Dark fallback */
    background: var(--bg-card, #1a1a1a);
    color: #fff;
    color: var(--text-main, #ffffff);
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-left: 5px solid var(--primary, #ffd700);
    font-weight: 600;
    min-width: 320px;
    max-width: 450px;
    pointer-events: all;
    /* Toasts themselves should be clickable if needed */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.error {
    background: #dc2626 !important;
    /* Brighter red */
    color: #ffffff !important;
    border-left: 5px solid #7f1d1d;
}

.toast.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==========================================================================
   PHASE 1 – GLOBAL UI STABILIZATION FIXES
   ========================================================================== */

/* --------------------------------------------------------------------------
   TASK 5: Font System — apply Outfit everywhere
   -------------------------------------------------------------------------- */
body,
input,
textarea,
select,
button,
::placeholder {
    font-family: var(--font-sans);
}

/* Remove any per-component font-family overrides that fight the global font */
.tool-header-section h1,
.tool-header-section p,
.footer-brand h3,
.footer-brand p,
.footer-bottom p,
.nav-item,
.dropdown-link {
    font-family: var(--font-sans);
}

/* --------------------------------------------------------------------------
   TASK 2: Hero subtitle bullets
   -------------------------------------------------------------------------- */
.hero-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hero-bullet {
    color: inherit;
    font-weight: 400;
    opacity: 0.7;
    user-select: none;
}

/* --------------------------------------------------------------------------
   TASK 6: Light-theme text contrast fixes
   Targets: result panels that use gradient backgrounds with inline white text.
   Those elements are fine (white on gradient). The issue is label/helper text
   in the card area that inherits --text-muted on light bg.
   -------------------------------------------------------------------------- */

/* Ensure sufficient contrast for muted labels in light mode */
:root label,
:root .tool-header-section p,
:root .helper-text {
    color: var(--text-muted);
    /* #64748B on white = 4.6:1 — WCAG AA */
}

/* Simple Number Generator: the hidden result div uses inline styles with
   gradient + color:white — those are fine. Force the number to stay white. */
#result #number {
    color: #ffffff !important;
}

/* JSON Formatter error banner — ensure it stays legible in light mode */
#error {
    background: var(--accent-error, #EF4444) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Days Until New Year / Loan / Investment / Discount: result panels use
   gradient backgrounds. Ensure strong white text contrast. */
[style*="linear-gradient"] {
    color: #ffffff;
}

[style*="linear-gradient"] div,
[style*="linear-gradient"] span,
[style*="linear-gradient"] p {
    color: inherit;
}

/* --------------------------------------------------------------------------
   TASK 7: Share button — standardized style (icon + text, visible border)
   -------------------------------------------------------------------------- */
.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--text-main);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 40px;
    white-space: nowrap;
}

.btn-share:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.btn-share .tool-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   TASK 8: Stopwatch — visible LAP & RESET button borders in light mode
   -------------------------------------------------------------------------- */
#lapBtn,
#resetBtn {
    border: 2px solid var(--border) !important;
    color: var(--text-main);
    background: transparent;
}

#lapBtn:hover:not(:disabled),
#resetBtn:hover {
    border-color: var(--primary) !important;
    color: var(--primary);
}

#lapBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--border) !important;
    color: var(--text-muted);
}

[data-theme="dark"] #lapBtn,
[data-theme="dark"] #resetBtn {
    border-color: var(--border) !important;
}

/* --------------------------------------------------------------------------
   TASK 9: Footer — "Made with Love from Madeira" + contact
   -------------------------------------------------------------------------- */
.footer-love {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    opacity: 0.8;
}

.footer-contact {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.footer-contact a {
    color: var(--primary);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.footer-contact a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ==========================================================================
   PHASE 3 – ULTRA GRAPHICS (Glassmorphism & Effects)
   ========================================================================== */

/* Glassmorphism Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
}

[data-theme="dark"] .glass-panel {
    background: rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes shakeUltra {

    0%,
    100% {
        transform: translateX(0) scale(1) rotate(0);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-8px) scale(1.1) rotate(-3deg);
        filter: drop-shadow(0 0 10px var(--primary));
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(8px) scale(1.1) rotate(3deg);
        filter: drop-shadow(0 0 10px var(--primary));
    }
}

.anim-shake-ultra {
    animation: shakeUltra 0.6s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes slotMachineBlur {
    0% {
        filter: blur(0);
        transform: translateY(0);
    }

    20% {
        filter: blur(4px);
        transform: translateY(10px);
    }

    50% {
        filter: blur(8px);
        transform: translateY(-15px);
    }

    80% {
        filter: blur(4px);
        transform: translateY(10px);
    }

    100% {
        filter: blur(0);
        transform: translateY(0);
    }
}

.anim-slot-blur {
    animation: slotMachineBlur 0.2s infinite linear;
}

@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
        filter: blur(10px);
    }

    70% {
        transform: scale(1.1);
        filter: blur(0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.anim-pop-in {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes screenShake {

    0%,
    100% {
        transform: translate(0, 0) rotate(0);
    }

    10% {
        transform: translate(-10px, -10px) rotate(-1deg);
    }

    20% {
        transform: translate(10px, 10px) rotate(1deg);
    }

    30% {
        transform: translate(-10px, 10px) rotate(-1deg);
    }

    40% {
        transform: translate(10px, -10px) rotate(1deg);
    }

    50% {
        transform: translate(-5px, -5px) rotate(0);
    }
}

.anim-screen-shake {
    animation: screenShake 0.4s ease-out both;
}

/* --------------------------------------------------------------------------
   TEMPERATURE CONVERTER - INTERACTIVE THERMOMETER
   -------------------------------------------------------------------------- */
.thermometer-container {
    width: 100%;
    margin-bottom: var(--space-4);
    position: relative;
    user-select: none;
    /* Prevent text selection while dragging */
}

.thermometer-track-wrap {
    position: relative;
    height: 48px;
    /* High enough to be a good touch target */
    display: flex;
    align-items: center;
    cursor: pointer;
}

.thermometer-track-svg {
    width: 100%;
    height: 20px;
    display: block;
    overflow: visible;
}

.thermometer-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Default 0°C */
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    cursor: grab;
    z-index: 10;
    transition: transform var(--transition-fast);
    filter: drop-shadow(var(--shadow-md));
}

.thermometer-pointer:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

.thermometer-pointer svg {
    width: 100%;
    height: 100%;
}

.thermometer-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   GLOBAL DROP ZONE STYLES
   -------------------------------------------------------------------------- */
.drop-zone {
    border: 3px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: var(--bg-card);
    margin: var(--space-4) 0 var(--space-6);
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--primary);
    background: var(--bg-input);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.drop-zone.dragover {
    border-style: solid;
}

.drop-zone i {
    font-size: 3.5rem;
    color: var(--primary);
    margin-bottom: var(--space-4);
    display: block;
}

.drop-zone h3 {
    margin-bottom: var(--space-2);
    font-size: 1.5rem;
    font-weight: 700;
}

.drop-zone p {
    color: var(--text-muted);
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   THEME SWITCH HINT TOAST
   -------------------------------------------------------------------------- */
.theme-hint-toast {
    position: fixed;
    top: calc(var(--header-height) + 12px);
    z-index: 10001;
    background: var(--primary);
    color: #000;
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: floatIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: all;
    white-space: nowrap;
}

.theme-hint-toast::after {
    content: '';
    position: absolute;
    top: -10px;
    left: var(--arrow-left, 85%);
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--primary);
}

.theme-hint-close {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    transition: background 0.2s;
    color: #000;
}

.theme-hint-close:hover {
    background: rgba(0, 0, 0, 0.2);
}

@keyframes floatIn {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --------------------------------------------------------------------------
   BLOG & CONTENT STYLES
   -------------------------------------------------------------------------- */
.blog-content h2 {
    font-size: 2rem;
    margin-bottom: var(--space-4);
    color: var(--text-main);
    font-weight: 800;
}

.blog-content h3 {
    font-size: 1.5rem;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--primary);
    font-weight: 700;
}

.blog-content p {
    margin-bottom: var(--space-3);
    line-height: 1.7;
    color: var(--text-muted);
    font-size: 1.05rem;
}

.blog-content ul,
.blog-content ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-4);
    color: var(--text-muted);
}

.blog-content li {
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

.blog-content strong {
    color: var(--text-main);
    font-weight: 700;
}

.blog-content em {
    color: var(--primary);
    font-style: normal;
    font-weight: 600;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 48px;
    right: 48px;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 50%;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1000;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    background-color: #f8f9fa;
}

.back-to-top svg {
    width: 24px;
    height: 24px;
    stroke-width: 3;
}

/* --------------------------------------------------------------------------
   ANIMATIONS FOR GAMES & TOOLS
   -------------------------------------------------------------------------- */
@keyframes shakeUltra {

    0%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-15px) rotate(-5deg);
    }

    75% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.anim-shake-ultra {
    animation: shakeUltra 0.3s ease-in-out infinite;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.anim-pop-in {
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes screenShake {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5px, -5px);
    }

    20% {
        transform: translate(5px, 5px);
    }

    30% {
        transform: translate(-5px, 5px);
    }

    40% {
        transform: translate(5px, -5px);
    }

    50% {
        transform: translate(-5px, -5px);
    }

    60% {
        transform: translate(5px, 5px);
    }

    70% {
        transform: translate(-5px, 5px);
    }

    80% {
        transform: translate(5px, -5px);
    }

    90% {
        transform: translate(-5px, -5px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.anim-screen-shake {
    animation: screenShake 0.4s ease-in-out;
}