.k-layout {
    /* Spaces between layouts */
    margin-bottom: 15px !important;
}

/* Help text */
.help-text-red {
    color: red;
}

/* External URLs */
.k-url-field.k-field.k-field-name-externurl {
    border: 2px dashed #ccc;
    padding: 1rem;
    border-radius: 3px;
    position: relative;
}
.k-url-field.k-field.k-field-name-externurl::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none'%3E%3Cpath stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.056' d='M17.417 12.278v6.166a2.056 2.056 0 0 1-2.055 2.056H4.055A2.055 2.055 0 0 1 2 18.444V7.138c0-1.135.92-2.055 2.055-2.055h6.167M14.332 2h6.167v6.167M9.195 13.305 20.501 2'/%3E%3C/svg%3E");
    background-size: cover;
}

/* Image element info message */
.k-block-container-type-image {
    position: relative;
}
.k-block-container-type-image::before {
    position: absolute;
    top: 1em;
    left: 1em;
    content: "Caption (optional) please insert within the image (not as an extra element below the image)!";
    background-color: yellow;
    color: black;
    display: inline-block;
    padding: .3em .6em;
    border-radius: 5px;
    max-width: 300px;
}

/* Blog Intro (block element) */
.k-block-container-type-blog 
.k-block-type-blog 
.k-input-element 
.k-textarea-input 
.k-textarea-input-wrapper textarea {
    padding: 0;
}

/**
 *  ┏++++++++++++++++++++++++++++++┓
 *  ┃  Fancy Radio Buttons         ┃
 *  ┗++++++++++++++++++++++++++++++┛
 */
/* Common styles for all layout radio inputs */
.k-choice-input input[name="layout"][value="quote-layout-blue-deco-box"],
.k-choice-input input[name="layout"][value="quote-layout-lightblue-box"],
.k-choice-input input[name="layout"][value="quote-layout-regular"] {
    display: none; /* Hide the native radio inputs */
}

/* Common styles for all layout radio labels */
.k-choice-input input[name="layout"] + .k-choice-input-label {
    display: inline-block;
    width: 160px; /* Fixed width for button shape */
    height: 120px; /* Fixed height for button shape */
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: none;
    position: relative; /* Allow absolute positioning of pseudo-element */
}

/* Specific background images for each layout option */
.k-choice-input input[name="layout"][value="quote-layout-blue-deco-box"] + .k-choice-input-label {
    background-image: url("data:image/svg+xml,%3Csvg width='160' height='120' viewBox='0 0 160 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='160' height='120' fill='white'/%3E%3Crect x='11' y='33.9999' width='89.5732' height='24.5995' fill='%230000FF'/%3E%3Crect x='23' y='43' width='126' height='42' fill='%23E0F0FF'/%3E%3Crect x='61' y='50' width='82' height='5' fill='%23979797'/%3E%3Crect x='61' y='59' width='62.6517' height='5' fill='%23979797'/%3E%3Crect x='61' y='68' width='69.1011' height='5' fill='%23979797'/%3E%3Crect x='30' y='50' width='25' height='25' fill='%230000FF'/%3E%3C/svg%3E%0A");
}

.k-choice-input input[name="layout"][value="quote-layout-lightblue-box"] + .k-choice-input-label {
    background-image: url("data:image/svg+xml,%3Csvg width='160' height='120' viewBox='0 0 160 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='160' height='120' fill='white'/%3E%3Crect x='11' y='39' width='138' height='42' fill='%23E0F0FF'/%3E%3Crect x='18' y='46' width='25' height='25' fill='%230000FF'/%3E%3Crect x='49' y='46' width='76' height='5' fill='%23979797'/%3E%3Crect x='49' y='55' width='58.0674' height='5' fill='%23979797'/%3E%3Crect x='49' y='64' width='64.0449' height='5' fill='%23979797'/%3E%3C/svg%3E%0A");
}

.k-choice-input input[name="layout"][value="quote-layout-regular"] + .k-choice-input-label {
    background-image: url("data:image/svg+xml,%3Csvg width='160' height='120' viewBox='0 0 160 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='160' height='120' fill='white'/%3E%3Crect x='11' y='44' width='31' height='31' fill='%230000FF'/%3E%3Crect x='48' y='44' width='101' height='5' fill='%23979797'/%3E%3Crect x='48' y='53' width='77.1685' height='5' fill='%23979797'/%3E%3Crect x='48' y='62' width='85.1124' height='5' fill='%23979797'/%3E%3C/svg%3E%0A");
}

/* Common styles for checked state */
.k-choice-input input[name="layout"]:checked + .k-choice-input-label {
    transform: scale(1.05);
}

/* Common checker SVG for checked state */
.k-choice-input input[name="layout"]:checked + .k-choice-input-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_1' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' width='29.56' height='29.56' viewBox='0 0 29.56 29.56'%3E%3Ccircle cx='14.78' cy='14.78' r='14.78' style='fill: %233aee58;'/%3E%3Cpath d='m11.7,20.13s0,0,0,0c.44.44,1.16.44,1.61,0l7.96-7.96c.44-.44.44-1.16,0-1.61s-1.16-.44-1.61,0l-7.15,7.16-2.61-2.61c-.44-.44-1.16-.44-1.61,0s-.44,1.16,0,1.61l3.41,3.41Z' style='fill: %230a6012;'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.85;
}

/* Hide label text for all layout options */
.k-choice-input input[name="layout"] + .k-choice-input-label .k-choice-input-label-text {
    display: none; /* Hide the option text */
}

/* Radio portrait styles */
.radio-portrait {
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.radio-portrait:hover {
    background-color: rgba(0, 0, 0, 0.05);
}