/* /upload-form landing. All rules are scoped to #upload_form_landing so the shared
   configurator (includes/filebox_config.php + css/web_module.css, also used by the
   WordPress plugin admin) keeps its own look elsewhere. */

#upload_form_landing,
#upload_form_landing * {
    box-sizing: border-box;
}

#upload_form_landing {
    --center-width: 1200px;
    --ufl-radius: 25px;
    font-family: AlbertaSans, Roboto, sans-serif;
    color: var(--files-text);
    background: var(--files-bg);
    overflow: hidden;
    /* clip instead of hidden keeps position: sticky working for the configurator preview */
    overflow-x: clip;
    overflow-y: visible;
}

#upload_form_landing section {
    padding: 0 16px;
}

#upload_form_landing .ufl_container {
    max-width: var(--center-width);
    margin: 0 auto;
    padding: 60px 0;
}

#upload_form_landing h1,
#upload_form_landing h2 {
    font-family: AlbertaSans, Roboto, sans-serif;
    font-weight: 800;
    color: var(--files-text);
    text-wrap: balance;
}

#upload_form_landing h1 span,
#upload_form_landing h2 span {
    color: var(--files-btn-red);
}

#upload_form_landing h1 {
    font-size: 34px;
    line-height: 1.1;
    margin: 0 0 20px;
    text-align: center;
}

#upload_form_landing h2 {
    font-size: 30px;
    line-height: 1.15;
    margin: 0 auto 40px;
    max-width: 820px;
    text-align: center;
}

#upload_form_landing .ufl_lead,
#upload_form_landing .ufl_section_desc {
    font-size: 18px;
    line-height: 1.45;
    color: var(--files-gray-6);
    text-align: center;
    margin: 0 auto 20px;
    max-width: 720px;
}

#upload_form_landing .ufl_section_desc {
    margin-top: -20px;
    margin-bottom: 40px;
}

#upload_form_landing .ufl_tag,
#upload_form_landing .ufl_header_tag {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(130deg, var(--files-gradientColor1) 50%, var(--files-gradientColor2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#upload_form_landing .ufl_tag {
    padding: 8px 18px;
    border-radius: 20px;
    position: relative;
}

#upload_form_landing .ufl_tag:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(242, 48, 71, 0.06) 0%, rgba(249, 87, 30, 0.06) 100%);
}

#upload_form_landing .ufl_center {
    text-align: center;
}

/* Buttons (base look comes from .color_reset .button in global_colors.css) */

#upload_form_landing .ufl_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

#upload_form_landing .ufl_buttons .button {
    width: 100%;
}

#upload_form_landing .button.large {
    --button-padding: 40px;
    --button-min-height: 60px;
    --button-font-size: 18px;
}

#upload_form_landing .button:focus-visible,
#upload_form_landing summary:focus-visible {
    outline: 3px solid var(--files-btn-blue);
    outline-offset: 3px;
}

/* Hero */

#upload_form_landing #ufl_hero {
    background: var(--blob-1-blue);
    background-position: max(-600px, calc(((100vw - var(--center-width)) / 2) - 600px)) 0;
    background-size: 900px;
    background-repeat: no-repeat;
}

#upload_form_landing #ufl_hero .ufl_container {
    padding-top: 40px;
}

#upload_form_landing .ufl_hero_image img {
    display: block;
    width: 100%;
    height: auto;
}

#upload_form_landing .ufl_hero_image.ufl_mobile_only {
    margin: 10px 0 0;
}

#upload_form_landing .ufl_desktop_only {
    display: none;
}

#upload_form_landing .ufl_points {
    --gap: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px var(--gap);
    margin: 25px auto 0;
}

#upload_form_landing .ufl_point {
    display: flex;
    flex-direction: column;
    padding-right: var(--gap);
    border-right: 1px solid var(--files-gray-2);
}

#upload_form_landing .ufl_point:last-child {
    border-right: 0;
    padding-right: 0;
}

#upload_form_landing .ufl_point_title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
}

#upload_form_landing .ufl_point_desc {
    font-size: 13px;
    line-height: 20px;
    color: var(--files-btn-gray);
}

@media only screen and (max-width: 599px) {
    /* three equal columns so the points never wrap 2 + 1 on phones */
    #upload_form_landing .ufl_points {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        text-align: center;
    }

    #upload_form_landing .ufl_point {
        padding: 0 8px;
    }

    #upload_form_landing .ufl_point:last-child {
        padding-right: 8px;
    }

    #upload_form_landing .ufl_point_title {
        font-size: 16px;
    }

    #upload_form_landing .ufl_point_desc {
        font-size: 12px;
        line-height: 16px;
    }
}

#upload_form_landing #ufl_trust_bar {
    background: url(/images/pro_landing/shield.svg) no-repeat 30px 30px, var(--files-info-bg);
    border-radius: 23px;
    padding: 90px 30px 35px;
    margin: 50px auto 0;
    font-size: 17px;
    line-height: 24px;
    font-weight: 500;
}

#upload_form_landing #ufl_trust_bar .text {
    color: var(--files-dark);
}

#upload_form_landing #ufl_trust_bar .more {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700;
    color: var(--files-btn-blue) !important;
    text-decoration: none;
}

#upload_form_landing #ufl_trust_bar .more:after {
    content: ' →';
}

#upload_form_landing #ufl_trust_bar .more:hover {
    color: var(--files-btn-blue-h) !important;
    text-decoration: underline;
}

/* Cards (same look as /pro workflow cards) */

#upload_form_landing .ufl_cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

#upload_form_landing .ufl_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 25px;
    border: 1px solid var(--files-gray-2);
    border-radius: var(--ufl-radius);
    background: var(--files-bg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#upload_form_landing .ufl_card_icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: var(--files-outline-red);
    display: flex;
    align-items: center;
    justify-content: center;
}

#upload_form_landing .ufl_card_title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 800;
}

#upload_form_landing .ufl_card_desc {
    font-size: 16px;
    line-height: 22px;
    color: var(--files-gray-6);
}

