:root {
    color-scheme:                       only light;
}

* {
    box-sizing:                         border-box;
    margin: 						    0;
    padding: 						    0;
    -ms-touch-action:                   manipulation;
    touch-action:                       manipulation;
}

html, body, button {
    font-family:                        'Haffer', sans-serif;
    font-size:                          14px;
    font-weight:                        430;
    letter-spacing:                     0.02em;
    color:                              #4C1D08;
    background:                         #FFFFFF;
    -webkit-font-smoothing:             antialiased;
}





/*--   APPLICATION FRAME   --*/

#frame {
    position:                           absolute;
    height:                             100%;
    width:                              100%;
    top:                                0;
    bottom:                             0;
    overflow-y:                         hidden;
}

#app {
    position:                           relative;
    display:                            grid;
    overflow-x:                         hidden;
    overflow-y:                         scroll;
    height:                             100%;
    width:                              100%;
}

#app::-webkit-scrollbar {
    display:                            none;
}





/*--   OBJECTS   --*/

.button {
    height:                             49px;
    white-space:                        nowrap;
    text-align:                         center;
    padding:                            15px 0;
    border-radius:                      7px;
    cursor:                             pointer;
    border:                             1px solid #FF6417;
}

.button.primary {
    background:                         #FF6417;
    color:                              #FFFFFF;
}

.button.primary:hover {
    background:                         #FF7F3D;
}

.button.primary.large {
    height:                             55px;
    font-size:                          15px;
    padding:                            17px 0;
    font-weight:                        570;
}

.button.transparent {
    background:                         transparent;
    color:                              #FF6417;
    font-weight:                        570;
}

.button.transparent:hover {
    background:                         #FFF3EE;
}



.button-close {
    width:                              35px;
    height:                             35px;
    border-radius:                      50%;
    background:                         #FF6417;
    color:                              #FFFFFF;
    padding:                            11.5px;
    cursor:                             pointer;
}

.button-close:hover {
    background:                         #FF7F3D;
}



.hyperlink {
    color:                              #FF6417;
    font-weight:                        670;
    cursor:                             pointer;
    text-decoration:                    underline;
}





/*--   FORMS   --*/

input,
select,
textarea {
    width:                              100%;
    padding:                            0 0 0 20px;
    color:                              #4C1D08;
    background:                         none;
    font-family:                        'Haffer', sans-serif;
    font-weight:                        430;
    font-size:                          14px;
    border-radius:                      7px;
    border:                             none;
    outline:                            none;
}

input,
select {
    height:                             47px;
}

input,
textarea {
    cursor:                             text;
}

select {
    padding:                            0 20px;
    cursor:                             pointer;
    width:                              100%;
    appearance:                         none;
}

textarea {
    height:                             180px;
    padding:                            15px 20px;
    resize:                             none;
}

input[type=time] {
    padding-right:                      14px;
}

input[type=date] {
    padding-right:                      14px;
}

.input-box,
.input-top {
    display:                            flex;
    align-items:                        center;
    width:                              100%;
}

.input-box {
    margin-bottom:                      21px;
    border-radius:                      7px;
    border:                             #FFF3EE 1px solid;
    background:                         #FFFFFF;
}

.input-box.invalid {
    border-color:                       #FF6666;
}

.input-box:has(input:not(:placeholder-shown)) {
    border-color:                       #FF6417 !important;
    outline:                            none;
}

.input-box:focus-within {
    border-color:                       #FF6417 !important;
    background:                         #FFF3EE;
    outline:                            none;
}

.input-box .icon {
    height:                             21px;
    margin:                             12px 16.5px 0;
    z-index:                            10;
}

.input-tag {
    margin:                             7px 7px 14px;
    font-weight:                        570;
    font-size:                          13px;
    line-height:                        13px;
}

.input-note,
.input-counter {
    margin:                             0 2px 0 auto;
    font-size:                          12px;
    line-height:                        12px;
}

.input-counter {
    font-weight:                        570;
}

.input-error {
    font-size: 12px;
    position: absolute;
    color: #FF6666;
    margin: 70px 0 0 3px;
}

.input-error.recaptcha {
    position: relative;
    margin: -21px 0 35px;
}

input:-webkit-autofill {
    -webkit-box-shadow:                 none;
}

input:-webkit-autofill::first-line {
    font-family:                        'Haffer', sans-serif;
    font-size:                          14px;
}

::placeholder,
::-ms-input-placeholder,
:-ms-input-placeholder {
    color:                              #4C1D0840;
}



.color-pick {
    position: relative;
    margin-bottom: 28px;
}

