/* =========================================================
   FLEXLINK TRANSCRIBERS
   PREMIUM REGISTRATION PAGE
   ========================================================= */

:root{

    --ink:#191919;
    --ink-soft:#4b4642;

    --cream:#f7f3ec;
    --cream-deep:#eee7dc;

    --wine:#641f35;
    --wine-dark:#421322;

    --copper:#b87333;
    --gold:#d6a354;

    --white:#ffffff;

    --muted:#716b65;

    --border:rgba(25,25,25,.12);
    --input-bg:#fcfaf7;

    --error:#b42318;

}


/* =========================================================
   PAGE
   ========================================================= */

body{

    background:

        radial-gradient(
            circle at 8% 10%,
            rgba(184,115,51,.12),
            transparent 30%
        ),

        radial-gradient(
            circle at 92% 90%,
            rgba(100,31,53,.09),
            transparent 32%
        ),

        var(--cream);

    font-family:
        Inter,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    color:var(--ink);

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    margin:0;

    padding:35px 20px;

    box-sizing:border-box;

    position:relative;

}


/* =========================================================
   SUBTLE BACKGROUND DECORATION
   ========================================================= */

body::before{

    content:"";

    position:fixed;

    width:420px;
    height:420px;

    right:-220px;
    top:-180px;

    border-radius:50%;

    border:1px solid rgba(184,115,51,.16);

    box-shadow:

        0 0 0 35px rgba(184,115,51,.025),

        0 0 0 75px rgba(184,115,51,.018),

        0 0 0 115px rgba(184,115,51,.012);

    pointer-events:none;

}


body::after{

    content:"";

    position:fixed;

    width:260px;
    height:260px;

    left:-170px;
    bottom:-100px;

    border-radius:50%;

    background:rgba(100,31,53,.035);

    pointer-events:none;

}


/* =========================================================
   REGISTRATION CARD
   ========================================================= */

.card{

    position:relative;

    z-index:2;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #fbf8f3
        );

    width:90%;

    max-width:360px;

    padding:32px;

    border-radius:18px;

    border:1px solid var(--border);

    box-shadow:

        0 25px 65px rgba(42,28,20,.12),

        0 4px 15px rgba(42,28,20,.05);

    box-sizing:border-box;

    overflow:hidden;

}


/* =========================================================
   CARD TOP ACCENT
   ========================================================= */

.card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:

        linear-gradient(
            90deg,
            var(--wine),
            var(--copper),
            var(--gold)
        );

}


/* Decorative corner */

.card::after{

    content:"";

    position:absolute;

    width:120px;
    height:120px;

    right:-70px;
    top:-70px;

    border-radius:50%;

    border:20px solid rgba(184,115,51,.045);

    pointer-events:none;

}


/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group{

    margin-bottom:17px;

}


/* =========================================================
   LABELS
   ========================================================= */

label{

    display:block;

    margin-bottom:7px;

    color:var(--wine);

    font-size:11px;

    font-weight:850;

    letter-spacing:.65px;

    text-transform:uppercase;

}


/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.input-box{

    position:relative;

}


/* =========================================================
   LEFT ICON
   ========================================================= */

.input-box i.left-icon{

    position:absolute;

    left:13px;

    top:50%;

    transform:translateY(-50%);

    color:var(--copper);

    font-size:15px;

    z-index:2;

    pointer-events:none;

}


/* =========================================================
   CHEVRON
   ========================================================= */

.chevron{

    position:absolute;

    right:13px;

    top:50%;

    transform:translateY(-50%);

    color:#8b837d;

    font-size:11px;

    pointer-events:none;

}


/* =========================================================
   INPUTS
   ========================================================= */

input{

    width:100%;

    height:50px;

    padding:0 42px;

    border:

        1.5px solid
        var(--border);

    border-radius:10px;

    font-size:14px;

    font-family:inherit;

    box-sizing:border-box;

    outline:none;

    background:var(--input-bg);

    color:var(--ink);

    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}


/* Focus */

input:focus{

    border-color:

        rgba(100,31,53,.55);

    background:#fff;

    box-shadow:

        0 0 0 3px
        rgba(100,31,53,.07);

}


/* Placeholder */

input::placeholder{

    color:#aaa29b;

}


/* =========================================================
   AUTOFILL
   ========================================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

    -webkit-box-shadow:

        0 0 0 1000px
        var(--input-bg)
        inset !important;

    -webkit-text-fill-color:

        var(--ink) !important;

    transition:

        background-color
        5000s
        ease-in-out
        0s;

}


/* =========================================================
   INPUT ERROR
   ========================================================= */

.input-error{

    border-color:
        var(--error) !important;

    box-shadow:
        0 0 0 3px
        rgba(180,35,24,.06);

}


/* =========================================================
   PHONE FIELD
   ========================================================= */

