/* =========================================================
   APPLE-STYLE SORTIT NAVIGATION
   FULL NAVIGATION CSS
========================================================= */


/* =========================================================
   HEADER
========================================================= */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 64px;

    background: #ffffff;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    z-index: 1000;

    transition:
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


/* =========================================================
   HEADER WHEN SCROLLING
   HEADER ALWAYS REMAINS VISIBLE
========================================================= */

header.scrolled {

    background: #ffffff;

    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.06);

}


/* IMPORTANT:
   Header NEVER hides when scrolling */

header.nav-hidden {

    transform: translateY(0);

}


/* =========================================================
   NAVIGATION CONTAINER
========================================================= */

.nav-wrap {

    width: 100%;

    max-width: 1280px;

    height: 64px;

    margin: 0 auto;

    padding:
        0 24px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    background: transparent;

}


.logo a {

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    text-decoration: none;

}


.logo img {

    display: block;

    height: 40px;

    width: auto;

    max-width: 180px;

    object-fit: contain;

    background: transparent;

    border: none;

    box-shadow: none;

    border-radius: 0;

}


/* Logo hover */

.logo a:hover img {

    opacity: 0.82;

}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.nav-links {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 27px;

    margin-left: auto;

}


/* =========================================================
   DESKTOP LINKS
========================================================= */

.nav-links a {

    position: relative;

    display: inline-flex;

    align-items: center;

    height: 64px;

    padding: 0;

    text-decoration: none;

    color: #1d1d1f;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 400;

    letter-spacing: -0.01em;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;

}


/* Hover */

.nav-links a:hover {

    color: #666666;

}


/* =========================================================
   DESKTOP HOVER LINE
========================================================= */

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 2px;

    background: #1d1d1f;

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 0.25s ease;

}


.nav-links a:hover::after {

    transform: scaleX(1);

}


/* =========================================================
   MOBILE BURGER BUTTON
========================================================= */

.burger {

    display: none;

    position: relative;

    width: 38px;

    height: 38px;

    padding: 0;

    margin: 0;

    border: none;

    outline: none;

    background: transparent;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 6px;

    z-index: 2100;

}


/* Burger lines */

.burger span {

    display: block;

    width: 20px;

    height: 1.5px;

    background: #1d1d1f;

    border-radius: 2px;

    transition:
        transform 0.3s ease,
        opacity 0.2s ease;

}


/* =========================================================
   BURGER → X
========================================================= */

.burger.active {

    gap: 0;

}


.burger.active span:first-child {

    transform:
        translateY(0)
        rotate(45deg);

}


.burger.active span:last-child {

    transform:
        translateY(0)
        rotate(-45deg);

}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-nav {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 100dvh;

    background: #ffffff;

    z-index: 2000;

    overflow-y: auto;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-15px);

    transition:
        opacity 0.3s ease,
        transform 0.35s cubic-bezier(.22,1,.36,1),
        visibility 0.3s ease;

}


/* =========================================================
   MOBILE NAV OPEN
========================================================= */

.mobile-nav.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =========================================================
   MOBILE NAV INNER
========================================================= */

.mobile-nav-inner {

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding:
        90px 30px 50px;

    box-sizing: border-box;

}


/* =========================================================
   MOBILE NAV TOP
========================================================= */

.mobile-nav-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.mobile-nav-title {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 400;

    color: #86868b;

    letter-spacing: 0.01em;

}


/* =========================================================
   MOBILE CLOSE BUTTON
========================================================= */

.closeNav {

    position: relative;

    width: 38px;

    height: 38px;

    padding: 0;

    border: none;

    background: #f5f5f7;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.closeNav:hover {

    background: #e8e8ed;

    transform: scale(1.05);

}


/* X lines */

.closeNav span {

    position: absolute;

    width: 16px;

    height: 1.5px;

    background: #1d1d1f;

    border-radius: 2px;

}


.closeNav span:first-child {

    transform: rotate(45deg);

}


.closeNav span:last-child {

    transform: rotate(-45deg);

}


/* =========================================================
   MOBILE LINKS
========================================================= */

.mobile-links {

    display: flex;

    flex-direction: column;

    width: 100%;

}


/* Individual mobile link */

.mobile-links a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 68px;

    padding:
        0 4px;

    box-sizing: border-box;

    border-bottom:
        1px solid #e8e8ed;

    text-decoration: none;

    color: #1d1d1f;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 23px;

    font-weight: 400;

    letter-spacing: -0.025em;

    transition:
        color 0.2s ease,
        padding-left 0.25s ease;

}


/* =========================================================
   MOBILE ARROWS
========================================================= */

.mobile-links a i {

    font-style: normal;

    font-size: 30px;

    line-height: 1;

    font-weight: 300;

    color: #86868b;

    transition:
        transform 0.25s ease,
        color 0.25s ease;

}


