/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/** 
 * Premios
 */
.participation-form {
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media (min-width: 768px) {
        flex-direction: row;
    }

    aside {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-sizing: border-box;

        &:first-child {
            @media (min-width: 768px) {
                padding: 0 24px 0 0;
                border-right: 1px solid #E6E6E6;
            }
        }

        .wpcf7-response-output {
            margin: 0;
            text-align: center;
            padding: 15px;
            border-radius: 6px;
            background-color: #fff;
        }

        p {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin: 0;
            font-family: "Montserrat", Sans-serif;

            .wpcf7-text, .wpcf7-textarea {
                width: 100%;
                padding: 8px;
                border: 1px solid #E6E6E6;
                box-sizing: border-box;
                font-family: "Montserrat", Sans-serif;
            }

            label {
                font-weight: 400;
                font-size: 14px;
            }

            .wpcf7-form-control-wrap {
                display: block;

                .wpcf7-not-valid-tip {
                    display: block;
                    font-size: 13px;
                    margin: 3px 0 0 0;
                }
            }
        }

        .participation-form__files-container {
            display: flex;
            padding: 24px 0 0 0;
            border-top: 1px solid #E6E6E6;
            gap: 24px;
            box-sizing: border-box;
			flex-wrap: wrap;

            .participation-form__file-container {
                position: relative;
				width: 47%;

                &:first-child {
                    @media (min-width: 768px) {
                        padding: 0 24px 0 0;
                        border-right: 1px solid #E6E6E6;
                    }
                }

                label {
                    cursor: pointer;
                    background-color: #fff;
                    padding: 12px 30px;
                    border: 2px dashed #000;
                    border-radius: 15px;
                    font-weight: bold;
                    text-decoration: underline;
                    line-height: 1.5;
                    display: flex;
                    gap: 16px;
                    align-items: center;
                    transition: all 0.3s ease;

                    &:before {
                        content: url('data:image/svg+xml, <svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45.3333 45.8334H45.36M41.6 37.8334H48C50.485 37.8334 51.7275 37.8334 52.7076 38.2394C54.0145 38.7807 55.0527 39.819 55.594 41.1258C56 42.1059 56 43.3484 56 45.8334C56 48.3184 56 49.5609 55.594 50.5411C55.0527 51.8479 54.0145 52.8861 52.7076 53.4274C51.7275 53.8334 50.485 53.8334 48 53.8334H16C13.515 53.8334 12.2725 53.8334 11.2924 53.4274C9.98554 52.8861 8.94728 51.8479 8.40598 50.5411C8 49.5609 8 48.3184 8 45.8334C8 43.3484 8 42.1059 8.40598 41.1258C8.94728 39.819 9.98554 38.7807 11.2924 38.2394C12.2725 37.8334 13.515 37.8334 16 37.8334H22.4M32 40.5001V11.1667M32 11.1667L40 19.1667M32 11.1667L24 19.1667" stroke="black" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
                        width: 64px;
                        height: 64px;
                    }
                }

                &:hover {
                    label {
                        background-color: #F5F5F5;
                        text-decoration: none;
                    }
                }

                .wpcf7-form-control-wrap {
                    position: absolute;
                    inset: 0;
                    opacity: 0;

                    input {
                        position: absolute;
                        inset: 0;
                        cursor: pointer;
                    }

                }
            }
			
			.disclaimer {
				width: 100%;
    			margin: 10px 0 0 0;
    			font-size: 11px;
				
				p {
					margin: 0 0 5px 0;
					display: block;
					
					&:last-child {
						margin: 0;
					}
					
					a {
						display: inline;
					}
				}
				
				.acceptance {
					margin: 10px 0 20px 0;
					.wpcf7-list-item {
						margin: 0;
					}
				}
			}
        }

        .submit-buttons {
            padding: 16px 0 0 0;
            box-sizing: border-box;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            .wpcf7-submit {
                padding: 8px 20px;
                border: none;
                background-color: #A5DA7A;
                max-width: 386px;
                cursor: pointer;
                width: 100%;
                color: #222222;
                font-size: 14px;
                font-weight: 600;
                transition: all 0.3s ease;

                &:hover {
                    background-color: #222222;
                    color: #8CC051;
                }
            }
        }
    }
}

.pretty-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;

    &:before {
        content: url('data:image/svg+xml, <svg width="201" height="19" viewBox="0 0 201 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.16199 16.119C47.8463 2.79125 195.378 -5.55412 198.043 16.1777" stroke="#A5DA7A" stroke-width="5"/></svg>');
        position: absolute;
        width: 201px;
        height: 19px;
        bottom: 0;
        left: 0;

    }
}