/* ===================== */
/* Fonts                 */
/* ===================== */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* ===================== */
/* CSS Variables         */
/* ===================== */
:root {
    --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-h1: clamp(2.5rem, 3.059vw + 1.888rem, 4.5rem);
    --font-h2: clamp(1.3rem, 1.071vw + 1.086rem, 2rem);
    --font-h3: clamp(1.1rem, 0.612vw + 0.978rem, 1.5rem);
    --font-h4: clamp(1rem, 0.382vw + 0.924rem, 1.25rem);
    --font-m: clamp(0.875rem, 0.191vw + 0.837rem, 1rem);
    --font-s: 0.875rem;
    --font-xs: 0.675rem;

    --sidebar-width: 21.5rem;

    --colors-grid: repeat(3, 1fr);
    --accent: #D91200;
    --bg-white: #fff;
    --body-primary: black;
    --body-secondary: #00000080;
    --divider: #EDEDED;
    --divider-darker: #00000026;
    --divider-hover: #ebebeb;
    --tab-bg: #F5F5F5;
    --loading-bg: #d9dad9;
    --blur-m: blur(0.5rem);
    --blur-bg: #0000003A;
    --btn-dark-text: hsla(0, 0%, 0%, 0.90);

    --radius: 0.625rem;
    --radius-s: calc(var(--radius) / 2);
    --radius-rd: 5rem;
    --radius-button: 0.625rem;

    --gap-xxs: calc(var(--gap-s) / 4);
    --gap-xs: calc(var(--gap-s) / 2);
    --gap-s: calc(var(--gap-m) / 1.2);
    --gap-m: clamp(0.938rem, 0.477vw + 0.843rem, 1.25rem);
    --gap-l: calc(var(--gap-m) * 1.2);
    --gap-xl: calc(var(--gap-m) * 2);
    --gap-xxl: calc(var(--gap-m) * 4);

    --transition: all 0.3s ease;

    --box-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.20);
    --box-shadow-m: 0 5px 10px rgba(0, 0, 0, 0.15);
    --box-shadow-l: 0 5px 15px rgba(0,0,0,0.1);
    --box-shadow-accent: 0 5px 15px rgba(217, 18, 0, 0.15);

    --z-index-xxl: 999;

    --focus-outline: 2px solid var(--accent);
    --focus-outline-offset: -2px;
}


/* ===================== */
/* Base Styles           */
/* ===================== */
body {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
}

/* Hide reCAPTCHA*/
.grecaptcha-badge {
    visibility: hidden;
}

h1 {font-size: var(--font-h1); font-weight: 400; line-height: 0;}
h2 {font-size: var(--font-m); font-weight: 600; line-height: 0;}
h3 {font-size: var(--font-s); font-weight: 500; color: var(--body-secondary); margin:var(--gap-xxs) 0;}
h4 {font-size: var(--font-m); font-weight: 400;}

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--radius-s);
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ===================== */
/* Loading bar           */
/* ===================== */

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-white);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-container {
    text-align: center;
}

.progress-bar {
    width: 200px;
    height: 4px;
    background: var(--divider);
    border-radius: 2px;
    margin-bottom: var(--gap-s);
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease-out;
}

.loading-container p {
    color: var(--body-secondary);
    font-size: var(--font-s);
    margin: 0;
}

/* ===================== */
/* Components            */
/* ===================== */

/* Sidebar */
.sidebar {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-height: calc(100vh - (var(--gap-s) * 2) - 45px);
    background: var(--bg-white);
    box-shadow: var(--box-shadow-l);
    padding: var(--gap-s);
    margin: var(--gap-xs);
    border-radius: var(--radius);
    z-index: var(--z-index-xxl);
    overflow-x: hidden;
    overflow-y: auto;
    transition: max-height 0.3s ease-in-out;
}

.sidebar-content, 
.tab-buttons,
.header-divider {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s linear;
}
/* Desktop collapsed state */
.sidebar.collapsed {
    max-height: 60px;
    overflow: hidden;
}