#upload_form_landing .ufl_card_desc a {
    color: var(--files-btn-blue);
    cursor: pointer;
}

#upload_form_landing .ufl_card_counter {
    position: absolute;
    top: 25px;
    right: 25px;
    color: var(--files-btn-gray);
    font-size: 16px;
}

#upload_form_landing .ufl_step_image {
    height: 90px;
    width: auto;
    max-width: 140px;
    margin-bottom: 8px;
}

/* Configurator
   Markup lives in includes/filebox_config.php and is shared with the WordPress plugin,
   so everything here is visual only and scoped to this page. Some !important flags are
   needed to beat inline styles in that markup. */

#upload_form_landing #ufl_configurator {
    background: var(--files-bg-grey);
}

#upload_form_landing #configuration {
    max-width: var(--center-width);
    padding: 60px 0;
}

#upload_form_landing .ufl_config_card {
    background: #ffffff;
    border: 1px solid var(--files-gray-2);
    border-radius: var(--ufl-radius);
    box-shadow: 0 0 30px 0 var(--files-shadow);
    padding: 20px 12px;
}

#upload_form_landing #web_module_container {
    max-width: 100%;
}

#upload_form_landing #filebox_demo,
#upload_form_landing #filebox_demo label {
    color: var(--files-text);
}

#upload_form_landing #filebox_demo h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
    text-align: left;
    margin: 0;
    max-width: none;
    padding: 0 0 16px;
}

/* Section titles of the settings and preview columns (numbers removed in upload-form.php) */
#upload_form_landing #filebox_demo h2.ufl_step_heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 16px;
    font-size: 20px;
    line-height: 26px;
}

#upload_form_landing #filebox_demo h2.ufl_step_heading:before {
    content: '';
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--files-outline-red);
}

#upload_form_landing #filebox_demo h2.ufl_step_heading:after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    background: var(--files-btn-red);
    -webkit-mask: var(--ufl-step-icon) center / contain no-repeat;
    mask: var(--ufl-step-icon) center / contain no-repeat;
}

#upload_form_landing #filebox_demo h2.ufl_step_heading_settings {
    --ufl-step-icon: url(/images/UI_icons/brush.svg);
}

#upload_form_landing #filebox_demo h2.ufl_step_heading_preview {
    --ufl-step-icon: url(/images/UI_icons/eye.svg);
}

/* Preview */

#upload_form_landing #prieview_widget {
    max-width: 100%;
}

#upload_form_landing #prieview_widget iframe {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 0 30px 0 var(--files-shadow);
}

/* Example button for the popup embed type (see upload-form.php) */
#upload_form_landing #ufl_popup_demo {
    padding: 10px 0 20px;
}

#upload_form_landing #ufl_popup_demo[hidden] {
    display: none;
}

#upload_form_landing .ufl_popup_demo_button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 13px 40px;
    border: 0;
    border-radius: 6px;
    background-color: #1389fe;
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--files-shadow);
}

#upload_form_landing .ufl_popup_demo_button span {
    color: #ffffff;
}

#upload_form_landing .ufl_popup_demo_button:focus-visible {
    outline: 3px solid var(--files-btn-blue);
    outline-offset: 3px;
}

#upload_form_landing .ufl_popup_demo_note {
    margin: 12px 0 0;
    max-width: 360px;
    font-size: 13px;
    line-height: 19px;
    color: var(--files-gray-6);
}

/* Accordion */

#upload_form_landing #widget_tool_options_accordion h3.tab_title {
    background: var(--files-gray-1);
    color: var(--files-text);
    border: 1px solid var(--files-gray-2);
    border-radius: 12px;
    margin-top: 8px;
    padding: 13px 16px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#upload_form_landing #widget_tool_options_accordion h3.tab_title:hover {
    border-color: var(--files-text);
}

#upload_form_landing #widget_tool_options_accordion h3.tab_title * {
    color: inherit;
}

#upload_form_landing #widget_tool_options_accordion h3.tab_title.active {
    background: var(--files-outline-red);
    border-color: var(--files-btn-red);
    color: var(--files-red-7);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#upload_form_landing #widget_tool_options_accordion .accordion_header_icon .fa {
    color: var(--files-btn-red) !important;
    margin-right: 8px;
}

/* the help icon is a white PNG made for the old dark headers */
#upload_form_landing #widget_tool_options_accordion h3.tab_title .right img {
    width: 18px;
    height: 18px;
    filter: invert(1);
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

#upload_form_landing #widget_tool_options_accordion h3.tab_title:hover .right img {
    opacity: 0.6;
}

#upload_form_landing #widget_tool_options_accordion h3.tab_title + div {
    border: 1px solid var(--files-btn-red);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    padding: 22px;
    font-size: 14px;
    line-height: 20px;
    color: var(--files-gray-6);
}

/* Form controls inside the panels and the code area */

#upload_form_landing #filebox_demo input[type="text"],
#upload_form_landing #filebox_demo input[type="number"],
#upload_form_landing #filebox_demo input[type="email"],
#upload_form_landing #filebox_demo input[type="password"],
#upload_form_landing #filebox_demo input:not([type]),
#upload_form_landing #filebox_demo select,
#upload_form_landing #widget_tool_options_accordion textarea {
    border: 1px solid var(--files-btn-gray-border);
    border-radius: 8px;
    padding: 7px 10px;
    min-height: 36px;
    font-size: 14px;
    line-height: 20px;
    color: var(--files-text);
    background-color: #ffffff;
    vertical-align: middle;
    /* web_module.css forces content-box !important on everything in the options column */
    box-sizing: border-box !important;
    max-width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* jscolor writes the chosen colour into the inline background and text colour */
#upload_form_landing #filebox_demo input.color {
    background-color: inherit;
    font-family: Consolas, Monaco, monospace;
}

#upload_form_landing #filebox_demo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#upload_form_landing #filebox_demo select:focus,
#upload_form_landing #filebox_demo textarea:focus {
    outline: none;
    border-color: var(--files-btn-blue);
    box-shadow: 0 0 0 3px rgba(65, 127, 242, 0.2);
}

