@charset "utf-8";

/* ==========================================================================
   Σελιδα εγγραφης (Sign Up / optisleek-signup)
   Ιδια οπτικη γλωσσα με το modal "Request Demo": Syne + CeraGreek,
   #8C3CFA / #00E09D / #242833, pill inputs, inline μηνυματα λαθους.
   ========================================================================== */

.sgPage {
    position: relative;
    background: #F5F6FA;
}

/* Το gradient ειναι ξεχωριστο block και ΟΧΙ σταθερου υψους, ωστε να μεγαλωνει
   μαζι με το κειμενο - αλλιως η τελευταια γραμμη επεφτε εξω απο αυτο και το
   λευκο κειμενο "χανοταν" πανω στο ανοιχτο φοντο. */
.sgHero {
    padding: 190px 20px 110px;
    background: linear-gradient(135deg, #8C3CFA 0%, #7B34E0 55%, #00E09D 100%);
}

.sgBody {
    padding: 0 20px 90px;
}

/* η καρτα "καθεται" λιγο μεσα στο gradient */
.sgBody .sgIn {
    margin-top: -70px;
}

.sgIn {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

/* ==========================================================================
   Η ιδια φορμα σαν banner (homepage_banner kind = 32)
   Εδω δεν υπαρχει hero απο πανω, οποτε ακυρωνουμε το negative margin που
   ανεβαζει την καρτα μεσα στο gradient και βαζουμε κανονικο padding.
   ========================================================================== */

.signupFormBanner .sgBody {
    padding: 60px 20px;
}

.signupFormBanner .sgBody .sgIn {
    margin-top: 0;
}

/* Το 01-general-style.css εχει ".cardsBanner button { margin:0 auto; height:62px;
   font-size:20px }" - πιο ειδικος κανονας (0,1,1) απο το .sgSubmit (0,1,0), οποτε
   μεσα σε banner ΚΕΝΤΡΑΡΕ το κουμπι. Εδω το επαναφερουμε ωστε η φορμα να δειχνει
   ακριβως ιδια με τη σελιδα /optisleek-signup/. */
.signupFormBanner .sgSubmit {
    margin: 0 0 0 auto;
    height: 60px;
    font-size: 18px;
}

/* ο τιτλος/υποτιτλος χρησιμοποιουν το κοινο .title-area του site (με το effe),
   οποτε εδω ρυθμιζουμε μονο την αποσταση απο τη φορμα */
.signupFormBanner .title-area {
    padding-top: 60px;
}

.signupFormBanner .title-area + .sgBody {
    padding-top: 30px;
}

@media (max-width: 767px) {
    .signupFormBanner .sgBody {
        padding: 40px 14px;
    }

    .signupFormBanner .title-area {
        padding-top: 40px;
    }

    .signupFormBanner .title-area + .sgBody {
        padding-top: 20px;
    }
}

/* ----- head ----- */

.sgHead {
    text-align: center;
}

.sgBadge {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
}

.sgHead h1 {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 38px;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 14px;
    padding: 0;
    text-align: center;
}

.sgHead p {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto;
}

/* ----- καρτα φορμας ----- */

.sgCard {
    position: relative;
    background: #fff;
    border-radius: 26px;
    padding: 45px 48px 38px;
    box-shadow: 0 25px 60px rgba(36, 40, 51, 0.12);
}

/* ----- ενοτητες ----- */

.sgSection {
    margin-bottom: 8px;
}

.sgSection + .sgSection {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid #EEF0F5;
}

.sgSectionTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8C3CFA;
    margin-bottom: 18px;
}

.sgSectionTitle:after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 14px;
    background: #EEF0F5;
}

/* ----- grid ----- */

.sgGrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.sgField {
    width: 50%;
    padding: 0 12px;
    margin-bottom: 16px;
}

.sgField.sgFieldFull {
    width: 100%;
}

.sgField.isHidden {
    display: none;
}

.sgField label {
    display: block;
    font-family: 'Syne-Regular', sans-serif;
    font-size: 14px;
    letter-spacing: 0.15px;
    color: #8C3CFA;
    padding-left: 22px;
    margin-bottom: 8px;
}

.sgField label span.sgReq {
    color: #E2445C;
    margin-left: 2px;
}