.header {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .sidebar {
        position: fixed;
        top: auto;
        bottom: calc(var(--gap-s) * 2 + var(--gap-xs) * 2 + var(--gap-s));
        left: 0;
        right: 0;
        width: auto;
        margin: var(--gap-xs);
        border-radius: var(--radius);
        height: 46vh;
        max-height: 46vh;
        transition: max-height 0.3s ease-in-out;
    }

    .sidebar.collapsed {
        max-height: 50px;
    }

    .sidebar-toggle {
        transform: rotate(-90deg)!important;
    }
    
    .sidebar.collapsed .sidebar-toggle svg {
        transform: rotate(-180deg)!important;
    }
}

.logo {
    max-width: 190px;
    height: auto;
}
.logo-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar.collapsed .sidebar-content, 
.sidebar.collapsed .tab-buttons,
.sidebar.collapsed .header-divider {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
}

/* Sidebar toggle button */
.sidebar-toggle {
    display: flex;
    background: none;
    border: none;
    padding: var(--gap-xs);
    cursor: pointer;
    color: var(--body-secondary);
    border-radius: var(--radius-s);
    transform: rotate(90deg);
    transition: all 0.3s ease-in-out;
}
.sidebar-toggle svg {
    width: 16px;
    height: 16px;
}
.sidebar-toggle:hover {
    background: var(--divider);
    color: var(--body-primary);
}
.sidebar.collapsed .sidebar-toggle svg {
    transform: rotate(180deg);
}

.header-divider {
    margin: 0 calc(var(--gap-s) * -1);
    padding: 0 var(--gap-s);
    border-bottom: 1px solid var(--divider);
    padding-bottom: var(--gap-s);
}

/* Menu */
#sideOptionsMenu {
    position: absolute;
    background: var(--bg-white);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-m);
    padding: var(--gap-xs);
    cursor: pointer;
    z-index: var(--z-index-xxl);
}

#sideOptionsMenu div {
    padding: var(--gap-xs) var(--gap-s);
    border-radius: var(--radius-s);
}

#sideOptionsMenu div:hover {
    background-color: var(--divider);    
    transition: var(--transition);
}

/* Tabs */
.tab-buttons {
    display: flex;
    align-self: stretch;
    justify-content: space-between;
    background: var(--tab-bg);
    border-radius: var(--radius-rd);
    padding: var(--gap-xxs);
    gap: var(--gap-xxs);
    min-width: 305px;
    flex-wrap: nowrap;
    box-sizing: border-box;
    z-index: var(--z-index-xxl);
}

.tab-btn {
    width: 100%;
    padding: 0.625rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-m);
    color: var(--body-secondary);
    transition: var(--transition);
}

.tab-btn:hover {
    color: var(--body-primary);
    background: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-rd);
}

.tab-btn.active {
    color: var(--body-primary);
    background: var(--bg-white);
    border-radius: var(--radius-rd);
    box-shadow: var(--box-shadow-s);
}

.tab-content {
    padding-top: var(--gap-xs);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: flex;
    flex-direction: column;
}

/* Pergola Options */
.pergola-options {
    display: flex;
    flex-direction: column;
    margin-top: var(--gap-s);
    gap: var(--gap-xs);
}

.pergola-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.option-content {
    position: relative;
    border: 2px solid var(--divider);
    border-radius: var(--radius);
    padding: var(--gap-xxs);
    color: var(--body-primary);
    cursor: pointer;
}

.pergola-option input[type="radio"]:checked + .option-content {
    border-color: var(--accent);
    box-shadow: var(--box-shadow-accent);
}

