/* geometri/kitchen_calculator/css/global_styles.css */

/* Universal Box Sizing for consistent layout - Global */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* Overall Body Styles - Global */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    /* padding-top and padding-bottom will be handled dynamically by JavaScript (adjustLayout function) */
    background-color: transparent; /* Ensure body background doesn't interfere */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0px !important; /* ეს მოაშორებს შავ ზოლს */
}

/* Page Title Styles - Global */
h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
}

/* Calculator Styles - Global (Upper Bar) - DESKTOP DEFAULT */
#calculator {
    display: flex;
    justify-content: space-between; /* Desktop: space between left and right */
    align-items: flex-start;
    padding: 5px 10px;
    background-color: #1a1a1a;
    border-bottom: 2px solid #ff8c00;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-sizing: border-box;
    height: auto;
    overflow: visible;
    flex-wrap: nowrap; /* Desktop: Prevent wrapping */
}

/* Bottom Calculator Styles - Global (Lower Bar) - DESKTOP DEFAULT */
#bottomCalculator {
    display: flex;
    justify-content: space-between; /* Desktop: space between left and right items */
    align-items: center; /* Vertically align items */
    position: fixed; /* მნიშვნელოვანია, რომ ეს იყოს fixed, რათა ბოლოში იყოს */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #1a1a1a;
    border-top: 2px solid #ff8c00;
    z-index: 1000;
    box-sizing: border-box;
    padding: 5px 10px;
    height: auto;
    overflow: visible;
    flex-wrap: nowrap; /* Desktop: Prevent wrapping */
}

/* Common styles for calculator-left and calculator-right (Desktop DEFAULT) */
.calculator-left,
.calculator-right {
    display: flex;
    align-items: flex-start;
    font-size: 0.8em;
    padding: 0 10px;
    gap: 15px; /* Spacing between speedometers */
    flex-shrink: 0;
    flex-wrap: nowrap; /* Desktop: no wrapping */
}

.calculator-left {
    flex-wrap: nowrap; /* Desktop: no wrapping */
}

.calculator-right {
    flex-direction: row; /* Desktop: horizontal */
    text-align: right;
    padding-top: 0px;
    padding-bottom: 5px;
    width: auto; /* Allow content to dictate width */
    flex-wrap: nowrap; /* Desktop: no wrapping */
}

/* Original desktop styles for Total Cost/Area - assuming they are in .calculator-right */
.calculator-right .total-cost-item {
    margin-left: auto; /* Pushes Total Cost to the far right */
    margin-right: 10px; /* Small spacing from the right edge */
}

.calculator-right .total-meters-item {
    margin-right: 0; /* Align right to total cost or other items */
}

.calculator-item {
    display: flex;
    align-items: center; /* Desktop: Keep label and value in row */
    white-space: nowrap;
    margin-bottom: 3px;
}

/* Styles for the combined label and span block (calculator-value-block) */
.calculator-value-block {
    background-color: transparent;
    color: #cccccc;
    padding: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    box-shadow: none;
    font-size: 0.8em; /* Base font size */
}

/* Specific styles for the total calculator-value-block (right side) */
.calculator-right .calculator-value-block {
    color: #f0f0f0;
    font-size: 1.1em; /* Larger font on the right side */
}

/* Bottom Calculator Specific Layout (Desktop DEFAULT) */
.bottom-calculator-left {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ტექსტი მიიმართება მარცხენა კიდეზე */
    width: auto; /* ავტომატური სიგანე, რათა კონტენტმა განსაზღვროს ზომა */
    flex-grow: 1; /* მისცემს საშუალებას, დაიკავოს დარჩენილი სივრცე */
    padding-left: 10px; /* მცირე დაშორება კიდიდან */
    flex-shrink: 0;
}

.bottom-calculator-right {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* ტექსტი მიიმართება მარჯვენა კიდეზე */
    width: auto; /* ავტომატური სიგანე */
    flex-grow: 1; /* მისცემს საშუალებას, დაიკავოს დარჩენილი სივრცე */
    padding-right: 10px; /* მცირე დაშორება კიდიდან */
    flex-shrink: 0;
}

/* Copyright Styles - Global (განახლებული HTML-ის შემდეგ) */
.copyright {
    display: flex; /* ვაქცევთ flex კონტეინერად, რომ სიმბოლო და ტექსტი გვერდიგვერდ იყოს */
    align-items: center; /* ვერტიკალურად გასწორება */
    gap: 5px; /* მცირე დაშორება სიმბოლოსა და ტექსტს შორის */
    white-space: nowrap; /* ხელს უშლის ტექსტის გადასვლას ახალ ხაზზე */
}