.sgField input[type="text"],
.sgField input[type="email"],
.sgField input[type="tel"],
.sgField input[type="password"],
.sgField select {
    width: 100%;
    height: 56px;
    border: 2px solid transparent;
    outline: none;
    border-radius: 30px;
    /* ΠΑΝΤΑ background-color (οχι shorthand) - το shorthand σβηνει το βελακι του select */
    background-color: #F5F6FA;
    padding: 0 24px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 16px;
    color: #242833;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sgField select {
    cursor: pointer;
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C3CFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 12px 8px;
}

.sgField select.isPlaceholder {
    color: #9499A8;
}

.sgField input::placeholder {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 16px;
    color: #9499A8;
}

.sgField input:focus,
.sgField select:focus {
    background-color: #fff;
    border-color: #8C3CFA;
    box-shadow: 0 0 0 4px rgba(140, 60, 250, 0.1);
}

.sgField.isValid input,
.sgField.isValid select {
    border-color: rgba(0, 224, 157, 0.65);
    background-color: #fff;
}

.sgField.hasError input,
.sgField.hasError select {
    border-color: #E2445C;
    background-color: #FFF6F7;
}

.sgField.hasError input:focus,
.sgField.hasError select:focus {
    box-shadow: 0 0 0 4px rgba(226, 68, 92, 0.1);
}

.sgHint {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12px;
    color: #9499A8;
    padding-left: 24px;
    margin-top: 6px;
}

/* ==========================================================================
   Πεδια κωδικου: label + κουμπι δημιουργιας, ματακι, λιστα προϋποθεσεων
   ========================================================================== */

.sgLabelRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sgGenPass {
    border: none;
    outline: none;
    background: none;
    padding: 0 4px 0 0;
    margin-bottom: 8px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    color: #8C3CFA;
    cursor: pointer;
    text-decoration: underline;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.sgGenPass i {
    margin-right: 6px;
    text-decoration: none;
}

.sgGenPass:hover {
    color: #6f26d6;
}

/* το input και το ματακι */
.sgPassWrap {
    position: relative;
}

.sgPassWrap input {
    padding-right: 56px !important;
}

.sgPassEye {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    border-radius: 50%;
    background: none;
    color: #9499A8;
    font-size: 16px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sgPassEye:hover {
    background: rgba(140, 60, 250, 0.1);
    color: #8C3CFA;
}

/* λιστα προϋποθεσεων - τσεκαρεται ζωντανα */
.sgPassRules {
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    background: #F5F6FA;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.sgPassRules.isGenerated {
    background: rgba(0, 224, 157, 0.1);
}

.sgField.hasError .sgPassRules {
    background: #FFF6F7;
}

.sgPassRulesTitle {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    color: #6C7183;
    margin-bottom: 8px;
}

.sgPassRules ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sgPassRules li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: #9499A8;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.sgPassRules li i {
    width: 16px;
    margin-right: 8px;
    font-size: 12px;
    color: #C9CCD6;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.sgPassRules li.isOk {
    color: #242833;
}

.sgPassRules li.isOk i {
    color: #00C98D;
}

.sgError {
    display: none;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    line-height: 1.35;
    color: #E2445C;
    padding-left: 24px;
    margin-top: 6px;
}

.sgField.hasError .sgError {
    display: block;
    -webkit-animation: sgErrorIn 0.25s ease both;
    animation: sgErrorIn 0.25s ease both;
}

.sgField.hasError .sgHint {
    display: none;
}

.sgError i {
    margin-right: 6px;
}

@-webkit-keyframes sgErrorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sgErrorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- checkboxes ----- */

.sgCheck {
    padding: 0 12px;
    margin-top: 6px;
}

.sgCheck + .sgCheck {
    margin-top: 12px;
}

.sgCheck input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sgCheck label {
    position: relative;
    display: block;
    padding-left: 36px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6C7183;
    cursor: pointer;
    margin: 0;
}

.sgCheck label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border: 2px solid #D5D8E2;
    border-radius: 7px;
    background: #fff;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sgCheck label:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
    -webkit-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
}

.sgCheck input[type="checkbox"]:checked + label:before {
    background: #8C3CFA;
    border-color: #8C3CFA;
}

.sgCheck input[type="checkbox"]:checked + label:after {
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
}

.sgCheck input[type="checkbox"]:focus + label:before {
    box-shadow: 0 0 0 4px rgba(140, 60, 250, 0.12);
}

.sgCheck label a {
    color: #8C3CFA;
    text-decoration: underline;
}

.sgCheck.hasError label:before {
    border-color: #E2445C;
    background: #FFF6F7;
}

.sgCheck.hasError .sgError {
    display: block;
    padding-left: 36px;
}

/* ----- alert / footer ----- */

