/* ==========================================================================
   Bang Media order form
   The wh-* rules are lifted from the inline stylesheet on
   https://www.bangmedia.com.au/web-hosting so the cards in the portal and the
   cards on the website are the same component, not an approximation.

   Loaded from products.tpl, inside the body, which means it lands after the
   theme's custom.css. Nothing here needs !important as a result.
   ========================================================================== */

.wh-order {
    --wh-ink:      #e9f4fa;
    --wh-body:     #c4d6df;
    --wh-muted:    #8aa4b3;
    --wh-line:     #1e2731;
    --wh-blue:     #9cdaeb;
    --wh-blue-lit: #bfe8f4;
    --wh-mint:     #5beeb9;

    max-width: 1120px;
    margin: 0 auto;
    padding: 0 0 1rem;
    font-family: 'BangBody', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- section heading ---- */

.wh-order .wh-sec-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 1.4rem;
}

.wh-order .wh-sec-head h2 {
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--wh-ink);
    margin: 0;
}

.wh-order .wh-sec-head p {
    color: var(--wh-muted);
    margin: 0.5rem 0 0;
}

/* ---- monthly / annual toggle ---- */

.wh-order .wh-toggle {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 0.4rem;
    background: #0e1319;
    border: 1px solid var(--wh-line);
    border-radius: 2rem;
    padding: 0.32rem;
    margin: 0 auto 2.2rem;
}

.wh-order .wh-tg {
    position: relative;
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--wh-muted);
    background: transparent;
    border: 0;
    border-radius: 2rem;
    padding: 0.5rem 1.3rem;
    cursor: pointer;
    transition: background 180ms, color 180ms;
}

.wh-order .wh-tg:hover { color: var(--wh-ink); }

.wh-order .wh-tg-on,
.wh-order .wh-tg-on:hover {
    background: var(--wh-blue);
    color: #04121a;
}

.wh-order .wh-tg:focus-visible {
    outline: 2px solid var(--wh-blue);
    outline-offset: 2px;
}

.wh-order .wh-tg-save {
    position: absolute;
    top: -0.62rem;
    right: -0.4rem;
    background: var(--wh-mint);
    color: #04121a;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.14rem 0.5rem;
    border-radius: 1rem;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* ---- GST note ---- */

.wh-order .wh-gst {
    text-align: center;
    margin: -1.2rem 0 1.8rem;
    font-size: 0.85rem;
    color: var(--wh-muted);
}

/* ---- plan cards ---- */

.wh-order .wh-plans {
    display: grid;
    gap: 1.1rem;
    max-width: 1120px;
    margin: 0 auto;
}

.wh-order .wh-plans.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wh-order .wh-plans.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }

@media (max-width: 900px) {
    .wh-order .wh-plans.cols-3,
    .wh-order .wh-plans.cols-2 {
        grid-template-columns: minmax(0, 1fr);
        max-width: 460px;
    }
}

.wh-order .wh-plan {
    position: relative;
    background: linear-gradient(235.6deg, #0c0e11 60%, #07161e 92%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.4rem;
    padding: 2rem 1.7rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
    transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}

.wh-order .wh-plan:hover {
    border-color: rgba(156, 218, 235, 0.33);
    box-shadow: 0 0 70px -22px rgba(156, 218, 235, 0.27);
    transform: translateY(-4px);
}

.wh-order .wh-plan:hover .wh-cta {
    background: var(--wh-blue);
    color: #04121a;
    border-color: var(--wh-blue);
    box-shadow: 0 0 26px 4px rgba(156, 218, 235, 0.2);
}

.wh-order .wh-plan.wh-featured {
    border-color: rgba(156, 218, 235, 0.33);
    box-shadow: 0 0 70px -22px rgba(156, 218, 235, 0.27);
}

.wh-order .wh-plan.wh-featured:hover .wh-cta {
    background: var(--wh-blue-lit);
    border-color: var(--wh-blue-lit);
}

@media (prefers-reduced-motion: reduce) {
    .wh-order .wh-plan { transition: none; }
    .wh-order .wh-plan:hover { transform: none; }
}

.wh-order .wh-badge {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wh-blue);
    color: #000;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.28rem 0.7rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.wh-order .wh-plan h3 {
    margin: 0 0 0.2rem;
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--wh-ink);
}

