@charset "utf-8";

/* ==========================================================================
   Optisleek account (ERP): /optisleek-signup/ , /optisleek-login/ , /optisleek-account/
   Χτιζει πανω στο 06-signup.css (sgHero / sgCard / sgField / sgSubmit / sgAlert).
   Palette: #8C3CFA (purple), #00E09D (green), #242833 (dark), #F5F6FA (ground)
   ========================================================================== */

.osaIn {
    max-width: 1140px;
}

/* header: το «Login» / «Λογαριασμος» σε μια γραμμη */
.logIn a {
    white-space: nowrap;
}

/* Γραμμη header (desktop): logo (250px) | μενου | Login-Λογαριασμος + Request Demo + GR/EN.
   Το «Λογαριασμος» ειναι πιο φαρδυ απο το «Login», οποτε το rest-icons δεν χωρα στα σταθερα
   293px: ή συμπιεζοταν ο κυκλος της γλωσσας σε ελλειψη, ή (με flex-shrink:0) το bootstrap .row
   τυλιγε ολο το rest-icons σε δευτερη γραμμη κατω απο το logo. Λυση: logo και rest-icons με το
   φυσικο τους πλατος χωρις συρρικνωση, το μενου παιρνει τον υπολοιπο χωρο (flex:1, min-width:0)
   αντι για το σταθερο calc(100% - 543px), και η γραμμη δεν τυλιγεται ποτε. */
#header_desktop .main-header > .row {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

#header_desktop .main-header > .row > a {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

#header_desktop section.menu_out {
    width: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
}

#header_desktop section.rest-icons {
    width: auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

section.rest-icons .logIn,
section.rest-icons .reqDemo {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

section.rest-icons .language_item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 37px;
    flex: 0 0 37px;
}

/* Στενα desktop (1400-1500px): το μενου των 7 στοιχειων ειναι οριακο, μικροτερα κενα, και αν
   παρ' ολα αυτα δεν χωρεσει, τα στοιχεια του μενου τυλιγονται (οχι το rest-icons). */
@media (max-width: 1500px) {
    #header_desktop nav.menu ul {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #header_desktop nav.menu ul li {
        margin-right: 22px;
    }
}

.osaPage .sgHero {
    padding-bottom: 120px;
}

/* ----- layout: φορμα αριστερα, πακετο δεξια ----- */

.osaLayout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.osaMain {
    flex: 1 1 auto;
    min-width: 0;
}

.osaSide {
    width: 360px;
    flex: 0 0 360px;
    position: -webkit-sticky;
    position: sticky;
    top: 110px;
}

.osaCard {
    padding: 38px 42px 34px;
}

.osaNarrow {
    max-width: 520px;
    margin: 0 auto;
}

/* ----- top line «Εχετε ηδη λογαριασμο;» ----- */

.osaTopLine {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #6C7183;
    margin-bottom: 22px;
}

.osaTopLine a,
.osaInlineLink {
    font-family: 'Syne-SemiBold', sans-serif;
    color: #8C3CFA;
    text-decoration: none;
    white-space: nowrap;
}

.osaTopLine a:hover,
.osaInlineLink:hover {
    text-decoration: underline;
    color: #6f26d6;
}

.osaInlineLink i {
    font-size: 12px;
    margin-left: 4px;
}

/* ----- stepper ----- */

.osaStepper {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.osaStepper li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #9499A8;
    white-space: nowrap;
}

.osaStepper li + li:before {
    content: "";
    width: 46px;
    height: 2px;
    margin: 0 12px;
    border-radius: 2px;
    background: #EEF0F5;
    -webkit-transition: background 0.25s ease;
    transition: background 0.25s ease;
}

.osaStepper li.isDone + li:before {
    background: #00E09D;
}

.osaStepNum {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #D5D8E2;
    font-size: 12px;
    color: #9499A8;
    background: #fff;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.osaStepper li.isActive {
    color: #242833;
}

.osaStepper li.isActive .osaStepNum {
    border-color: #8C3CFA;
    background: #8C3CFA;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(140, 60, 250, 0.12);
}

.osaStepper li.isDone {
    color: #242833;
    cursor: pointer;
}

.osaStepper li.isDone .osaStepNum {
    border-color: #00E09D;
    background: #00E09D;
    color: #fff;
    font-size: 0;
}

