/* ================================================= */
/* ### Gemini: Custom Checkout Page Design ### */
/* ================================================= */

/* --- 1. Overall Layout & Container --- */

/* Center and constrain the main content column for better readability */
#checkout-checkout #content {
    max-width: 820px;
    margin: 0 auto;
    float: none;
}

/* Style the main accordion container to group all steps */
#checkout-checkout #accordion {
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    background-color: #fff;
    overflow: hidden; /* Ensures child corners are rounded */
}


/* --- 2. Accordion Panel Styling --- */

/* Remove default panel styling */
#checkout-checkout .panel-default {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Add a separator line between panels */
#checkout-checkout .panel-default + .panel-default {
    border-top: 1px solid #e9e9e9;
}

/* Style the clickable header of each step */
#checkout-checkout .panel-heading {
    background-color: #fff;
    padding: 0;
}

#checkout-checkout .panel-heading .panel-title {
    font-size: 18px;
    font-weight: 600;
    color: #555;
    display: block;
    padding: 20px 25px;
    text-decoration: none;
}

/* Style for the active/open panel header */
#checkout-checkout .panel-heading.active .panel-title {
    color: #6f4e37; /* Main accent color */
    background-color: #f9f9f9;
}

/* Remove the default collapse transition for a cleaner feel */
#checkout-checkout .panel-collapse {
    transition: none;
}

/* Style the content body of each step */
#checkout-checkout .panel-body {
    padding: 25px 30px 30px 30px;
    font-size: 15px;
}


/* --- 3. Form Element Styling --- */

/* General form group styling */
#checkout-checkout .form-group {
    margin-bottom: 20px;
}

/* Style for form labels */
#checkout-checkout label.control-label,
#checkout-checkout .form-check-label,
#checkout-checkout legend {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}

/* Universal styling for text inputs and selects */
#checkout-checkout .form-control {
    height: 48px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 15px;
}

#checkout-checkout .form-control:focus {
    border-color: #6f4e37;
    box-shadow: 0 0 0 3px rgba(111, 78, 55, 0.15);
}

/* Custom styling for radio buttons and checkboxes */
#checkout-checkout .radio,
#checkout-checkout .form-check {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#checkout-checkout .radio label,
#checkout-checkout .form-check label {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    font-weight: 500;
}

#checkout-checkout .radio input[type="radio"],
#checkout-checkout .form-check input[type="checkbox"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    accent-color: #6f4e37; /* Modern way to color radios/checkboxes */
}

#checkout-checkout .radio:hover,
#checkout-checkout .form-check:hover {
    background-color: #fcfcfc;
    border-color: #ccc;
}


/* --- 4. Button Styling --- */

/* Style all primary "Continue" buttons */
#checkout-checkout .btn-primary {
    background: #6f4e37;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    transition: background-color 0.2s ease;
    height: 50px;
    line-height: 26px; /* Vertically center text */
}

#checkout-checkout .btn-primary:hover,
#checkout-checkout .btn-primary:focus {
    background: #5a3f2d;
    color: #fff;
}

/* Ensure buttons inside the panel body have some top margin */
#checkout-checkout .panel-body .buttons {
    margin-top: 20px;
    border-top: 1px solid #e9e9e9;
    padding-top: 20px;
}


/* --- 5. Final Review / Confirm Step --- */
#collapse-checkout-confirm .table-responsive {
    border: 1px solid #e9e9e9;
    border-radius: 8px;
}

#collapse-checkout-confirm .table thead td {
    background-color: #f9f9f9;
    font-weight: 600;
}

/* --- 6. Mobile Responsiveness --- */
@media (max-width: 767px) {
    /* Allow content to go full-width */
    #checkout-checkout #content {
        max-width: none;
    }

    /* Remove the outer shadow/border on mobile for a flatter look */
    #checkout-checkout #accordion {
        border: none;
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
    }

    /* Add back a top border to the first panel to separate from heading */
    #checkout-checkout .panel-default:first-child {
        border-top: 1px solid #e9e9e9;
    }

    /* Reduce padding on mobile */
    #checkout-checkout .panel-heading .panel-title {
        padding: 15px 15px;
        font-size: 17px;
    }

    #checkout-checkout .panel-body {
        padding: 20px 15px 25px 15px;
    }

    /* Make labels take full width on some form layouts if needed */
    #checkout-checkout label.control-label {
        text-align: left;
    }
    
    /* Make sure buttons take full width if needed */
    #checkout-checkout .btn-primary {
        width: 100%;
        font-size: 15px;
    }

    /* Confirmation Checkbox and Text */
    #collapse-checkout-confirm .buttons .pull-right {
        display: flex; /* Use flexbox for better alignment */
        flex-wrap: wrap; /* Allow text to wrap below checkbox if needed */
        align-items: center; /* Vertically align checkbox and text */
        font-size: 14px; /* Ensure readable text size */
        line-height: 1.5; /* Improve readability */
        margin-bottom: 25px; /* Space before the button */
    }

    #collapse-checkout-confirm .buttons .pull-right input[type="checkbox"][name="agree"] {
        width: 22px; /* Make checkbox larger */
        height: 22px;
        min-width: 22px; /* Ensure it doesn't shrink */
        min-height: 22px;
        margin-top: 0; /* Reset default margin */
        margin-right: 10px; /* Space between checkbox and text */
        order: -1; /* Place checkbox before text visually */
    }

    /* Style for the agreement link */
    #collapse-checkout-confirm .buttons .pull-right .agree {
        color: #6f4e37; /* Use accent color for the link */
        font-weight: bold;
        text-decoration: none;
    }
    #collapse-checkout-confirm .buttons .pull-right .agree:hover {
        text-decoration: underline;
    }

    /* Adjust button styling if needed, though it should be covered by general btn-primary rules */
    #collapse-checkout-confirm #button-payment-method {
        width: 100%; /* Ensure button is full width on mobile */
        margin-top: 0; /* Reset any default margin */
    }
}