/* Copyright (C) 2026 Leslie Birdwhistell, LCSW, BCBA. All rights reserved. */

@font-face {
 font-family: open_sans_reg_reg_light;
 src:         url('assets/fonts/open_sans_reg_reg_light.woff');
}

@font-face {
 font-family: open_sans_reg_reg_reg;
 src:         url('assets/fonts/open_sans_reg_reg_reg.woff');
}

@font-face {
 font-family: open_sans_reg_reg_bold;
 src:         url('assets/fonts/open_sans_reg_reg_bold.woff');
}

* {
 margin:                      0;
 padding:                     0;
 outline:                     0;
 user-select:                 none;
 tap-highlight-color:         transparent;
 -webkit-user-select:         none;
 -webkit-tap-highlight-color: transparent;
}

::placeholder { color: #e8e8e8; }

html { background: #eeeae8; }

body {
 max-width: 1024px;
 margin:    0 auto;
 font:      normal normal normal 16px/20px open_sans_reg_reg_light,arial,sans-serif;
 color:     #404040;
}

form {
 margin:    0 auto;
 max-width: 800px;
}

header,
footer { background: #ffffff; }

header {
 display:     flex;
 flex-flow:   row nowrap;
 align-items: center;
 gap:         0 18px;
 padding:     20px;
 font:        normal normal normal 24px/26px open_sans_reg_reg_reg,arial,sans-serif;
}

header > .photo {
 flex:            0 0 auto;
 height:          50px;
 width:           50px;
 border-radius:   50%;
 background:      transparent url('assets/images/lb_photo.jpg') no-repeat center center;
 background-size: cover;
}

header > div:nth-of-type(2) { flex: 1 0 auto; }

header > div > aside {
 font:  normal normal normal 18px/18px open_sans_reg_reg_light,arial,sans-serif;
 color: #808080;
}

header span {
 font:  normal normal normal 20px/20px open_sans_reg_reg_light,arial,sans-serif;
 color: #c0c0c0;
}

h1 {
 margin-bottom: 20px;
 font:          normal normal normal 28px/28px open_sans_reg_reg_bold,arial,sans-serif;
}

h6 {
 font:           normal normal normal 14px/20px open_sans_reg_reg_bold,arial,sans-serif;
 letter-spacing: 1px;
 text-transform: uppercase;
}

h6 > span { color: #f00000; }

footer {
 padding:    40px 20px;
 text-align: center;
}

footer > .evergreen {
 height:          128px;
 width:           128px;
 margin:          0 auto 30px auto;
 background:      transparent url('assets/images/evergreen.jpg') no-repeat center center;
 background-size: cover;
}

footer > a { color: #4b3c40; }

input[type=email],
input[type=phone],
input[type=text],
select,
textarea,
.question {
 padding:       0 15px;
 border-radius: 10px;
 background:    #ffffff;
 font:          normal normal normal 16px/16px open_sans_reg_reg_reg,arial,sans-serif;
}

input[type=email],
input[type=phone],
input[type=text],
select,
textarea { border: 1px solid #c0c0c0; }

input[type=email],
input[type=phone],
input[type=text] {
 height: 48px;
 width:  calc(100% - 32px);
}

input[type=email].inv,
input[type=phone].inv,
input[type=text].inv {
 border-color: transparent;
 background:   #800000;
 color:        #ffffff;
}

input[type=radio],
label { flex: 0 0 auto; }

input[type=radio] {
 height: 30px;
 width:  30px;
 margin: 0 5px 0 20px;
}

input[type=submit] {
 display: none;
 height:  0;
 width:   0;
}

select {
 height: 50px;
 width:  100%;
}

select > option:disabled { color: #c0c0c0; }

textarea {
 min-height:    100px;
 max-height:    300px;
 width:         calc(100% - 32px);
 margin-bottom: -4px;
 padding:       10px 15px;
 resize:        vertical;
}

.btn {
 display:         block;
 flex:            0 0 auto;
 height:          50px;
 padding:         0 5px;
 border-radius:   10px;
 background:      #0076a3;
 font:            normal normal normal 18px/48px open_sans_reg_reg_bold,arial,sans-serif;
 text-align:      center;
 text-decoration: none;
 white-space:     nowrap;
 color:           #ffffff;
}

.btn.back {
 width:      200px;
 margin-top: 50px;
}

.btn.dis {
 background: #e8e8e8;
 color:      #f0f0f0;
}

.btn:not(.dis):active { opacity: .5; }

.btn.svc {
 display:     none;
 height:      100px;
 margin-top:  20px;
 line-height: 18px;
}

.btn.svc.shown,
#details.shown { display: block; }

.btn > aside {
 padding-top: 32px;
 opacity:     .5;
 font:        normal normal normal 14px/18px open_sans_reg_reg_reg,arial,sans-serif;
}

.caption {
 float: right;
 font:  normal normal normal 14px/20px open_sans_reg_reg_reg,arial,sans-serif;
 color: #c0c0c0;
}

.caption.inv { color: #f00000; }

.question {
 display:     flex;
 flex-flow:   row nowrap;
 align-items: center;
}

.question > div {
 flex: 1 1 auto;
 font: normal normal normal 16px/48px open_sans_reg_reg_reg,arial,sans-serif;
}

#avail {
 display:     flex;
 flex-flow:   row nowrap;
 align-items: center;
 gap:         0 10px;
 height:      50px;
 padding:     20px;
 font:        normal normal normal 14px/18px open_sans_reg_reg_reg,arial,sans-serif;
}

#avail.pos {
 background: #a8c6d4;
 color:      #0076a3;
}

#avail.neg {
 background: #000000;
 color:      #c0c0c0;
}

#avail > div {
 flex:       1 1 auto;
 max-height: 50px;
 overflow:   hidden;
}

#avail > .btn { padding: 0 10px; }

#avail.neg > div { text-align: center; }

#blossom {
 margin-bottom: 40px;
 padding:       10px 0;
 border-radius: 10px;
 background:    #ffffff;
}

#blossom.inv {
 background: #800000;
 color:      #ffffff;
}

#blossom > div {
 display:         flex;
 flex-flow:       row nowrap;
 align-items:     center;
 justify-content: center;
 gap:             0 20px;
}

#blossom > div > svg {
 height:          48px;
 width:           48px;
 border:          1px solid transparent;
 border-radius:   50%;
 cursor:          pointer;
 stroke:          #808080;
 stroke-width:    4px;
 stroke-linejoin: round;
 fill:            none;
}