#upload_form_landing #filebox_demo input:disabled,
#upload_form_landing #filebox_demo select:disabled,
#upload_form_landing #filebox_demo textarea:disabled {
    background-color: var(--files-gray-1);
    color: var(--files-btn-gray);
    cursor: not-allowed;
}

#upload_form_landing #filebox_demo input[type="checkbox"],
#upload_form_landing #filebox_demo input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 6px 0 0;
    vertical-align: middle;
    accent-color: var(--files-btn-red);
    cursor: pointer;
}

#upload_form_landing #filebox_demo input[type="checkbox"]:focus,
#upload_form_landing #filebox_demo input[type="radio"]:focus {
    box-shadow: none;
    outline: none;
}

#upload_form_landing #filebox_demo input[type="checkbox"]:focus-visible,
#upload_form_landing #filebox_demo input[type="radio"]:focus-visible {
    outline: 2px solid var(--files-btn-blue);
    outline-offset: 2px;
}

/* labels flow next to their checkbox instead of dropping below it on narrow screens */
#upload_form_landing #filebox_demo input[type="checkbox"] + label,
#upload_form_landing #filebox_demo input[type="radio"] + label {
    display: inline;
}

#upload_form_landing #filebox_demo input[type="file"]::file-selector-button {
    border: 1px solid var(--files-btn-gray-border);
    border-radius: 8px;
    background: #ffffff;
    padding: 6px 12px;
    margin-right: 10px;
    font-weight: 600;
    cursor: pointer;
}

#upload_form_landing #custom_header {
    height: auto !important;
    min-height: 36px;
    resize: vertical;
}

#upload_form_landing #width_px,
#upload_form_landing #height_px,
#upload_form_landing #show_popup_onload_after_sec {
    width: 84px !important;
}

/* label column of the "label: control" rows */
#upload_form_landing #widget_tool_options_accordion div[style*="width: 150px"] {
    width: 170px !important;
    vertical-align: middle;
    color: var(--files-gray-6);
}

#upload_form_landing #widget_tool_options_accordion div[style*="margin-bottom: 10px"] {
    margin-bottom: 14px !important;
}

#upload_form_landing #widget_tool_options_accordion .fa-info-circle {
    color: var(--files-btn-gray);
}

/* Language panel: one card per language; the active one is the default/edited language */
#upload_form_landing .filebox_languages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
}

#upload_form_landing .filebox_languages:before,
#upload_form_landing .filebox_languages:after {
    display: none;
}

#upload_form_landing .filebox_languages_hint {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 19px;
    color: var(--files-gray-6);
}

#upload_form_landing .widget_tool_lang_icon {
    position: relative;
    float: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 14px 8px 10px;
    border: 1px solid var(--files-gray-2);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#upload_form_landing .widget_tool_lang_icon:hover {
    border-color: var(--files-text);
}

#upload_form_landing .widget_tool_lang_icon img {
    width: 40px;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: opacity 0.2s ease;
}

/* language not offered in the form */
#upload_form_landing .widget_tool_lang_icon:has(input:not(:checked)) img {
    opacity: 0.4;
}

#upload_form_landing .widget_tool_lang_name {
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    color: var(--files-text);
    text-align: center;
}

#upload_form_landing .widget_tool_lang_icon input[type="checkbox"] {
    margin: 2px 0 0 !important;
}

#upload_form_landing .widget_tool_lang_icon.active {
    border-color: var(--files-btn-red);
    background: var(--files-outline-red);
}

#upload_form_landing .widget_tool_lang_icon.active img {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

#upload_form_landing .widget_tool_lang_icon.active:after {
    content: attr(data-default-label);
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--files-btn-red);
    color: #ffffff;
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media only screen and (max-width: 599px) {
    #upload_form_landing .filebox_languages {
        grid-template-columns: repeat(2, 1fr);
    }
}

#upload_form_landing #filebox_demo .webmodule-button {
    border-radius: 8px;
    border-color: var(--files-btn-gray-border);
    color: var(--files-text);
    padding: 8px 14px;
    width: auto !important;
    transition: border-color 0.2s ease;
}

#upload_form_landing #filebox_demo .webmodule-button:hover {
    border-color: var(--files-text);
}

#upload_form_landing #filebox_demo .webmodule-button .fa {
    color: var(--files-btn-red);
}

/* Recipients panel: label input + user select on the first line,
   "required" checkbox and the manage users link on the second */
#upload_form_landing .user_list_control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
}

#upload_form_landing .user_list_control > .fa-edit {
    flex: none;
}

#upload_form_landing .user_list_control #user_list_label {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
}

#upload_form_landing .user_list_control #userlist_default_user {
    flex: 0 1 220px;
    width: auto;
    min-width: 120px;
    color: var(--files-text);
    font-size: 14px;
}

#upload_form_landing .user_list_control:before {
    content: '';
    order: 1;
    flex-basis: 100%;
    height: 0;
}

#upload_form_landing .user_list_control #required_user_list_checkbox,
#upload_form_landing .user_list_control #required_user_list_checkbox + label,
#upload_form_landing .user_list_control > a {
    order: 2;
}

#upload_form_landing .user_list_control #required_user_list_checkbox {
    margin: 0 0 0 27.5px;
}

#upload_form_landing .user_list_control > a {
    margin-left: auto;
    color: var(--files-btn-blue);
    text-decoration: none;
    white-space: nowrap;
}

#upload_form_landing .user_list_control > a:hover {
    text-decoration: underline;
}

#upload_form_landing .user_list_control > a .fa {
    color: inherit;
    margin-right: 4px;
}

#upload_form_landing #main_user_email_message .fa,
#upload_form_landing #user_list_copy_email + .fa,
#upload_form_landing .user_list_control .fa-edit,
#upload_form_landing #widget_tool_options_accordion .fa-files-o {
    color: var(--files-gray-6);
}

