/*
 * Style.css
 * Only keeping essential animations and browser-specific fixes.
 * Fonts are inherited from theme.
 */

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

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

@keyframes fadeInScale {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

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

/* Fix Date Picker Icon Color */
input[type="date"]::-webkit-calendar-picker-indicator {
    /* No invert for light theme */
    cursor: pointer;
}

/* Ensure range slider is hidden as requested in code but kept in DOM */
.hidden {
    display: none !important;
}

/* 2. Typography Constraints */

/* Force 15px on spans, inputs, labels, buttons as requested */
/* Force 15px on spans, inputs, labels, buttons as requested */
.vl-rental-scope .text-xs,
.vl-rental-scope .text-sm,
.vl-rental-scope .text-base,
.vl-rental-scope p,
.vl-rental-scope span,
.vl-rental-scope div,
.vl-rental-scope input,
.vl-rental-scope select,
.vl-rental-scope textarea,
.vl-rental-scope button,
.vl-rental-scope label,
.vl-rental-scope li {
    font-size: 15px !important;
}

/* IMPROVED TYPOGRAPHY: Line Height for Readability */
.vl-rental-scope p,
.vl-rental-scope li,
.vl-rental-scope span,
.vl-rental-scope label,
.vl-rental-scope td,
.vl-rental-scope th,
.vl-rental-scope .text-sm,
.vl-rental-scope .text-base {
    line-height: 1.6 !important;
    /* Breathable text */
}

/* Headings */
.vl-rental-scope h2,
.vl-rental-scope h3,
.vl-rental-scope h4,
.vl-rental-scope .text-lg,
.vl-rental-scope .text-xl,
.vl-rental-scope .text-2xl {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.4 !important;
    /* Slightly tighter for headings */
}

/* EXCEPTION: Price Display (Large Numbers) */
.vl-rental-scope #vl-base-price-display {
    font-size: 36px !important;
    line-height: 1.2 !important;
}

.vl-rental-scope #vl-base-price-display+span {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.vl-rental-scope #vl-base-price-display+span span {
    font-size: 15px !important;
}

/* 3. Spacing & Layout Refinement */

/* Form Elements Spacing - Increased separation */
.vl-rental-scope input[type="text"],
.vl-rental-scope input[type="email"],
.vl-rental-scope input[type="tel"],
.vl-rental-scope input[type="number"],
.vl-rental-scope input[type="date"],
.vl-rental-scope input[type="time"],
.vl-rental-scope select,
.vl-rental-scope textarea,
.vl-rental-scope .vl-toggle-option,
.vl-rental-scope #vl-custom-dest-trigger {
    padding-top: 14px !important;
    /* Slightly taller */
    padding-bottom: 14px !important;
    padding-left: 20px !important;
    /* Wider padding */
    padding-right: 20px !important;
    margin-bottom: 0 !important;
    display: block;
    width: 100%;
    /* border-radius: 12px !important; // Optional: smoother roundedness if desired, but sticking to 10px from templates */
}

/* Labels */
.vl-rental-scope label {
    margin-bottom: 10px !important;
    /* More breathing room below label */
    display: block;
    font-weight: 600 !important;
    color: #374151;
    /* gray-700 */
}

/* Form Groups (Wrappers) Spacing */
/* Since Tailwind handles grid/gap, we rely on gap classes mainly, 
   but specific sections in the CSS can reinforce spacing */
.vl-rental-scope .mb-4,
.vl-rental-scope .mb-5,
.vl-rental-scope .mb-6 {
    margin-bottom: 24px !important;
    /* Force standard larger gap */
}

/* Buttons */
.vl-rental-scope button {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    font-size: 16px !important;
    /* Button text still good at 16 or 15, let's keep 16 for prominence or match 15? User said "span gunakan 15px", implied universal text. Let's make button 16px bold for CTA. */
    font-weight: 700 !important;
}

/* Section Spacing */
.vl-rental-scope section {
    margin-bottom: 32px !important;
    /* Increased section separation */
    padding-bottom: 16px !important;
}

/* Grid/Flex Gaps */
.vl-rental-scope .gap-3 {
    gap: 16px !important;
}

.vl-rental-scope .gap-4 {
    gap: 20px !important;
}

.vl-rental-scope .gap-5 {
    gap: 24px !important;
}

.vl-rental-scope .gap-6 {
    gap: 32px !important;
}

/* Custom Searchable Dropdown Refinement */
.vl-rental-scope #vl-custom-dest-list li {
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-bottom: 1px solid #f3f4f6;
}

.vl-rental-scope #vl-custom-dest-list li:last-child {
    border-bottom: none;
}

/* Alert Notification Toast Typography */
#vl-toast-wrapper>div {
    line-height: 1.5 !important;
}

/* --- FIX: SELECT ICON DUPLICATION --- */
/* Remove native dropdown arrow to prevent duplication with custom chevron */
.vl-rental-scope select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important; /* Remove any potential background image arrows */
}

/* Ensure our custom wrapper handles the arrow */
.vl-rental-scope .relative select + .pointer-events-none {
    /* This targets the SVG wrapper following the select */
    opacity: 1; /* Ensure our custom arrow is visible */
}