.image-placeholder {
    width: 50%;
    height: 5rem;
    background-color: var(--tab-bg);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pergola-option img.image-placeholder {
    width: 20%;
    height: 20%;
    padding: var(--gap-s);
    object-fit: contain;
}

.pergola-option input[value="bio_pergko"]:checked ~ .option-content img.image-placeholder,
.pergola-option input[value="tento_pergko"]:checked ~ .option-content img.image-placeholder {
    background-color: #FFDCD9;
}

.tento-settings, .bio-settings {
    padding-bottom: var(--gap-s);
}

.option-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.perg-description {
    color: var(--body-secondary);
    font-size: var(--font-s);
    padding: 0;
    margin: 0;
}

.option-content:hover {
    background-color: var(--tab-bg);
}

/* Accordion */
.accordion {
    background: var(--tab-bg);
    border-radius: var(--radius-s);
    margin-bottom: var(--gap-xxs);
}

.accordion-button {
    display: flex;
    width: 100%;
    font-size: var(--font-m);
    padding: var(--gap-xs) var(--gap-s);
    background: none;
    text-align: left;
    border: none;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
}

.accordion-button h2 {
    display: flex;
    width: 100%;
    font-size: var(--font-s);
    font-weight: 400;
}

.accordion-button:hover {
    background: var(--tab-bg);
    border-radius: var(--radius-s);
}

.accordion-icon {
    width: 15px;
    height: 15px;
}

.accordion-button[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-button[aria-expanded="true"] {
    border-radius: var(--radius-s);
}

.accordion-content {
    display: none;
    padding: var(--gap-s);
    background: var(--bg-white);
    border-radius: var(--radius-s);
    box-shadow: var(--box-shadow-s);
    transform: translateZ(0);
    will-change: transform;
    margin: var(--gap-xxs);
}

.accordion-content.active {
    display: block;
}


.checkbox-label {
    display: flex;
    color: var(--body-primary);
    gap: var(--gap-xxs);
    justify-content: space-between;
    margin-bottom: 0!important;
    align-items: center;
}

/* Toggle Switch */
.checkbox-label input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.checkbox-label .toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background: var(--divider);
    border-radius: 20px;
    transition: var(--transition);
    cursor: pointer;
}
.checkbox-label .toggle-switch:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: var(--transition);
}
.checkbox-label input:checked + .toggle-switch {
    background: var(--accent);
}
.checkbox-label input:checked + .toggle-switch:after {
    left: calc(100% - 18px);
}

.environment-toggle {
    display: flex;
    flex-direction: row;
    font-size: var(--font-m);
    font-weight: 400;
    background: var(--bg-white);
    border: none;
    border-radius: var(--radius);
    padding: var(--gap-s);
    align-items: center;
    gap: var(--gap-xs);
    cursor: pointer;
    box-shadow: var(--box-shadow-m);
}

.environment-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.environment-panel.active .environment-toggle svg {
    transform: rotate(180deg);
}
/* Ensure the chevron stays white when button is hovered/active */
.environment-toggle:hover svg,
.environment-toggle:focus svg,
.environment-toggle:active svg {
    stroke: white;
    transition: stroke 0.3s ease;
}

.environment-toggle:hover {
    color: white;
    background: var(--accent);
    transition: var(--transition);
}
.environment-toggle:focus, .environment-toggle:active {
    color: white;
    background: var(--accent);
}

.environment-content {
    display: none;
    position: absolute;
    top: 100%;
    min-width: 200px;
    margin-top: var(--gap-xs);
    background: var(--bg-white);
    border-radius:  var(--radius);
    padding: var(--gap-m);
    box-shadow: var(--box-shadow-m);
}

.environment-panel.active .environment-content {
    display: block;
}


/* ===================== */
/* Form Elements         */
/* ===================== */

/* Inputs */
input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 10px 0;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress, 50%), var(--divider) var(--range-progress, 50%), var(--divider) 100%);
    border-radius: 2px;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px;
    background: var(--divider);
    border-radius: 2px;
}

input[type="range"]::-moz-range-progress {
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

input[type="range"]::-ms-track {
    width: 100%;
    height: 2px;
    background: var(--divider);
    border-radius: 2px;
}

input[type="range"]::-ms-fill-lower {
    background: var(--accent);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    margin-top: -7px;
}

input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

input[type="range"]::-ms-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    margin-top: 0;
}

.recaptchaBabge {
    font-size: var(--font-s);
    color: var(--body-secondary);
}

.recaptchaBabge a {
    color: var(--body-secondary);
    text-decoration: underline;
}

.recaptchaBabge a:hover {
    color: var(--body-primary);
}

/* Color Inputs */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    background: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: var(--radius-s);
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius-s);
}

input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: var(--radius-s);
}