.osaStepper li.isDone .osaStepNum:after {
    content: "";
    width: 6px;
    height: 11px;
    margin-top: -3px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ----- steps ----- */

.osaStep {
    display: none;
}

.osaStep.isActive {
    display: block;
    -webkit-animation: osaStepIn 0.3s ease both;
    animation: osaStepIn 0.3s ease both;
}

@-webkit-keyframes osaStepIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes osaStepIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

.osaStepFoot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.osaStepFoot .sgSubmit {
    margin-left: auto;
}

.osaStepFoot .sgRequired {
    width: 100%;
    margin-bottom: 4px;
}

/* ----- κουμπια ----- */

.osaBtnGhost,
.osaBtnOutline {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 22px;
    border-radius: 30px;
    outline: none;
    background: none;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 15px;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.osaBtnGhost {
    border: none;
    color: #6C7183;
}

.osaBtnGhost:hover {
    background: #F0F1F6;
    color: #242833;
}

.osaBtnOutline {
    border: 2px solid #8C3CFA;
    color: #8C3CFA;
}

.osaBtnOutline:hover {
    background: #8C3CFA;
    color: #fff;
}

.osaBtnGhost i,
.osaBtnOutline i {
    margin-right: 8px;
    font-size: 14px;
}

.sgSubmit.osaBtnSm {
    min-width: 0;
    height: 50px;
    padding: 0 26px;
    font-size: 15px;
}

.sgSubmit.osaBtnSm i {
    font-size: 13px;
}

/* ----- κωδικος: τιτλος λιστας + «Δημιουργια ισχυρου κωδικου» στην ιδια γραμμη,
   κατω απο το πεδιο (οχι στην ετικετα, για να μη σπαει την ευθυγραμμιση) ----- */

.osaPassRulesHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.osaPassRulesHead .sgPassRulesTitle,
.osaPassRulesHead .sgGenPass {
    margin-bottom: 0;
}

.osaPassRulesHead .sgGenPass {
    padding: 0;
    white-space: nowrap;
}

/* ----- συνδεδεμενος πελατης (signup) ----- */

.osaLoggedBox {
    display: none;
}

.osaLoggedTitle {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 24px;
    color: #242833;
    margin: 0 0 8px;
}

.osaLoggedIntro {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 15px;
    color: #6C7183;
    margin: 0 0 22px;
}

.osaWho {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: #F5F6FA;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #6C7183;
}

.osaWho i.fal {
    color: #8C3CFA;
}

.osaWho strong {
    font-family: 'Syne-SemiBold', sans-serif;
    color: #242833;
}

.osaWho em {
    font-style: normal;
    color: #9499A8;
}

.osaWho .osaLogout {
    margin-left: auto;
    font-family: 'Syne-SemiBold', sans-serif;
    color: #8C3CFA;
    text-decoration: underline;
}

.osaOr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin: 6px 12px 16px;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9499A8;
}

.osaOr:before,
.osaOr:after {
    content: "";
    flex: 1;
    height: 1px;
    background: #EEF0F5;
}

.osaOr:before { margin-right: 14px; }
.osaOr:after  { margin-left: 14px; }

/* ----- καρτα πακετου (δεξια) ----- */

.osaPlan {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 26px 28px 24px;
    box-shadow: 0 25px 60px rgba(36, 40, 51, 0.12);
    -webkit-transition: box-shadow 0.25s ease;
    transition: box-shadow 0.25s ease;
}

.osaPlan:before {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(to right, #8C3CFA 0%, #00E09D 100%);
}

.osaPlanLoading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #6C7183;
}

.osaPlanLoading .sgSpinner {
    background: conic-gradient(from 90deg, rgba(140, 60, 250, 0), #8C3CFA);
}

.osaPlanHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.osaPlanLabel {
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8C3CFA;
    margin-bottom: 10px;
}

.osaPlanHead .osaPlanLabel {
    margin-bottom: 0;
}

.osaPlanChange {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    color: #8C3CFA;
    text-decoration: underline;
}

.osaPlanName {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 24px;
    line-height: 1.2;
    color: #242833;
}

.osaPlanPrice {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 34px;
    line-height: 1.1;
    color: #242833;
    margin-top: 10px;
}

.osaPlanPrice span {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #6C7183;
    margin-left: 8px;
}

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

.osaPlanIncl {
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9499A8;
    margin: 22px 0 8px;
}

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

.osaPlanLimits li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed #EEF0F5;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #6C7183;
}

.osaPlanLimits li:last-child {
    border-bottom: none;
}

.osaPlanLimits li strong {
    font-family: 'Syne-SemiBold', sans-serif;
    color: #242833;
}

.osaPlanPricingLink {
    display: inline-block;
    margin-top: 14px;
    font-size: 13.5px;
}

.osaEmpty {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #6C7183;
    padding: 6px 0;
}

.osaSide.isShake .osaPlan {
    -webkit-animation: osaShake 0.5s ease;
    animation: osaShake 0.5s ease;
    box-shadow: 0 0 0 4px rgba(226, 68, 92, 0.25), 0 25px 60px rgba(36, 40, 51, 0.12);
}

@-webkit-keyframes osaShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes osaShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* ==========================================================================
   Επιλογεας πακετων στην οψη του /pricing/ (.priceTable, 01-general-style.css):
   χρωματιστο header (τιτλος, υποτιτλος, τιμη/μηνα), λευκο σωμα με check-λιστα,
   κουμπι επιλογης. Το χρωμα ερχεται inline απο τον πινακα τιμων του site.
   ========================================================================== */

.osaPickList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

.osaPt {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 8px 8px 15px 1px rgba(0, 0, 0, 0.12);
    border: 3px solid transparent;
    cursor: pointer;
    -webkit-transition: box-shadow 0.2s ease, border-color 0.2s ease;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.osaPt:hover {
    box-shadow: 8px 8px 22px 1px rgba(0, 0, 0, 0.18);
}

.osaPt.isOn {
    border-color: #8C3CFA;
    box-shadow: 0 0 0 4px rgba(140, 60, 250, 0.15), 8px 8px 15px 1px rgba(0, 0, 0, 0.12);
}

.osaPt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.osaPtHeader {
    display: block;
    padding: 0;
}

.osaPtTop {
    display: block;
    padding: 24px 22px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.osaPtTitle {
    display: block;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 26px;
    line-height: 1.15;
}

.osaPtSub {
    display: block;
    font-family: 'Syne-Regular', sans-serif;
    font-size: 17px;
    margin-top: 2px;
    opacity: 0.9;
}

.osaPtPrice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 4px;
}

.osaPtAmount {
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 34px;
    line-height: 1;
}

.osaPtEuro {
    font-size: 24px;
    margin-right: 2px;
}

.osaPtPer {
    font-family: 'Syne-Regular', sans-serif;
    font-size: 15px;
}

/* «+24% ΦΠΑ» κατω απο την τιμη ανα μηνα, πανω απο το συνολο (οι τιμες των πακετων ειναι καθαρες) */
.osaPtVat {
    display: block;
    padding: 0 22px 6px;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.85;
}

.osaPtTotal {
    display: block;
    padding: 0 22px 18px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    opacity: 0.8;
}

/* ----- επιλογη διαρκειας στον επιλογεα πακετων (portal) ----- */

.osaDurTabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 22px;
    padding: 6px;
    border-radius: 40px;
    background: #F5F6FA;
    border: 1px solid #E6E8F0;
}

.osaDurTab {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    outline: none;
    background: transparent;
    color: #6C7183;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    -webkit-transition: background 0.25s ease, color 0.25s ease;
    transition: background 0.25s ease, color 0.25s ease;
}

.osaDurTab:hover {
    color: #242833;
}

.osaDurTab.isOn {
    background: #8C3CFA;
    color: #fff;
    box-shadow: 0 8px 20px rgba(140, 60, 250, 0.25);
}

.osaDurSave {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #00E09D;
    color: #0B3B2E;
}

/* ----- κουτι συνολου πληρωμης στο modal (καθαρη αξια + ΦΠΑ = πληρωτεο) ----- */

.osaTotals {
    margin-top: 22px;
    border-radius: 18px;
    background: #F5F6FA;
    border: 1px solid #E6E8F0;
    padding: 18px 22px;
    font-family: 'CeraGreek-Regular', sans-serif;
}

.osaTotals.isOn {
    background: #242833;
    border-color: #242833;
    color: #fff;
}

.osaTotalsEmpty {
    font-size: 14px;
    color: #6C7183;
}

.osaTotalsEmpty i {
    color: #8C3CFA;
    margin-right: 4px;
}

.osaTotalsHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.osaTotalsTitle {
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #00E09D;
}

.osaTotalsPkg {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.72);
}

.osaTotalsRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 3px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
}

.osaTotalsRow strong {
    font-family: 'Syne-SemiBold', sans-serif;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.osaTotalsRow.isTotal {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 15px;
    color: #fff;
}

.osaTotalsRow.isTotal strong {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 26px;
    letter-spacing: -0.3px;
    color: #00E09D;
}

.osaTotalsMonth {
    margin-top: 2px;
    text-align: right;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}

.osaTotalsNote {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.18);
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.osaTotalsNote i {
    color: #00E09D;
    margin-right: 4px;
}

.osaPtBody {
    display: block;
    padding: 24px 22px 22px;
    background: #fff;
}

.osaPtFeature {
    position: relative;
    display: block;
    padding-left: 22px;
    margin-bottom: 14px;
    font-family: 'Syne-Regular', sans-serif;
    font-size: 14.5px;
    line-height: 1.35;
    color: #242833;
}

.osaPtFeature:before {
    content: "\f00c";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #242833;
    color: #fff;
    font-size: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

.osaPtBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin: 22px 0 0;
    border-radius: 30px;
    font-family: 'Syne-Medium', sans-serif;
    font-size: 15px;
    letter-spacing: 0.16px;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.osaPtBtn i {
    display: none;
}

.osaPt.isOn .osaPtBtn i {
    display: inline-block;
}

.osaPtMore {
    display: block;
    position: relative;
    margin-top: 22px;
    padding-top: 22px;
}

.osaPtMore:before {
    content: "";
    position: absolute;
    top: 0;
    left: -22px;
    width: calc(100% + 44px);
    height: 2px;
    background: #f2f2f2;
}

.osaPtMoreTitle {
    display: inline-block;
    margin-bottom: 18px;
    padding-bottom: 2px;
    border-bottom: 1px solid #242833;
    font-family: 'Syne-Medium', sans-serif;
    font-size: 11px;
    letter-spacing: 1.44px;
    color: #242833;
}

.osaPtMore .osaPtFeature:last-child,
.osaPtBody > .osaPtFeature:last-of-type {
    margin-bottom: 0;
}

/* ----- (παλιος συμπαγης επιλογεας - δεν χρησιμοποιειται πλεον) ----- */

.osaPick {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 20px 20px 16px;
    border: 2px solid #EEF0F5;
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.osaPick:hover {
    border-color: #D5C7F5;
    box-shadow: 0 10px 24px rgba(36, 40, 51, 0.08);
}

.osaPick.isOn {
    border-color: #8C3CFA;
    background: linear-gradient(180deg, #F9F5FF 0%, #fff 100%);
    box-shadow: 0 0 0 4px rgba(140, 60, 250, 0.10);
}

.osaPick input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.osaPickCheck {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #D5D8E2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 11px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.osaPick.isOn .osaPickCheck {
    border-color: #8C3CFA;
    background: #8C3CFA;
    color: #fff;
}

.osaPickTitle {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 17px;
    color: #242833;
    padding-right: 30px;
}

.osaPickMeta {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    color: #9499A8;
    margin-top: 2px;
}

.osaPickPrice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 12px;
    font-family: 'Syne-Bold', sans-serif;
    font-size: 24px;
    line-height: 1.1;
    color: #242833;
}

.osaPickPrice small {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    color: #9499A8;
    white-space: nowrap;
}

.osaPickLimits {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #EEF0F5;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12.5px;
    color: #6C7183;
}

.osaPickLimits strong {
    font-family: 'Syne-SemiBold', sans-serif;
    color: #242833;
    margin-right: 5px;
    white-space: nowrap;
}

.osaPickLimits span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.osaPickLimits em {
    font-style: normal;
}

.osaPickLimits strong {
    margin-right: 0;
}

/* ----- πλατφορμα e-shop: πλακιδια με λογοτυπα ----- */

.osaPlatList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0 2px;
}

.osaPlatList .osaPlat {
    flex: 0 0 128px;
    width: 128px;
}

/* .sgField label.osaPlat: πιο ειδικο απο το γενικο .sgField label (display:block, padding-left) */
.sgField label.osaPlat,
.osaPlat {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 96px;
    margin: 0;
    padding: 10px 8px 12px;
    border: 2px solid #EEF0F5;
    border-radius: 16px;
    background: #F9FAFC;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 13px;
    color: #242833;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.sgField label.osaPlat:hover,
.osaPlat:hover {
    border-color: #D5C7F5;
    background: #fff;
}

.sgField label.osaPlat.isOn,
.osaPlat.isOn {
    border-color: #8C3CFA;
    background: #F9F5FF;
    box-shadow: 0 0 0 4px rgba(140, 60, 250, 0.10);
}

.osaPlat input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.osaPlatIcon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: 30px;
    line-height: 1;
    color: #6C7183;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.osaPlat.isOn .osaPlatIcon {
    color: #8C3CFA;
}

/* το λογοτυπο Appwise ειναι λευκο PNG: με filter γινεται σκουρο (και μωβ οταν επιλεγει),
   χωρις φοντο και χωρις αλλαγη στο αρχειο */
.osaPlatLogoWrap {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}

.osaPlatLogo {
    display: block;
    height: 22px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    /* λευκο -> σκουρο γκρι (#4a4f5e περιπου) */
    -webkit-filter: brightness(0) opacity(0.7);
    filter: brightness(0) opacity(0.7);
    -webkit-transition: filter 0.2s ease;
    transition: filter 0.2s ease;
}

.osaPlat.isOn .osaPlatLogo {
    /* λευκο -> μωβ #8C3CFA */
    -webkit-filter: brightness(0) invert(31%) sepia(90%) saturate(4500%) hue-rotate(258deg) brightness(97%);
    filter: brightness(0) invert(31%) sepia(90%) saturate(4500%) hue-rotate(258deg) brightness(97%);
}

.osaPlatName {
    display: block;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 13px;
    line-height: 1.2;
    color: #242833;
    white-space: nowrap;
}

.osaPlatCheck {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8C3CFA;
    color: #fff;
    font-size: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.osaPlat.isOn .osaPlatCheck {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[data-field="cms_type"].hasError .osaPlat {
    border-color: rgba(226, 68, 92, 0.5);
}

/* ετικετα, hint και λαθος κεντραρισμενα οπως και τα πλακιδια */
.sgField[data-field="cms_type"] > label,
[data-field="cms_type"] .sgHint,
[data-field="cms_type"] .sgError {
    padding-left: 0;
    text-align: center;
}

/* ----- καρτα «Προσβαση στο Optisleek» ----- */

.osaCred {
    position: relative;
    background: #242833;
    color: #fff;
    border-radius: 22px;
    padding: 24px 28px;
    margin-bottom: 22px;
    overflow: hidden;
}

.osaCred:before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(140, 60, 250, 0.55) 0%, rgba(140, 60, 250, 0) 70%);
}

.osaCred.isReady:before {
    background: radial-gradient(circle, rgba(0, 224, 157, 0.45) 0%, rgba(0, 224, 157, 0) 70%);
}

.osaCredHead {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.osaCredIcon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #00E09D;
    font-size: 20px;
}

.osaCredTitle {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 19px;
}

.osaCredText {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 4px;
    max-width: 640px;
}

.osaCredGrid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.osaCredItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.osaCredLabel {
    width: 100%;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.osaCredItem code {
    font-family: Menlo, Consolas, monospace;
    font-size: 15px;
    color: #fff;
    background: none;
    padding: 0;
    word-break: break-all;
}

.osaCopy {
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: none;
    color: #fff;
    border-radius: 20px;
    padding: 4px 12px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.osaCopy:hover {
    background: rgba(255, 255, 255, 0.12);
}

.osaCredNote {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 14px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 13px;
    color: #FFD37A;
    transition: opacity 0.25s ease;
}

.osaCredNote > span {
    flex: 1 1 320px;
}

.osaCredNote.isHiding {
    opacity: 0;
}

/* «Το ειδα»: κρυβει το σημειωμα και το θυμαται (localStorage) */
.osaCredNoteOk {
    margin-left: auto;
    border: 1px solid rgba(255, 211, 122, 0.55);
    background: none;
    color: #FFD37A;
    border-radius: 20px;
    padding: 4px 12px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.osaCredNoteOk:hover {
    background: rgba(255, 211, 122, 0.15);
}

.osaCred .osaCredGo {
    position: relative;
    margin-top: 18px;
    width: auto;
    background: #8C3CFA;
    color: #fff !important;
    text-decoration: none !important;
}

.osaCred .osaCredGo:hover {
    box-shadow: 0 10px 25px rgba(140, 60, 250, 0.45);
}

/* ----- εκκρεμης πληρωμη ----- */

.osaPending {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255, 159, 67, 0.12);
    border: 1px solid rgba(255, 159, 67, 0.35);
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #8a4b0f;
}

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

.osaPending .sgSubmit,
.osaPending a.osaPayBtn,
.osaPending a.osaPayBtn:hover,
.osaPending a.osaPayBtn:focus {
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
    background: #8C3CFA;
    color: #fff !important;
    text-decoration: none !important;
}

.osaPending a.osaPayBtn .sgSubmitTxt,
.osaPending a.osaPayBtn i {
    color: #fff !important;
}

/* ολα τα link-κουμπια (a.sgSubmit) στις σελιδες λογαριασμου: στο hover μενουν
   μωβ με λευκα γραμματα - μονο η σκια αλλαζει (ο γενικος a:hover του site τα μαυριζε) */
.osaPage a.sgSubmit,
.osaPage a.sgSubmit:hover,
.osaPage a.sgSubmit:focus,
.osaPage a.sgSubmit:active,
.osaModalOverlay a.sgSubmit,
.osaModalOverlay a.sgSubmit:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.osaPage a.sgSubmit:hover,
.osaPage a.sgSubmit:hover .sgSubmitTxt,
.osaPage a.sgSubmit:hover i {
    color: #fff !important;
}

.osaBadge-pending { background: rgba(255, 159, 67, 0.16); color: #d6761a; }

/* πλατφορμα e-shop διπλα στο domain */
.osaCms {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 12px;
    color: #8C3CFA;
    background: rgba(140, 60, 250, 0.1);
    border-radius: 20px;
    padding: 4px 11px;
    margin-left: 10px;
    white-space: nowrap;
}

.osaCms i {
    font-size: 13px;
}

/* ονομα πακετου ως διακριτικο pill: σκουρο κειμενο σε απαλο μωβ φοντο */
.osaPkgPill {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 20px;
    font-family: 'Syne-Bold', sans-serif;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    color: #242833;
    background: rgba(140, 60, 250, 0.08);
    border: 1px solid rgba(140, 60, 250, 0.22);
}

.osaSubName .osaPkgPill {
    font-size: 16px;
}

.osaShopIncl .osaSubLabel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 10px;
}

.osaShopIncl .osaSubLabel .osaPkgPill {
    font-size: 12px;
    padding: 2px 10px;
    letter-spacing: 0;
    text-transform: none;
}

.osaTable .osaPkgPill {
    font-size: 12.5px;
    padding: 2px 10px;
}

.osaToast.err {
    border-left: 4px solid #E2445C;
}

/* ΚΑΝΕΝΑ κουμπι / καρτα δεν «ανασηκωνεται» στο hover (override του 06-signup.css) */
.sgSubmit:hover,
.sgSubmit.osaBtnSm:hover,
.sgSuccess .sgBackBtn:hover,
.osaBtnGhost:hover,
.osaBtnOutline:hover,
.osaPick:hover,
.osaPt:hover,
.osaPlat:hover,
.osaCopy:hover,
.osaCred .osaCredGo:hover {
    -webkit-transform: none !important;
    transform: none !important;
}

[data-field="package"].hasError .osaPick {
    border-color: rgba(226, 68, 92, 0.5);
}

[data-field="package"] .sgError {
    padding-left: 6px;
}

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

.osaSuccess .osaSuccessMsg strong {
    color: #242833;
}

.osaSuccessSub {
    font-size: 14px !important;
    color: #9499A8 !important;
    margin-top: -16px !important;
}

/* ----- εγγραφη, βημα 3: επιβεβαιωση email ----- */

.osaVerifyIcon {
    width: 90px;
    height: 90px;
    margin: 0 auto 28px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8C3CFA 0%, #B07CFF 100%);
    color: #fff;
    font-size: 38px;
    box-shadow: 0 16px 36px rgba(140, 60, 250, 0.28);
}

.osaVerifyIcon.isErr {
    background: linear-gradient(135deg, #E5484D 0%, #FF8A80 100%);
    box-shadow: 0 16px 36px rgba(229, 72, 77, 0.25);
}

.osaVerifyIcon .sgSpinner {
    width: 34px;
    height: 34px;
}

.osaVerify .osaSuccessMsg strong {
    color: #242833;
}

.osaVerifyHint {
    max-width: 520px;
    margin: -8px auto 22px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 13.5px;
    color: #9499A8;
}

.osaVerifyHint i {
    color: #8C3CFA;
    margin-right: 4px;
}

.osaVerify .osaVerifyResend {
    margin: 0 auto;
}

.osaVerifyResent {
    margin-top: 14px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #00B383;
}

.osaVerifyResent i {
    margin-right: 4px;
}

/* ----- εγγραφη: ηρθε απο τον συνδεσμο του email (?verify=) -----
   Η κλαση μπαινει απο inline script πριν ζωγραφιστει η σελιδα: αλλο hero, χωρις φορμα. */

.osaHeadVerify,
.osaVerifyMode .osaHeadSignup,
.osaVerifyMode #osaSignupForm,
.osaVerifyMode .osaTopLine {
    display: none;
}

.osaVerifyMode .osaHeadVerify {
    display: block;
}

/* ολα τα βηματα ολοκληρωθηκαν: κανενα «κλικαρισιμο» */
.osaStepper.isComplete li {
    cursor: default !important;
}

/* ----- εγγραφη: ο λογαριασμος επιβεβαιωθηκε (η καρτελα του συνδεσμου του email) ----- */

/* 640px ωστε ο τιτλος να χωραει σε μια γραμμη· το πλαισιο και το «ή» μενουν στα 560px */
.osaVerified {
    max-width: 640px;
    margin: 0 auto;
}

.osaVerifiedTab,
.osaVerifiedOr {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.osaVerified .sgSuccessIcon {
    margin-bottom: 30px;
    box-shadow: 0 16px 36px rgba(0, 224, 157, 0.3);
}

/* απαλος «παλμος» γυρω απο το εικονιδιο, δυο φορες */
.osaVerified .sgSuccessIcon:before {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    border-radius: 50%;
    border: 2px solid rgba(0, 224, 157, 0.45);
    opacity: 0;
    -webkit-animation: osaVerifiedRing 1.6s ease-out 0.35s 2;
    animation: osaVerifiedRing 1.6s ease-out 0.35s 2;
}

@-webkit-keyframes osaVerifiedRing {
    from { opacity: 1; -webkit-transform: scale(0.85); }
    to   { opacity: 0; -webkit-transform: scale(1.3); }
}

@keyframes osaVerifiedRing {
    from { opacity: 1; transform: scale(0.85); }
    to   { opacity: 0; transform: scale(1.3); }
}

.osaVerifiedBadge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin-bottom: 14px;
    border-radius: 30px;
    background: rgba(0, 224, 157, 0.12);
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #00875F;
}

.osaVerifiedBadge i {
    margin-right: 7px;
    font-size: 13px;
}

.osaVerified .osaSuccessMsg {
    margin-bottom: 26px;
}

.osaVerified .osaSuccessMsg strong {
    color: #242833;
    word-break: break-word;
}

/* «Συνεχιστε στην προηγουμενη καρτελα» */
.osaVerifiedTab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(140, 60, 250, 0.16);
    background: #F7F2FF;
    text-align: left;
}

.osaVerifiedTabIcon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #8C3CFA;
    font-size: 19px;
    box-shadow: 0 6px 16px rgba(140, 60, 250, 0.14);
}

.osaVerifiedTabTxt {
    min-width: 0;
    padding-top: 1px;
}

.osaVerifiedTabTxt strong {
    display: block;
    margin-bottom: 4px;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 15.5px;
    font-weight: normal;
    color: #242833;
}

.osaVerifiedTabTxt span {
    display: block;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #6C7183;
}

/* διαχωριστικο «ή» */
.osaVerifiedOr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px auto 20px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 13px;
    color: #9499A8;
}

.osaVerifiedOr:before,
.osaVerifiedOr:after {
    content: "";
    flex: 1;
    height: 1px;
    background: #EEF0F5;
}

.osaVerified .sgBackBtn i {
    margin-left: 10px;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .osaVerified .sgSuccessIcon:before {
        -webkit-animation: none;
        animation: none;
    }
}

/* ==========================================================================
   LOGIN
   ========================================================================== */

.osaLoginLinks {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #EEF0F5;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    color: #6C7183;
    text-align: center;
}

.osaLoginLinks p {
    margin: 0 0 8px;
}

.osaLoginLinks a {
    font-family: 'Syne-SemiBold', sans-serif;
    color: #8C3CFA;
}

.osaLoginForm .sgFoot {
    margin-top: 10px;
}

/* ----- «Ξεχασα τον κωδικο μου» (ιδια καρτα με τη συνδεση) ----- */

.osaForgotHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.osaForgotIcon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(140, 60, 250, 0.10);
    color: #8C3CFA;
    font-size: 20px;
}

.osaForgotTitle {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 20px;
    color: #242833;
    margin-bottom: 4px;
}

.osaForgotText {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: #6C7183;
    margin: 0;
}

.osaForgotDone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(0, 224, 157, 0.10);
    border: 1px solid rgba(0, 224, 157, 0.30);
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: #0a6e4f;
}

