@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Universal box-sizing for consistent layout */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Ensure html and body take full viewport height */
    overflow-x: hidden; /* Prevents horizontal scrolling/bouncing across the entire page */
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #0a0a0a; /* Very dark grey, almost black (95% dark) */
    color: #e0e0e0; /* Light text for readability on dark background */
    min-height: 100vh; /* Fallback for browsers not supporting height: 100% well */
    display: flex; /* Use flexbox to center the calculator-container */
    justify-content: center;
    align-items: center; /* Default: Center vertically for desktop */

    /* OPTIONAL: Full page background image for the main page */
    /* Uncomment the lines below and replace 'YOUR_IMAGE_URL_HERE' with your image path */
    /* background-image: url('YOUR_IMAGE_URL_HERE'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-attachment: fixed; */
    /* background-repeat: no-repeat; */
}

/* This class is primarily for preventing main page scrolling when a modal *would* be open on an overlay */
/* For a standalone page, this might not be directly used, but keeping it robust */
body.modal-open {
    overflow: hidden !important; /* Force hide overflow to prevent main page scrolling */
    position: fixed !important; /* Prevents scroll jump on iOS and other mobile browsers */
    width: 100% !important; /* Ensures fixed position doesn't shrink content */
    height: 100% !important; /* Ensures fixed position covers full height */
    top: 0 !important; /* Ensures fixed position starts from the very top */
    left: 0 !important; /* Ensures fixed position starts from the very left */
}

/* Calculator Container Styles (now the main container for photographyratescalculator.html) */
.calculator-container {
    background-color: transparent; /* Remains transparent as requested */
    padding: 0; /* Removed padding from here, it will be on scrollable content */
    border-radius: 8px; /* Added some rounded corners back for content box */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); /* Reinstated box-shadow for desktop */
    
    /* Default (Desktop) Styles */
    width: 90%;
    max-width: 500px; /* Constrain width on desktop */
    height: auto; /* Allow height to adjust to content on desktop */
    margin: 20px auto; /* Center with some margin on desktop */

    text-align: center;
    position: relative; /* For positioning the close button and absolute result */
    display: flex; /* Use flexbox to stack header, scrollable content, and result */
    flex-direction: column; /* Stack them vertically */
    overflow-x: hidden; /* Prevents horizontal overflow within the container */
}

/* New: Styles for the scrollable form content */
.modal-scroll-content {
    flex-grow: 1; /* Allows this section to take up available space */
    overflow-y: auto; /* Enables vertical scrolling for the form fields */
    padding: 20px; /* Padding for the form content */
    padding-bottom: 120px; /* Increased space for the absolutely positioned result section */
    /* Optional: Add padding-right to account for scrollbar width if needed */
    /* padding-right: 15px; */
}


/* Close Button and Navigation Links Styling */
.calculator-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Padding for the nav area */
    background-color: rgba(10, 10, 10, 0.95); /* Background for the nav bar */
    border-bottom: 1px solid #555;
    position: relative; /* For z-index if needed */
    z-index: 15; /* Ensure nav is above other content */
}

.close-button {
    background: none;
    border: none;
    font-size: 40px; /* Increased font size */
    color: #f0f0f0;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0; /* Remove default button padding */
    line-height: 1; /* Adjust line height for better alignment */
}

.close-button:hover {
    color: #00A6E4; /* Hover color */
}

.nav-link {
    color: #00A6E4; /* Blue color for links */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    margin-left: 15px; /* Space between links */
    transition: color 0.2s ease;
    display: flex; /* Use flex for image alignment */
    align-items: center; /* Vertically center content */
}

.nav-link:hover {
    color: #FFFFFF; /* White on hover */
}

/* Styling for the brand image in the nav link */
.brand {
    height: 50px; /* Set height for the brand image */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it behaves as a block within flex */
}