.wh-order .wh-plan .wh-for {
    margin: 0 0 1.2rem;
    font-size: 0.88rem;
    color: var(--wh-muted);
    line-height: 1.45;
    min-height: 2.4rem;
}

/* ---- price ---- */

.wh-order .wh-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.wh-order .wh-price .wh-amt {
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.wh-order .wh-price .wh-per { font-size: 0.9rem; color: var(--wh-muted); }

.wh-order .wh-annual-note {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #b6cdd9;
    min-height: 1.1rem;
}

.wh-order .wh-annual-note .wh-2mo { color: var(--wh-mint); font-weight: 600; }

.wh-order .wh-setup {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--wh-muted);
}

/* ---- feature list ---- */

.wh-order .wh-plan > ul {
    list-style: none;
    margin: 1.3rem 0 1.4rem;
    padding: 1.3rem 0 0;
    border-top: 1px solid var(--wh-line);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 0 auto;
}

.wh-order .wh-plan > ul > li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--wh-body);
    line-height: 1.4;
}

.wh-order .wh-plan > ul > li svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    stroke: var(--wh-mint);
    stroke-width: 2.2;
    fill: none;
    margin-top: 0.15rem;
}

/* ---- call to action ---- */

.wh-order .wh-cta {
    display: block;
    text-align: center;
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.72rem 1rem;
    border-radius: 2rem;
    text-decoration: none;
    border: 1px solid rgba(156, 218, 235, 0.33);
    color: var(--wh-blue);
    transition: background 180ms, color 180ms, border-color 180ms;
}

.wh-order .wh-cta:hover,
.wh-order .wh-cta:focus {
    background: var(--wh-blue);
    color: #04121a;
    text-decoration: none;
}

.wh-order .wh-plan.wh-featured .wh-cta {
    background: var(--wh-blue);
    color: #04121a;
    border-color: var(--wh-blue);
}

.wh-order .wh-plan.wh-featured .wh-cta:hover { background: var(--wh-blue-lit); }

.wh-order .wh-cta-off {
    border-color: var(--wh-line);
    color: var(--wh-muted);
    cursor: not-allowed;
}

.wh-order .wh-plan:hover .wh-cta-off {
    background: transparent;
    color: var(--wh-muted);
    border-color: var(--wh-line);
    box-shadow: none;
}

/* ---- "included with every plan" strip ---- */

.wh-order .wh-includes { max-width: 900px; margin: 3rem auto 0; }

.wh-order .wh-includes-head {
    text-align: center;
    border-top: 1px solid var(--wh-line);
    line-height: 0;
    margin-bottom: 1.8rem;
}

.wh-order .wh-includes-head span {
    background: #0b0e12;
    color: var(--wh-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: 0 18px;
    position: relative;
    top: -0.5em;
}

.wh-order .wh-includes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem 1.4rem;
}

@media (max-width: 820px) { .wh-order .wh-includes-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wh-order .wh-includes-list { grid-template-columns: minmax(0, 1fr); } }

.wh-order .wh-includes-list li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.88rem;
    color: var(--wh-body);
}

.wh-order .wh-includes-list li svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    stroke: var(--wh-mint);
    stroke-width: 2.2;
    fill: none;
    margin-top: 0.2rem;
}

/* ---- free first year, plugin suite, enterprise ----
   Values below are the website's own, taken from the inline stylesheet on
   /web-hosting, so the two pages render the same component. Every selector is
   scoped under .wh-order rather than left global, because this file loads into
   the client area where a bare .wh-plugin could collide with something else.

   The one deliberate difference is the enquiry links, which are absolute and
   open in a new tab: they leave the portal subdomain, and section 4 of the
   theme's hooks does the same for every other off-subdomain link. */