.copyright-symbol {
    font-size: 1.em; /* კოპირაითის სიმბოლოს ზომა */
    color: #ff8c00; /* კოპირაითის სიმბოლოს ფერი: ნარინჯისფერი */
	font-family: 'TGSquare', sans-serif;
}

.copyright-text {
    font-size: 0.6em; /* ტექსტის ზომა */
    color: #cccccc; /* ტექსტის ფერი: ღია ნაცრისფერი */
	font-family: 'TGSquare', sans-serif;
}

/* Bottom Navigation Bar Styles - Global (Remains Static - Scrolls with content) */
.bottom-bar {
    text-align: center;
    padding: 30px 0;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    position: static; /* დარწმუნდება, რომ ეს ბლოკი სქროლავს კონტენტთან ერთად */
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    background-color: transparent;
    border-top: none;
}

.bottom-bar button {
    margin: 1px;
    padding: 8px 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
    color: black;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bottom-bar button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
    border-color: #ccc;
}

.bottom-bar button:not(:disabled):hover {
    background-color: #fff3e0;
    border-color: #ff8c00;
}

/* --- Responsive Adjustments for Tablets (max-width: 1024px) --- */
@media (max-width: 1024px) {
    #calculator, #bottomCalculator {
        padding: 10px 15px;
        flex-wrap: wrap; /* Allow content to wrap */
        justify-content: center; /* Center items when wrapping */
    }

    /* Speedometers layout for tablets */
    .calculator-left, .calculator-right {
        flex-wrap: wrap; /* Allow speedometers to wrap */
        justify-content: center; /* Center speedometers */
        width: 100%; /* Take full width */
        padding-left: 0;
        padding-right: 0;
        gap: 10px; /* Adjust gap for smaller screens */
        flex-direction: row; /* Keep horizontal */
    }
    .calculator-item {
        margin-bottom: 5px; /* Add some vertical spacing */
    }

    .calculator-value-block {
        font-size: 1.1em;
    }

    /* Total Cost/Area in .calculator-right on tablets */
    .calculator-right .calculator-value-block { /* This is correct for right side, even if it's totals */
        font-size: 1.4em;
    }

    .bottom-bar {
        padding: 18px 10;
        justify-content: center; /* Centering buttons for tablets */
    }

    /* Bottom calculator totals alignment for tablets - განახლებული */
    #bottomCalculator .bottom-calculator-right {
        width: 100%; /* Take full width */
        justify-content: center; /* Center total items */
        padding-right: 0;
        margin-left: 0;
        margin-top: 10px;
    }
    #bottomCalculator .bottom-calculator-left {
        width: 100%;
        justify-content: flex-start; /* ტექსტი მარცხნივ გასწორდება ტაბლეტზე */
        padding-left: 10px; /* დაშორება კიდიდან */
        margin-bottom: 10px;
    }
}