.osaForgotDone i {
    font-size: 20px;
    margin-top: 2px;
}

/* κουμπι «Αποστολη συνδεσμου» στη μεση, απο κατω ο συνδεσμος επιστροφης */
.osaForgotFoot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.osaForgotFoot .sgSubmit {
    margin-left: 0;
}

/* κουμπι «Αποθηκευση κωδικου» στη μεση */
.osaResetForm .sgFoot {
    justify-content: center;
}

.osaResetForm .sgSubmit {
    margin-left: 0;
}

/* ----- σελιδα επαναφορας κωδικου ----- */

.osaResetFor {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14.5px;
    color: #6C7183;
    margin: 0 0 18px;
}

.osaResetFor strong {
    font-family: 'Syne-SemiBold', sans-serif;
    color: #242833;
}

.osaResetInvalid {
    text-align: center;
    padding: 10px 0 6px;
}

.osaResetInvalidIcon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(226, 68, 92, 0.10);
    color: #E2445C;
    font-size: 26px;
}

.osaResetInvalid h2 {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 22px;
    color: #242833;
    margin: 0 0 10px;
}

.osaResetInvalidMsg {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #6C7183;
    margin: 0 auto 22px;
    max-width: 420px;
}

.osaResetInvalid .sgSubmit {
    display: inline-flex;
}

