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

:root {

    --color-white: #ffffff;

    --color-black: #222;

    --color-gray: #F4F4F4;

    --color-divider: #707070;

    --color-light-gray: #EBEBEB;

    --color-light-yellow: #FAF6F2;

    --color-medle-black: #101010;

    --color-medle-red: #e02727;

    --color-medle-gold: #B3874B;

    --color-medle-red-light: #EFAAB3;

    --color-medle-gold-light: #E2C7A3;

    --color-medle-gold-very-light: #F9F5F1;

    --color-medle-dark-gray: #373A36;

    --font-raleway: 'Raleway', sans-serif;
    --fixed-actions-height: 72px;
    --touch-target-min: 44px;

}


.notification {
    position: fixed;
    top: 20px;
    left: 20px;
    padding: 15px 20px;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    font-family: var(--font-raleway);
    font-weight: 500;
    font-size: 14px;
    max-width: 350px;
    word-wrap: break-word;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.notification.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.notification.info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.notification.warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.notification-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.notification-close:hover {
    opacity: 1;
}

.notification-icon {
    display: inline-block;
    margin-right: 8px;
    font-weight: bold;
}

body {

    font-family: var(--font-raleway);

    background: var(--color-white);

    color: var(--color-medle-black);

    margin: 0;

    padding: 0;

}

.container {
    max-width: 900px;

    margin: 20px auto;

    background: var(--color-white);

    border-radius: 3px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    padding: 30px;

    border: 1px solid var(--color-light-gray);

}

.header-image {

    text-align: center;

    margin-bottom: 20px;

}

.header-img {

    max-width: 100%;

    height: auto;

    border-radius: 3px;

}

.footer-image {

    text-align: center;

    margin-top: 30px;

    page-break-inside: avoid;

}

.footer-img {

    max-width: 100%;

    height: auto;

    border-radius: 3px;

}

h1 {

    text-align: center;

    margin-bottom: 20px;

    color: var(--color-medle-dark-gray);

    font-weight: 700;

    font-size: 1.8rem;

}

.info-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 16px;

    background: var(--color-gray);

    border-radius: 3px;

    padding: 16px;

    border: 1px solid var(--color-light-gray);

}

.info-column {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.info-item,
.info-item2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
}

.info-item label,
.info-item2 label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-divider);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.info-item2 label {
    font-size: 1rem;
}

.service-type-section {

    padding: 24px;

    border: none;

}

.service-type-section h2 {

    margin: 0 0 16px 0;

    font-size: 1.3rem;

    font-weight: 600;

    color: var(--color-medle-dark-gray);

}

.service-type-options {

    display: flex;
    gap: 20px;
    flex-wrap: wrap;

}

.service-type-option {

    display: flex;

    align-items: center;

    background: var(--color-white);

    padding: 12px 20px;

    border-radius: 3px;

    border: 2px solid var(--color-light-gray);

    cursor: pointer;

    transition: all 0.3s ease;

    font-weight: 500;

}

.service-type-option {
    min-width: 140px;
    flex: 1 1 auto;
}

.service-type-option:hover {

    border-color: var(--color-medle-red-light);

    background: var(--color-light-yellow);

}

.service-type-option input[type="radio"] {

    margin-right: 10px;

    transform: scale(1.2);

    accent-color: var(--color-medle-red);

}

.service-type-option input[type="radio"]:checked+span {

    color: var(--color-medle-red);

    font-weight: 600;

}

.editable-field {

    width: 100%;

    font-size: 0.85rem;

    color: var(--color-medle-black);

    padding: 6px 8px;

    background: var(--color-white);

    border-radius: 4px;

    border: 1px solid var(--color-light-gray);

    font-weight: 500;

    font-family: var(--font-raleway);

    transition: all 0.3s ease;

    box-sizing: border-box;

}

.editable-field:focus {
    outline: none;
    border-color: var(--color-medle-red);
    box-shadow: 0 0 0 3px rgba(223, 0, 31, 0.1);
}

