<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
            rel="stylesheet"
        />
        <link rel="preconnect" href="https://fonts.gstatic.com" />

        <link
            href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
            rel="stylesheet"
        />
        <title>Interés en copra de producto</title>
        <style>
            .body {
                color: #374493;
                font-family: 'Poppins', sans-serif;
                background-color: #8cead8;
                box-sizing: border-box;
            }
            .mail {
                margin: 50px auto;
                width: 60%;
                padding: 30px;
                background-color: white;
                border-radius: 5px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
            }

            .header {
                display: flex;
                flex-direction: column;
                align-content: center;
            }
            .latienda-logo {
                max-width: 300px;
                margin: auto;
            }
            .title {
                font-size: 1.5rem;
                text-align: center;
                margin-top: 60px;
                padding-bottom: 5px;
                display: flex;
                flex-direction: column;
            }
            .main {
                display: flex;
                flex-direction: column;
                align-content: center;
                padding: 0 30px 30px 30px;
            }
            .product-data {
                display: flex;
                flex-direction: column;
                align-items: center;
                max-width: 400px;
                margin: auto;
                margin-bottom: 20px;
                font-weight: 400;
            }
            .text {
                text-align: justify;
                font-size: 1.2rem;
                padding: 3px;
                margin-top: 40px;
                max-width: 300px;
                hyphens: auto;
            }

            .coop-name {
                font-weight: 700;
            }

            .product-image {
                max-width: 250px;
                margin-bottom: 5px;
            }

            .product-link {
                margin-bottom: 5px;
            }
            .product-price {
                font-weight: 700;
            }
            .coop-info {
                max-width: fit-content;
                margin-bottom: 50px;
            }
            .coop-data {
                font-size: 1.2rem;
                margin-top: 20px;
                font-family: 'Noto Sans', sans-serif;
                align-self: left;
            }
            .coop-image {
                max-width: 120px;
                margin: auto;
                margin-bottom: 5px;
            }
            .name {
                font-size: 1.2rem;
                font-weight: 700;
                display: inline;
            }
            .value {
                margin: 0;
                display: inline;
                font-weight: 400;
            }
            @media all and (min-width:780px) {
                .mail {
                    width: 40%;
                }
                }
            @media all and (max-width: 780px) {
                .title {
                    font-size: 1.2rem;
                }
                .text {
                    font-size: 1rem;
                }
                h2 {
                    font-size: 1.2rem;
                }
                .value, .name {
                    font-size: 1rem;
                }
            }
        </style>
    </head>
    <body class="body">
        <div class="mail">
            <header class="header">
                <a href="https://latienda.coop/" target="_blank">
                    <img
                        src="https://latienda.coop/_nuxt/img/latienda-logo.3e53761.svg"
                        alt=""
                        class="latienda-logo"
                    />
                </a>
                <h1 class="title">
                    <span>Confirmación de</span>
                    <span>solicitud enviada</span>
                </h1>
            </header>
            <main class="main">
                <p class="text">
                Hola {{user.full_name}}.
                Hemos enviado un email a {{company.company_name}} sobre tu petición.
                </p>
            </main>
            <footer class="footer">
                <span>2021 La Tienda.Coop</span>
            </footer>
        </div>
    </body>
</html>