.osaLoginForm .sgSubmit {
    width: 100%;
}

/* ==========================================================================
   ACCOUNT
   ========================================================================== */

.osaAccHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: #fff;
    border-radius: 22px;
    padding: 22px 28px;
    margin-bottom: 22px;
    box-shadow: 0 25px 60px rgba(36, 40, 51, 0.10);
}

.osaAccWho {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.osaAccAvatar {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8C3CFA 0%, #00E09D 100%);
    color: #fff;
    font-size: 20px;
}

.osaAccName {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 20px;
    color: #242833;
    line-height: 1.2;
}

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

.osaAccActions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 8px;
}

.osaShops {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.osaShop {
    background: #fff;
    border-radius: 22px;
    padding: 24px 28px;
    box-shadow: 0 18px 45px rgba(36, 40, 51, 0.08);
}

.osaShopTop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EEF0F5;
}

.osaShopDomain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Syne-Bold', sans-serif;
    font-size: 19px;
    color: #242833;
    min-width: 0;
}

.osaShopDomain i {
    color: #8C3CFA;
    font-size: 17px;
}

.osaShopDomain span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.osaShopTags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.osaBadge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.osaBadge-active   { background: rgba(0, 224, 157, 0.16); color: #049a6c; }
.osaBadge-upcoming { background: rgba(140, 60, 250, 0.12); color: #8C3CFA; }
.osaBadge-expired  { background: #EEF0F5; color: #6C7183; }
.osaBadge-none     { background: rgba(255, 159, 67, 0.16); color: #d6761a; }

.osaShopBody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-top: 18px;
}

/* πανελ συνδρομης (τρεχον / επομενο πακετο) */
.osaSubLine {
    position: relative;
    padding: 14px 18px 14px 20px;
    border-radius: 14px;
    background: #FAFAFC;
    border: 1px solid #EEF0F5;
    overflow: hidden;
}

.osaSubLine::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #8C3CFA;
}

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

.osaSubLabel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9499A8;
    margin-bottom: 10px;
}

.osaSubLabel .osaBadge {
    font-size: 10px;
    padding: 3px 9px;
    letter-spacing: 0.6px;
}

.osaSubName {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 18px;
    color: #242833;
    margin-bottom: 12px;
}

.osaSubName .osaPkgPill {
    font-size: 17px;
    padding: 5px 16px;
}

.osaSubMeta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 13.5px;
    color: #6C7183;
}

