/* Order: free trial - the magic bee "creating your classes" for a few seconds after the order is sent (#trialCreating), then
   the end screen (order/index.php #trialReady, js/order.js renderTrialReady): the instructions PDF + what to do next.
   Soft cards in the look of the redesigned app. */

/* the bee overlay over the whole page */
.wbTrialCreating {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: #f1f1f1 url("../img/bg_app.jpg") repeat; /* the app background (light honeycombs) - solid, nothing of the page shines through */
}
.wbTrialCreating.d-none { display: none; }
.wbTrialCreating.is-leaving { opacity: 0; transition: opacity .5s ease; } /* fades out to the end screen */
.wbTrialCreating-inner { text-align: center; padding: 1rem; }
.wbTrialCreating-logo { display: block; width: 170px; height: auto; margin: 0 auto 18px; }
.wbTrialCreating-bee { width: 220px; max-width: 60vw; height: auto; animation: wbTrialBeeFloat 2.4s ease-in-out infinite; }
.wbTrialCreating-text { margin-top: .4rem; font-size: 1.35rem; font-weight: 800; color: #2e2a22; }

/* honeycombs as a progress bar: orange -> green from left to right (js/order.js), at the end a white check in each */
.wbTrialCreating-hexes { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.wbTrialCreating-hexes span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 36px; background: #f8ab21;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transition: background-color .4s ease, transform .4s ease;
}
.wbTrialCreating-hexes span.is-done { background: #28a745; transform: scale(1.08); }
.wbTrialCreating-hexes span i { color: #fff; font-size: 14px; opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .3s ease; }
.wbTrialCreating-hexes.is-checked span i { opacity: 1; transform: scale(1); }

@keyframes wbTrialBeeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .wbTrialCreating-bee { animation: none; }
}

/* the end screen */
.wbTrialReady { width: 100%; max-width: 760px; margin: 0 auto; text-align: left; }

.wbTrialReady-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.wbTrialReady-check {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #e3f6e8; color: #1e8e3e; font-size: 1.3rem;
}
.wbTrialReady-title { margin: 0; font-size: 1.45rem; font-weight: 800; color: #2e2a22; }
.wbTrialReady-sub { margin: .1rem 0 0; color: #5c5547; }

/* the main thing: the instructions PDF */
.wbTrialReady-main { margin-bottom: 1.2rem; padding: 1rem 1.1rem; background: #f3fbf5; border: 1px solid #cdebd6; border-radius: 14px; }
.wbTrialReady-lastStep { margin: 0; font-weight: 800; color: #14632b; }
.wbTrialReady-lastStepDesc { margin: .15rem 0 .75rem; color: #2e2a22; }
.wbTrialReady-pdfMain { border-radius: 999px; font-weight: 700; padding: .55rem 1.3rem; font-size: 1.05rem; }

/* the order page uppercases .btn - the labels read better as they are */
.wbTrialReady .btn { text-transform: none; letter-spacing: normal; }

/* the 4 steps as tiles: 2 x 2, one under the other on phones */
.wbTrialReady-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.wbTrialReady-step {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .75rem .85rem; background: #fff; border: 1px solid #EDE4D2; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(46, 42, 34, .06), 0 8px 20px -12px rgba(46, 42, 34, .18);
}
.wbTrialReady-stepNo {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-top: .25rem;
    border-radius: 50%; background: #f8ab21; color: #fff; font-weight: 800; font-size: .85rem;
}
.wbTrialReady-stepIcon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
    border-radius: 10px; background: #fff2e0; color: #e09310;
}
.wbTrialReady-stepText { font-size: .92rem; line-height: 1.4; color: #2e2a22; }

.wbTrialReady-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.wbTrialReady-cta .btn { border-radius: 999px; font-weight: 700; padding: .45rem 1.1rem; }

.wbTrialReady-mail { margin: 0 0 1rem; font-size: .88rem; color: #6c757d; }

@media (max-width: 575px) {
    .wbTrialReady-title { font-size: 1.2rem; }
    .wbTrialReady-steps { grid-template-columns: 1fr; }
    .wbTrialReady-cta .btn, .wbTrialReady-pdfMain { width: 100%; }
    .wbTrialCreating-text { font-size: 1.15rem; }
}

/* free trial: the contact step asks only for the name, e-mail and school - type of customer, phone, address, region / district
   and note belong to the paid order (#orderForm.wb-trial-order: order/index.php, js/order.js) */
#orderForm.wb-trial-order .trial-hide,
#orderForm.wb-trial-order .district-required { display: none !important; }

/* "did you know?" - one of the two things teachers notice (index.php "what teachers notice"), fades in under the bee */
.wbTrialCreating-tip {
    max-width: 420px; margin: 18px auto 0; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #EDE4D2;
    box-shadow: 0 8px 20px -12px rgba(46, 42, 34, .3); font-size: 15px; line-height: 1.45; color: #4a4f55; text-align: left;
    opacity: 0; animation: wbTrialTipIn .5s ease .6s forwards;
}
.wbTrialCreating-tipTitle { font-weight: 800; color: #e09310; }
@keyframes wbTrialTipIn { to { opacity: 1; } }
@media (max-width: 575px) { .wbTrialCreating-tip { font-size: 14px; margin-left: 12px; margin-right: 12px; } }