@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap");
.bookify-organizer-page { min-height: 100vh; overflow-x: hidden; background: #0D0D0D; }
.bookify-organizer-reference-desktop { display: block; }
.bookify-organizer-reference-mobile { display: none; }
@media (max-width: 767px) {
  .bookify-organizer-reference-desktop { display: none; }
  .bookify-organizer-reference-mobile { display: block; }
}@scope (.bookify-organizer-reference-desktop) {
/* ============================================================
   Bookify Design Tokens
   --------------------
   Import this file first in every prototype.

   Bookify's identity is built on three pillars:
     1. Dark stage — near-black canvas (#0D0D0D) like a venue at lights-down.
     2. Bookify Orange — a single high-impact primary (#FF551A) for CTAs, accents,
        ticket scanner glow, and the "Bookify it!" button. Never duplicated by any
        other color in the system.
     3. Montserrat — one typeface, three weights (Regular / Medium / Bold).
        Bold is the workhorse — used for headlines, button labels, and numbers.

   ============================================================ */

/* ---------- 1. Font loading -------------------------------------------------
   Montserrat is loaded via Google Fonts. If you need offline / production:
   self-host the .woff2 files in /fonts and replace this @import.
---------------------------------------------------------------------------- */
/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */



:scope {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  --bk-orange:           #FF551A;   /* primary — CTAs, accents, ticket icons */
  --bk-orange-hover:     #E64613;   /* -8% lightness on hover */
  --bk-orange-press:     #C73B0F;   /* -16% on active/press */

  /* ============================================================
     COLOR — Surface (dark mode is the canonical theme)
     ============================================================ */
  --bk-bg:               #0D0D0D;   /* page background — "lights down" */
  --bk-surface-1:        #222222;   /* cards, package tiles, search field bg on hover */
  --bk-surface-2:        #3C3C3C;   /* form inputs (date pickers, dropdowns) */
  --bk-surface-3:        #595959;   /* secondary controls, stroke-only borders */
  --bk-light:            #FFFFFF;   /* primary text on dark; light-mode surface */
  --bk-near-black:       #0D0D0D;   /* darkest text on light surfaces */

  /* ============================================================
     COLOR — Text
     ============================================================ */
  --bk-fg-1:             #FFFFFF;   /* primary text on dark — 100% white */
  --bk-fg-2:             rgba(255,255,255,0.70);  /* secondary, body copy */
  --bk-fg-3:             #989898;   /* placeholder / muted (e.g. "DD/MM/YYYY") */
  --bk-fg-4:             #606060;   /* deeply muted, e.g. light-mode placeholder */
  --bk-fg-on-orange:     #FFFFFF;   /* always white on orange */
  --bk-fg-on-light:      #0D0D0D;

  /* ============================================================
     COLOR — Semantic (used in pricing tiers, status, etc.)
     ============================================================ */
  --bk-green:            #009245;   /* Basic tier tag, success */
  --bk-blue:             #008DE0;   /* Premium tier tag, info */
  --bk-purple:           #8A38F5;   /* White Label / annotation strokes */
  --bk-red:              #FF3A44;   /* Errors, destructive */
  --bk-yellow:           #FFE000;   /* Warnings */

  /* ============================================================
     COLOR — Decoration / dividers
     ============================================================ */
  --bk-divider:          rgba(255,255,255,0.10);  /* hairline on dark */
  --bk-divider-dark:     #222222;                  /* hairline on light surface */
  --bk-overlay-gradient: linear-gradient(180deg, rgba(13,13,13,0) 0%, #0D0D0D 100%);

  /* ============================================================
     TYPE — Family, weights, line height
     ============================================================ */
  --bk-font-sans:        "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --bk-fw-regular:       400;
  --bk-fw-medium:        500;
  --bk-fw-bold:          700;

  --bk-lh-tight:         1.00;   /* Bookify uses lineHeight: 100% almost everywhere */
  --bk-lh-snug:          1.20;
  --bk-lh-normal:        1.40;   /* for long body copy — Bookify's only deviation */

  /* ============================================================
     TYPE — Sizes (desktop)
     ============================================================ */
  --bk-fs-display:       32px;   /* hero headline */
  --bk-fs-h1:            30px;   /* section "Events" header */
  --bk-fs-h2:            28px;   /* package tier name, big stat */
  --bk-fs-h3:            24px;   /* section header (Why Sell, Packages, Clients) */
  --bk-fs-h4:            22px;   /* card title (event name) */
  --bk-fs-body-lg:       18px;   /* primary button label, dropdown text */
  --bk-fs-body:          16px;   /* card description, ticket count */
  --bk-fs-meta:          15px;   /* metadata, footer links, supporting copy */
  --bk-fs-meta-sm:       14px;   /* date stamps, mobile body */
  --bk-fs-caption:       12px;   /* fine print, badge text */

  /* ============================================================
     TYPE — Mobile overrides
     ============================================================ */
  --bk-fs-display-m:     20px;
  --bk-fs-h1-m:          20px;
  --bk-fs-h3-m:          20px;
  --bk-fs-h4-m:          18px;

  /* ============================================================
     SPACING — 4-px base, mostly 5/10/20/30/40/60 in the wild
     ============================================================ */
  --bk-s-1:              4px;
  --bk-s-2:              5px;
  --bk-s-3:              10px;
  --bk-s-4:              15px;
  --bk-s-5:              20px;   /* default card padding */
  --bk-s-6:              30px;   /* package card padding */
  --bk-s-7:              40px;
  --bk-s-8:              50px;
  --bk-s-9:              60px;
  --bk-s-10:             80px;   /* section gap */
  --bk-s-page-x:         165px;  /* page gutter on 1440 desktop */
  --bk-s-page-x-mobile:  20px;   /* page gutter on 375 mobile */

  /* ============================================================
     RADIUS
     ============================================================ */
  --bk-r-xs:             5px;    /* form inputs, dashed annotation rects */
  --bk-r-sm:             10px;   /* buttons, cards, event cards, packages */
  --bk-r-md:             15px;   /* search-bar pill */
  --bk-r-lg:             20px;   /* feature image containers */
  --bk-r-pill:           9999px;
  --bk-r-circle:         50%;    /* carousel arrows, social icons */

  /* ============================================================
     SHADOWS — Bookify is mostly FLAT. Shadows only appear on the
     featured event hero on hover, and on the floating mobile-app
     mockup. Stay flat.
     ============================================================ */
  --bk-shadow-none:      none;
  --bk-shadow-card:      0 8px 24px rgba(0,0,0,0.35);     /* hover lift */
  --bk-shadow-float:     0 24px 48px rgba(0,0,0,0.45);    /* mockup over orange */

  /* ============================================================
     BORDERS
     ============================================================ */
  --bk-border-card:      1px solid #222222;
  --bk-border-hairline:  1px solid rgba(255,255,255,0.10);
  --bk-border-annotate:  1px dashed #8A38F5;   /* design-only, never ship */

  /* ============================================================
     MOTION
     ============================================================ */
  --bk-easing-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --bk-easing-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --bk-duration-fast:    120ms;
  --bk-duration-base:    180ms;
  --bk-duration-slow:    320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --bk-page-max:         1440px;
  --bk-content-max:      1110px;  /* inner column on desktop */
  --bk-mobile-max:       375px;
}

/* ============================================================
   Base resets / page defaults
   ============================================================ */
:scope {
  background: var(--bk-bg);
  color: var(--bk-fg-1);
  font-family: var(--bk-font-sans);
  font-weight: var(--bk-fw-regular);
  line-height: var(--bk-lh-tight);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Semantic type roles — apply via class or as a building block.
   These mirror what shows up across the homepage hero / sections.
   ============================================================ */
.bk-display {
  font-family: var(--bk-font-sans);
  font-weight: var(--bk-fw-bold);
  font-size: var(--bk-fs-display);
  line-height: var(--bk-lh-tight);
  letter-spacing: -0.005em;
}

.bk-h1 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h1); line-height: var(--bk-lh-tight); }
.bk-h2 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h2); line-height: var(--bk-lh-tight); }
.bk-h3 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h3); line-height: var(--bk-lh-tight); }
.bk-h4 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h4); line-height: var(--bk-lh-tight); }