/* Design and size panel (base layout lives in web_module.css) */
#upload_form_landing .filebox_design_group {
    border-bottom-color: var(--files-gray-2);
}

#upload_form_landing .filebox_design_label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--files-text);
}

#upload_form_landing .filebox_design_toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--files-text);
}

#upload_form_landing .filebox_design #custom_header {
    width: 100% !important;
    min-height: 44px;
}

#upload_form_landing .filebox_design_columns input.color {
    width: 100% !important;
}

#upload_form_landing .filebox_design_size_field {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 8px;
}

#upload_form_landing .filebox_design_size_field > span:first-child {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--files-gray-5);
}

#upload_form_landing .filebox_design_unit {
    margin-left: 0;
    color: var(--files-gray-5);
}

#upload_form_landing .filebox_design_size .fa-times {
    padding-bottom: 11px;
    color: var(--files-btn-gray);
}

#upload_form_landing .filebox_config_embed_type_radio_btn_container.filebox_design_embed_type {
    padding: 14px 16px;
    border-color: var(--files-gray-2);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#upload_form_landing .filebox_design_embed_type:hover {
    border-color: var(--files-text);
}

#upload_form_landing .filebox_design_embed_type:has(input:checked) {
    border-color: var(--files-btn-red);
    background: var(--files-outline-red);
}

#upload_form_landing .filebox_design_embed_type input[type="radio"] {
    margin-top: 2px !important;
}

#upload_form_landing .filebox_design_embed_type_title {
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: var(--files-text);
}

#upload_form_landing .filebox_design_embed_type_title:first-letter {
    text-transform: uppercase;
}

#upload_form_landing .filebox_design_embed_type_desc {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--files-gray-6);
}

#upload_form_landing #filebox_config_embed_type_button_container #filebox_add_to_button_name {
    width: 100% !important;
    max-width: 320px;
}

/* E-mail personalisation panel (base layout lives in web_module.css) */
#upload_form_landing .filebox_email_intro {
    font-size: 15px;
    font-weight: 700;
    color: var(--files-text);
}

#upload_form_landing .filebox_email_group {
    border-bottom-color: var(--files-gray-2);
}

#upload_form_landing .filebox_email_label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--files-text);
}

#upload_form_landing .filebox_email_logo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px dashed var(--files-btn-gray-border);
    border-radius: 12px;
    background: var(--files-gray-1);
}

#upload_form_landing .filebox_email_logo_preview {
    margin: 0;
    padding: 6px;
    border-radius: 8px;
    background: #ffffff;
}

#upload_form_landing .filebox_email_logo form {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

#upload_form_landing .filebox_email_hint {
    color: var(--files-gray-5);
}

#upload_form_landing .filebox_email_colors input.color {
    width: 100% !important;
}

#upload_form_landing #custom_email_text {
    min-height: 90px;
    resize: vertical;
}

#upload_form_landing #email_title_settings .input-group {
    margin-bottom: 8px;
}

/* Additional options panel (base layout lives in web_module.css) */
#upload_form_landing .filebox_options_group {
    border-bottom-color: var(--files-gray-2);
}

#upload_form_landing .filebox_options_title {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--files-gray-5);
}

#upload_form_landing .filebox_options_row {
    color: var(--files-text);
}

#upload_form_landing #form_password {
    margin-left: 8px;
    width: 220px;
}

/* checkbox rows: checkbox centred against its label, which may contain an input */
#upload_form_landing .filebox_options_row:has(> input[type="checkbox"]:first-child),
#upload_form_landing #rename_uploaded_files-setting {
    display: flex;
    align-items: center;
    gap: 2px;
}

#upload_form_landing .filebox_options_row > input[type="checkbox"]:first-child,
#upload_form_landing #rename_uploaded_files-setting > input[type="checkbox"] {
    flex: none;
}

#upload_form_landing .filebox_options_row > input[type="checkbox"] + label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
}

#upload_form_landing #rename_uploaded_files-setting {
    margin-top: 14px;
    padding-bottom: 0 !important;
}

/* "Augšupielādēto failu mapes nosaukums:" heading and its radios */
#upload_form_landing .filebox_options_row > div:first-child:not([style]) {
    font-size: 14px;
    font-weight: 600;
    color: var(--files-text);
}

#upload_form_landing .filebox_options_row > div[style*="margin-top: 10px"] {
    margin-top: 8px !important;
}

#upload_form_landing .filebox_options_advanced {
    padding: 12px 14px;
    border: 1px solid var(--files-gray-2);
    border-radius: 12px;
    background: var(--files-gray-1);
}

#upload_form_landing .filebox_options_advanced summary {
    list-style: none;
    position: relative;
    margin: 0;
    padding-right: 24px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: var(--files-gray-6);
}

#upload_form_landing .filebox_options_advanced summary::-webkit-details-marker {
    display: none;
}

#upload_form_landing .filebox_options_advanced summary:after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    color: var(--files-btn-red);
}

#upload_form_landing .filebox_options_advanced[open] summary:after {
    content: '\2212';
}

#upload_form_landing .filebox_options_advanced div[style*="width: 300px"] {
    width: 260px !important;
    vertical-align: middle;
    color: var(--files-gray-6);
}

#upload_form_landing .filebox_options_note {
    background: var(--files-alert-bg);
    color: var(--files-alert-text);
}

/* Upgrade notices inside the panels */

#upload_form_landing #filebox_demo .alert_container {
    box-sizing: border-box !important;
    border-radius: 12px;
}

#upload_form_landing #widget_tool_options_accordion .alert_container {
    width: 100% !important;
    max-width: 100%;
}

/* The preview column is a shrink-to-fit float: width 0 + min-width 100% lets the notice
   fill it without its long text widening the column and pushing the options below. */
#upload_form_landing #prieview_widget .alert_container {
    width: 0 !important;
    min-width: 100%;
}

#upload_form_landing #filebox_demo .alert_container_button {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--files-btn-red);
    color: #ffffff !important;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#upload_form_landing #filebox_demo .alert_container_button:hover {
    background: var(--files-btn-red-h);
}

