/* 
    A: urielscatrut
    Clique Support HTML  
*/

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh;
}


/* animation */
.fade-in {
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}
.fade-in.visible {
    opacity: 1;
}


/* font */
@font-face {
    font-family: 'Gilroy-Bold';
    src: url('./fonts/Gilroy-Bold.woff') format('woff2'),
        url('./fonts/Gilroy-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy-Heavy';
    src: url('./fonts/Gilroy-Heavy.woff2') format('woff2'),
        url('./fonts/Gilroy-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy-ExtraBold';
    src: url('./fonts/Gilroy-ExtraBold.woff2') format('woff2'),
        url('./fonts/Gilroy-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy-Medium';
    src: url('./fonts/Gilroy-Medium.woff2') format('woff2'),
        url('./fonts/Gilroy-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy-Light';
    src: url('./fonts/Gilroy-Light.woff2') format('woff2'),
        url('./fonts/Gilroy-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy-SemiBold';
    src: url('./fonts/Gilroy-SemiBold.woff2') format('woff2'),
        url('./fonts/Gilroy-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy-Thin';
    src: url('./fonts/Gilroy-Thin.woff2') format('woff2'),
        url('./fonts/Gilroy-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy-UltraLight';
    src: url('./fonts/Gilroy-UltraLight.woff2') format('woff2'),
        url('./fonts/Gilroy-UltraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy-Regular';
    src: url('./fonts/Gilroy-Regular.woff2') format('woff2'),
        url('./fonts/Gilroy-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bumbbled';
    src: url('./fonts/Bumbbled.woff2') format('woff2'),
        url('./fonts/Bumbbled.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: 'Gilroy-Regular';
    line-height: 1.6;
    margin: 0;
    color: black;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* main content wrapper */
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* logo + download */
.topBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 2px solid #f0f0f0;
}

.logo {
    height: 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.logo:hover {
    transform: scale(1.125);
}

/* top bar buttons (apple+google) */
.app-buttons {
    display: flex;
    border: 1px solid #FE3B16;
    border-radius: 50px;
    overflow: hidden;
}
.app-buttons button {
    background-color: #FE3B16;
    border: none;
    padding: 2px 10px;
    cursor: pointer;
    font-size: 16px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.app-buttons button:first-child {
    border-right: 1px solid rgb(255, 255, 255, 0.2);
}
.app-buttons img {
    height: 50px;
    transition: transform 0.3s ease;
}
.app-buttons img:hover {
    transform: scale(1.215);
}
.app-buttons button:hover {
    background-color: #e03e00;
}


/* buttons wraps */
.buttons {
    display: block;
}
.buttons2 {
    display: block;
}
@keyframes spin {
    to {
        transform: translateX(-25%);
    }
}


.main-form {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    height: auto;
}

.form-container {
    display: block;
    width: 30%;
    margin-top: 0%;
    padding: 1% 2%;
    text-align: left;
    border-radius: 10px;
    opacity: 0;
    transform: translateX(-100px); 
    animation: fadeSlideIn 1s ease-out forwards;
    will-change: transform, opacity;
}
@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* main logo */
.logo {
    height: 40px;
    width: auto;
}

/* requests */
.checkbox-form {
    display: grid;
    width: 100%;
    margin: 2% auto;
    background: white;
}
.support-text {
    margin: 0 auto 2%;
    text-align: center;
    line-height: normal;
}
.support-titles {
    margin: 0 auto 2%;
    font-family: 'Gilroy-ExtraBold';
    font-size: 2.5rem;
    text-align: center;
    color: #FE3D15;
}
.support-descriptions {
    margin: 0;
    font-family: 'Gilroy-Medium';
    color: #191919;
    font-size: 1rem;
}
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 50px;
    margin: 0 auto;
}
.checkbox-grid label {
    display: flex;
    align-items: center;
    font-family: 'Gilroy-Regular';
    cursor: pointer;
}
.checkbox-grid input {
    margin-right: 8px;
    transform: scale(1.2);
    cursor: pointer;
}
.checkbox-grid input[type="checkbox"] {
    margin-right: 0.5rem;
    transform: scale(1.125);
    cursor: pointer;
    appearance: none; 
    border: 1px solid #ccc;
    min-width: 16px;
    height: 16px;
    border-radius: 4px; 
    display: inline-block;
    position: relative;
}
.checkbox-grid input[type="checkbox"]:checked {
    background-color: #FE3D15; 
    border-color: #E63900;
}
.checkbox-grid input[type="checkbox"]:checked::after {
    content: '✔';
    color: white;
    font-size: 0.7rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* user form */
.form-title {
    font-family: 'Gilroy-ExtraBold';
    font-size: 1.5rem;
    margin: 0;
    text-align: center;
}
.form-description {
    font-family: 'Gilroy-Medium';
    color: #191919;
    margin: 1% 0 4%;
    font-size: 1rem;
    text-align: center;
}

/* user fields */
.form-field {
    width: 90%;
    padding: 2% 3%;
    margin-bottom: 2%;
    border: 1px solid #ccc;
    border-radius: 15px;
    font-size: 1rem;
}
.form-field::placeholder{
    font-family: 'Gilroy-Regular';
}
.form-field:focus {
    outline: 2px solid #FE3D15;
    outline-offset: 0;
}

/* send */
.submit-button {
    font-family: 'Gilroy-Medium';
    width: 95%;
    padding: 2.5%;
    font-size: 1rem; 
    color: white;
    background-color: #FE3D15;
    border: 1px solid #CC0B00;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    transition: transform 0.3s ease;
    margin: 1% 0 3%;
}
.submit-button:hover {
    background-color: #E63900;
    transform: scale(1.015);
}


/* agreements */
.form-notice {
    font-family: 'Gilroy-Medium';
    text-align: center;
    padding: 1% 0 0;
    color: #191919;
    font-size: 0.75rem;
    line-height: 1.5;
}
.notice-links {
    font-family: 'Gilroy-Medium';
    color: #191919;
    text-decoration: underline;
    cursor: pointer;
}
.notice-links:hover {
    font-family: 'Gilroy-Bold';
}

/* checkbox */
.form-notice label {
    display: flex;
    align-items: baseline;
    margin: 0 auto 1%;
    text-align: -webkit-auto;
}
.form-notice input[type="checkbox"] {
    margin-right: 0.5rem;
    transform: scale(1.125);
    cursor: pointer;
    appearance: none; 
    border: 1px solid #ccc;
    min-width: 16px;
    height: 16px;
    border-radius: 4px; 
    display: inline-block;
    position: relative;
    top: 4px;
}
.form-notice input[type="checkbox"]:checked {
    background-color: #FE3D15; 
    border-color: #E63900;
}
.form-notice input[type="checkbox"]:checked::after {
    content: '✔';
    color: white;
    font-size: 0.7rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* form errors */
.error-checkbox {
    color: red;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    display: none;
}
.error-checkbox.active {
    display: block;
}


/* footer */
.footer {
    display: block;
    background-color: #C9FFFC;  /* #EDFFBF */
    padding: 2% 8%;
    font-family: "Gilroy-ExtraBold";
}
.footer-top-wrap {
    margin-bottom: 2%;
}
.footer-top {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}
.footer-top-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0B413E;/* #495E1A */
    font-size: 14px;
}
.footer-top-content img{
    transition: transform 0.3s ease;
    width: 40px;
    height: 40px;
}
.footer-top-content img:hover {
    transform: scale(1.125);
}
.socials {
    display: flex;
    align-items: center;
    gap: 16px;
}
.socials a {
    text-decoration: none;
}
.socials img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}
.socials img:hover {
    transform: scale(1.05);
}

.socials-mob {
    display: none;
}
.socials-mob a {
    text-decoration: none;
}
.socials-mob img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}
.socials-mob img:hover {
    transform: scale(1.05);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-right p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0B413E; /* #495E1A; */
}
.footerSplit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin: 0;
    clear: both;
}
.footer-left p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 40px;
    color: #0B413E; /* #495E1A; */
    font-size: 16px;
}
.footer-left a {
    color: #0B413E; /* #495E1A; */
    text-decoration: none;
    font-weight: normal;
}
.footer-left a:hover {
    font-weight: bold;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-right-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0B413E; /* #495E1A; */
    font-size: 14px;
}
.footer-icon {
    width: 24px;
    height: 24px;
}
.footer-download-btn {
    font-family: "Gilroy-Regular";
    background-color: #FBFBFB;
    color: #292929;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.footer-download-btn:hover {
    background-color: #e5e5e5;
}

/* mobile view */
@media (max-width: 768px) {
    /* apple+google download buttons */
    .app-buttons button {
        padding: 0.5px 5px;
    }

    /* buttons wrap */
    .buttons2 {
        display: flex;
    }

    .support-text {
        margin: 0 auto 4%;
    }
    .support-titles {
        margin: 0 auto 5%;
        font-size: 2rem;
    }

    /* requests */
    .checkbox-form {
        display: grid;
        width: 100%;
        margin: 2% auto;
        background: white;
    }
    .checkbox-grid {
        display: block;
        width: auto;
        font-size: 0.8rem;
    }
    .checkbox-grid label {
        display: flex;
        align-items: center;
        margin: 4% auto;
    }

    /* form */
    .main-form {
        padding: 0;
        justify-content: center;
        align-items: center;
    }
    .form-container {
        width: 100%;
        padding: 5% 10% 10%;
    }
    
    .form-title {
        font-size: 1.3rem;
        margin: 0;
        line-height: normal;
    }
    .form-description {
        font-size: 0.85rem;
        margin: 3% 0 8%;
        line-height: normal;
    }
    
    .form-field {
        width: -webkit-fill-available;
        padding: 10px;
        margin-bottom: 3%;
        border: 1px solid #ccc;
        border-radius: 12px;
        font-size: 1rem;
    }
    .form-field::placeholder{
        font-family: 'Gilroy-Regular';
    }
    .form-field:focus {
        outline: 3.5px solid #FE3D15;
        outline-offset: 0;
    }
    
    .submit-button {
        width: 100%;
        padding: 4%;
        font-size: 1.2rem;
        margin-top: 3%;
    }

    /* footer */
    .footer {
        display: block;
        padding: 5%;
    }
    .footer-top-wrap {
        margin-bottom: 5%;
    }
    .footer-top {
        gap: 8%;
    }
    .footer-download-btn {
        font-family: "Gilroy-Regular";
        padding: 10px 20px;
    }
    .footerSplit {
        text-align: center;
        display: block;
        font-size: 14px;
    }
    .footer-left p {
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding-bottom: 5%;
    }
    .footer-right {
        display: inline-block;
    }

}