.bk-body-lg   { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-body-lg); line-height: var(--bk-lh-tight); }
.bk-body      { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-body);    line-height: var(--bk-lh-normal); }
.bk-meta      { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-meta);    line-height: var(--bk-lh-normal); }
.bk-meta-bold { font-weight: var(--bk-fw-bold);    font-size: var(--bk-fs-meta);    line-height: var(--bk-lh-tight); }
.bk-caption   { font-weight: var(--bk-fw-medium);  font-size: var(--bk-fs-caption); line-height: var(--bk-lh-tight); }

/* ============================================================
   Button primitive — the ONE Bookify CTA shape.
   Solid orange, white bold label, 10-px radius, 42-px tall, 20-px x-pad.
   ============================================================ */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-s-3);
  height: 42px;
  padding: 0 var(--bk-s-5);
  border: 0;
  border-radius: var(--bk-r-sm);
  background: var(--bk-orange);
  color: var(--bk-fg-on-orange);
  font: var(--bk-fw-bold) var(--bk-fs-body-lg)/1 var(--bk-font-sans);
  text-align: center;
  cursor: pointer;
  transition: background var(--bk-duration-base) var(--bk-easing-out),
              transform   var(--bk-duration-fast) var(--bk-easing-out);
}
.bk-btn:hover  { background: var(--bk-orange-hover); }
.bk-btn:active { background: var(--bk-orange-press); transform: scale(0.98); }

