/*
     Theme Name: Testicuzzi Theme
     Author: Testicuzzi Team  - Ryan
     Description: A custom theme for Testicuzzi to display a full-screen Slider Revolution slider.
     Version: 1.0
     */

     /* Reset default margins and padding */
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     /* Ensure the slider container is full-screen */
     html, body {
         width: 100%;
         height: 100vh;
         overflow: hidden;
     }

     .slider-container {
         width: 100%;
         height: 100vh;
     }
     /* Hide page title on checkout */
.woocommerce-checkout .entry-header {
    display: none;
}

/* Hide edit link and footer extras */
.woocommerce-checkout .entry-footer {
    display: none;
}

/* Remove comments section if enabled */
.woocommerce-checkout #comments {
    display: none;
}

/* Basic cleanup for form layout */
.woocommerce-checkout .woocommerce {
    max-width: 1200px; /* Or your preferred width */
    margin: 0 auto; /* Center the content */
    padding: 20px;
}

/* Make columns responsive (WooCommerce uses 2-column layout by default) */
@media (min-width: 768px) {
    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        float: left;
        width: 48%;
    }
    .woocommerce-checkout .col2-set .col-1 {
        margin-right: 4%;
    }
}

/* Style buttons for a cleaner look */
.woocommerce-checkout button.button {
    background-color: #007bff; /* Example: blue */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
.woocommerce-checkout button.button:hover {
    background-color: #0056b3;
}

/* Improve form fields */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
/* Checkout Layout */
.checkout-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.checkout-billing,
.checkout-order-review {
    flex: 1 1 100%;
}
@media (min-width: 768px) {
    .checkout-billing {
        flex: 1 1 60%;
    }
    .checkout-order-review {
        flex: 1 1 35%;
    }
}

/* Form Fields */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
.woocommerce-checkout label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

/* Order Review Table */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table .order-total td {
    text-align: right;
    font-weight: bold;
}

/* Place Order Button */
.woocommerce-checkout #place_order {
    width: 100%;
    background-color: #28a745; /* Green example */
    color: white;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}
.woocommerce-checkout #place_order:hover {
    background-color: #218838;
}

/* General Cleanup */
.woocommerce-checkout h2, .woocommerce-checkout h3 {
    font-size: 24px;
    margin-bottom: 15px;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}
/* Force scrolling on checkout page */
html, body {
    overflow-y: auto !important; /* Allows vertical scrolling */
    height: auto !important; /* Prevents fixed heights from locking scroll */
}

.woocommerce-checkout {
    overflow: visible !important; /* Ensures the checkout container doesn't hide overflow */
    min-height: 100vh; /* Makes sure it fills the screen if content is short */
}

.checkout-columns {
    flex-direction: column; /* Stack columns on small screens to avoid horizontal overflow */
}

@media (min-width: 768px) {
    .checkout-columns {
        flex-direction: row; /* Restore side-by-side on larger screens */
    }
}