.wh-order .wh-free-year {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 1000px;
    margin: 3rem auto 0;
    background: linear-gradient(235.6deg, #0c1310 55%, #07161e 95%);
    border: 1px solid #5beeb955;
    border-radius: 1.4rem;
    padding: 1.3rem 2rem;
    box-shadow: 0 0 60px -25px #5beeb944;
}

.wh-order .wh-free-year svg {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--wh-mint);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wh-order .wh-free-year b {
    display: block;
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    color: var(--wh-ink);
    font-size: 1.02rem;
}

.wh-order .wh-free-year span {
    display: block;
    font-size: 0.92rem;
    color: var(--wh-muted);
    margin-top: 0.15rem;
}

/* The plugin callout sits directly on the page, no outer box. */

.wh-order .wh-callout {
    max-width: 1000px;
    margin: 3rem auto 0;
    text-align: center;
}

.wh-order .wh-callout h4 {
    margin: 0 0 0.45rem;
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    font-size: 1.15rem;
    color: var(--wh-ink);
}

.wh-order .wh-callout p {
    margin: 0 auto 1.4rem;
    font-size: 0.94rem;
    line-height: 1.55;
    color: #9fb6c4;
    max-width: 640px;
}

.wh-order .wh-plugins {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
}

.wh-order .wh-plugin {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0.4rem 0;
}

.wh-order .wh-plugin-ico { width: 34px; height: 34px; flex: 0 0 auto; }
.wh-order .wh-plugin > div { min-width: 0; }

.wh-order .wh-plugin b {
    display: block;
    color: var(--wh-ink);
    font-size: 0.92rem;
    overflow-wrap: break-word;
}

.wh-order .wh-plugin span {
    display: block;
    font-size: 0.8rem;
    color: var(--wh-muted);
    overflow-wrap: break-word;
}

.wh-order .wh-enterprise {
    max-width: 1000px;
    margin: 3.75rem auto 0;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    background: linear-gradient(255deg, #081019 38%, #0a2436 100%);
    border: 1px solid #9cdaeb4d;
    border-radius: 1.4rem;
    padding: 1.2rem 1.6rem;
    box-shadow: 0 0 70px -30px #9cdaeb66;
    overflow: hidden;
}

.wh-order .wh-enterprise .wh-ent-copy { flex: 1 1 auto; min-width: 0; }

.wh-order .wh-enterprise h4 {
    margin: 0 0 0.4rem;
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    font-size: 1.18rem;
    color: var(--wh-ink);
}

.wh-order .wh-enterprise p {
    margin: 0 0 1.05rem;
    font-size: 0.94rem;
    line-height: 1.55;
    color: #9fb6c4;
    max-width: 520px;
}

/* Not `.wh-plan .wh-cta`, which is the plan button and is block width. This one
   is a single inline button inside the panel. */
.wh-order .wh-enterprise .wh-cta {
    display: inline-block;
    width: auto;
    padding: 0.62rem 1.5rem;
    background: var(--wh-blue);
    color: #04121a;
    border: 1px solid var(--wh-blue);
    border-radius: 2rem;
    font-family: 'BangDisplay', 'Satoshi', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.18s;
}

.wh-order .wh-enterprise .wh-cta:hover { background: var(--wh-blue-lit); }

.wh-order .wh-enterprise .wh-ent-img {
    flex: 0 0 auto;
    width: 180px;
    height: 180px;
    object-fit: contain;
}

@media (max-width: 720px) {
    .wh-order .wh-plugins { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .wh-order .wh-enterprise {
        flex-direction: column-reverse;
        text-align: center;
        gap: 0.5rem;
        padding: 1.3rem 1.2rem;
    }
    .wh-order .wh-enterprise p { margin-left: auto; margin-right: auto; }
    .wh-order .wh-enterprise .wh-ent-img { width: 150px; height: 150px; }
}

@media (max-width: 560px) {
    .wh-order .wh-free-year { padding: 1.1rem 1.2rem; gap: 0.85rem; }
}

@media (max-width: 420px) {
    .wh-order .wh-plugins { grid-template-columns: 1fr; }
}