/* Existing styles for form elements */
h1 {
    color: #f0f0f0;
    margin-bottom: 25px;
    padding-top: 20px; /* Add padding to top of H1 since container padding is 0 */
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* Updated selector to include input[type="text"] */
.form-group select,
.form-group input[type="number"],
.form-group input[type="text"] {
    width: 100%; /* Changed to 100% */
    padding: 10px; /* Adjusted padding */
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 16px;
    background-color: #222222;
    color: #e0e0e0;
}

.form-group span {
    font-size: 14px; /* Increased font size */
    color: #b0b0b0;
    margin-top: 5px;
    display: block;
}

/* Styles for the checkbox and its label within add-ons */
.form-group label:has(input[type="checkbox"]) {
    display: flex; /* Use flexbox to keep checkbox and text on same line */
    align-items: center; /* Vertically center checkbox with text */
    margin-bottom: 5px; /* Add a small margin between options */
}

.form-group input[type="checkbox"] {
    margin-right: 8px; /* Space between checkbox and text */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    /* Ensure no conflicting display properties here */
}


/* Styles for the result section (now absolutely positioned) */
.result {
    position: absolute; /* Changed from sticky to absolute */
    bottom: 0; /* Sticks it to the bottom of the calculator-container */
    left: 0;
    width: 100%;
    background-color: rgba(10, 10, 10, 0.95); /* Slightly opaque background to cover content below */
    padding: 15px 20px; /* Adjusted padding */
    text-align: center;
    border-top: 1px solid #555; /* Separator line */
    z-index: 10; /* Ensures it stays on top of scrolling content */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 0; /* Removed margin-bottom */
}

.result h2 {
    color: #00A6E4;
    font-size: 20px; /* Adjusted font size */
    margin-bottom: 10px;
}

#totalPrice {
    font-weight: bold;
    font-size: 50px; /* Increased font size */
    color: #FFFFFF;
    display: block;
    margin-top: 2px; /* Adjusted margin */
}

.error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 10px;
    display: block;
    font-weight: bold;
}

/* Media Queries for Mobile-Specific Styles */
@media (max-width: 768px) { /* Adjust breakpoint as needed for your definition of mobile */
    body {
        align-items: flex-start; /* Align calculator to the top on mobile */
    }

    .calculator-container {
        width: 100%; /* Edge-to-edge on mobile */
        max-width: none; /* No max-width on mobile */
        height: 100vh; /* Full viewport height on mobile */
        margin: 0; /* No margins on mobile */
        border-radius: 0; /* Remove border radius for edge-to-edge look */
        box-shadow: none; /* No shadow on mobile for clean edge-to-edge */
    }

    /* Adjust padding for h1 and close button if needed for smaller screens */
    h1 {
        padding-top: 30px; /* Give more space from the very top edge on mobile */
    }

    .close-button {
        top: 20px; /* Adjust close button position for mobile */
        right: 20px;
    }
}
/* Classes from your provided HTML that are now correctly styled */
.header-calculator {
    font-size: x-large;
    margin-top: 0; /* Resetting to 0 to prevent heading cutoff */
}
.space-50px {
    margin-bottom: 100px; /* Adjusted margin-bottom */
}

/* Disclaimer Accordion Styles */
.disclaimer-accordion {
    background-color: #1a1a1a; /* Slightly lighter dark background for accordion */
    color: #e0e0e0;
    border: 1px solid #333;
    border-radius: 8px;
    margin: 20px 0;
    overflow: hidden; /* Ensures content stays within rounded corners */
}

.disclaimer-accordion summary {
    font-weight: bold; /* Make the summary text bold */
    padding: 15px 20px;
    cursor: pointer;
    outline: none; /* Remove outline on focus */
    display: flex; /* Use flexbox for icon alignment */
    justify-content: space-between; /* Push icon to the right */
    align-items: center; /* Vertically center icon */
    position: relative; /* For the custom arrow */
    list-style: none; /* Remove default marker */
}

/* Custom arrow for summary */
.disclaimer-accordion summary::after {
    content: '\25BC'; /* Down arrow Unicode character */
    font-size: 1.2em;
    transition: transform 0.2s ease;
    margin-left: 10px; /* Space between text and arrow */
}

.disclaimer-accordion[open] summary::after {
    transform: rotate(180deg); /* Rotate arrow when open */
}

.disclaimer-accordion .disclaimer-content {
    padding: 0 20px 15px 20px; /* Padding for the content area */
    font-size: 0.9em;
    line-height: 1.5;
    color: #b0b0b0; /* Lighter grey for content text */
    text-align: left; /* Justify text left */
}

.disclaimer-accordion .disclaimer-content p {
    margin-top: 0; /* Remove default top margin for first paragraph */
    text-align: left; /* Justify text left */
}

.disclaimer-accordion .disclaimer-content ul {
    list-style-type: disc; /* Ensure bullet points */
    margin-left: 20px; /* Indent list items */
    padding-left: 0;
    text-align: left; /* Justify text left */
}

.disclaimer-accordion .disclaimer-content li {
    margin-bottom: 5px;
    text-align: left; /* Justify text left */
}