.phone-row{

    display:flex;

    height:50px;

    border:

        1.5px solid
        var(--border);

    border-radius:10px;

    overflow:hidden;

    background:var(--input-bg);

    transition:

        border-color .25s ease,

        box-shadow .25s ease;

}


.phone-row:focus-within{

    border-color:
        rgba(100,31,53,.55);

    box-shadow:

        0 0 0 3px
        rgba(100,31,53,.07);

}


/* Country prefix */

.prefix{

    background:

        linear-gradient(
            135deg,
            #f4eee6,
            #eee5da
        );

    padding:0 11px;

    display:flex;

    align-items:center;

    gap:5px;

    font-weight:800;

    color:var(--wine);

    border-right:

        1.5px solid
        var(--border);

    min-width:82px;

    font-size:12px;

    white-space:nowrap;

}


/* Phone input */

.phone-row input{

    border:none;

    border-radius:0;

    background:transparent;

    box-shadow:none;

    padding-left:12px;

}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.btn{

    width:100%;

    height:52px;

    margin-top:10px;

    background:

        linear-gradient(
            135deg,
            var(--wine),
            var(--wine-dark)
        );

    color:#fff;

    border:none;

    border-radius:10px;

    font-family:inherit;

    font-size:14px;

    font-weight:800;

    letter-spacing:.25px;

    cursor:pointer;

    box-shadow:

        0 12px 25px
        rgba(100,31,53,.20);

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}


.btn:hover{

    transform:translateY(-2px);

    background:

        linear-gradient(
            135deg,
            #762741,
            #53182b
        );

    box-shadow:

        0 16px 32px
        rgba(100,31,53,.27);

}


.btn:active{

    transform:translateY(0);

}


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

.login-link{

    text-align:center;

    margin-top:21px;

    font-size:13px;

    color:var(--muted);

}


.login-link a{

    color:var(--wine);

    text-decoration:none;

    font-weight:800;

    transition:.2s;

}


.login-link a:hover{

    color:var(--copper);

}


/* =========================================================
   FORGOT PASSWORD
   ========================================================= */

.forgot-link{

    text-align:right;

    margin-top:-7px;

    margin-bottom:16px;

}


.forgot-link a{

    font-size:11px;

    color:var(--copper);

    text-decoration:none;

    font-weight:800;

    transition:.2s;

}


.forgot-link a:hover{

    color:var(--wine);

}


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

.footer-links{

    text-align:center;

    margin-top:21px;

    font-size:12px;

    color:var(--muted);

    line-height:1.7;

}


.footer-links a{

    color:var(--wine);

    text-decoration:none;

    font-weight:800;

}


.footer-links a:hover{

    color:var(--copper);

}


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

#countryModal{

    display:none;

    position:fixed;

    inset:0;

    background:
        rgba(32,18,23,.55);

    backdrop-filter:blur(5px);

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

    z-index:1000;

    align-items:center;

    justify-content:center;

    padding:20px;

}


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

.modal-content{

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #fbf8f3
        );

    width:300px;

    max-width:100%;

    border-radius:16px;

    height:450px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:1px solid var(--border);

    box-shadow:

        0 30px 80px
        rgba(20,10,12,.25);

}


/* =========================================================
   COUNTRY SEARCH
   ========================================================= */

.search-box{

    padding:15px;

    background:#fff;

    border-bottom:
        1px solid
        var(--border);

}


.search-box input{

    height:40px;

    padding:0 13px;

    font-size:13px;

    background:var(--input-bg);

}


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

#countryList{

    overflow-y:auto;

    flex:1;

}


/* Scrollbar */

#countryList::-webkit-scrollbar{

    width:6px;

}

#countryList::-webkit-scrollbar-track{

    background:#f4eee8;

}

#countryList::-webkit-scrollbar-thumb{

    background:#c7b4a5;

    border-radius:20px;

}


/* Country item */

.country-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:13px 15px;

    border-bottom:

        1px solid
        rgba(25,25,25,.055);

    cursor:pointer;

    font-size:13px;

    color:var(--ink-soft);

    transition:

        background .2s ease,

        color .2s ease;

}


.country-item:hover{

    background:#f7f0e8;

    color:var(--wine);

}


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

@media(max-width:480px){

    body{

        padding:
            25px 15px;

    }


    .card{

        width:100%;

        max-width:370px;

        padding:28px 23px;

        border-radius:16px;

    }


    .form-group{

        margin-bottom:15px;

    }


    input{

        height:49px;

    }


    .phone-row{

        height:49px;

    }


    .prefix{

        min-width:78px;

        padding:0 9px;

    }


    .btn{

        height:51px;

    }


    .modal-content{

        width:100%;

        max-width:320px;

        height:430px;

    }

}


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

@media(max-width:360px){

    .card{

        padding:25px 19px;

    }


    input{

        font-size:13px;

    }


    .prefix{

        min-width:73px;

        font-size:11px;

    }


    .login-link,
    .footer-links{

        font-size:12px;

    }

}