.required {
    color: var(--color-medle-red);
    font-weight: bold;
    font-size: 1.8rem;
    position: relative;
    height: 14px;
    width: 14px;
    margin-left: 5px;
    top: -0.3em;
}

.warranty-error {

    color: var(--color-medle-red);

    font-size: 0.9rem;

    margin-top: 6px;

    padding: 8px 12px;

    background: var(--color-medle-red-light);

    border-radius: 4px;

    border-left: 4px solid var(--color-medle-red);

}

.form-group {
    width: 100%;
    margin-bottom: 16px;

}

label {
    display: flex;
    align-items: flex-start;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-medle-dark-gray);
    font-size: 0.9rem;
    text-align: left;
}

.form-hint {
    font-size: 0.8rem;
}

.form-row {
    display: flex;
    gap: 10px;
    width: 100%;

}

input,
textarea,
select {

    width: 100%;

    padding: 10px;

    border: 2px solid var(--color-light-gray);

    border-radius: 3px;

    font-size: 0.9rem;

    font-family: var(--font-raleway);

    background: var(--color-white);

    transition: all 0.3s ease;

    box-sizing: border-box;

}

input:focus,
textarea:focus,
select:focus {
    outline-offset: 2px;
}

input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color: var(--color-medle-red);

    box-shadow: 0 0 0 3px rgba(223, 0, 31, 0.1);

}

textarea {

    min-height: 60px;

    resize: vertical;

}

.checkbox-group {
    width: auto !important;
    display: flex;

    align-items: center;

    background: var(--color-gray);

    padding: 16px;

    border-radius: 3px;

    border: 2px solid var(--color-light-gray);

    transition: border-color 0.3s ease;

}

.form-row-inline {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.checkbox-group:hover {

    border-color: var(--color-medle-red-light);

}

.checkbox-group input[type="checkbox"] {

    width: auto;

    margin-right: 12px;

    transform: scale(1.3);

    accent-color: var(--color-medle-red);

}

.checkbox-group label {

    margin-left: 0;

    margin-bottom: 0;

    font-weight: 500;

    color: var(--color-medle-dark-gray);

}

.actions {

    text-align: right;

    margin-top: 30px;

}

.service-section {

    border: 3px solid var(--color-medle-dark-gray);

    border-radius: 12px;

    padding: 24px;

    margin: 32px 0;

    background: var(--color-gray);

}

.section-title {

    text-align: center;

    color: var(--color-medle-dark-gray);

    font-weight: 700;

    font-size: 1.5rem;

    margin: 0 0 24px 0;

    padding-bottom: 12px;

    border-bottom: 2px solid var(--color-medle-red);

}

.estimated-section,
.completed-section {

    margin-bottom: 24px;

}

.estimated-section:last-child,
.completed-section:last-child {

    margin-bottom: 0;

}

.subsection-title {

    color: var(--color-medle-red);

    font-weight: 600;

    font-size: 1.2rem;

    margin: 0 0 16px 0;

    text-transform: uppercase;

}

.estimated-grid,
.completed-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}

.radio-group {

    display: flex;

    gap: 16px;

    margin-top: 8px;

}

.radio-option {

    display: flex;

    align-items: center;

    background: var(--color-white);

    padding: 10px 16px;

    border-radius: 3px;

    border: 2px solid var(--color-light-gray);

    cursor: pointer;

    transition: all 0.3s ease;

    font-weight: 500;

    text-transform: uppercase;

    font-size: 0.9rem;

}

.radio-option:hover {

    border-color: var(--color-medle-red);

    background: var(--color-medle-gold-very-light);

}

.radio-option input[type="radio"] {

    margin-right: 8px;

    transform: scale(1.2);

    accent-color: var(--color-medle-red);

}

.radio-option input[type="radio"]:checked+span {

    color: var(--color-medle-red);

    font-weight: 600;

}