.color-pick-top {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.color-pick-top .color-pick-tag {
    font-size: 13px;
    font-weight: 570;
}

.color-pick-top .color-pick-note {
    font-size: 12px;
    font-weight: 430;
    margin-left: auto;
}

.color-pick-wrap {
    position: relative;
}

.color-pick-box {
    pointer-events: none;
    display: flex;
    align-items: center;
    height: 45px;
    padding: 0 18px 0 16.5px;
    border: 1px solid #FFF3EE;
    border-radius: 7px;
}

.color-pick-wrap input {
    position: absolute;
    opacity: 0;
    border-radius: 0;
    height: 47px;
    cursor: pointer;
    padding: 0;
    top: 0;
}

.color-pick-wrap .color-indicator {
    width: 17.5px;
    height: 17.5px;
    border-radius: 50%;
    margin-right: 10px;
}

.color-pick-wrap img {
    height: 12px;
    margin-left: auto;
}



.radio {
    display:                            flex;
    align-items:                        center;
    height:                             49px;
    padding:                            0 13px 0 16.5px;
    border-radius:                      7px;
    border:                             1px solid #FF6417;
    cursor:                             pointer;
}

.radio .label {
    margin-right:                       auto;
}

.radio .empty {
    height:                             21px;
    width:                              21px;
    border-radius:                      50%;
    border:                             1px solid #FFF3EE;
}

.radio .check {
    display:                            none;
    height:                             21px;
    width:                              21px;
}

.radio:hover,
.radio:hover .empty {
    border-color:                       #FF6417;
}

.radio.checked {
    font-weight:                        570;
    background:                         #FFF3EE;
}

.radio.checked .check {
    display:                            block;
}

.radio.checked .empty {
    display:                            none;
}



.loader {
    border:                             4px solid #4C1D0840;
    border-top:                         4px solid #4C1D08;
    border-radius:                      50%;
    width:                              64px;
    height:                             64px;
    animation:                          spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/*--   COMPONENTS   --*/

.block {
    display:                            grid;
    padding:                            31.5px 28px;
    margin:                             0 7px 7px;
    border-radius:                      14px;
    background:                         #FFFFFF;
}



.buttons,
.inputs {
    display:                            grid;
    grid-auto-flow:                     column;
    grid-gap:                           14px;
    grid-template-columns:              repeat(auto-fit, minmax(0,1fr));
}

.buttons .button {
    width:                              100%;
}





.prompt {
    display:                            none;
    position:                           absolute;
    place-self:                         center;
    max-width:                          414px;
    width:                              100%;
    height:                             auto;
    bottom:                             0;
    padding:                            38.5px 35px 31.5px;
    border-radius:                      14px 14px 0 0;
    background:                         #FFFFFF;
    opacity:                            0;
    transition:                         .2s ease all;
    z-index:                            100;
    transform:                          translateY(35px);
    box-shadow:                         -1.5px -1.5px 4px 0px hsla(19, 81%, 16%, 0.07);
}

.prompt.open {
    opacity:                            1;
    transform:                          translateY(0);
}

.prompt .title {
    font-size:                          17.5px;
    line-height:                        17.5px;
    font-weight:                        570;
    margin-bottom:                      14px;
}

.prompt .content {
    line-height:                        21px;
    margin-bottom:                      28px;
}



.language-selector {
    position:                           relative;
    cursor:                             pointer;
}

.language-selector .current {
    border-radius:                      7px;
}

.language-selector .item {
    display:                            flex;
    align-items:                        center;
    height:                             34px;
    width:                              126px;
    padding:                            0 13px;
    font-size:                          14px;
    line-height:                        14px;
    font-weight:                        570;
    border:                             1px solid #FF6417;
    color:                              #FF6417;
}

.language-selector img {
    width:                              11.5px;
    margin-left:                        auto;
}

.language-selector.open .current {
    border-radius:                      7px 7px 0 0;
}

.language-selector.open img {
    transform:                          rotate(180deg);
}

.language-selector .dropdown {
    position:                           absolute;
    display:                            none;
}

.language-selector .dropdown .item {
    border-top:                         none;
    border-radius:                      0 0 7px 7px;
}

.language-selector .dropdown .item:hover {
    background:                         #FFF3EE;
}

.language-selector.open .dropdown {
    display:                            grid;
}



#cards {
    position:                           absolute;
    place-self:                         center;
    height:                             90%;
    z-index:                            -10;
}



#modal-crop {
    position:                           absolute;
    display:                            grid;
    grid-template-columns:              14px 1fr minmax(0, 720px) 1fr 14px;
    grid-template-rows:                 1fr auto 1fr;
    grid-template-areas:                ". . . . ."
                                        ". . inner . ."
                                        ". . . . .";
    width:                              100%;
    height:                             100%;
    left:                               0;
    top:                                0;
    z-index:                            100;
    background:                         #00000088;
}

#modal-crop .box {
    grid-area:                          inner;
    border:                             #FFF3EE 1px solid;
    background:                         #FFFFFF;
    box-shadow:                         -1.5px -1.5px 4px 0px #4C1D0812;
    border-radius:                      21px;
}

#modal-crop .img-container {
    max-height:                         300px;
    margin:                             35px 28px 0;
}

#modal-crop p {
    padding:                            28px 28px 0;
}

#modal-crop .buttons {
    padding:                            35px 28px;
}

#modal-crop form {
    display:                            none;
}

#modal-crop .loading {
    display:                            none;
    grid-area:                          inner;
    place-items:                        center;
}





/*--   MOBILE QUERY   --*/

@media only screen and (max-width: 720px) {



}





/*--   FONTS   --*/

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Thin.otf') format("opentype");
    font-weight:                        200;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Light.otf') format("opentype");
    font-weight:                        300;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Regular.otf') format("opentype");
    font-weight:                        430;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Medium.otf') format("opentype");
    font-weight:                        570;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-SemiBold.otf') format("opentype");
    font-weight:                        670;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Bold.otf') format("opentype");
    font-weight:                        790;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Black.otf') format("opentype");
    font-weight:                        1000;
}





/*--   REMOVE CLEAR CROSS FROM INPUT FIELDS IN IE AND CHROME   --*/

input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }





/*--   DISABLE SELECTING   --*/

.button, .radio, .language-selector, .links .link * {
    -webkit-tap-highlight-color:        transparent;
    -webkit-touch-callout:              none;
    -webkit-user-select:                none;
    -moz-user-select:                   none;
    -ms-user-select:                    none;
    user-select:                        none;
}