.bk-btn-ghost {
  background: transparent;
  color: var(--bk-fg-1);
}
.bk-btn-ghost:hover { background: rgba(255,255,255,0.08); }


    *, *::before, *::after { box-sizing: border-box; }
    :scope { scroll-behavior: smooth; }
    :scope { margin: 0; padding: 0; background: #0D0D0D; color: #fff; }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #111; }
    ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #FF551A; }
  
}
@scope (.bookify-organizer-reference-mobile) {
/* ============================================================
   Bookify Design Tokens
   --------------------
   Import this file first in every prototype.

   Bookify's identity is built on three pillars:
     1. Dark stage — near-black canvas (#0D0D0D) like a venue at lights-down.
     2. Bookify Orange — a single high-impact primary (#FF551A) for CTAs, accents,
        ticket scanner glow, and the "Bookify it!" button. Never duplicated by any
        other color in the system.
     3. Montserrat — one typeface, three weights (Regular / Medium / Bold).
        Bold is the workhorse — used for headlines, button labels, and numbers.

   ============================================================ */

/* ---------- 1. Font loading -------------------------------------------------
   Montserrat is loaded via Google Fonts. If you need offline / production:
   self-host the .woff2 files in /fonts and replace this @import.
---------------------------------------------------------------------------- */
/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */



:scope {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  --bk-orange:           #FF551A;   /* primary — CTAs, accents, ticket icons */
  --bk-orange-hover:     #E64613;   /* -8% lightness on hover */
  --bk-orange-press:     #C73B0F;   /* -16% on active/press */

  /* ============================================================
     COLOR — Surface (dark mode is the canonical theme)
     ============================================================ */
  --bk-bg:               #0D0D0D;   /* page background — "lights down" */
  --bk-surface-1:        #222222;   /* cards, package tiles, search field bg on hover */
  --bk-surface-2:        #3C3C3C;   /* form inputs (date pickers, dropdowns) */
  --bk-surface-3:        #595959;   /* secondary controls, stroke-only borders */
  --bk-light:            #FFFFFF;   /* primary text on dark; light-mode surface */
  --bk-near-black:       #0D0D0D;   /* darkest text on light surfaces */

  /* ============================================================
     COLOR — Text
     ============================================================ */
  --bk-fg-1:             #FFFFFF;   /* primary text on dark — 100% white */
  --bk-fg-2:             rgba(255,255,255,0.70);  /* secondary, body copy */
  --bk-fg-3:             #989898;   /* placeholder / muted (e.g. "DD/MM/YYYY") */
  --bk-fg-4:             #606060;   /* deeply muted, e.g. light-mode placeholder */
  --bk-fg-on-orange:     #FFFFFF;   /* always white on orange */
  --bk-fg-on-light:      #0D0D0D;

  /* ============================================================
     COLOR — Semantic (used in pricing tiers, status, etc.)
     ============================================================ */
  --bk-green:            #009245;   /* Basic tier tag, success */
  --bk-blue:             #008DE0;   /* Premium tier tag, info */
  --bk-purple:           #8A38F5;   /* White Label / annotation strokes */
  --bk-red:              #FF3A44;   /* Errors, destructive */
  --bk-yellow:           #FFE000;   /* Warnings */

  /* ============================================================
     COLOR — Decoration / dividers
     ============================================================ */
  --bk-divider:          rgba(255,255,255,0.10);  /* hairline on dark */
  --bk-divider-dark:     #222222;                  /* hairline on light surface */
  --bk-overlay-gradient: linear-gradient(180deg, rgba(13,13,13,0) 0%, #0D0D0D 100%);

  /* ============================================================
     TYPE — Family, weights, line height
     ============================================================ */
  --bk-font-sans:        "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --bk-fw-regular:       400;
  --bk-fw-medium:        500;
  --bk-fw-bold:          700;

  --bk-lh-tight:         1.00;   /* Bookify uses lineHeight: 100% almost everywhere */
  --bk-lh-snug:          1.20;
  --bk-lh-normal:        1.40;   /* for long body copy — Bookify's only deviation */

  /* ============================================================
     TYPE — Sizes (desktop)
     ============================================================ */
  --bk-fs-display:       32px;   /* hero headline */
  --bk-fs-h1:            30px;   /* section "Events" header */
  --bk-fs-h2:            28px;   /* package tier name, big stat */
  --bk-fs-h3:            24px;   /* section header (Why Sell, Packages, Clients) */
  --bk-fs-h4:            22px;   /* card title (event name) */
  --bk-fs-body-lg:       18px;   /* primary button label, dropdown text */
  --bk-fs-body:          16px;   /* card description, ticket count */
  --bk-fs-meta:          15px;   /* metadata, footer links, supporting copy */
  --bk-fs-meta-sm:       14px;   /* date stamps, mobile body */
  --bk-fs-caption:       12px;   /* fine print, badge text */

  /* ============================================================
     TYPE — Mobile overrides
     ============================================================ */
  --bk-fs-display-m:     20px;
  --bk-fs-h1-m:          20px;
  --bk-fs-h3-m:          20px;
  --bk-fs-h4-m:          18px;

  /* ============================================================
     SPACING — 4-px base, mostly 5/10/20/30/40/60 in the wild
     ============================================================ */
  --bk-s-1:              4px;
  --bk-s-2:              5px;
  --bk-s-3:              10px;
  --bk-s-4:              15px;
  --bk-s-5:              20px;   /* default card padding */
  --bk-s-6:              30px;   /* package card padding */
  --bk-s-7:              40px;
  --bk-s-8:              50px;
  --bk-s-9:              60px;
  --bk-s-10:             80px;   /* section gap */
  --bk-s-page-x:         165px;  /* page gutter on 1440 desktop */
  --bk-s-page-x-mobile:  20px;   /* page gutter on 375 mobile */

  /* ============================================================
     RADIUS
     ============================================================ */
  --bk-r-xs:             5px;    /* form inputs, dashed annotation rects */
  --bk-r-sm:             10px;   /* buttons, cards, event cards, packages */
  --bk-r-md:             15px;   /* search-bar pill */
  --bk-r-lg:             20px;   /* feature image containers */
  --bk-r-pill:           9999px;
  --bk-r-circle:         50%;    /* carousel arrows, social icons */

  /* ============================================================
     SHADOWS — Bookify is mostly FLAT. Shadows only appear on the
     featured event hero on hover, and on the floating mobile-app
     mockup. Stay flat.
     ============================================================ */
  --bk-shadow-none:      none;
  --bk-shadow-card:      0 8px 24px rgba(0,0,0,0.35);     /* hover lift */
  --bk-shadow-float:     0 24px 48px rgba(0,0,0,0.45);    /* mockup over orange */

  /* ============================================================
     BORDERS
     ============================================================ */
  --bk-border-card:      1px solid #222222;
  --bk-border-hairline:  1px solid rgba(255,255,255,0.10);
  --bk-border-annotate:  1px dashed #8A38F5;   /* design-only, never ship */

  /* ============================================================
     MOTION
     ============================================================ */
  --bk-easing-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --bk-easing-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --bk-duration-fast:    120ms;
  --bk-duration-base:    180ms;
  --bk-duration-slow:    320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --bk-page-max:         1440px;
  --bk-content-max:      1110px;  /* inner column on desktop */
  --bk-mobile-max:       375px;
}

/* ============================================================
   Base resets / page defaults
   ============================================================ */
:scope {
  background: var(--bk-bg);
  color: var(--bk-fg-1);
  font-family: var(--bk-font-sans);
  font-weight: var(--bk-fw-regular);
  line-height: var(--bk-lh-tight);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Semantic type roles — apply via class or as a building block.
   These mirror what shows up across the homepage hero / sections.
   ============================================================ */
.bk-display {
  font-family: var(--bk-font-sans);
  font-weight: var(--bk-fw-bold);
  font-size: var(--bk-fs-display);
  line-height: var(--bk-lh-tight);
  letter-spacing: -0.005em;
}

.bk-h1 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h1); line-height: var(--bk-lh-tight); }
.bk-h2 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h2); line-height: var(--bk-lh-tight); }
.bk-h3 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h3); line-height: var(--bk-lh-tight); }
.bk-h4 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h4); line-height: var(--bk-lh-tight); }

