/**
 * GFunnel — "Book a demo": the picker card and the /demo page
 * (inc/gf_booking_blocks.inc.php).
 *
 * TWO very different jobs, deliberately:
 *
 *   .gfbk-card  the panel in the left column of the workspace picker. It is
 *               SUBTLE by design — the picker's own card style (white,
 *               hairline #e6e8ec, 12px radius) with one small orange mark.
 *               No gradient, no form, no second button. The member came to
 *               that page to open a workspace; this states the offer once and
 *               gets out of the way.
 *   .gfbk-page  the /demo page, where there is room to explain and ask.
 *
 * Self-contained: the card loads from a <link> emitted mid-page (it can be a
 * service block on a page whose head is already closed), so this file declares
 * every value it uses and inherits no tokens.
 */

/* =========================================================================
   The card — a banner card in the picker's SIDE column, under "Earn"
   ========================================================================= */

/* The reference's promo shape at sidebar scale. Geometry matches .gf-ws-card
   (12px radius, 24px padding) so it sits in that column's rhythm; the colours
   are GFunnel's — the picker's own evening hero runs #f97316 -> #f472b6 ->
   #9333ea, so this takes the deep end of that ramp and keeps the picker's
   orange (#f97316) as the action colour. */
.gfbk-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #6d28d9 100%);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.gfbk-card[hidden] { display: none !important; }
.gfbk-card * { box-sizing: border-box; }

/* Decoration only, aria-hidden, and it never sits over the text. */
.gfbk-card-glow {
    position: absolute;
    right: -70px;
    top: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, .34) 0%, rgba(249, 115, 22, 0) 70%);
    pointer-events: none;
}

.gfbk-card-in { position: relative; }

.gfbk-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 8px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, .16);
}

.gfbk-card-title {
    margin: 0 0 8px;
    font-family: 'Sora', 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}
.gfbk-card-text {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(237, 233, 254, .9);
}

.gfbk-card-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background-color: #f97316;
    border-radius: 8px;
    text-decoration: none;
}
.gfbk-card-btn:hover,
.gfbk-card-btn:focus { color: #ffffff; background-color: #ea580c; }

/* Dismiss: reachable, but not the thing the eye lands on. */
.gfbk-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    color: rgba(255, 255, 255, .7);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.gfbk-x:hover,
.gfbk-x:focus { color: #ffffff; background-color: rgba(255, 255, 255, .18); }

/* Below 900px the picker's .gf-ws-side becomes `display: contents` and its
   children are ordered explicitly (owner 1, personal 2, main 3, earn 4). A
   child with no order would sort to 0 and jump to the top of the page, so the
   card claims 5 — after Earn, exactly where it sits on the desktop layout.
   Declared here rather than in gf_workspaces.css: the card owns its own
   presentation, so it travels with the module. */
@media (max-width: 900px) {
    .gfbk-card { order: 5; }
}

/* =========================================================================
   The /demo page
   ========================================================================= */

.gfbk-page {
    max-width: 1020px;
    margin: 0 auto;
    padding: 40px 20px 64px;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #11132a;
}
.gfbk-page * { box-sizing: border-box; }
/* Inside the member shell the page already sits in a padded column. */
.gfbk-shell .gfbk-page { padding-top: 24px; }

.gfbk-hero { margin-bottom: 28px; }
.gfbk-hero-title {
    margin: 0 0 10px;
    font-family: 'Sora', 'DM Sans', sans-serif;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    color: #11132a;
}
.gfbk-hero-text {
    margin: 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.65;
    color: #5b6079;
}

.gfbk-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 860px) {
    .gfbk-cols { grid-template-columns: minmax(0, 1fr); }
}

/*--- The ask ---*/
.gfbk-ask {
    padding: 24px;
    background-color: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 19, 42, .04);
}
.gfbk-ask-title {
    margin: 0 0 16px;
    font-family: 'Sora', 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
}
.gfbk-ask-lead { margin: 0 0 16px; font-size: 14px; color: #5b6079; }

/*--- Side panels ---*/
.gfbk-panel {
    padding: 20px;
    margin-bottom: 16px;
    background-color: #f8f9fb;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
}
.gfbk-panel-title {
    margin: 0 0 12px;
    font-family: 'Sora', 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
}
.gfbk-panel-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #7a8099;
}

.gfbk-list, .gfbk-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: #3d4259;
}
.gfbk-list li, .gfbk-steps li { margin-bottom: 7px; }
.gfbk-list { list-style: disc; }
.gfbk-steps { list-style: decimal; }

/*--- Buttons ---*/
.gfbk-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.gfbk-btn-primary { color: #ffffff; background-color: #f97316; }
.gfbk-btn-primary:hover,
.gfbk-btn-primary:focus { color: #ffffff; background-color: #ea580c; }
.gfbk-btn-full { width: 100%; justify-content: center; margin-top: 6px; }

/*--- Feedback: three distinct states, never one generic line ---*/
.gfbk-flash {
    margin: 0 0 22px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
}
.gfbk-flash-ok  { background-color: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.gfbk-flash-err { background-color: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/*--- Form ---*/
.gfbk-row { display: flex; flex-wrap: wrap; gap: 14px; }
.gfbk-row > .gfbk-field { flex: 1 1 200px; min-width: 0; }

.gfbk-field { display: block; margin-bottom: 14px; }
.gfbk-field > span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #3d4259;
}
.gfbk-field em { font-style: normal; font-weight: 400; color: #9aa0b5; }

.gfbk-field input,
.gfbk-field select,
.gfbk-field textarea {
    width: 100%;
    padding: 10px 13px;
    font: inherit;
    font-size: 14px;
    color: #11132a;
    background-color: #ffffff;
    border: 1px solid #d7dae3;
    border-radius: 8px;
}
.gfbk-field textarea { resize: vertical; }
.gfbk-field input:focus,
.gfbk-field select:focus,
.gfbk-field textarea:focus {
    outline: 2px solid #f97316;
    outline-offset: 1px;
    border-color: #f97316;
}

.gfbk-fine {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #7a8099;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.gfbk-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 640px) {
    .gfbk-hero-title { font-size: 25px; }
    .gfbk-page { padding: 28px 16px 48px; }
    .gfbk-ask { padding: 18px; }
}

/* The deflection line. Quiet but not hidden: it has to be readable by the
   person it is for without competing with the ask it sits above. */
.gfbk-deflect {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #7a8099;
}
.gfbk-deflect a { color: #ea580c; text-decoration: underline; }
.gfbk-deflect a:hover { color: #c2410c; }