/* ============================================
   Scrap Collector Pro - Custom Styles
   ============================================
   Custom CSS overrides and animations that supplement
   Tailwind CSS. Keep this minimal — prefer Tailwind
   utilities in templates where possible.
   ============================================ */

/* ---------- Global Transitions ---------- */
* {
    scroll-behavior: smooth;
}

/* ---------- HTMX Loading Indicator ---------- */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Subtle pulse animation for HTMX loading states */
.htmx-request {
    opacity: 0.7;
    transition: opacity 200ms ease-in;
}

/* ---------- Custom Animations ---------- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes pulse-soft {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.4s ease-out;
}

.animate-pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* ---------- Card Hover Effects ---------- */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* ---------- Status Badge Colors ---------- */
.status-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.status-confirmed {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-assigned {
    background-color: #e0e7ff;
    color: #3730a3;
}

.status-collected {
    background-color: #d1fae5;
    color: #065f46;
}

.status-completed {
    background-color: #ecfdf5;
    color: #047857;
}

.status-cancelled {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ---------- Print Styles ---------- */
@media print {

    nav,
    footer,
    .no-print {
        display: none !important;
    }

    main {
        padding: 0 !important;
    }
}

/* ---------- Hero UI Elements ---------- */
.glass {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
}

.hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(16,185,129,.18), transparent 70%); /* Emerald-500 glow */
    filter: blur(80px);
    z-index: 0;
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp .8s ease forwards;
}

.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .3s; }
.delay-3 { animation-delay: .45s; }
.delay-4 { animation-delay: .6s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pulse-glow {
    animation: pulseGlow 2.5s infinite;
}

@keyframes pulseGlow {
    0%,100% {
        box-shadow: 0 0 0 rgba(16,185,129,0);
    }
    50% {
        box-shadow: 0 0 25px rgba(16,185,129,.35);
    }
}

/* ---------- Floating WhatsApp button ----------
   Sticky bottom-right call-to-action on every public page. On mobile it's a
   round 56px icon button; on tablets+ it expands to show "Chat on WhatsApp".
   z-index 60 sits above the sticky nav (z-50) but below modals. Hidden in
   print output. */
.wa-fab {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 60;
    background: #25d366;
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 26px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.45),
                0 2px 6px rgba(0, 0, 0, 0.10);
    transition: transform 0.15s ease-out,
                box-shadow 0.15s ease-out,
                padding 0.20s ease-out;
    animation: waFabEntrance 0.4s ease-out 0.6s both;
}
.wa-fab:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 22px rgba(37, 211, 102, 0.55),
                0 3px 8px rgba(0, 0, 0, 0.12);
}
.wa-fab:active { transform: scale(0.96); }
.wa-fab:focus-visible {
    outline: 3px solid #16a34a;
    outline-offset: 3px;
}
.wa-fab-label { display: none; }

@media (min-width: 768px) {
    .wa-fab {
        width: auto;
        padding: 0 20px 0 18px;
        height: 52px;
        gap: 10px;
        font-size: 22px;
    }
    .wa-fab-label {
        display: inline;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }
}

@keyframes waFabEntrance {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

@media print {
    .wa-fab { display: none !important; }
}

/* ---------- Stable viewport height (CLS fix) ----------
   On mobile, `min-height: 100vh` changes as the browser address bar
   retracts on scroll — that resize shifts absolutely-positioned children
   (the hero's animated blobs) and pushes CLS over the WCAG threshold.
   Using 100svh ("small viewport height") locks the height to the smallest
   possible viewport so the section never grows, with a 100vh fallback for
   older browsers. */
.min-h-screen-stable {
    min-height: 100vh;
    min-height: 100svh;
}

/* ---------- Logo Styles ---------- */
.custom-logo {
    /* Write your custom CSS for the animated logo here */
    /* Example:
    filter: drop-shadow(0px 4px 6px rgba(16, 185, 129, 0.4));
    transform: scale(1.05);
    */
    /* Smooth Green Animation */
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.3));
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.05);
}