.sgAlert {
    display: none;
    align-items: center;
    margin: 22px 12px 0;
    padding: 13px 20px;
    border-radius: 16px;
    background: #FFF0F2;
    border: 1px solid rgba(226, 68, 92, 0.25);
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #C93549;
}

.sgAlert.isShown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.sgAlert i {
    margin-right: 10px;
    font-size: 16px;
}

.sgFoot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 26px;
    /* χωρις οριζοντιο padding, ωστε το κουμπι να ευθυγραμμιζεται ακριβως με τη
       δεξια ακρη των πεδιων (το .sgGrid εχει margin -12px / τα .sgField padding 12px) */
    padding: 0;
}

.sgRequired {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 13px;
    color: #9499A8;
}

.sgSubmit {
    position: relative;
    /* σπρωχνει το κουμπι τερμα δεξια, ανεξαρτητα απο το πλατος του κειμενου
       "Τα πεδια με * ειναι υποχρεωτικα" στα αριστερα */
    margin-left: auto;
    min-width: 260px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    border-radius: 30px;
    background: #8C3CFA;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 18px;
    letter-spacing: 0.2px;
    color: #fff;
    padding: 0 35px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sgSubmit:hover {
    box-shadow: 0 10px 25px rgba(140, 60, 250, 0.35);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.sgSubmit[disabled] {
    opacity: 0.75;
    cursor: default;
    -webkit-transform: none;
    transform: none;
    box-shadow: none;
}

.sgSubmit i {
    margin-left: 12px;
    margin-top: 2px;
    font-size: 15px;
}

.sgSpinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    border-radius: 50%;
    background: conic-gradient(from 90deg, rgba(255,255,255,0), #fff);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    -webkit-animation: sgSpin 0.85s linear infinite;
    animation: sgSpin 0.85s linear infinite;
}

@-webkit-keyframes sgSpin { to { -webkit-transform: rotate(360deg); } }
@keyframes sgSpin { to { transform: rotate(360deg); } }

/* honeypots */
.sgHp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.sgHpHidden {
    display: none !important;
}

/* ----- success ----- */

.sgSuccess {
    display: none;
    text-align: center;
    padding: 30px 0 20px;
}

.sgSuccess.isShown {
    display: block;
    -webkit-animation: sgSuccessIn 0.35s ease both;
    animation: sgSuccessIn 0.35s ease both;
}

@-webkit-keyframes sgSuccessIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sgSuccessIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sgSuccessIcon {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00E09D 0%, #00C98D 100%);
}

.sgSuccessIcon:after {
    content: "";
    position: absolute;
    left: 35px;
    top: 24px;
    width: 16px;
    height: 32px;
    border: solid #fff;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sgSuccess h2 {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 30px;
    color: #242833;
    margin: 0 0 14px;
    padding: 0;
    text-align: center;
}

.sgSuccess p {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #6C7183;
    max-width: 520px;
    margin: 0 auto 30px;
}

.sgSuccess .sgBackBtn {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 42px;
    border: 2px solid #8C3CFA;
    border-radius: 30px;
    background: none;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 17px;
    color: #8C3CFA;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sgSuccess .sgBackBtn:hover {
    background: #8C3CFA;
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .sgHero {
        padding: 150px 18px 95px;
    }

    .sgBody {
        padding: 0 18px 70px;
    }

    .sgCard {
        padding: 36px 28px 30px;
    }

    .sgHead h1 {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .sgHero {
        padding: 120px 14px 80px;
    }

    .sgBody {
        padding: 0 14px 55px;
    }

    .sgBody .sgIn {
        margin-top: -55px;
    }

    .sgCard {
        border-radius: 20px;
        padding: 28px 18px 24px;
    }

    .sgHead {
        margin-bottom: 24px;
    }

    .sgHead h1 {
        font-size: 24px;
    }

    .sgHead p {
        font-size: 14px;
    }

    .sgField,
    .sgField.sgFieldFull {
        width: 100%;
        margin-bottom: 14px;
    }

    .sgField input[type="text"],
    .sgField input[type="email"],
    .sgField input[type="tel"],
    .sgField input[type="password"],
    .sgField select {
        height: 52px;
        font-size: 15px;
    }

    .sgFoot {
        justify-content: center;
        text-align: center;
    }

    .sgRequired {
        width: 100%;
        order: 2;
        padding-top: 14px;
    }

    .sgSubmit {
        width: 100%;
        min-width: 0;
        order: 1;
    }

    .sgSuccess h2 {
        font-size: 24px;
    }
}