.bk-body-lg   { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-body-lg); line-height: var(--bk-lh-tight); }
.bk-body      { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-body);    line-height: var(--bk-lh-normal); }
.bk-meta      { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-meta);    line-height: var(--bk-lh-normal); }
.bk-meta-bold { font-weight: var(--bk-fw-bold);    font-size: var(--bk-fs-meta);    line-height: var(--bk-lh-tight); }
.bk-caption   { font-weight: var(--bk-fw-medium);  font-size: var(--bk-fs-caption); line-height: var(--bk-lh-tight); }

/* ============================================================
   Button primitive — the ONE Bookify CTA shape.
   Solid orange, white bold label, 10-px radius, 42-px tall, 20-px x-pad.
   ============================================================ */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-s-3);
  height: 42px;
  padding: 0 var(--bk-s-5);
  border: 0;
  border-radius: var(--bk-r-sm);
  background: var(--bk-orange);
  color: var(--bk-fg-on-orange);
  font: var(--bk-fw-bold) var(--bk-fs-body-lg)/1 var(--bk-font-sans);
  text-align: center;
  cursor: pointer;
  transition: background var(--bk-duration-base) var(--bk-easing-out),
              transform   var(--bk-duration-fast) var(--bk-easing-out);
}
.bk-btn:hover  { background: var(--bk-orange-hover); }
.bk-btn:active { background: var(--bk-orange-press); transform: scale(0.98); }

.bk-btn-ghost {
  background: transparent;
  color: var(--bk-fg-1);
}
.bk-btn-ghost:hover { background: rgba(255,255,255,0.08); }


    *, *::before, *::after { box-sizing: border-box; }
    :scope { margin: 0; padding: 0; background: #0D0D0D; color: #fff; overflow-x: hidden; }
    img  { display: block; max-width: 100%; }
    button { font-family: inherit; }
    a { color: inherit; text-decoration: none; }
    :scope { --bk-glow: 255,85,26; }
    .m-page { width: 375px; margin: 0 auto; background: #0D0D0D; position: relative; }
    .bk-section-eyebrow { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #FF551A; }
    .bk-dots { background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 18px 18px; }
  
}

/* Package request pending state: visually distinct but readable, no
   spinner, no hover implying an action is still available. */
[data-package-pending] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}