/* =========================================================
   MOBILE LINK HOVER
========================================================= */

.mobile-links a:hover {

    color: #666666;

    padding-left: 10px;

}


.mobile-links a:hover i {

    color: #1d1d1f;

    transform: translateX(5px);

}


/* =========================================================
   NAV OVERLAY
========================================================= */

.nav-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.18);

    z-index: 1900;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

}


/* =========================================================
   ACTIVE OVERLAY
========================================================= */

.nav-overlay.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   PREVENT PAGE SCROLL WHEN MOBILE MENU OPEN
========================================================= */

body.nav-open {

    overflow: hidden;

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1001px) {

    .nav-links {

        display: flex;

    }

    .burger {

        display: none;

    }

    .mobile-nav {

        display: none;

    }

    .nav-overlay {

        display: none;

    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 1000px) {

    header {

        height: 64px;

        background: #ffffff;

    }


    .nav-wrap {

        height: 64px;

        padding:
            0 20px;

    }


    /* Hide desktop links */

    .nav-links {

        display: none;

    }


    /* Show burger */

    .burger {

        display: flex;

    }


    /* Logo */

    .logo img {

        height: 40px;

        max-width: 175px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    header {

        height: 62px;

    }


    .nav-wrap {

        height: 62px;

        padding:
            0 17px;

    }


    .logo img {

        height: 38px;

        max-width: 165px;

    }


    .mobile-nav-inner {

        padding:
            82px 22px 45px;

    }


    .mobile-links a {

        min-height: 64px;

        font-size: 21px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .nav-wrap {

        padding:
            0 14px;

    }


    .logo img {

        height: 36px;

        max-width: 150px;

    }


    .mobile-nav-inner {

        padding:
            78px 18px 40px;

    }


    .mobile-links a {

        font-size: 20px;

        min-height: 60px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.burger:focus-visible,
.closeNav:focus-visible,
.nav-links a:focus-visible,
.mobile-links a:focus-visible {

    outline:
        2px solid #0071e3;

    outline-offset:
        4px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        transition: none !important;

        animation: none !important;

    }

}


/* =========================================================
   SORTIT FOOTER
========================================================= */

.sortit-footer {

    width: 100%;

    background: #ffffff;

    color: #1d1d1f;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.45;

}


/* =========================================================
   CONTAINER
========================================================= */

.footer-container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding:
        55px 24px 25px;

    box-sizing: border-box;

}


/* =========================================================
   DESKTOP COLUMNS
========================================================= */

.footer-columns {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 160px;

}


/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer-column {

    min-width: 0;

}


/* =========================================================
   FOOTER HEADING
========================================================= */

.footer-heading {

    width: 100%;

    padding: 0;

    margin: 0 0 14px;

    border: none;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    text-align: left;

    color: #1d1d1f;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: default;

}


/* Plus symbol is hidden on desktop */

.footer-plus {

    display: none;

}


/* =========================================================
   LIST
========================================================= */

.footer-column ul {

    list-style: none;

    padding: 0;

    margin: 0;

}


.footer-column li {

    margin-bottom: 9px;

}


/* =========================================================
   LINKS
========================================================= */

.footer-column a {

    color: #424245;

    text-decoration: none;

    font-size: 12px;

    font-weight: 400;

    transition:
        color 0.2s ease;

}


.footer-column a:hover {

    color: #000000;

    text-decoration: underline;

}


/* =========================================================
   MORE WAYS
========================================================= */

.footer-more {

    margin-top: 45px;

    padding-bottom: 20px;

    color: #6e6e73;

    font-size: 12px;

}


.footer-more a {

    color: #424245;

    text-decoration: underline;

}


/* =========================================================
   DIVIDER
========================================================= */

.footer-divider {

    width: 100%;

    height: 1px;

    background: #d2d2d7;

    margin-bottom: 20px;

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

}


.footer-copyright {

    color: #6e6e73;

    font-size: 12px;

}


.footer-legal {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

}


.footer-legal a {

    color: #424245;

    text-decoration: none;

    font-size: 12px;

}


.footer-legal a:hover {

    text-decoration: underline;

}


.footer-legal span {

    color: #d2d2d7;

}


.footer-country {

    color: #424245;

    text-decoration: none;

    font-size: 12px;

}


.footer-country:hover {

    text-decoration: underline;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .footer-columns {

        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 40px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .footer-container {

        padding:
            35px 20px 25px;

    }


    /* =====================================================
       SINGLE COLUMN
    ===================================================== */

    .footer-columns {

        display: block;

    }


    /* =====================================================
       EACH MOBILE SECTION
    ===================================================== */

    .footer-column {

        border-bottom:
            1px solid #d2d2d7;

        padding: 0;

    }


    /* =====================================================
       MOBILE HEADING
    ===================================================== */

    .footer-heading {

        min-height: 48px;

        margin: 0;

        padding: 0;

        font-size: 14px;

        font-weight: 500;

        cursor: pointer;

        justify-content: space-between;

    }


    /* =====================================================
       PLUS
    ===================================================== */

    .footer-plus {

        display: block;

        font-size: 20px;

        font-weight: 300;

        line-height: 1;

        color: #424245;

        transition:
            transform 0.25s ease;

    }


    /* =====================================================
       HIDE LINKS BY DEFAULT
    ===================================================== */

    .footer-column ul {

        max-height: 0;

        overflow: hidden;

        margin: 0;

        opacity: 0;

        transition:
            max-height 0.35s ease,
            opacity 0.25s ease,
            margin 0.25s ease;

    }


    /* =====================================================
       OPEN SECTION
    ===================================================== */

    .footer-column.open ul {

        max-height: 500px;

        margin:
            0 0 17px;

        opacity: 1;

    }


    /* =====================================================
       OPEN PLUS → MINUS
    ===================================================== */

    .footer-column.open .footer-plus {

        transform: rotate(45deg);

    }


    /* =====================================================
       MOBILE LINKS
    ===================================================== */

    .footer-column li {

        margin:
            0 0 10px;

    }


    .footer-column a {

        font-size: 13px;

    }


    /* =====================================================
       MORE WAYS
    ===================================================== */

    .footer-more {

        margin-top: 28px;

        padding-bottom: 20px;

        line-height: 1.6;

    }


    /* =====================================================
       BOTTOM
    ===================================================== */

    .footer-bottom {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        gap: 14px;

    }


    .footer-copyright {

        order: 1;

        font-size: 12px;

    }


    .footer-legal {

        order: 2;

        justify-content: flex-start;

        align-items: flex-start;

        gap: 7px;

    }


    .footer-legal a {

        font-size: 12px;

    }


    .footer-country {

        order: 3;

        font-size: 12px;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .footer-container {

        padding:
            30px 16px 20px;

    }


    .footer-heading {

        min-height: 46px;

        font-size: 13px;

    }


    .footer-column a {

        font-size: 12px;

    }


    .footer-more {

        font-size: 11px;

    }


    .footer-copyright,
    .footer-legal a,
    .footer-country {

        font-size: 11px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.footer-heading:focus-visible {

    outline:
        2px solid #0071e3;

    outline-offset:
        3px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .footer-column ul,
    .footer-plus {

        transition: none;

    }

}

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

/* =========================================================
   YOUSORT WAITING LIST MODAL
   Shared across all pages
========================================================= */

/* =========================================================
   YOUSORT WAITING LIST MODAL
   SELF-CONTAINED / PAGE-INDEPENDENT
========================================================= */


/* ---------------------------------------------------------
   MODAL BACKDROP
--------------------------------------------------------- */

.ys-wmodal {

    all: initial;

    box-sizing: border-box;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(5, 18, 32, 0.72);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    z-index: 999999;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #263746;

    box-sizing: border-box;
}


/* OPEN STATE */

.ys-wmodal.ys-wmodal-open {

    display: flex;

}


/* ---------------------------------------------------------
   MODAL BOX
--------------------------------------------------------- */

.ys-wmodal-box {

    all: initial;

    position: relative;

    width: 100%;

    max-width: 440px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 18px;

    padding: 32px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.25);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #263746;

    animation:
        ys-wmodal-in 0.25s ease;

}


/* ---------------------------------------------------------
   MODAL CONTENT
--------------------------------------------------------- */

.ys-wmodal-content {

    all: initial;

    display: block;

    width: 100%;

    box-sizing: border-box;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #263746;

}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.ys-wmodal-content h3 {

    all: initial;

    display: block;

    margin: 0 45px 8px 0;

    padding: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 26px;

    line-height: 1.2;

    font-weight: 700;

    color: #0a2540;

}


/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.ys-wmodal-intro {

    all: initial;

    display: block;

    margin: 0 0 22px 0;

    padding: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.6;

    font-weight: 400;

    color: #666666;

}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.ys-wmodal-close {

    all: unset;

    position: absolute;

    top: 14px;
    right: 14px;

    width: 36px;
    height: 36px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    color: #263746;

    font-family:
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}


.ys-wmodal-close:hover {

    background: #e5edf5;

    color: #0a2540;

    transform: scale(1.05);

}


/* ---------------------------------------------------------
   CUSTOMER / TRADESPERSON TOGGLE
--------------------------------------------------------- */

.ys-wmodal-toggle {

    all: initial;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    width: 100%;

    box-sizing: border-box;

    margin: 0 0 18px 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

}


/* ---------------------------------------------------------
   TOGGLE BUTTON
--------------------------------------------------------- */

.ys-wmodal-toggle-option {

    all: unset;

    position: relative;

    width: 100%;

    min-height: 48px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 10px 14px;

    border: 1px solid #d9e2ec;

    border-radius: 9px;

    background: #ffffff;

    color: #263746;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;

}


.ys-wmodal-toggle-option:hover {

    border-color: #1b5fbf;

    color: #1b5fbf;

}


/* ACTIVE */

.ys-wmodal-toggle-option.ys-wmodal-toggle-active {

    background: #fcc601;

    color: #0a2540;

    box-shadow:
        0 5px 14px rgba(27, 95, 191, 0.20);

}


/* ACTIVE HOVER */

.ys-wmodal-toggle-option.ys-wmodal-toggle-active:hover {

    background: #fcc601;

    color: #0a2540;

}


/* ---------------------------------------------------------
   HIDDEN RADIO INPUT
--------------------------------------------------------- */

.ys-wmodal-toggle-option input[type="radio"] {

    all: unset;

    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;

}


/* ---------------------------------------------------------
   TOGGLE TEXT
--------------------------------------------------------- */

.ys-wmodal-toggle-option span {

    all: initial;

    display: block;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 600;

    color: inherit;

}


/* ---------------------------------------------------------
   EMAIL
--------------------------------------------------------- */

.ys-wmodal-email {

    all: unset;

    display: block;

    width: 100%;

    height: 48px;

    box-sizing: border-box;

    padding: 0 14px;

    margin: 0 0 15px 0;

    border: 1px solid #d9e2ec;

    border-radius: 9px;

    background: #ffffff;

    color: #263746;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 48px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.ys-wmodal-email::placeholder {

    color: #8a97a3;

    opacity: 1;

}


.ys-wmodal-email:focus {

    border-color: #1b5fbf;

    box-shadow:
        0 0 0 3px rgba(27, 95, 191, 0.10);

}


/* ---------------------------------------------------------
   AGREEMENT
--------------------------------------------------------- */

.ys-wmodal-agree {

    all: initial;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    width: 100%;

    box-sizing: border-box;

    margin: 0 0 18px 0;

    padding: 0;

    cursor: pointer;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #5b6770;

}


/* CHECKBOX */

.ys-wmodal-agree input[type="checkbox"] {

    all: unset;

    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    box-sizing: border-box;

    margin: 2px 0 0 0;

    border: 1px solid #cbd5df;

    border-radius: 4px;

    background: #ffffff;

    cursor: pointer;

}


.ys-wmodal-agree input[type="checkbox"]:checked {

    background: #1b5fbf;

    border-color: #1b5fbf;

}


/* AGREEMENT TEXT */

.ys-wmodal-agree span {

    all: initial;

    display: block;

    flex: 1;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 400;

    color: #66727c;

}


/* ---------------------------------------------------------
   SUBMIT BUTTON
--------------------------------------------------------- */

.ys-wmodal-submit {

    all: unset;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    height: 50px;

    box-sizing: border-box;

    padding: 0 18px;

    margin: 0;

    border-radius: 9px;

    background: #1b5fbf;

    color: #ffffff;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;

}


.ys-wmodal-submit:hover {

    background: #144f9f;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(27, 95, 191, 0.20);

}


.ys-wmodal-submit:active {

    transform: translateY(0);

}


/* ---------------------------------------------------------
   MESSAGE
--------------------------------------------------------- */

.ys-wmodal-message {

    all: initial;

    display: block;

    width: 100%;

    box-sizing: border-box;

    min-height: 20px;

    margin: 12px 0 0 0;

    padding: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 500;

    text-align: center;

    color: #1b7f3a;

}


/* ---------------------------------------------------------
   ANIMATION
--------------------------------------------------------- */

@keyframes ys-wmodal-in {

    from {

        opacity: 0;

        transform:
            translateY(10px)
            scale(0.98);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

    .ys-wmodal {

        padding: 15px;

    }


    .ys-wmodal-box {

        max-width: 100%;

        padding: 26px 22px;

        border-radius: 16px;

    }


    .ys-wmodal-content h3 {

        font-size: 23px;

    }


    .ys-wmodal-toggle-option {

        min-height: 46px;

        font-size: 13px;

    }


    .ys-wmodal-toggle-option span {

        font-size: 13px;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .wmodal{
        padding:15px;
    }

    .wmodal-box{
        max-width:100%;
        padding:27px 22px 24px;
        border-radius:16px;
    }

    .wmodal-box h3{
        font-size:24px;
    }

    .wtoggle-option{
        min-height:46px;
        font-size:13px;
    }

}