@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

:root {
    --border-color:                     #cacaca;

    /* form */
    --radius:                           0.8rem;

    /* msg */
    --msg-bg:                           #F8F9FA;
    --msg-padding:                      1.6rem;
    --msg-color:                        #333;
    --msg-fs:                           1.2rem;
    --msg-radius:                       0.8rem;

    /* bloc */
    --bloc-gap:                         2.4rem;
    --bloc-padding:                     3.2rem;
    --bloc-border:                      1px solid var(--border-color);
    --bloc-radius:                      1.6rem;
    --bloc-s-max-width:                 500px;
    --bloc-m-max-width:                 800px;
    --bloc-part-gap:                    0; /*16px*/

    /* title */
    --title-padding:                    0;
    --title-margin:                     0 0 1.6rem 0;
    --title-weight:                     900;
    --title-lh:                         1.2;
    --title-h1-fs:                      3.2rem;
    --title-h2-fs:                      2.4rem;
    --title-h3-fs:                      2rem;
    --title-h4-fs:                      1.6rem;
    --title-h5-fs:                      1.4rem;
    --title-h6-fs:                      1.2rem;

    /* label */
    --label-fs:                         1.2rem;
    --label-color:                      #6C757D;
}

/* bloc */
.bloc { display:flex; flex-direction:column; gap:var(--bloc-gap); margin:0 auto; padding:var(--bloc-padding); border-radius:var(--bloc-radius); border:var(--bloc-border); }
.bloc-s { max-width:var(--bloc-s-max-width); }
.bloc-m { max-width:var(--bloc-m-max-width); }
.bloc-part { display:flex; flex-direction:column; gap:var(--bloc-part-gap); }

/* title */
.t1, .t2, .t3, .t4, .t5, .t6 { padding:var(--title-padding); margin:var(--title-margin); font-weight:var(--title-weight); line-height:var(--title-lh); }
.t1 { font-size:var(--title-h1-fs); }
.t2 { font-size:var(--title-h2-fs); }
.t3 { font-size:var(--title-h3-fs); }
.t4 { font-size:var(--title-h4-fs); }
.t5 { font-size:var(--title-h5-fs); }
.t6 { font-size:var(--title-h6-fs); }

/* msg */
.msg { background-color:var(--msg-bg); padding:var(--msg-padding); color:var(--msg-color); font-size:var(--msg-fs); border-radius:var(--msg-radius); margin-bottom:var(--bloc-part-gap); }

/* label */
.label { font-size:var(--label-fs); color:var(--label-color); cursor:pointer; }

/* new design */
.nd {
    * { font-family:'Roboto', sans-serif; }
    .form-group { margin-bottom:1.6rem !important; }
    .form-check-label { cursor:pointer; }
    .form-control { border-radius:var(--radius) !important; }
    .link-s { font-size:1.4rem; text-decoration:underline; }
    .btn { border-radius:var(--radius); }
    .btn-sv { padding:.8rem 1.6rem !important; }
}

/* sticky */
.sticky-down { background:#fff; padding:.8rem; display:flex; justify-content:space-between; position:fixed; width:100%; bottom:-100px; left:0; z-index:100; align-items:flex-end; border-top:1px solid #cacaca; z-index:1200; box-shadow:0px 0px 1rem 0px rgba(0,0,0,0.2); transition:all .25s ease-in-out 0.25s; max-height:100px; }
@media (max-width:767px) {
    .sticky-down { display:none !important; }
}
.scrolled .sticky-down { bottom:0; }
.sticky-name { font-weight:bold; font-size:2rem; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:2.4rem; }
.sticky-add { display:flex; gap:.8rem; align-items:center; }
.sticky-price { font-weight:bold; font-size:2rem; }