.osaSubChip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #E6E8EF;
    white-space: nowrap;
}

.osaSubChip i {
    color: #8C3CFA;
    font-size: 13px;
}

.osaSubChip em {
    font-style: normal;
    color: #C9CCD6;
}

.osaSubChip.isAmt {
    font-family: 'Syne-Bold', sans-serif;
    color: #242833;
}

.osaShopPlans {
    flex: 1 1 320px;
    min-width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.osaShopPlans .osaSubLine {
    flex: 1 1 260px;
    min-width: 0;
}

.osaShopPlans .osaSubLine + .osaSubLine {
    margin-top: 0;
}

.osaShopPlans .osaSubLine + .osaSubLine::before {
    background: #C9CCD6;
}

/* τι περιλαμβανει το πακετο (ορια απο το ERP): πλεγμα πλακιδιων σε ολο το πλατος */
.osaShopIncl {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #EEF0F5;
}

.osaStatGrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.osaStat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 14px 8px 12px;
    border-radius: 14px;
    background: #F5F6FA;
    text-align: center;
}

.osaStatVal {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 18px;
    line-height: 1.1;
    color: #242833;
    white-space: nowrap;
}

.osaStat.isInf .osaStatVal {
    color: #8C3CFA;
    font-size: 20px;
}

.osaStatLbl {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 11.5px;
    color: #6C7183;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .osaStatGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .osaStatGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

.osaSubNone {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 15px;
    color: #6C7183;
    background: transparent;
    border-style: dashed;
}

.osaSubNone::before {
    background: #C9CCD6;
}

.osaShopActions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.osaHistory {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #EEF0F5;
}

.osaHistory summary {
    cursor: pointer;
    list-style: none;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 13px;
    color: #8C3CFA;
    outline: none;
}

.osaHistory summary::-webkit-details-marker {
    display: none;
}

.osaHistory summary:before {
    content: "\f078";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    font-size: 11px;
    margin-right: 8px;
    display: inline-block;
    -webkit-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
}

.osaHistory[open] summary:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.osaHistory summary span {
    color: #9499A8;
}

.osaTableWrap {
    overflow-x: auto;
    margin-top: 12px;
}

.osaTable {
    width: 100%;
    border-collapse: collapse;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 13.5px;
    color: #242833;
}

.osaTable th {
    text-align: left;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9499A8;
    padding: 8px 10px;
    border-bottom: 1px solid #EEF0F5;
    white-space: nowrap;
}

.osaTable td {
    padding: 10px;
    border-bottom: 1px solid #F5F6FA;
    white-space: nowrap;
}

.osaEmptyState {
    text-align: center;
    background: #fff;
    border-radius: 22px;
    padding: 50px 28px;
    box-shadow: 0 18px 45px rgba(36, 40, 51, 0.08);
}

.osaEmptyIcon {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F6FA;
    color: #8C3CFA;
    font-size: 28px;
}

.osaEmptyState p {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 16px;
    color: #6C7183;
    max-width: 440px;
    margin: 0 auto 22px;
}

.osaEmptyState .sgSubmit {
    margin: 0 auto;
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.osaModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    background: rgba(36, 40, 51, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.osaModalOverlay.isOpen {
    opacity: 1;
}

body.osaModalLock {
    overflow: hidden;
}

/* Το κουτι μενει στρογγυλο (overflow hidden). Κυλαει ΜΟΝΟ το εσωτερικο .osaModalScroll,
   οποτε η scrollbar φαινεται μεσα στο κουτι, με αποσταση απο την ακρη. */
.osaModalBox {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    max-height: 95vh;
    overflow: hidden;
    background: #fff;
    border-radius: 26px;
    padding: 0;
}

.osaModalForm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 95vh;
}

.osaModalScroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 44px 40px 30px 56px;
    margin: 22px 22px 0 0;
    /* λεπτη scrollbar στο μωβ του site (Firefox + WebKit) */
    scrollbar-width: thin;
    scrollbar-color: #8C3CFA #F0F1F6;
}

.osaModalScroll::-webkit-scrollbar {
    width: 6px;
}

.osaModalScroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.osaModalScroll::-webkit-scrollbar-track {
    background: #F0F1F6;
    border-radius: 6px;
    /* η μπαρα ξεκιναει κατω απο το ✕ */
    margin: 44px 0 12px;
}

.osaModalScroll::-webkit-scrollbar-thumb {
    background: #8C3CFA;
    border-radius: 6px;
}

.osaModalScroll::-webkit-scrollbar-thumb:hover {
    background: #6f26d6;
}

/* Καρτες πακετων στα modals: σταθερο πλατος και ΚΕΝΤΡΑΡΙΣΜΑ, ωστε και με λιγοτερα
   πακετα (π.χ. Αναβαθμιση με 1-2 επιλογες) να καθονται στη μεση. 4 χωρανε σε μια
   σειρα στο μεγαλο modal, λιγοτερες αναδιπλωνονται. */
.osaModalBody .osaPickList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.osaModalBody .osaPickList .osaPt {
    flex: 1 1 215px;
    min-width: 215px;
    max-width: 290px;
    width: auto;
}

@media (max-width: 575px) {
    .osaModalBody .osaPickList .osaPt {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }
}
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    -webkit-transform: translateY(24px) scale(0.97);
    transform: translateY(24px) scale(0.97);
    -webkit-transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.osaModalOverlay.isOpen .osaModalBox {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
}

.osaModalClose {
    position: absolute;
    top: 18px;
    right: 44px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    border-radius: 50%;
    background: #F5F6FA;
    color: #6C7183;
    font-size: 16px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.osaModalClose:hover {
    background: #8C3CFA;
    color: #fff;
}

.osaModalTitle {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 24px;
    color: #242833;
    padding-right: 40px;
}

.osaModalIntro {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #6C7183;
    margin: 8px 0 0;
}

.osaModalBody {
    margin-top: 22px;
}

.osaModalBody .sgGrid {
    margin: 0;
}

.osaModalBody .sgField {
    padding: 0;
}

.osaModalSub {
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8C3CFA;
    margin: 6px 0 12px;
}

.osaModalForm .sgAlert {
    margin: 18px 0 0;
}

/* sticky μπαρα κουμπιων στο κατω μερος του popup (εκτος της περιοχης scroll) */
.osaModalFoot {
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 18px 56px 20px;
    background: #fff;
    border-top: 1px solid #EEF0F5;
    box-shadow: 0 -12px 24px rgba(36, 40, 51, 0.06);
}

.osaModalFoot .sgSubmit {
    min-width: 0;
    height: 52px;
    font-size: 16px;
    margin-left: 0;
}

/* κλειδωμενο μεχρι να επιλεγει πακετο */
.osaModalFoot .sgSubmit.isLocked,
.osaModalFoot .sgSubmit[disabled] {
    background: #C9CCD6;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}

/* ==========================================================================
   Καθολικος loader (κλησεις API) - ιδιος με τον loader του Optisleek
   (analytics, app-v2.css: .loader / .loader-wrapper / .lds-spinner):
   σκουρο θολο scrim, halo, δυο ομοκεντρα δαχτυλιδια (μωβ δεξιοστροφο,
   teal αριστεροστροφο) και «LOADING...» με κινουμενες τελειες.
   ========================================================================== */

.osaLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100004;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(15, 15, 25, 0.55), rgba(15, 15, 25, 0.78));
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

.osaLoader.isShown {
    opacity: 1;
}

.osaLoaderWrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    -webkit-animation: osaLoaderPop 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    animation: osaLoaderPop 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* halo πισω απο το δαχτυλιδι */
.osaLoaderWrap:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(140, 60, 250, 0.45) 0%, rgba(15, 167, 158, 0.15) 45%, rgba(140, 60, 250, 0) 70%);
    -webkit-filter: blur(6px);
    filter: blur(6px);
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: osaLoaderHalo 1.8s ease-in-out infinite;
    animation: osaLoaderHalo 1.8s ease-in-out infinite;
}