/* Custom fields table: the legacy rule gives every cell 50% width, which overflows
   the panel once a custom field adds the default value column */
#upload_form_landing #manual_fields_container {
    overflow-x: auto;
}

#upload_form_landing #manual_fields_container table td {
    width: auto;
    padding: 4px 8px 4px 0 !important;
    vertical-align: middle;
}

#upload_form_landing #manual_fields_container table td.column-0,
#upload_form_landing #manual_fields_container table td.column-3,
#upload_form_landing #manual_fields_container table td.column-6 {
    width: 1%;
    white-space: nowrap;
}

#upload_form_landing #manual_fields_container table td.column-6 {
    padding-right: 0 !important;
    font-size: 13px;
    color: var(--files-btn-gray);
}

#upload_form_landing #manual_fields_container table td input[type="text"],
#upload_form_landing #manual_fields_container table td select {
    width: 100% !important;
    min-width: 90px;
}

/* Custom fields: column titles, separated field rows and aligned select/radio options */
#upload_form_landing #manual_fields_container table {
    border-collapse: collapse;
}

#upload_form_landing #manual_fields_container tr.manual_fields_head th {
    padding: 14px 8px 6px 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;
    color: var(--files-gray-5);
    border-bottom: 1px solid var(--files-gray-2);
}

#upload_form_landing #manual_fields_container tr.manual_fields_head + tr > td {
    padding-top: 10px !important;
}

#upload_form_landing #manual_fields_container tr[id^="manual_field_row_"] > td {
    padding-top: 12px !important;
    border-top: 1px solid var(--files-gray-2);
}

#upload_form_landing #manual_fields_container table td.column-6 span,
#upload_form_landing #manual_fields_container table td.column-6 {
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
}

/* options of a select/radio field: every option row and its default radio get the same height */
#upload_form_landing #manual_fields_container tr[id^="manual_select_options-"] > td {
    padding-top: 2px !important;
    padding-bottom: 12px !important;
    vertical-align: top !important;
}

#upload_form_landing #manual_fields_container tr[id^="manual_select_options-"] td.column-2 > div,
#upload_form_landing #manual_fields_container tr[id^="manual_select_options-"] td.column-4 > div {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px !important;
    margin: 0 !important;
}

#upload_form_landing #manual_fields_container tr[id^="manual_select_options-"] td.column-2 > div .manual_select_option {
    flex: 1 1 120px;
    width: 120px !important;
    min-width: 0;
}

#upload_form_landing #manual_fields_container tr[id^="manual_select_options-"] td.column-2 > br {
    display: none;
}

#upload_form_landing #manual_fields_container .add_new_option {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 10px;
    border: 1px dashed var(--files-btn-gray-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--files-btn-red);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

#upload_form_landing #manual_fields_container .add_new_option:hover {
    border-color: var(--files-btn-red);
}

#upload_form_landing #manual_fields_container .manual_field_delete_icon {
    flex: none;
    font-size: 16px;
    color: var(--files-btn-gray);
    cursor: pointer;
    transition: color 0.2s ease;
}

#upload_form_landing #manual_fields_container .manual_field_delete_icon:hover {
    color: var(--files-btn-red);
}

/* Custom form texts table */

#upload_form_landing .custom_translation_container {
    margin: 5px 0;
    border: 1px solid var(--files-gray-2);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
}

#upload_form_landing .custom_translation_container tr,
#upload_form_landing .custom_translation_container th,
#upload_form_landing .custom_translation_container td {
    border-color: var(--files-gray-2) !important;
}

#upload_form_landing .custom_translation_container td {
    padding: 6px 10px;
}

#upload_form_landing .custom_translation_container .custom-translation-header {
    background: var(--files-gray-1);
    color: var(--files-text);
    font-weight: 700;
    padding: 10px;
}

#upload_form_landing .custom-translation-input {
    width: calc(100% - 26px);
}

/* Embed code */

#upload_form_landing .configurator_switcher_container {
    display: inline-flex;
    height: auto;
    gap: 4px;
    padding: 4px;
    margin: 20px 0 0;
    background: var(--files-gray-1);
    border-radius: 10px;
}

#upload_form_landing .configurator_switcher_container > div {
    border: 0 !important;
}

#upload_form_landing .configurator_switcher_container .widget_tool_options_version_name {
    height: auto !important;
    padding: 7px 14px;
    border-radius: 8px;
    background: transparent;
    color: var(--files-gray-6);
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#upload_form_landing .configurator_switcher_container .widget_tool_options_version_name.active {
    background: #ffffff;
    color: var(--files-text);
    box-shadow: 0 1px 4px var(--files-shadow);
}

#upload_form_landing #iframe_code_container {
    max-width: none;
    background: transparent;
    padding: 16px 0 0;
}

#upload_form_landing #iframe_code_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
}

#upload_form_landing #iframe_code_header:before,
#upload_form_landing #iframe_code_header:after {
    display: none;
}

#upload_form_landing #copy_code {
    float: none;
    flex: none;
    padding: 6px 14px;
    border: 1px solid var(--files-btn-gray-border);
    border-radius: 8px;
    color: var(--files-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

#upload_form_landing #copy_code:hover {
    border-color: var(--files-text);
}

#upload_form_landing #copy_code.copy_code_done {
    border-color: var(--files-green-6);
    background: var(--files-success-bg);
    color: var(--files-success-text) !important;
}

#upload_form_landing #copy_code.copy_code_failed {
    border-color: var(--files-alert-text);
    background: var(--files-alert-bg);
    color: var(--files-alert-text) !important;
}

#upload_form_landing #iframe_code_javascript,
#upload_form_landing #iframe_code_javascript_button,
#upload_form_landing #iframe_code_simple,
#upload_form_landing #iframe_code_wp,
#upload_form_landing #iframe_code_container textarea {
    padding: 14px 16px;
    border: 1px solid var(--files-gray-2);
    border-radius: 10px;
    background: var(--files-gray-1);
    color: var(--files-text);
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 20px;
}