.signature-group {

    grid-column: span 2;

}

.signature-box {

    width: 100%;

    height: 80px;

    border: 2px dashed var(--color-medle-dark-gray);

    border-radius: 3px;

    background: var(--color-white);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-divider);

    font-style: italic;

    margin-top: 8px;

}

.signature-box:before {

    content: "Prostor za podpis stranke";

}

.readonly-value {

    display: block;

    padding: 4px 6px;

    background: var(--color-light-gray);

    border: 1px solid var(--color-light-gray);

    border-radius: 4px;

    font-size: 0.75rem;

    font-family: var(--font-raleway);

    color: var(--color-medle-dark-gray);

    font-weight: 500;

    box-sizing: border-box;

}

.completed-section-print {

    border: 3px solid var(--color-medle-dark-gray);

    border-radius: 12px;

    padding: 24px;

    margin: 32px 0;

    background: var(--color-white);

}

.section-title-print {

    text-align: center;

    color: var(--color-medle-dark-gray);

    font-weight: 700;

    font-size: 1.5rem;

    margin: 0 0 24px 0;

    padding-bottom: 12px;

    border-bottom: 2px solid var(--color-medle-red);

}

.completed-grid-print {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

}

.print-field {

    display: flex;

    flex-direction: column;

}

.print-field label {

    font-weight: 600;

    color: var(--color-medle-dark-gray);

    margin-bottom: 8px;

}

.print-line {

    height: 30px;

    border-bottom: 2px solid var(--color-medle-dark-gray);

    margin-top: 5px;

}

.print-options {

    display: flex;

    flex-direction: column;

}

.print-options label {

    font-weight: 600;

    color: var(--color-medle-dark-gray);

    margin-bottom: 12px;

}

.circle-options {

    display: flex;

    gap: 20px;

}

.circle-option {

    display: flex;

    align-items: center;

    gap: 8px;

}

.circle {

    width: 20px;

    height: 20px;

    border: 2px solid var(--color-medle-dark-gray);

    border-radius: 50%;

    background: var(--color-white);

}

.circle-option span {

    font-weight: 600;

    color: var(--color-medle-dark-gray);

    font-size: 0.9rem;

    text-transform: uppercase;

}

.word-options {

    display: flex;

    gap: 30px;

}

.word-option {

    font-weight: 700;

    color: var(--color-medle-dark-gray);

    font-size: 1.1rem;

    text-transform: uppercase;

    padding: 8px 16px;

    border: 2px solid transparent;

}

.signature-field-print {

    grid-column: span 2;

    display: flex;

    flex-direction: column;

}

.signature-field-print label {

    font-weight: 600;

    color: var(--color-medle-dark-gray);

    margin-bottom: 8px;

}

.signature-line-print {

    height: 60px;

    border: 2px solid var(--color-medle-dark-gray);

    border-radius: 3px;

    background: var(--color-white);

}

.duplicate-sections {

    display: none;

}

.duplicate-form {

    page-break-before: always;

    margin-bottom: 40px;

}

.duplicate-form:last-child {

    margin-bottom: 0;

}

.warranty-field-dup {

    display: none;

}

.duplicate-form input[readonly],
.duplicate-form textarea[readonly] {

    background: var(--color-white);

    border: 2px solid var(--color-medle-dark-gray);

}