.osaLoaderSpin {
    position: relative;
    width: 72px;
    height: 72px;
}

.osaLoaderSpin:before,
.osaLoaderSpin:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}

/* εξωτερικο δαχτυλιδι: μωβ, δεξιοστροφο */
.osaLoaderSpin:before {
    border-top-color: #B98CFF;
    border-right-color: rgba(185, 140, 255, 0.6);
    border-bottom-color: rgba(185, 140, 255, 0.18);
    box-shadow: 0 0 20px rgba(140, 60, 250, 0.35);
    -webkit-animation: osaLoaderSpin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: osaLoaderSpin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* εσωτερικο δαχτυλιδι: teal, αριστεροστροφο */
.osaLoaderSpin:after {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-width: 2.5px;
    border-top-color: #4FD4C8;
    border-right-color: rgba(79, 212, 200, 0.45);
    box-shadow: 0 0 14px rgba(79, 212, 200, 0.28);
    -webkit-animation: osaLoaderSpinReverse 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: osaLoaderSpinReverse 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* «LOADING...» κατω απο το δαχτυλιδι */
.osaLoaderWrap:after {
    content: "Loading";
    position: relative;
    font-family: 'Syne-SemiBold', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    padding-right: 14px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    -webkit-animation: osaLoaderDots 1.6s steps(4, end) infinite;
    animation: osaLoaderDots 1.6s steps(4, end) infinite;
}

@-webkit-keyframes osaLoaderSpin { to { -webkit-transform: rotate(360deg); } }
@keyframes osaLoaderSpin { to { transform: rotate(360deg); } }
@-webkit-keyframes osaLoaderSpinReverse { to { -webkit-transform: rotate(-360deg); } }
@keyframes osaLoaderSpinReverse { to { transform: rotate(-360deg); } }
@-webkit-keyframes osaLoaderPop {
    from { opacity: 0; -webkit-transform: translateY(6px) scale(0.96); }
    to   { opacity: 1; -webkit-transform: translateY(0) scale(1); }
}
@keyframes osaLoaderPop {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@-webkit-keyframes osaLoaderHalo {
    0%, 100% { opacity: 0.55; -webkit-transform: translateX(-50%) scale(0.95); }
    50%      { opacity: 1;    -webkit-transform: translateX(-50%) scale(1.15); }
}
@keyframes osaLoaderHalo {
    0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.95); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.15); }
}
@keyframes osaLoaderDots {
    0%   { content: "Loading"; }
    25%  { content: "Loading."; }
    50%  { content: "Loading.."; }
    75%  { content: "Loading..."; }
    100% { content: "Loading"; }
}