#blossom.inv > div > svg { stroke: #c08080; }

#blossom > div > svg.sel {
 border-color: #0075ff;
 background:   #ffffff;
 stroke:       #0075ff;
}

#blossom.inv > div > svg.sel {
 border-color: #f00000;
 stroke: #f00000;
}

#blossom > div > svg > circle {
 cy: 24px;
 cx: 24px;
 r:  13px;
}

#blossom > div > svg > rect {
 height: 26px;
 width:  26px;
 y:      11px;
 x:      11px;
}

#blossom > aside { text-align: center; }

#details { display: none; }

#dots {
 display:         none;
 flex-flow:       row nowrap;
 align-items:     center;
 justify-content: center;
 gap:             0 20px;
 margin-top:      20px;
}

#dots.shown { display: flex; }

#dots > aside {
 flex:          0 0 auto;
 height:        50px;
 width:         50px;
 border-radius: 50%;
 background:    #e8e8e8;
}

#panel_0 {
 padding:    20px 20px 40px 20px;
 background: #f7f5f4;
}

#panel_2,
#panel_3,
#panel_4 { padding: 20px 20px 40px 20px; }

#panel_2,
#panel_4 { color: #ffffff; }

#panel_1 {
 height:     510px;
 background: #ded6d2 url('assets/images/lb_blossoms.jpg') no-repeat right bottom;
 color:      #4b3c40;
}

#panel_1 > .overlay {
 height:  100%;
 padding: 20px;
}

#panel_2 { background: #8a7c80; }
#panel_3 { background: #f9f0ec; }
#panel_4 { background: #61666f; }

#st_age_neg { accent-color: #f00000; }

#st_ins { margin-bottom: 20px; }

#st_send { margin-top: 16px; }

#stc_nam,
#stc_eml,
#stc_phn,
#stc_spm { display: none; }

/* queries */

@media screen and (width < 430px) {
 .extra { display: none; }
 #panel_1 { background-position: 100px bottom; }
 #panel_1 > .overlay { background: linear-gradient(to bottom, #ded6d2 15%, #ded6d2e0 50%, transparent 65%); }
}

@media screen and (width > 429px) {
 #panel_1 > .overlay { width: calc(100% - 300px); }
}