input[type="color"]:focus {
    outline: 2px solid var(--divider);
    outline-offset: 2px;
}

.color-picker-container {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

/* Buttons */
.color-btn {
    color: hsla(0, 0%, 100%, 0.90);
    padding: var(--gap-xs) var(--gap-xxs);
    border: 1px solid var(--divider);
    border-radius: var(--radius-s);
    cursor: pointer;
    text-align: center;
    font-size: var(--font-s);
}

.color-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.color-buttons {
    display: grid;
    grid-template-columns: var(--colors-grid);
    gap: var(--gap-xxs);
}

.sliders-section {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.dimension-control {
    display: flex;
    flex-direction: column;
}

.control-row {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}
.control-height {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}
.control-height-row {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}
.control-height p {
    font-size: var(--font-s);
    font-style: italic;
    color: var(--body-secondary);
}

.height-warning.warning {
    color: var(--accent);
}

.input-group {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.cmLabel {
    font-size: var(--font-s);
    color: var(--body-secondary);
}

.option-group label {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

.dimension-input {
    width: 50px;
    padding: var(--gap-xxs);
    border: 1px solid var(--divider);
    border-radius: var(--radius-s);
    text-align: center;
}


/* ===================== */
/* Utilities             */
/* ===================== */
.disabled-control {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
    user-select: none;
    filter: grayscale(1);
}

.value-display-left {
    float: left;
    font-size: var(--font-s);
    color: var(--body-secondary);
}

.value-display-right {
    float: right;
    font-size: var(--font-s);
    color: var(--body-secondary);
}

.section-divider {
    height: 1px;
    background-color: var(--divider);
    margin: var(--gap-s) 0;
    width: 100%;
}

.info-icon {
    position: absolute;
    top: var(--gap-xxs);
    right: var(--gap-xxs);
}

.info-icon svg {
    stroke: var(--body-secondary);
    width: 20px;
    height: 20px;
    padding: var(--gap-xxs);
}

.info-icon svg:hover {
    stroke: var(--body-primary);
    border-radius: var(--radius-rd);
    background-color: var(--divider-darker);
    transition: background-color 0.3s ease;
}

.sub-option {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

/* Popup */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: var(--blur-m);
    -webkit-backdrop-filter: var(--blur-m);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, pointer-events 0.2s ease;
}
.popup {
    position: relative;
    box-sizing: border-box;
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: var(--gap-m);
    width: 700px;
    max-height: 80%;
    margin: var(--gap-m);
    box-shadow: var(--box-shadow-l);
    will-change: transform;
    overflow-y: auto;
    transform: translateY(-20px);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.popup-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.popup-overlay.active .popup {
    transform: translateY(0);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.popup-titles {
    display: flex;
    flex-direction: column;
}

.popup-titles p {
    color: var(--body-secondary);
    margin: var(--gap-xxs);
}

.popup h2 {
    font-size: var(--font-h2);
}

.popup-image {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: cover;
    border-radius: var(--radius-s);
    margin-top: var(--gap-s);
}

/* Color Picker Font Color */
.current-color-display {
    color: var(--body-primary);
}



/* Style by class */
/* ===================== */
/* Buttons */
/* ===================== */
/* Request a Quote Button */
.quote-btn {
    box-sizing: border-box;
    font-size: var(--font-m);
    justify-content: center;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    padding: var(--gap-s);
    cursor: pointer;
    box-shadow: var(--box-shadow-m);
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(var(--sidebar-width));
    min-width: calc(var(--sidebar-width));
    margin: var(--gap-xs);
    z-index: var(--z-index-xxl);
    transition: background-color 0.3s ease-in-out;
}
.quote-btn:hover {
    background: black;
}
/* Add media query to match sidebar responsiveness */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .quote-btn {
        position: fixed;
        bottom: var(--gap-xs);
        left: var(--gap-xs);
        right: var(--gap-xs);
        width: auto;
        margin: 0;
    }
}

.quote-btn svg {
    width: 16px;
    height: 16px;
}

.quote-btn:focus,
.quote-btn:active {
    color: white;
    background: var(--accent);
}

/* Submit Button */
.submit-btn {
    display: flex;
    cursor: pointer;
    justify-content: center;
    font-family: var(--font-family);
    font-size: var(--font-m);
    width: 100%;
    background: var(--accent);
    color: white;
    border: none;
    padding: var(--gap-s) var(--gap-l);
    border-radius: var(--radius-s);
    transition: var(--transition);
}
.submit-btn:hover {
    background: black;
}

/* Popup Container */
.quote-content {
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    padding: var(--gap-m);
    gap: var(--gap-m);
    border-radius: var(--radius);
    width: 500px;
    max-height: 80%;
    margin: var(--gap-m);
    box-shadow: var(--box-shadow-l);
    transform: translateY(-20px);
    will-change: transform;
    overflow-y: auto;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .quote-content {
        max-width: 100%;
    }
}
.popup-overlay.active .quote-content {
    transform: translateY(0);
}
.quote-content h2 {
    font-size: var(--font-h2);
}

.quote-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.quote-input {
    font-family: var(--font-family);
    font-size: var(--font-s);
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--gap-xs) var(--gap-s);
    border: 1px solid var(--divider);
    border-radius: var(--radius-s);
    resize: vertical;
}

.quote-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-xs);
    margin-top: var(--gap-m);
}

.success-header {
    display: flex;
    justify-content: flex-start;
}

.success-message {
    display: none;
    text-align: center;
}

.success-message.active {
    display: block;
}

.success-message p {
    text-align: start;
    color: var(--body-secondary);
    margin-top: 0;
    margin-bottom: var(--gap-m);
}

.success-message .download-btn {
    margin: var(--gap-m) auto;
}


/* Close Button X */
.popup-close {
    display: flex;
    position: absolute;
    top: var(--gap-xs);
    right: var(--gap-xs);
    background: none;
    border: none;
    padding: var(--gap-xxs);
    cursor: pointer;
    color: var(--body-secondary);
    border-radius: var(--radius-s);
    z-index: 1;
}

.popup-close:hover {
    background: var(--divider);
    color: var(--body-primary);
}



/* Dimension Labels for InterFace */
.dimension-label {
    backdrop-filter: var(--blur-m);
    -webkit-backdrop-filter: var(--blur-m);
    background-color: var(--blur-bg);
    padding: var(--gap-xs) var(--gap-m);
    border: 1px solid #ffffff1a;
    border-radius: var(--radius-rd);
    margin-left: -0.625rem;
    color: white;
    pointer-events: none;
    z-index: 0;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
}

.credits {
    position: fixed;
    bottom: var(--gap-xs);
    right: var(--gap-xs);
    font-size: var(--font-s);
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    z-index: var(--z-index-xxl);
    transition: var(--transition);
}

.credits:hover {
    color: white;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .credits {
        display: none;
    }
}

.additional-btn {
    display: flex;
    flex-direction: row;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: var(--gap-xs);
    right: var(--gap-xs);
    gap: var(--gap-xs);
}

.language-toggle {
    display: flex;
    flex-direction: row;
    font-size: var(--font-m);
    color: white;
    background: #00000038;
    border: none;
    border-radius: var(--radius);
    padding: var(--gap-s);
    cursor: pointer;
    backdrop-filter: var(--blur-m);
    -webkit-backdrop-filter: var(--blur-m);
    -webkit-box-shadow:inset 0px 0px 0px 1px hsla(0, 0%, 100%, 0.1);
    -moz-box-shadow:inset 0px 0px 0px 1px hsla(0, 0%, 100%, 0.1);
    box-shadow:inset 0px 0px 0px 1px hsla(0, 0%, 100%, 0.1);
    
}

.language-toggle svg {
    width: 16px;
    height: 16px;
}

.language-panel.active .language-toggle svg {
    transform: rotate(180deg);
}

.language-toggle:hover {
    color: white;
    background: var(--accent);
    transition: var(--transition);
}

.language-toggle:focus, .language-toggle:active {
    color: white;
    background: var(--accent);
}

.language-content {
    display: none;
    position: absolute;
    margin-top: var(--gap-xs);
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: var(--gap-xs);
    box-shadow: var(--box-shadow-m);
    width: 100px;
}

.language-panel.active .language-content {
    display: block;
}

.language-options {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.language-btn {
    display: flex;
    align-items: center;
    padding: var(--gap-xs) var(--gap-s);
    background: none;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    text-align: left;
    font-size: var(--font-m);
}

.language-btn:hover {
    background-color: var(--divider);
}

.language-btn.active {
    background-color: var(--accent);
    color: white;
}

.lang-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.language-btn[data-lang="en"] .lang-icon {
    background-image: url('./img/gb-flag.webp');
}

.language-btn[data-lang="de"] .lang-icon {
    background-image: url('./img/de-flag.webp');
}

.language-btn[data-lang="gr"] .lang-icon {
    background-image: url('./img/gr-flag.webp');
}

/* Overlay controls shown during background editing view */
#bgOverlayControls {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: var(--sidebar-width);
    top: var(--gap-xs);
    left: var(--gap-xs);
    gap: var(--gap-xs);
    z-index: var(--z-index-xxl);
}

.bg-btn {
    font-size: var(--font-m);
    font-weight: 400;
    background: var(--bg-white);
    border: none;
    border-radius: var(--radius);
    padding: var(--gap-s);
    cursor: pointer;
    box-shadow: var(--box-shadow-m);
}

/* New: Edit View button styling */
.edit-view-btn {
    border: 2px solid var(--accent); 
    align-items: center;
    position: relative;
}

.edit-view-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 10px solid var(--accent);
    border-radius: inherit;
    animation: border-pulse 2s infinite;
    z-index: -1;
}

@keyframes border-pulse {
    to {
        transform: scale(1.2);
        opacity: 0;
    }
}

.bg-btn.primary {
    background: var(--accent);
    color: white;
}

/* Transform Panel for Background Upload */
.transform-panel {
    flex-direction: column;
    gap: var(--gap-xs);
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: var(--blur-m);
    -webkit-backdrop-filter: var(--blur-m);
    padding: var(--gap-m);
    border-radius: var(--radius);
    color: white;
    z-index: var(--z-index-xxl);
}

/* Slider container styling */
.transform-panel > div {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.transform-panel label {
    font-size: 12px;
    margin: 0;
}

.transform-panel .slider-row {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.transform-panel input[type="range"] {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.transform-panel span {
    font-size: 12px;
    min-width: 30px;
    text-align: right;
    flex-shrink: 0;
}

.transform-button-container {
    display: flex;
    gap: var(--gap-xs);
    justify-content: center;
    position: relative;
}

.bg-btn, 
.bg-btn.primary {
    width: 100%;
}
.bg-btn:hover,
.bg-btn.primary:hover,
.bg-btn:focus,
.bg-btn.primary:focus,
.bg-btn:active,
.bg-btn.primary:active {
    background: black;
    color: white;
    transition: var(--transition);
}

/* Minimal view: keep only canvas and the overlay controls visible */
body.bg-minimal-view > :not(canvas):not(#bgOverlayControls) {
    display: none !important;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    #bgOverlayControls {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        top: auto;
        bottom: var(--gap-m);
        left: var(--gap-m);
        right: var(--gap-m);
        width: auto;
        box-sizing: border-box;
    }
    
    .transform-panel {
        box-sizing: border-box;
    }
}

/* ===================== */
/* Upload Progress       */
/* ===================== */

#upload-progress {
    position: fixed;
    top: var(--gap-xs);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-white);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-m);
    padding: var(--gap-s);
    display: none;
}

#upload-progress .progress-bar {
    width: 200px;
    height: 4px;
    background: var(--divider);
    border-radius: var(--radius-rd);
    margin-bottom: 0;
    overflow: hidden;
}

#upload-progress .progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent);
    transition: width 0.2s ease-out;
}

/* Mobile background image containment */
@media screen and (max-width: 768px){
    canvas {
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    
    body.mobile-custom-bg canvas {
        background-color: var(--tab-bg);
        background-position: center calc(50% - 10rem) !important;
    }

    #upload-progress {
        top: 30%;
}
}