#upload_form_landing #iframe_code_simple__header {
    font-size: 14px;
    color: var(--files-gray-6);
}

/* shown open by default; the header's slideToggle still collapses it */
#upload_form_landing #iframe_code_simple__container {
    display: block;
}

#upload_form_landing #iframe_code_simple__warning {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--files-alert-bg);
    color: var(--files-alert-text);
    font-style: normal;
    font-size: 13px;
    line-height: 19px;
}

#upload_form_landing #iframe_code_container > div[style*="background"],
#upload_form_landing .save_button_wrap {
    background: transparent !important;
}

#upload_form_landing .save_button_wrap {
    padding: 10px 0 0;
}

#upload_form_landing #widget_tool_options_container #save_config_button {
    height: auto;
    padding: 14px 28px;
    border-radius: 10px;
    background: var(--files-btn-red);
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

#upload_form_landing #widget_tool_options_container #save_config_button:hover {
    background: var(--files-btn-red-h);
}

#upload_form_landing #save_config_button,
#upload_form_landing #save_config_button * {
    color: #ffffff;
}

/* Upload limit and storage selectors: option cards instead of the old slider */

#upload_form_landing #filebox_config_saved_alert_containers {
    background: transparent;
    padding: 0;
}

#upload_form_landing #filebox_config_storage_options_container {
    margin-top: 30px;
    padding-bottom: 6px;
}

#upload_form_landing #filebox_config_storage {
    margin-top: 0;
}

#upload_form_landing .radio_options_selector_container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--files-gray-2);
    font-size: 14px;
}

#upload_form_landing .radio_options_label,
#upload_form_landing .radio_options_selector {
    width: auto;
    height: auto;
    padding: 0;
}

#upload_form_landing .radio_options_label_main_text {
    font-size: 15px;
    font-weight: 700;
}

#upload_form_landing .radio_options_label_small_text {
    font-size: 13px;
    line-height: 17px;
    margin-top: 2px;
    color: var(--files-gray-6);
}

#upload_form_landing .radio_options_delim,
#upload_form_landing .radio_options_connector,
#upload_form_landing .radio_option_container br {
    display: none;
}

#upload_form_landing .all_radio_options_container {
    top: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

#upload_form_landing .radio_option_container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    padding: 12px;
    border: 1px solid var(--files-gray-2);
    border-radius: 12px;
    background: #ffffff;
    text-align: left !important;
    opacity: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#upload_form_landing .radio_option_container:hover {
    border-color: var(--files-text);
}

#upload_form_landing .radio_option_container .radio_option_circle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0;
    border: 2px solid var(--files-btn-gray-border);
    border-radius: 50%;
    background: #ffffff;
}

#upload_form_landing .radio_option_container .radio_option_circle_inner {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

#upload_form_landing .radio_option_container.selected {
    border-color: var(--files-btn-red);
    background: var(--files-outline-red);
}

#upload_form_landing .radio_option_container.selected .radio_option_circle {
    border-color: var(--files-btn-red);
}

#upload_form_landing .radio_option_container.selected .radio_option_circle_inner {
    background: var(--files-btn-red);
}

#upload_form_landing .radio_option_info {
    margin: 0;
    font-size: 13px;
    line-height: 17px;
    font-weight: 600;
}

#upload_form_landing .radio_option_container.unsubscribed .radio_option_info {
    color: var(--files-gray-6);
}

@media only screen and (max-width: 1099px) {
    /* preview and settings are stacked: separate them clearly */
    #upload_form_landing #prieview_widget {
        margin-bottom: 32px;
        padding-bottom: 28px;
        border-bottom: 1px solid var(--files-gray-2);
    }
}

@media only screen and (max-width: 599px) {
    /* Custom form texts: one block per text, original above a full-width input */
    #upload_form_landing .custom_translation_container thead {
        display: none;
    }

    #upload_form_landing .custom_translation_container tbody,
    #upload_form_landing .custom_translation_container tr,
    #upload_form_landing .custom_translation_container td {
        display: block;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #upload_form_landing .custom_translation_container td {
        border-right: 0 !important;
    }

    #upload_form_landing .custom-translation-field {
        padding: 10px 12px;
        border-bottom: 1px solid var(--files-gray-2);
    }

    #upload_form_landing .custom-translation-field td,
    #upload_form_landing .custom_translation_container tr:not(:last-child) td:not(.custom-translation-header) {
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    #upload_form_landing .custom-translation-field td:first-child {
        margin-bottom: 6px;
        font-size: 13px;
        line-height: 18px;
        color: var(--files-gray-6);
        word-break: break-word;
    }

    #upload_form_landing .custom-translation-field td:last-child {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #upload_form_landing .custom-translation-input {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    /* stack the "label: control" rows and the plan option cards on phones */
    #upload_form_landing #widget_tool_options_accordion div[style*="width: 300px"],
    #upload_form_landing #widget_tool_options_accordion div[style*="width: 150px"] {
        display: block !important;
        width: auto !important;
        margin-bottom: 6px;
    }

    #upload_form_landing #widget_tool_options_accordion h3.tab_title + div {
        padding: 18px 14px;
    }

    #upload_form_landing .all_radio_options_container {
        grid-template-columns: 1fr;
    }
}

@media only screen and (min-width: 600px) {
    #upload_form_landing .radio_options_selector_container {
        grid-template-columns: 190px 1fr;
        gap: 20px;
        align-items: center;
    }
}

/* Features */

#upload_form_landing .ufl_labels {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
}

#upload_form_landing .ufl_label {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
}

#upload_form_landing .ufl_label.free {
    background: var(--files-gray-1);
    color: var(--files-gray-6);
}

#upload_form_landing .ufl_label.pro {
    background: var(--files-info-bg);
    color: var(--files-btn-blue);
}

#upload_form_landing .ufl_label.business {
    background: var(--files-success-bg);
    color: var(--files-success-text);
}

/* Pricing (component markup is shared, only the wrapper is styled here) */