.btn {

    background: var(--color-medle-red);

    color: var(--color-white);

    border: none;

    padding: 16px 36px;

    border-radius: 3px;

    font-size: 1.1rem;

    font-family: var(--font-raleway);

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(223, 0, 31, 0.3);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.btn:hover {

    background: var(--color-medle-dark-gray);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(55, 58, 54, 0.4);

}

.btn-submit {
    background: var(--color-gray);
    color: var(--color-divider);
    transition: all 0.3s ease;
}

.btn-submit.enabled {
    background: #28a745;
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.btn-submit.enabled:hover {

    background: #218838;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);

}

.btn-submit:disabled {

    cursor: not-allowed;

    opacity: 0.6;

}

.btn-pdf {

    background: var(--color-medle-red);

    color: var(--color-white);

}

input:disabled,
textarea:disabled,
input[type="checkbox"]:disabled {

    background: var(--color-light-gray);

    color: var(--color-divider);

    cursor: not-allowed;

    opacity: 0.6;

}

input:disabled:focus,
textarea:disabled:focus {

    border-color: var(--color-light-gray);

    box-shadow: none;

}

.scroll-indicator {

    position: fixed;

    bottom: 120px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--color-medle-dark-gray);

    color: var(--color-white);

    padding: 14px 24px;

    border-radius: 30px;

    font-size: 0.9rem;

    font-weight: 600;

    box-shadow: 0 4px 15px rgba(55, 58, 54, 0.3);

    display: flex;

    align-items: center;

    gap: 10px;

    animation: bounce 2s infinite;

    cursor: pointer;

    z-index: 999;

    transition: opacity 0.3s ease;

    border: 1px solid var(--color-light-gray);

    text-transform: uppercase;

}

.scroll-indicator.hidden {

    opacity: 0;

    pointer-events: none;

}

.scroll-arrow {

    font-size: 1.2rem;

    animation: bounceArrow 1.5s infinite;

}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {

        transform: translateX(-50%) translateY(0);

    }

    40% {

        transform: translateX(-50%) translateY(-10px);

    }

    60% {

        transform: translateX(-50%) translateY(-5px);

    }

}

@keyframes bounceArrow {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-5px);

    }

}

@media print {

    body,
    .container {

        background: white !important;

        color: black !important;

        box-shadow: none !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    .info-grid {

        background: var(--color-gray) !important;

        border-color: var(--color-light-gray) !important;

    }

    .info-item label {

        color: var(--color-divider) !important;

    }

    .readonly-value {

        background: var(--color-light-gray) !important;

        color: var(--color-medle-black) !important;

        border-color: var(--color-light-gray) !important;

    }

    .btn,
    .actions,
    .fixed-actions,
    .scroll-indicator,
    .scroll-to-top {

        display: none !important;

    }

    .container {

        margin-bottom: 0 !important;

        padding: 20mm !important;

    }

}

@media (max-width: 768px) {
    .info-grid {

        grid-template-columns: 1fr;

        gap: 10px;

        padding: 12px;

    }

    .info-column {

        gap: 8px;

    }

    .container {

        margin: 15px;

        padding: 20px;

        max-width: none;

    }

    .header-image {

        margin-bottom: 15px;

    }

    .footer-image {

        margin-top: 20px;

    }

    .scroll-indicator {

        bottom: 100px;

        font-size: 0.8rem;

        padding: 10px 16px;

    }

    .scroll-to-top {

        right: 20px;

        bottom: 100px;

        width: 45px;

        height: 45px;

    }

    .estimated-grid,
    .completed-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }

    .completed-grid-print {

        grid-template-columns: 1fr;

        gap: 16px;

    }

    .circle-options {

        justify-content: flex-start;

    }

    .word-options {

        justify-content: flex-start;

        gap: 20px;

    }

    .radio-group {

        flex-direction: column;

        gap: 8px;

    }

    .service-section {

        padding: 16px;

    }

    .section-title {

        font-size: 1.3rem;

    }

    .section-title-print {

        font-size: 1.3rem;

    }

    .subsection-title {

        font-size: 1.1rem;

    }

    .fixed-actions {

        flex-direction: column;

        gap: 12px;

    }

    .fixed-actions div {
        flex-direction: row !important;
        justify-content: center !important;
    }

    .fixed-actions > * {
        margin: 0 !important;
    }

    .fixed-actions select,
    .fixed-actions button,
    .fixed-actions .fixed-control.select,
    .fixed-actions .fixed-control.btn {
        flex: 1 1 0 !important;
        margin: 0 !important;
        height: 100% !important; 
        min-height: calc(var(--touch-target-min)) !important;
        box-sizing: border-box !important;
        padding: 0 12px !important;
    }

    .fixed-actions button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .btn {

        width: 100%;

        padding: 14px 24px;

        font-size: 1rem;

    }

    .btn-submit {

        margin-right: 0;

        margin-bottom: 8px;

    }

}

