/* ==========================================================================
   FPW Deliveries Limited - Global Stylesheet (Premium Dark Logistics)
   ========================================================================== */

:root {
    --fp-purple: #7e22ce;
    --fp-dark: #4c1d95;
    --fp-light: #a855f7;
}

html {
    scroll-behavior: smooth;
    background-color: #0a0a0a; /* zinc-950 */
}

/* Custom Hexagon Pattern Background */
.bg-hex-pattern {
    background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
    opacity: 0.15;
}

/* Dark Overlay adjustment for cinematic depth */
.overlay-gradient {
    background: linear-gradient(to top, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.2));
}

/* Custom Text Selection Highlight */
::selection {
    background-color: var(--fp-light);
    color: #ffffff;
}

/* Dark Mode Curvy Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #27272a; /* zinc-800 */
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--fp-purple);
}

/* GSAP Initial States - Prevents Flash of Unstyled Content (FOUC) */
.hero-reveal, 
.stat-reveal, 
.reveal-content, 
.service-card, 
.form-container {
    opacity: 0;
    visibility: hidden; 
}

/* Form Override for Clean Tonnage Input */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] { 
    -moz-appearance: textfield; 
}

.delivery-nav-link {
    color: #a1a1aa;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .2s ease;
}
.delivery-nav-link:hover { color: #fff; }
.delivery-mobile-link,
.delivery-mobile-cta { display: block; padding: 1rem 1.2rem; border-radius: 1rem; color: #fff; font-weight: 700; }
.delivery-mobile-link:hover { background: rgba(255,255,255,.05); }
.delivery-mobile-cta { margin-top: .4rem; background: #7e22ce; text-align: center; }

.delivery-form-shell {
    padding: clamp(1.4rem, 4vw, 3rem);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 2rem;
    background: linear-gradient(145deg, rgba(39,39,42,.97), rgba(24,24,27,.98));
    box-shadow: 0 35px 90px rgba(0,0,0,.42);
}
.delivery-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.delivery-field label { display: block; margin-bottom: .55rem; color: #d4d4d8; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.delivery-field input,
.delivery-field select,
.delivery-field textarea {
    width: 100%;
    min-height: 3.45rem;
    padding: .85rem 1rem;
    color: #fff;
    background: rgba(9,9,11,.92);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 1rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.delivery-field textarea { resize: vertical; }
.delivery-field input::placeholder,
.delivery-field textarea::placeholder { color: #52525b; }
.delivery-field input:focus,
.delivery-field select:focus,
.delivery-field textarea:focus { border-color: #a855f7; box-shadow: 0 0 0 4px rgba(168,85,247,.12); }
.delivery-consent { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.25rem; color: #a1a1aa; font-size: .78rem; line-height: 1.5; cursor: pointer; }
.delivery-consent input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: #7e22ce; }
.delivery-promise { display: flex; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 1.15rem; background: rgba(255,255,255,.025); }
.delivery-promise > span { color: #a855f7; font: 700 .75rem/1 "Syne", sans-serif; }
.delivery-promise strong { display: block; color: #fff; font-size: .85rem; }
.delivery-promise small { display: block; color: #71717a; font-size: .72rem; margin-top: .2rem; }

@media (max-width: 767px) {
    .delivery-form-grid { grid-template-columns: 1fr; }
    .delivery-form-grid .md\:col-span-2 { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}