/* --- Plugin-Specific CSS Reset --- */
/* This prevents your theme from breaking the plugin's layout */
.olin-outer-plugin-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: 'Roboto', sans-serif; /* Force the correct font */
    line-height: 1.5;
    color: #333; /* Default dark text color */
    background: none;
    border: 0;
}

/* Main wrapper to control size and background */
.olin-outer-plugin-container {
    width: 100%;
    max-width: 1140px; /* Adjust this value to your liking */
    margin: 2rem auto; /* Center the plugin on the page with space */
    background-color: #f3f4f6; /* The light gray background you want */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Ensure images scale correctly */
.olin-outer-plugin-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Original Plugin Styles (now scoped and adjusted) --- */

.olin-outer-plugin-container .form-input:focus,
.olin-outer-plugin-container .form-select:focus {
    --tw-ring-color: #FBBF24;
    border-color: #FBBF24;
}

.olin-outer-plugin-container .scooter-card { transition: all 0.3s ease; cursor: pointer; border: 2px solid #e5e7eb; }
.olin-outer-plugin-container .scooter-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.olin-outer-plugin-container .scooter-card.selected { border-color: #FBBF24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5); }
.olin-outer-plugin-container input:disabled { background-color: #f3f4f6; cursor: not-allowed; }
.olin-outer-plugin-container .iti { width: 100%; }
.olin-outer-plugin-container .step-circle, .olin-outer-plugin-container .step-connector { transition: all 0.4s ease; }

/* Step 1 Collapse Styles */
.olin-outer-plugin-container #step-1-content {
    transition: max-height 0.5s ease-in-out, margin 0.5s ease-in-out;
    max-height: 2000px;
    overflow: hidden;
}
.olin-outer-plugin-container .step-minimized #step-1-content {
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.olin-outer-plugin-container .step-minimized #step-1-header {
    border-bottom-width: 0;
    padding-bottom: 0;
}
.olin-outer-plugin-container #step-1-toggle-icon {
    transition: transform 0.3s ease;
}
.olin-outer-plugin-container .step-minimized #step-1-toggle-icon {
    transform: rotate(-180deg);
}

/* Mobile Display Fixes */
@media (max-width: 1023px) {
    .olin-outer-plugin-container {
        padding: 0.5rem; /* Less padding on mobile */
        margin: 1rem auto;
    }

    /* CRITICAL: This ensures the steps are visible on mobile */
    .olin-outer-plugin-container .booking-step {
        display: none;
        animation: fadeIn 0.5s ease-in-out;
    }
    .olin-outer-plugin-container .booking-step.active {
        display: block; /* This makes the current step show up */
    }

    .olin-outer-plugin-container #desktop-summary-wrapper { display: none; }
    .olin-outer-plugin-container #mobile-summary-bar { display: flex; }

    /* Banner Minimizing Styles */
    .olin-outer-plugin-container #hero-banner {
        transition: height 0.5s ease-in-out;
    }
    .olin-outer-plugin-container #hero-banner-content {
        transition: opacity 0.3s ease-in-out, padding 0.5s ease-in-out;
        overflow: hidden;
    }
    .olin-outer-plugin-container #hero-banner.banner-minimized {
        height: 4rem; /* 64px */
    }
    .olin-outer-plugin-container #hero-banner.banner-minimized #hero-banner-content {
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: none;
    }
    .olin-outer-plugin-container #minimize-banner-icon {
        transition: transform 0.3s ease-in-out;
    }
    .olin-outer-plugin-container #hero-banner.banner-minimized #minimize-banner-icon {
        transform: rotate(180deg);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}