.error-page {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    background-color: var(--color-gray);

    color: var(--color-medle-dark-gray);

    text-align: center;

    font-family: var(--font-raleway);

    padding: 20px;

}

.error-oops {

    font-size: 1.5rem;

    font-weight: 600;

    color: var(--color-divider);

    margin-bottom: 1rem;

}

.error-graphic {

    margin: 2rem 0;

    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));

}

.error-title {

    font-size: 2.5rem;

    font-weight: 700;

    margin: 0.5rem 0;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--color-medle-black);

}

.error-description {

    font-size: 1.1rem;

    max-width: 450px;

    margin-bottom: 1rem;

    color: var(--color-medle-dark-gray);

    line-height: 1.6;

}

.error-info {

    font-size: 0.9rem;

    color: var(--color-divider);

    font-style: italic;

    max-width: 400px;

}

.error-image {

    max-width: 200px;

    height: auto;

}

.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: var(--color-white);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 19999;

    transition: opacity 0.5s ease;

}

.loading-spinner {

    text-align: center;

}

.spinner {

    width: 50px;

    height: 50px;

    border: 4px solid var(--color-light-gray);

    border-top: 4px solid var(--color-medle-red);

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin: 0 auto 20px auto;

}

@keyframes spin {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes bounceIn {

    0% {

        opacity: 0;

        transform: scale(0.3);

    }

    50% {

        transform: scale(1.1);

    }

    70% {

        transform: scale(0.9);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}

.animate-fadeIn {

    animation: fadeIn 1s ease-in;

}

.animate-bounceIn {

    animation: bounceIn 1.2s ease-out;

}

#main-content {

    opacity: 0;

    transition: opacity 0.5s ease;

}

.form-input {
    height: 24px;
    border: none;
    font-size: 12px;
}

.tooltip-custom {
    position: fixed;
    background: var(--color-light-gray);
    color: var(--color-medle-dark-gray);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--font-raleway);
    z-index: 10001;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    border: 1px solid #d4d4d4;
}

.form-flex-responsive-1 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.form-flex-responsive-1>.col {
    min-width: 0;
}

.form-flex-responsive-1 .col-2 {
    flex: 2;
}