#upload_form_landing #plan_cards_wrapper {
    padding-top: 0;
}

#upload_form_landing #plan_cards_wrapper .ufl_container {
    max-width: 1370px;
}

#upload_form_landing #plan_cards_wrapper h2 {
    padding-bottom: 0;
    font-family: AlbertaSans, Roboto, sans-serif;
}

/* Examples: form mock-ups by industry (markup in upload-form.php) */
#upload_form_landing .ufl_examples_grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 75%;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

#upload_form_landing .ufl_example_card {
    --ufl-ex-color: #2c3e57;
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--files-gray-2);
    border-radius: 16px;
    overflow: hidden;
    background: var(--files-bg);
    scroll-snap-align: start;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* the "website" around the form */
#upload_form_landing .ufl_example_scene {
    position: relative;
    height: 380px;
    padding: 14px 14px 0;
    overflow: hidden;
    background: #f4f5f7;
    font-family: Roboto, Arial, sans-serif;
}

#upload_form_landing .ufl_example_scene:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(rgba(244, 245, 247, 0), #f4f5f7);
}

#upload_form_landing .ufl_example_scene_dark {
    background: linear-gradient(160deg, #3b302a, #17120f);
}

#upload_form_landing .ufl_example_scene_dark:after {
    background: linear-gradient(rgba(23, 18, 15, 0), #17120f);
}

#upload_form_landing .ufl_example_scene_grey {
    background: #6b6b6b;
}

#upload_form_landing .ufl_example_scene_grey:after {
    background: linear-gradient(rgba(107, 107, 107, 0), #6b6b6b);
}

#upload_form_landing .ufl_example_site {
    margin-bottom: 12px;
    font-size: 11px;
    line-height: 15px;
    font-weight: 600;
    color: #4b5563;
}

#upload_form_landing .ufl_example_scene_dark .ufl_example_site {
    font-size: 14px;
    letter-spacing: 0.06em;
    color: #ffffff;
}

#upload_form_landing .ufl_example_scene_grey .ufl_example_site {
    color: rgba(255, 255, 255, 0.75);
}

#upload_form_landing .ufl_example_scene_banner .ufl_example_site {
    margin: -14px -14px 12px;
    padding: 14px;
    background: var(--ufl-ex-banner);
    font-size: 13px;
    color: #ffffff;
}

/* the form itself */
#upload_form_landing .ufl_example_form {
    position: relative;
    margin: 0 auto;
    max-width: 240px;
    padding-bottom: 8px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

#upload_form_landing .ufl_example_popup {
    max-width: 230px;
    padding-top: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#upload_form_landing .ufl_example_close {
    position: absolute;
    top: 2px;
    right: 7px;
    z-index: 1;
    font-size: 15px;
    line-height: 15px;
    color: #6b7280;
}

#upload_form_landing .ufl_example_form_header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 9px 10px;
    background: var(--ufl-ex-color);
    font-size: 11px;
    line-height: 14px;
    color: #ffffff;
}

#upload_form_landing .ufl_example_popup .ufl_example_form_header {
    margin: 0 8px 4px;
    border-radius: 4px;
}

#upload_form_landing .ufl_example_cloud {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff url(/images/UI_icons/cloud.svg) center / 12px no-repeat;
}

#upload_form_landing .ufl_example_fields {
    padding: 0 12px;
}

#upload_form_landing .ufl_example_field {
    position: relative;
    padding: 7px 0 5px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 10px;
    line-height: 13px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#upload_form_landing .ufl_example_textarea {
    padding-bottom: 16px;
}

#upload_form_landing .ufl_example_caret {
    position: absolute;
    right: 0;
    color: #9ca3af;
}

#upload_form_landing .ufl_example_date span {
    margin-left: 10px;
}

#upload_form_landing .ufl_example_check,
#upload_form_landing .ufl_example_group {
    padding: 6px 0 2px;
    font-size: 10px;
    line-height: 13px;
    color: #6b7280;
}

#upload_form_landing .ufl_example_check {
    display: flex;
    align-items: center;
    gap: 6px;
}

#upload_form_landing .ufl_example_box,
#upload_form_landing .ufl_example_dot {
    flex: none;
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1px solid #9ca3af;
    border-radius: 2px;
}

#upload_form_landing .ufl_example_dot {
    border-radius: 50%;
    margin-right: 4px;
}

#upload_form_landing .ufl_example_radio {
    display: flex;
    align-items: center;
    margin-top: 3px;
}

#upload_form_landing .ufl_example_hint {
    padding-top: 6px;
    font-size: 9px;
    line-height: 12px;
    color: #4b5563;
}

#upload_form_landing .ufl_example_button {
    width: fit-content;
    margin: 12px auto 0;
    padding: 6px 18px;
    border-radius: 4px;
    background: var(--ufl-ex-color);
    font-size: 10px;
    line-height: 13px;
    font-weight: 600;
    color: #ffffff;
}

#upload_form_landing .ufl_example_button_pill {
    border-radius: 14px;
}

#upload_form_landing .ufl_example_button_wide {
    width: auto;
    margin: 12px 12px 0;
    text-align: center;
    border-radius: 2px;
}

#upload_form_landing .ufl_example_drop {
    margin-top: 5px;
    font-size: 8px;
    line-height: 11px;
    text-align: center;
    color: var(--ufl-ex-color);
}

#upload_form_landing .ufl_example_brand {
    margin: 8px 12px 0;
    font-size: 8px;
    text-align: right;
    color: #9ca3af;
}

#upload_form_landing .ufl_example_card figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--files-gray-2);
}

#upload_form_landing .ufl_example_industry {
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    color: var(--files-text);
}

#upload_form_landing .ufl_example_usecase {
    font-size: 14px;
    line-height: 19px;
    color: var(--files-gray-6);
}

/* "Need help?" block under the configurator and after the FAQ */
#upload_form_landing .ufl_help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-top: 24px;
    padding: 22px 24px;
    border: 1px solid var(--files-gray-2);
    border-radius: var(--ufl-radius);
    background: var(--files-bg);
}

