/*
 * style.css
 * Your custom styles for the SchoolKit Solutions website.
 */

/* ======== 1. Brand Color & Global Styles ======== */

:root {
    /* * --- IMPORTANT ---
     * Change this one color to match your brand.
     * Bootstrap will automatically use it for buttons, links, etc.
     * This example uses a deep blue.
     */
    --bs-primary: #0d47a1;
    --bs-primary-rgb: 13, 71, 161;
    
    /* You can also override other colors */
    /* --bs-dark: #222; */

    /* MODIFICATION: Change dark theme defaults slightly */
    --bs-body-bg: #0c0c0c; /* Make background almost black */
    --bs-dark-rgb: 25, 25, 25; /* Make "dark" cards slightly lighter */
}

/* Override the default dark theme link color to be your primary blue */
[data-bs-theme="dark"] .btn-link,
[data-bs-theme="dark"] a:not(.btn) {
    color: var(--bs-primary);
}


body {
    /* Prevents horizontal scrollbar issues that can be caused by
       some animations (like AOS) on mobile devices. */
    overflow-x: hidden;
}

/* ======== 2. Index Page (index.html) Styles ======== */

/*
 * Styles the feature icons (e.g., "Complete Kits", "Custom Branding")
 * This was moved from the <style> block in index.html
 */
.feature-icon {
    font-size: 3rem;
    color: var(--bs-primary); /* Uses your brand color */
    margin-bottom: 1rem;
}

/* * Styles the "How It Works" cards to ensure they are all
 * the same height and align properly.
 */
.h-100 {
    height: 100% !important;
}

/* ======== 3. Kits Page (kits.html) Styles ======== */

/*
 * Makes the labels for disabled checkboxes (like "Notebooks")
 * look like normal, non-interactive text instead of faded-out.
 */
.form-check-input:disabled + .form-check-label {
    color: #dee2e6; /* Standard light text color for dark mode */
    font-weight: 500;
    cursor: not-allowed; /* Show a 'not-allowed' cursor on hover */
}

/*
 * Styles for the kit card layout
 */
.kit-card {
    transition: box-shadow 0.2s ease-in-out;
    /* Ensure cards in a row are the same height */
    display: flex;
    flex-direction: column;
}

.kit-card:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.kit-card .kit-items {
    /* Makes the item list grow to fill space */
    flex-grow: 1;
}

.price-display {
    text-align: right;
}

.price-display h4 {
    margin-bottom: 0.25rem;
}

/*
 * MODIFICATION: New styles for "Plus/Minus" quantity controls
 */
.kit-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.kit-item-row .form-label {
    margin-bottom: 0; /* Override Bootstrap default */
    flex-grow: 1; /* Make label take available space */
    font-size: 0.95rem;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0; /* Prevent control from shrinking */
}

.quantity-control .btn {
    /* Make buttons round */
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    padding: 0;
    font-size: 0.8rem;
    /* Center icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quantity-control .quantity-display {
    font-size: 1.1rem;
    font-weight: 500;
    width: 2rem; /* Fixed width for alignment */
    text-align: center;
}

/*
 * Styles for the Modals
 */
#googleFormModal .modal-body {
    padding: 0;
    height: 80vh; 
}

#googleFormModal iframe {
    width: 100%;
    height: 100%;
    border: none;
}