/* ==========================================================================
   Frontend Stylesheet - Core Application
   RentalKu Public Landing Page
   ========================================================================== */

/* ─── Design Tokens ─────────────────────────────────────────────────────── */
:root {
    /* Primary Accent - Kinetic Orange */
    --color-primary:        #FF6105;
    --color-primary-hover:  #E05300;
    --color-primary-glow:   #FFA069;
    --color-primary-soft:   #FFF3EC;
    --color-primary-border: #FFCCB0;
    --color-primary-text:   #C24A00;

    /* Achromatic Canvas */
    --color-canvas:  #FFFFFF;
    --color-paper:   #FAFAFA;
    --color-linen:   #F3F4F3;

    /* Text Scale */
    --color-ink:     #0A0A0A;
    --color-body:    #202120;
    --color-muted:   #7A7B7B;

    /* Border */
    --color-hairline: #E5E5E5;
    --color-mid:      #D4D4D4;

    /* Semantic Status */
    --color-success:  #10B981;
    --color-info:     #0EA5E9;
    --color-warning:  #F59E0B;
    --color-danger:   #EF4444;

    /* Radius Scale */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-card: 10px;
    --r-modal:12px;
    --r-pill: 9999px;

    /* Typography */
    --font-sans: "Plus Jakarta Sans", Inter, -apple-system, sans-serif;
}

/* ─── Base Resets ────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    color: var(--color-body);
    background-color: var(--color-canvas);
    line-height: 1.6;
}

/* Zero Shadows Rule - Global Enforcement */
*,
*::before,
*::after {
    box-shadow: none !important;
}

/* Controlled a11y focus ring - only exception to shadow rule */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px;
}

/* ─── Typography System ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-ink);
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-weight: 800;
}

/* ─── Scrollbar Utilities ────────────────────────────────────────────────── */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ─── Component Catalog & Interaction System ─────────────────────────────── */

/* Navbar */
#site-header nav {
    transition: border-color 0.2s ease;
}

/* Nav Links - sliding underline indicator */
.nav-link {
    position: relative;
}

/* Car Card */
.car-card {
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.car-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary-border);
}

/* Card — Media */
.car-card img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.car-card:hover img {
    transform: scale(1.04);
}

/* Status badge on card */
.badge-available {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #16A34A;
}
.badge-rented {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #DC2626;
}
.badge-maintenance {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #B45309;
}

/* Interactive Simulator Card */
.service-option:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
}

/* ─── Calculator Modal ───────────────────────────────────────────────────── */
#calculator-modal {
    transition: opacity 0.2s ease;
}
#calculator-modal.is-open {
    display: block;
    animation: fadeInOverlay 0.2s ease forwards;
}
#calculator-modal .modal-panel {
    animation: slideUpModal 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUpModal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tab Indicator */
#tab-calculator.tab-active,
#tab-booking.tab-active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}
#tab-calculator.tab-inactive,
#tab-booking.tab-inactive {
    border-bottom-color: transparent;
    color: var(--color-muted);
}

/* ─── Accordion ──────────────────────────────────────────────────────────── */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content.is-open {
    grid-template-rows: 1fr;
}
.accordion-content > div {
    overflow: hidden;
}

/* Active accordion background */
.accordion-toggle[aria-expanded="true"] {
    background-color: #FFFBF9;
}
.accordion-toggle[aria-expanded="true"] i {
    transform: rotate(45deg);
    color: var(--color-primary);
}
.accordion-toggle i {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

/* ─── Testimonial Slider ─────────────────────────────────────────────────── */
#testimonial-track {
    user-select: none;
}
#testimonial-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

/* ─── File Dropzone ──────────────────────────────────────────────────────── */
.file-dropzone {
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.file-dropzone.dragover {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary-soft) !important;
}
.file-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ─── Sticky Mobile CTA Bar ──────────────────────────────────────────────── */
#sticky-cta-bar {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#sticky-cta-bar.is-visible {
    transform: translateY(0);
}

/* ─── Line Clamp Utility ─────────────────────────────────────────────────── */
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Print Utilities ────────────────────────────────────────────────────── */
@media print {
    .print-hidden { display: none !important; }
}

/* ─── Entry Animations ───────────────────────────────────────────────────── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-entry {
    animation: fadeSlideUp 0.4s ease forwards;
}