﻿.appearance-link-section {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.appearance-link-booking {
    display: flex;
    gap: 20px;
    background-color: #F4F4F4;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
}

    .appearance-link-booking span {
        display: inline-block;
        width: 550px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
    }

.appearance-parameters {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.appearance-display-form {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

    .appearance-display-form p {
        margin-top: -5px;
    }

.appearance-form-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .appearance-form-field label {
        white-space: nowrap;
        font-size: 18px;
    }

    .appearance-form-field.checkbox-field label {
        width: 110px;
        white-space: normal;
    }

.appearance-color-inputs {
    display: flex;
    gap: 5px;
}

.appearance-preview {
    margin-top: 40px;
    width: 100%;
}

    .appearance-preview div {
        display: flex;
        gap: 20px;
        margin-top: 10px;
        width: 100%;
    }

        .appearance-preview div div {
            background-color: #F4F4F4;
            padding: 10px;
        }

.info-icon {
    margin-top: -20px;
}

.modal-info-appearance {
    z-index: 20;
    margin-left: -90px;
}

.modal-info-appearance p {
    background-color: #F4F4F4;
    border-radius: 8px;
    padding: 10px;
    width: 220px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
    font-size: 15px;
}

@media (max-width: 1170px) {
    .appearance-link-section {
        flex-direction: column;
    }

    .appearance-link-booking span {
        width: 100%;
    }

    .appearance-display-form {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

        .appearance-display-form p {
            display: none;
        }

    .appearance-form-field label {
        white-space: normal;
    }

    .appearance-preview div {
        flex-direction: column;
    }
}