.form-flex-responsive-1 .col-1 {
    flex: 1;
}

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .form-flex-responsive-1 {
        flex-direction: column;
        gap: 12px;
    }

    .form-flex-responsive-1>.col,
    .form-flex-responsive-1 .col-2,
    .form-flex-responsive-1 .col-1 {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .form-flex-responsive-1 input,
    .form-flex-responsive-1 textarea,
    .form-flex-responsive-1 .styled-select {
        width: 100%;
        box-sizing: border-box;
    }

    .info-column {
        gap: 8px;
    }

    .container {
        margin: 15px;
        padding: 20px;
        margin-bottom: 0;
        max-width: none;
    }

    .header-image {
        margin-bottom: 15px;
    }

    .footer-image {
        margin-top: 20px;
    }

    .scroll-indicator {
        bottom: 100px;
        font-size: 0.8rem;
        padding: 10px 16px;
    }

    .scroll-to-top {
        right: 20px;
        bottom: 100px;
        width: 45px;
        height: 45px;
    }

    .estimated-grid,
    .completed-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .completed-grid-print {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .circle-options {
        justify-content: flex-start;
    }

    .word-options {
        justify-content: flex-start;
        gap: 20px;
    }

    .radio-group {
        flex-direction: column;
        gap: 8px;
    }

    .service-section {
        padding: 16px;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .section-title-print {
        font-size: 1.3rem;
    }

    .subsection-title {
        font-size: 1.1rem;
    }

    .fixed-actions {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }

    .btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 1rem;
    }

    .btn-submit {
        margin-right: 0;
        margin-bottom: 8px;
    }

    .form-row {
        flex-direction: column;
        gap: 16px;
    }

    .service-type-options {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    :root {
        --fixed-actions-height: 96px;
    }

    .container {
        margin: 12px;
        padding: 16px;
    }

    input,
    textarea,
    select,
    .form-input {
        font-size: 1rem;
        padding: 12px;
    }

    .btn {
        font-size: 1.05rem;
        padding: 16px 20px;
        width: 100%;
    }

    .service-type-options {
        flex-direction: column;
        gap: 10px;
    }

    .service-type-option {
        flex: 1 1 100%;
        min-width: 0;
    }

    .fixed-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 14px;
        gap: 10px;
    }

    .header-img {
        max-height: 72px;
        object-fit: contain;
    }

    .form-row {
        flex-direction: column;
        gap: 12px;
    }
}

/* Mobile / Responsive improvements for fixed actions
   - make .fixed-actions stick to bottom on small screens
   - ensure content has bottom padding so actions don't overlap
   - provide nice background, shadow and tappable buttons
*/

:root {
    --fixed-actions-bg: var(--color-white);
}

/* Ensure body has safe bottom padding when fixed actions are visible */
@media (max-width: 1024px) {
    body {
        padding-bottom: calc(var(--fixed-actions-height) + 20px);
    }
}

/* For tablets and below, pin actions to bottom and make them full-width */
@media (max-width: 768px) {
    .fixed-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20000;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        height: var(--fixed-actions-height);
        background: var(--fixed-actions-bg);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
        border-top: 1px solid var(--color-light-gray);
    }

    .fixed-actions>* {
        flex: 1 1 auto;
    }

    .fixed-actions .btn,
    .fixed-actions .fixed-control.btn {
        width: 100%;
        margin: 0;
        min-height: calc(var(--touch-target-min));
        box-sizing: border-box;
    }

    /* Keep language select compact */
    .fixed-actions .fixed-control.select {
        max-width: 120px;
        margin-left: 8px;
    }
}

/* On very small phones give more vertical space and stack if needed */
@media (max-width: 480px) {

    /* Compact single-row fixed actions on small phones: language left, submit right */
    :root {
        --fixed-actions-height: 64px;
    }

    .fixed-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20000;
        display: flex !important;
        flex-direction: row;
        /* force row on phones */
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        height: var(--fixed-actions-height);
        background: var(--fixed-actions-bg);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
        border-top: 1px solid var(--color-light-gray);
    }

    /* Language selector on the left, compact */
    .fixed-actions .fixed-control.select {
        max-width: 110px;
        flex: 0 0 auto;
    }

    /* Submit button on the right, compact and tappable */
    .fixed-actions .fixed-control.btn,
    .fixed-actions .btn {
        max-width: 160px;
        flex: 0 0 auto;
        padding: 10px 14px;
        font-size: 0.95rem;
        height: calc(var(--fixed-actions-height) - 12px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Don't force children to stretch */
    .fixed-actions>* {
        flex: none;
    }

    /* Ensure page content has safe bottom space. Add to container to avoid page-wrapper 100vh issues */
    .container,
    #main-content {
        padding-bottom: calc(var(--fixed-actions-height) + 16px);
    }
}

/* Desktop: position actions to the right of the container if present */
@media (min-width: 769px) {
    .fixed-actions {
        position: absolute;
        /* existing JS will place it */
        background: transparent;
        box-shadow: none;
        border-top: none;
        height: auto;
        padding: 0;
    }

    .fixed-actions .fixed-control.select {
        max-width: 140px;
    }
}

#languageSelector {
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: #fff;
    padding: 0 8px;
    cursor: pointer;
}