/* --- Responsive Adjustments for Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
    /* Upper Calculator (#calculator) for Speedometers */
    #calculator {
        flex-direction: row; /* Keep as row */
        flex-wrap: wrap; /* Allow items to wrap into multiple rows */
        align-items: center; /* Vertically center items */
        justify-content: flex-end; /* Align all speedometers to the right */
        padding: 10px;
        height: auto;
    }

    .calculator-left, .calculator-right { /* This covers both left and right speedometer groups */
        width: 100%; /* Take full width to allow justify-content to work */
        justify-content: flex-end; /* Align speedometers to the right within their section */
        padding-left: 0;
        padding-right: 0;
        flex-direction: row;
        flex-wrap: wrap; /* Crucial: Allow speedometers to wrap into new rows */
        gap: 5px; /* Space between speedometers */
        margin-top: 0;
        align-items: center;
    }

    .calculator-item { /* Individual speedometer item */
        width: calc(25% - 5px); /* Allocate width for 4 items per row, accounting for gap */
        max-width: 80px; /* Max width to prevent items from getting too large */
        margin-bottom: 5px; /* Vertical spacing between rows */
        justify-content: center; /* Center content (label/value) within each speedometer */
        font-size: 0.8em;
        flex-shrink: 1;
        box-sizing: border-box;
        flex-direction: column; /* Label above value for speedometers */
    }

    /* --- Total items in #bottomCalculator mobile alignment --- განახლებული */
    #bottomCalculator {
        flex-direction: column; /* Stack totals and left content vertically */
        align-items: center; /* Center items */
        padding: 10px;
        height: auto;
    }

    #bottomCalculator .bottom-calculator-left {
        width: 100%;
        justify-content: center; /* ტექსტი ცენტრში გასწორდება მობილურზე */
        padding: 0; /* მოვაშორეთ padding-left, რადგან ცენტრირება ხდება */
        margin-bottom: 10px; /* Space between left and right sections */
    }

    #bottomCalculator .bottom-calculator-right {
        width: 100%;
        justify-content: center; /* ტექსტი ცენტრში გასწორდება მობილურზე */
        padding: 0;
        margin: 0;
        flex-direction: row; /* Keep them in a row */
        flex-wrap: wrap; /* Allow wrapping if space is tight */
        gap: 15px; /* Spacing between total area and total cost */
    }

    /* If total area/cost are now in bottomCalculator, use its specific selector */
    #bottomCalculator .bottom-calculator-right .calculator-item {
        width: auto; /* Allow content to dictate width */
        font-size: 1em; /* Larger font */
        flex-direction: row; /* Keep label and value in row */
        gap: 5px;
        white-space: nowrap; /* Prevent wrapping for these items */
    }

    /* --- Speedometer internal element size adjustments for mobile (768px) --- */
    /* These !important tags are necessary to override more specific rules from speedometer-styles.css */
    .speedometer-wrapper {
        width: 65px !important; /* Slightly smaller width for 4 per row */
        height: 65px !important; /* Slightly smaller height */
        padding-bottom: 18px !important; /* Adjust padding-bottom for smaller size */
        margin: 0 auto; /* Center alignment */
        flex-shrink: 0; /* Prevent shrinking if space is tight */
    }
    .speedometer-svg {
        width: 100% !important;
        height: 100% !important;
        transform: translateY(-18px) !important;
    }
    .speedometer-wrapper .value-display {
        font-size: 0.65em !important;
        width: 55px !important;
        height: 13px !important;
        padding: 3px 6px !important;
    }
    .speedometer-wrapper .label-text {
        font-size: 0.55em !important;
        bottom: 7px !important;
    }

    /* Bottom Bar (Buttons) changes for mobile */
    .bottom-bar {
        flex-direction: column;
        padding: 70px 15px;
        gap: 10px;
        align-items: center; /* Added to center buttons horizontally */
    }
    .bottom-bar button {
        width: 100%;
        max-width: 280px;
        margin: 50 auto;
    }

    /* General responsive adjustments */
    h2 {
        font-size: 1.em;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* --- Responsive Adjustments for Smaller Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
    #calculator {
        padding: 8px 10px;
    }
    .calculator-item {
        width: calc(33.33% - 5px); /* Adjusted for 3 items per row */
        font-size: 0.7em;
    }
    /* Speedometer internal element size adjustments for 480px */
    .speedometer-wrapper {
        width: 55px !important;
        height: 55px !important;
        padding-bottom: 10px !important;
    }
    .speedometer-svg {
        transform: translateY(-10px) !important;
    }
    .speedometer-wrapper .value-display {
        font-size: 0.55em !important;
        width: 45px !important;
        height: 11px !important;
        padding: 2px 4px !important;
    }
    .speedometer-wrapper .label-text {
        font-size: 0.45em !important;
        bottom: 3px !important;
    }
    .calculator-value-block {
        font-size: 0.75em;
    }
    .calculator-right .calculator-value-block { /* For totals in .calculator-right */
        font-size: 0.9em;
    }
    /* If totals are in bottomCalculator, use its specific selector */
    #bottomCalculator .bottom-calculator-right .calculator-item .calculator-value-block {
        font-size: 0.9em;
    }
}

/* --- Responsive Adjustments for Very Small Mobile (max-width: 320px) --- */
@media (max-width: 320px) {
    #calculator {
        padding: 5px 8px; /* Slightly less padding */
    }
    .calculator-item {
        width: calc(50% - 5px); /* Adjusted for 2 items per row */
        font-size: 0.65em;
    }
    /* Speedometer internal element size adjustments for 320px */
    .speedometer-wrapper {
        width: 45px !important;
        height: 45px !important;
        padding-bottom: 8px !important;
    }
    .speedometer-svg {
        transform: translateY(-8px) !important;
    }
    .speedometer-wrapper .value-display {
        font-size: 0.5em !important;
        width: 38px !important;
        height: 10px !important;
        padding: 1px 3px !important;
    }
    .speedometer-wrapper .label-text {
        font-size: 0.4em !important;
        bottom: 2px !important;
    }
    .calculator-value-block {
        font-size: 0.7em;
    }
    .calculator-right .calculator-value-block {
        font-size: 0.8em;
    }
    #bottomCalculator .bottom-calculator-right .calculator-item .calculator-value-block {
        font-size: 0.8em;
    }
}