#upload_form_landing .ufl_help_icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: var(--files-outline-red);
}

#upload_form_landing .ufl_help_text {
    flex: 1 1 280px;
}

#upload_form_landing .ufl_help_title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
}

#upload_form_landing .ufl_help_desc {
    margin-top: 4px;
    font-size: 15px;
    line-height: 21px;
    color: var(--files-gray-6);
}

#upload_form_landing .ufl_help_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#upload_form_landing .ufl_help_buttons .button {
    font-family: inherit;
    background-color: transparent;
}

#upload_form_landing .ufl_help_buttons .button.gradient {
    background: linear-gradient(130deg, var(--files-gradientColor1) 50%, var(--files-gradientColor2));
}

#upload_form_landing .ufl_help_buttons .button[hidden] {
    display: none;
}

#upload_form_landing .ufl_faq_list + .ufl_help {
    max-width: 860px;
    margin: 30px auto 0;
}

@media only screen and (max-width: 599px) {
    #upload_form_landing .ufl_help_buttons,
    #upload_form_landing .ufl_help_buttons .button {
        width: 100%;
    }
}

/* FAQ */

#upload_form_landing .ufl_faq_list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#upload_form_landing .ufl_faq_item {
    border: 1px solid var(--files-gray-2);
    border-radius: 16px;
    background: var(--files-bg);
}

#upload_form_landing .ufl_faq_item summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 20px 56px 20px 22px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}

#upload_form_landing .ufl_faq_item summary::-webkit-details-marker {
    display: none;
}

#upload_form_landing .ufl_faq_item summary:after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 400;
    color: var(--files-btn-red);
}

#upload_form_landing .ufl_faq_item[open] summary:after {
    content: '−';
}

#upload_form_landing .ufl_faq_answer {
    padding: 0 22px 20px;
    font-size: 16px;
    line-height: 24px;
    color: var(--files-gray-6);
}

#upload_form_landing .ufl_faq_answer a {
    color: var(--files-btn-blue);
}

/* Final CTA */

#upload_form_landing .ufl_final_cta_box {
    border-radius: var(--ufl-radius);
    padding: 50px 20px;
    text-align: center;
    background: var(--blob-1-pink) no-repeat right -300px center / 800px, var(--files-bg-red);
}

#upload_form_landing .ufl_final_cta_box h2 {
    margin-bottom: 30px;
}

#upload_form_landing .ufl_final_cta_box .ufl_section_desc {
    margin-top: -15px;
    margin-bottom: 10px;
}

@media only screen and (min-width: 600px) {
    #upload_form_landing .ufl_cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    #upload_form_landing .ufl_examples_grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
    }

    #upload_form_landing .ufl_buttons .button {
        width: auto;
    }

    #upload_form_landing .ufl_config_card {
        padding: 30px;
    }

    @media (hover: hover) {
        #upload_form_landing .ufl_card:hover {
            border-color: var(--files-text);
            box-shadow: 0 0 30px 0 var(--files-shadow);
        }

        #upload_form_landing .ufl_example_card:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 30px 0 var(--files-shadow);
        }
    }
}

@media only screen and (min-width: 900px) {
    #upload_form_landing .ufl_container,
    #upload_form_landing #configuration {
        padding: 90px 0;
    }

    #upload_form_landing h1 {
        font-size: 52px;
        text-align: left;
    }

    #upload_form_landing h2 {
        font-size: 44px;
        margin-bottom: 50px;
    }

    #upload_form_landing .ufl_section_desc {
        margin-top: -30px;
        margin-bottom: 50px;
    }

    #upload_form_landing .ufl_hero_grid {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    #upload_form_landing .ufl_hero_content {
        flex: 5;
    }

    #upload_form_landing .ufl_hero_image.ufl_desktop_only {
        display: block;
        flex: 6;
    }

    #upload_form_landing .ufl_mobile_only {
        display: none;
    }

    #upload_form_landing .ufl_tag {
        margin-left: 0;
    }

    #upload_form_landing .ufl_lead {
        text-align: left;
        font-size: 20px;
        margin-left: 0;
    }

    #upload_form_landing .ufl_points,
    #upload_form_landing .ufl_hero_content .ufl_buttons {
        justify-content: flex-start;
    }

    #upload_form_landing #ufl_trust_bar {
        background-position: 40px center;
        padding: 35px 40px 35px 110px;
        margin-top: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }

    #upload_form_landing #ufl_trust_bar .more {
        margin-top: 0;
        white-space: nowrap;
    }

    #upload_form_landing .ufl_cards {
        grid-template-columns: repeat(3, 1fr);
    }

    #upload_form_landing .ufl_examples_grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    #upload_form_landing .ufl_final_cta_box {
        padding: 70px 40px;
    }
}

@media only screen and (min-width: 1100px) {
    /* Settings and preview side by side with flex instead of the legacy floats, so they wrap
       (preview below) instead of overlapping when the page is narrower than the viewport,
       e.g. while the AI assistant side panel is open */
    #upload_form_landing #filebox_demo {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 30px;
    }

    #upload_form_landing #filebox_demo:before,
    #upload_form_landing #filebox_demo:after {
        display: none;
    }

    #upload_form_landing #widget_tool_options_container {
        order: 1;
        float: none;
        flex: 1 1 480px;
        min-width: 0;
        max-width: 660px;
    }

    #upload_form_landing #prieview_widget {
        order: 2;
        float: none;
        flex: 0 0 auto;
    }

    /* keep the preview column usable when it holds only a button (popup embed type) */
    #upload_form_landing #prieview_widget {
        min-width: 360px;
    }

    /* keep the live preview visible while scrolling through the settings */
    #upload_form_landing #prieview_widget {
        position: sticky;
        top: 80px;
    }
}

@media only screen and (min-width: 1250px) {
    #upload_form_landing h1 {
        font-size: 60px;
    }

    #upload_form_landing h2 {
        font-size: 50px;
    }
}