/* ----- popup ειδοποιησης (σφαλματα modal) στο υφος του site ----- */

.osaDlgOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100003;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    background: rgba(36, 40, 51, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.osaDlgOverlay.isOpen {
    opacity: 1;
}

.osaDlg {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 42px 36px 34px;
    border-radius: 26px;
    background: #fff;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateY(18px) scale(0.96);
    transform: translateY(18px) scale(0.96);
    -webkit-transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.osaDlgOverlay.isOpen .osaDlg {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
}

/* η λεπτη gradient γραμμη του site στην κορυφη */
.osaDlg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    background: linear-gradient(to right, #8C3CFA 0%, #8C3CFA 55%, #00E09D 100%);
}

.osaDlgIcon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, #E2445C 0%, #C93549 100%);
    box-shadow: 0 12px 28px rgba(226, 68, 92, 0.3);
}

.osaDlg.ok .osaDlgIcon {
    background: linear-gradient(135deg, #00E09D 0%, #00C98D 100%);
    box-shadow: 0 12px 28px rgba(0, 224, 157, 0.3);
}

.osaDlgTitle {
    font-family: 'Syne-Bold', sans-serif;
    font-size: 24px;
    color: #242833;
    margin-bottom: 10px;
}

.osaDlgText {
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 15.5px;
    line-height: 1.55;
    color: #6C7183;
    margin-bottom: 26px;
}

/* το ονομα του πεδιου που εχει το λαθος */
.osaDlgText strong {
    display: inline-block;
    margin-bottom: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(226, 68, 92, 0.1);
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 13px;
    color: #C93549;
}

.osaDlg .osaDlgBtn {
    min-width: 0;
    width: auto;
    height: 52px;
    padding: 0 44px;
    margin: 0 auto;
    font-size: 16px;
}

/* ----- toast ----- */

.osaToast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 100001;
    max-width: calc(100% - 30px);
    padding: 14px 22px;
    border-radius: 16px;
    background: #242833;
    color: #fff;
    font-family: 'CeraGreek-Regular', sans-serif;
    font-size: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    -webkit-transform: translate(-50%, 20px);
    transform: translate(-50%, 20px);
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.osaToast.ok {
    border-left: 4px solid #00E09D;
}

.osaToast.isShown {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

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

@media (max-width: 991px) {
    .osaLayout {
        flex-direction: column;
    }

    .osaSide {
        width: 100%;
        flex: 0 0 auto;
        position: static;
        order: -1;
    }

    .osaCard {
        padding: 32px 26px 28px;
    }

    .osaStepper li + li:before {
        width: 26px;
        margin: 0 8px;
    }

    .osaModalBox {
        max-width: 760px;
    }

    .osaModalScroll {
        padding: 30px 20px 20px 26px;
        margin: 10px 6px 0 0;
    }

    .osaModalFoot {
        padding: 14px 26px 16px;
    }
}

@media (max-width: 767px) {
    .osaCard {
        padding: 26px 18px 22px;
    }

    .osaStepper li span.osaStepTxt {
        display: none;
    }

    .osaStepper li.isActive span.osaStepTxt,
    .osaStepper.isComplete li:last-child span.osaStepTxt {
        display: inline;
    }

    .osaVerifiedTab {
        gap: 12px;
        padding: 16px;
    }

    .osaVerifiedTabIcon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 17px;
    }

    .osaVerified .sgBackBtn {
        width: 100%;
        justify-content: center;
        height: 54px;
        padding: 0 20px;
        font-size: 16px;
    }

    .osaStepper li + li:before {
        width: 18px;
    }

    .osaStepFoot .sgSubmit,
    .osaStepFoot .osaBtnGhost {
        width: 100%;
    }

    .osaAccHead {
        padding: 18px 18px;
    }

    /* Κεφαλιδα λογαριασμου σε κινητο: ονομα/email σε ολο το πλατος και με αναδιπλωση (μεγαλη
       επωνυμια δεν βγαινει εξω απο την καρτα), απο κατω «Προσθηκη e-shop» σε ολο το πλατος και
       τελος «Αποσυνδεση» κεντραρισμενη, χαμηλη, χωρις μεγαλα κενα. Το κειμενο των κουμπιων δεν
       σπαει σε δυο γραμμες (το «Προσθηκη e-shop» εσπαγε και εκοβε το «+»). */
    .osaAccWho {
        width: 100%;
    }

    /* μονο το μπλοκ ονομα/email - οχι το avatar, που πρεπει να μεινει κυκλος 54x54 */
    .osaAccWho > div:not(.osaAccAvatar) {
        min-width: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .osaAccWho .osaAccAvatar {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 54px;
        flex: 0 0 54px;
    }

    .osaAccName,
    .osaAccMail {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .osaAccName {
        font-size: 18px;
    }

    .osaAccActions {
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .osaAccActions .sgSubmit {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        width: 100%;
        white-space: nowrap;
    }

    .osaAccActions .osaBtnGhost {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        width: 100%;
        height: 42px;
        justify-content: center;
        white-space: nowrap;
    }

    .osaAccActions .sgSubmitTxt,
    .osaShopActions .sgSubmitTxt {
        white-space: nowrap;
    }

    .osaShop {
        padding: 18px 16px;
    }

    .osaShopActions {
        width: 100%;
        margin-left: 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .osaShopActions .sgSubmit,
    .osaShopActions .osaBtnOutline {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    .osaModalFoot {
        flex-direction: column-reverse;
    }

    .osaModalFoot .sgSubmit,
    .osaModalFoot .osaBtnGhost {
        width: 100%;
    }
}

/* Καρτα «Προσβαση στο Optisleek» σε κινητο: email συνδεσης, «Αντιγραφη», σημειωμα κωδικου και
   «Το ειδα» κεντραρισμενα, ωστε να μη φαινονται «πεταμενα» αριστερα/δεξια στο στενο πλατος */
@media (max-width: 575px) {
    .osaCred {
        padding: 22px 18px;
    }

    .osaCredItem {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .osaCredLabel {
        text-align: center;
    }

    .osaCredItem code {
        text-align: center;
    }

    .osaCopy {
        margin-left: 0;
    }

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

    .osaCredNote > span {
        flex: 1 1 100%;
    }

    .osaCredNoteOk {
        margin: 2px auto 0;
    }

    .osaCred .osaCredGo {
        width: 100%;
    }
}