*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --cream: #fbf7ee;
  --petal: #F0E8E0;
  --sage-light: #D8E4D0;
  --sage-mid: #B5CAAC;
  --lilac: #E5D9E5;
  --rose: #C97F9A;
  --mauve: #CA9BAA;
  --forest: #4A5C30;
  --ink: #4a2412;
  --ink-soft: #3c2c22;
  --gold: #b8943c;
  --border: #E2D9D0;
  --white: #FFFFFF;
  /* Variables needed for nav from styles.css */
  --brown: #4a2412;
  --brown-2: #6a4128;
  --muted: rgba(74, 36, 18, .68);
  --line: rgba(74, 36, 18, .16);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Trebuchet MS', Arial, sans-serif;
}

body {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
}

/* HEADER / NAVBAR: intentionally handled by shared main-v10.css + nav-v6.js */
/* LAYOUT */
.page-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

/* FORM PANEL */
.form-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.page-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 4px;
}

.page-title em {
  font-style: italic;
  color: var(--rose);
}

.page-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 520px;
}

/* SECTION CARD */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}

.card-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-mid);
  margin-bottom: 6px;
}

.card-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 18px;
}

/* EVENT DETAILS */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field-grid.full {
  grid-template-columns: 1fr;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
select,
textarea {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--rose);
}

textarea {
  resize: vertical;
  min-height: 72px;
}

/* STYLE SELECTOR */
.style-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.style-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.style-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.style-card:hover {
  border-color: var(--mauve);
  background: var(--petal);
}

.style-card.selected {
  border-color: var(--rose);
  background: #FBF0F4;
}

.style-icon {
  font-size: 22px;
  margin-bottom: 6px;
}

.style-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}

.style-desc {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.4;
}

/* COLOUR PALETTE */
.palette-section {
  margin-bottom: 20px;
}

.palette-section:last-child {
  margin-bottom: 0;
}

.palette-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.palette-label span {
  font-size: 11px;
  font-weight: 400;
  color: var(--sage-mid);
  margin-left: 6px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
  flex-shrink: 0;
}

.swatch:hover {
  transform: scale(1.12);
}

.swatch.selected {
  border-color: var(--ink);
}

.swatch.selected::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  opacity: 0.3;
}

.swatch[data-name="White"] {
  border: 2.5px solid var(--border);
}

.swatch[data-name="White"].selected {
  border-color: var(--ink);
}

/* PALETTE SUMMARY */
.palette-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  min-height: 26px;
}

.palette-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.palette-names {
  font-size: 12px;
  color: var(--ink-soft);
}

/* TIER */
.tier-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tier-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.tier-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tier-card:hover {
  border-color: var(--sage-mid);
  background: #F6FAF4;
}

.tier-card.selected {
  border-color: var(--forest);
  background: #EFF4EB;
}

.tier-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}

.tier-stems {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 8px;
}

.tier-price {
  font-size: 13px;
  font-weight: 500;
  color: var(--forest);
}

/* ADD-ONS */
.addons-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.addon-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.addon-row:hover {
  border-color: var(--gold);
  background: #FBF8F0;
}

.addon-row.selected {
  border-color: var(--gold);
  background: #FBF8F0;
}

.addon-row input[type="checkbox"] {
  accent-color: var(--gold);
  margin-top: 2px;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.addon-info {
  flex: 1;
}

.addon-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.addon-desc {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 2px;
}

.addon-price {
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  white-space: nowrap;
}

/* NOTES */

/* SUMMARY PANEL */
.summary-panel {
  position: sticky;
  top: 32px;
}

.summary-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.summary-header {
  background: var(--forest);
  padding: 20px 24px;
  color: var(--white);
  border-radius: 11px 11px 0 0;
}

.summary-header-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}

.summary-event-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 400;
}

.summary-body {
  padding: 20px 24px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 13px;
  gap: 8px;
}

.summary-key {
  color: var(--ink-soft);
}

.summary-val {
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

.summary-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

.summary-palette-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}

.s-chip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.summary-palette-text {
  font-size: 12px;
  color: var(--ink-soft);
}

.price-breakdown {
  margin-top: 16px;
  background: var(--cream);
  border-radius: 8px;
  padding: 14px;
}

.price-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.price-line:last-child {
  margin-bottom: 0;
}

.price-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.price-note {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.4;
}

.cta-btn {
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  background: var(--forest);
  color: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none !important;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.cta-btn:hover {
  background: #2f3d1d !important;
  color: var(--white) !important;
}

.cta-btn:active {
  transform: scale(0.99);
}

.cta-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cta-btn.success {
  background: #2E7D32;
}

.cta-btn.error {
  background: #B71C1C;
}

.toast {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.toast.success {
  display: block;
  background: #EFF4EB;
  color: var(--forest);
  border: 1px solid var(--sage-mid);
}

.toast.error {
  display: block;
  background: #FFF0F0;
  color: #B71C1C;
  border: 1px solid #FFCDD2;
}



.summary-empty {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 12px 0;
}

@media (max-width: 700px) {
  .page-wrap {
    grid-template-columns: 1fr;
  }

  .summary-panel {
    position: static;
  }

  .style-row,
  .tier-row {
    grid-template-columns: 1fr;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  header {
    padding: 18px 20px;
  }

  .page-wrap {
    padding: 28px 16px 60px;
  }
}

/* Print */
@media print {

  header,
  .form-panel {
    display: none;
  }

  .summary-panel {
    position: static;
  }

  .page-wrap {
    grid-template-columns: 1fr;
  }
}

.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--lilac);
  color: var(--ink-soft);
  padding: 3px 8px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}



/* ==========================================================================
   SHARED NAV CLEARANCE
   Navbar itself is intentionally NOT styled here.
   ========================================================================== */

.bloom-bar-enquiry-page .page-wrap {
  /* Pasted desktop spacing = 48px. Add shared 82px nav above it. */
}

/* ==========================================================================
   INPUT CONTAINMENT
   Keeps long values inside cards/grid cells without changing desktop styling.
   ========================================================================== */

.bloom-bar-enquiry-page .page-wrap,
.bloom-bar-enquiry-page .form-panel,
.bloom-bar-enquiry-page .card,
.bloom-bar-enquiry-page .field-grid,
.bloom-bar-enquiry-page .field,
.bloom-bar-enquiry-page .summary-panel,
.bloom-bar-enquiry-page .summary-card {
  min-width: 0;
}

.bloom-bar-enquiry-page input[type="text"],
.bloom-bar-enquiry-page input[type="number"],
.bloom-bar-enquiry-page input[type="email"],
.bloom-bar-enquiry-page select,
.bloom-bar-enquiry-page textarea,
.bloom-bar-enquiry-page .event-date-trigger {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.bloom-bar-enquiry-page input[type="text"],
.bloom-bar-enquiry-page input[type="number"],
.bloom-bar-enquiry-page input[type="email"] {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   EVENT DATE FIELD
   Calendar visuals are shared with Cart in main-v14.css.
   Only the enquiry-page trigger belongs here.
   ========================================================================== */

.event-date-field {
  position: relative;
}

.event-date-trigger {
  width: 100%;
  padding: 10px 14px;

  font-family: var(--sans);
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  /* color: var(--ink); */
  color: #aaa !important;

  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  text-align: left;
  cursor: pointer;
}



/* Selected date — normal text colour */
.event-date-trigger.has-value {
  color: var(--ink) !important;
}

.event-date-trigger:hover,
.event-date-trigger:focus,
.event-date-trigger[aria-expanded="true"] {
  border-color: var(--rose);
  background: var(--cream);
}

/* ==========================================================================
   MOBILE / SMALL WINDOWS
   Desktop remains the pasted CSS. Mobile adapts layout only.
   ========================================================================== */

@media (max-width: 700px) {
  .bloom-bar-enquiry-page .page-wrap {
    grid-template-columns: 1fr;
    padding: calc(68px + 28px) 16px 60px;
  }

  .bloom-bar-enquiry-page .summary-panel {
    position: static;
  }

  .bloom-bar-enquiry-page .style-row,
  .bloom-bar-enquiry-page .tier-row,
  .bloom-bar-enquiry-page .field-grid {
    grid-template-columns: 1fr;
  }

  .bloom-bar-enquiry-page .card {
    width: 100%;
    box-sizing: border-box;
    padding: 22px;
  }

  .bloom-bar-enquiry-page .field-grid,
  .bloom-bar-enquiry-page .field {
    width: 100%;
    min-width: 0;
  }

  .bloom-bar-enquiry-page input[type="text"],
  .bloom-bar-enquiry-page input[type="number"],
  .bloom-bar-enquiry-page input[type="email"],
  .bloom-bar-enquiry-page select,
  .bloom-bar-enquiry-page textarea,
  .bloom-bar-enquiry-page .event-date-trigger {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Navigation is intentionally NOT styled in this file.
   The Bloom Bar enquiry page uses the shared .site-nav component from main-v10.css. */


/* ==========================================================================
   BLOOM BAR ENQUIRY — STANDARD BREAKPOINT SYSTEM
   normal:   1081–1280
   narrow:    821–1080
   narrower:  737–820
   mobile:    481–736
   mobilep:     0–480
   ========================================================================== */

/* Base desktop / >1280
   Keep the pasted CSS desktop layout, but reduce navbar-to-content gap. */

/* NORMAL: 1081px–1280px
   Still desktop, but slightly tighten overall width/gaps. */
@media screen and (min-width: 1081px) and (max-width: 1280px) {
  .bloom-bar-enquiry-page .page-wrap {
    max-width: 940px !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 28px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .bloom-bar-enquiry-page .card {
    padding: 26px !important;
  }
}

/* NARROW: 821px–1080px
   Switch to the mobile-style single-column flow instead of squeezing 2 columns. */
@media screen and (min-width: 821px) and (max-width: 1080px) {
  .bloom-bar-enquiry-page .page-wrap {
    max-width: 760px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 18px 24px 70px !important;
  }

  .bloom-bar-enquiry-page .form-panel {
    gap: 24px !important;
  }

  .bloom-bar-enquiry-page .summary-panel {
    position: static !important;
    width: 100% !important;
    order: 2 !important;
  }

  .bloom-bar-enquiry-page .summary-card {
    width: 100% !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .bloom-bar-enquiry-page .style-row,
  .bloom-bar-enquiry-page .tier-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .bloom-bar-enquiry-page .style-card,
  .bloom-bar-enquiry-page .tier-card {
    min-width: 0 !important;
    padding: 14px 12px !important;
  }

  .bloom-bar-enquiry-page .style-desc,
  .bloom-bar-enquiry-page .tier-stems {
    overflow-wrap: anywhere !important;
  }
}

/* NARROWER: 737px–820px
   Single column throughout; cards no longer compete horizontally. */
@media screen and (min-width: 737px) and (max-width: 820px) {
  .bloom-bar-enquiry-page .page-wrap {
    max-width: 700px !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 18px 22px 64px !important;
  }

  .bloom-bar-enquiry-page .summary-panel {
    position: static !important;
    width: 100% !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    grid-template-columns: 1fr !important;
  }

  .bloom-bar-enquiry-page .style-row,
  .bloom-bar-enquiry-page .tier-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .bloom-bar-enquiry-page .style-card,
  .bloom-bar-enquiry-page .tier-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bloom-bar-enquiry-page .page-title {
    font-size: 32px !important;
  }
}

/* MOBILE: 481px–736px */
@media screen and (min-width: 481px) and (max-width: 736px) {
  .bloom-bar-enquiry-page .page-wrap {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 18px 18px 58px !important;
  }

  .bloom-bar-enquiry-page .form-panel {
    gap: 20px !important;
  }

  .bloom-bar-enquiry-page .summary-panel {
    position: static !important;
    width: 100% !important;
  }

  .bloom-bar-enquiry-page .field-grid,
  .bloom-bar-enquiry-page .style-row,
  .bloom-bar-enquiry-page .tier-row {
    grid-template-columns: 1fr !important;
  }

  .bloom-bar-enquiry-page .card {
    width: 100% !important;
    padding: 22px !important;
  }

  .bloom-bar-enquiry-page .page-title {
    font-size: 30px !important;
  }

  .bloom-bar-enquiry-page .page-desc {
    font-size: 14px !important;
  }
}

/* MOBILE PORTRAIT: <=480px */
@media screen and (max-width: 480px) {
  .bloom-bar-enquiry-page .page-wrap {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 18px 14px 52px !important;
  }

  .bloom-bar-enquiry-page .form-panel {
    gap: 18px !important;
  }

  .bloom-bar-enquiry-page .summary-panel {
    position: static !important;
    width: 100% !important;
  }

  .bloom-bar-enquiry-page .field-grid,
  .bloom-bar-enquiry-page .style-row,
  .bloom-bar-enquiry-page .tier-row {
    grid-template-columns: 1fr !important;
  }

  .bloom-bar-enquiry-page .card {
    width: 100% !important;
    padding: 18px !important;
    border-radius: 10px !important;
  }

  .bloom-bar-enquiry-page .page-title {
    font-size: 28px !important;
    line-height: 1.08 !important;
  }

  .bloom-bar-enquiry-page .page-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .bloom-bar-enquiry-page .card-title {
    font-size: 19px !important;
  }

  .bloom-bar-enquiry-page input[type="text"],
  .bloom-bar-enquiry-page input[type="number"],
  .bloom-bar-enquiry-page input[type="email"],
  .bloom-bar-enquiry-page select,
  .bloom-bar-enquiry-page textarea,
  .bloom-bar-enquiry-page .event-date-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Long content protection at every width. */
.bloom-bar-enquiry-page .field-grid>*,
.bloom-bar-enquiry-page .style-row>*,
.bloom-bar-enquiry-page .tier-row>*,
.bloom-bar-enquiry-page .summary-row>* {
  min-width: 0 !important;
}

.bloom-bar-enquiry-page input,
.bloom-bar-enquiry-page textarea,
.bloom-bar-enquiry-page select {
  max-width: 100% !important;
}

.bloom-bar-enquiry-page .summary-val,
.bloom-bar-enquiry-page .style-desc,
.bloom-bar-enquiry-page .tier-stems,
.bloom-bar-enquiry-page .addon-desc {
  overflow-wrap: anywhere !important;
}


/* ==========================================================================
   BLOOM BAR ENQUIRY — TIGHTER VERTICAL RHYTHM
   ========================================================================== */

/* Pull the entire form closer to the shared navbar at all sizes. */

/* Tighter spacing inside form cards. */
.bloom-bar-enquiry-page .card {
  padding: 24px !important;
}

.bloom-bar-enquiry-page .form-panel {
  gap: 20px !important;
}

.bloom-bar-enquiry-page .card .step-label {
  margin-bottom: 10px !important;
}

.bloom-bar-enquiry-page .card-title {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.bloom-bar-enquiry-page .field-grid {
  gap: 14px 16px !important;
}

.bloom-bar-enquiry-page .field {
  gap: 6px !important;
  margin: 0 !important;
}

.bloom-bar-enquiry-page .field label {
  margin-bottom: 4px !important;
}

.bloom-bar-enquiry-page .field input,
.bloom-bar-enquiry-page .field select,
.bloom-bar-enquiry-page .field textarea,
.bloom-bar-enquiry-page .event-date-trigger {
  min-height: 42px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* Email/full-width rows shouldn't create extra vertical air. */
.bloom-bar-enquiry-page .field.full,
.bloom-bar-enquiry-page .field-grid .full {
  margin-top: 0 !important;
}

/* NORMAL: 1081–1280 */
@media screen and (min-width: 1081px) and (max-width: 1280px) {

  .bloom-bar-enquiry-page .card {
    padding: 22px !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    gap: 12px 14px !important;
  }
}

/* NARROW: 821–1080 */
@media screen and (min-width: 821px) and (max-width: 1080px) {

  .bloom-bar-enquiry-page .card {
    padding: 22px !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    gap: 12px 14px !important;
  }
}

/* NARROWER: 737–820 */
@media screen and (min-width: 737px) and (max-width: 820px) {

  .bloom-bar-enquiry-page .card {
    padding: 20px !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    gap: 12px !important;
  }

  .bloom-bar-enquiry-page .card-title {
    margin-bottom: 16px !important;
  }
}

/* MOBILE: 481–736 */
@media screen and (min-width: 481px) and (max-width: 736px) {

  .bloom-bar-enquiry-page .card {
    padding: 18px !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    gap: 11px !important;
  }

  .bloom-bar-enquiry-page .field {
    gap: 5px !important;
  }

  .bloom-bar-enquiry-page .card-title {
    margin-bottom: 14px !important;
  }
}

/* MOBILE PORTRAIT: <=480 */
@media screen and (max-width: 480px) {

  .bloom-bar-enquiry-page .card {
    padding: 16px !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    gap: 10px !important;
  }

  .bloom-bar-enquiry-page .field {
    gap: 4px !important;
  }

  .bloom-bar-enquiry-page .field label {
    margin-bottom: 3px !important;
  }

  .bloom-bar-enquiry-page .card-title {
    margin-bottom: 13px !important;
  }
}


/* ==========================================================================
   BLOOM BAR ENQUIRY — REFINED TOP SPACING + FIELD RHYTHM
   ========================================================================== */

/* Slightly increase breathing room BETWEEN cards. */
.bloom-bar-enquiry-page .form-panel {
  gap: 28px !important;
}

/* Tighten spacing INSIDE cards. */
.bloom-bar-enquiry-page .card {
  padding: 22px !important;
}

/* Title block inside each card */
.bloom-bar-enquiry-page .card .step-label {
  margin-bottom: 8px !important;
}

.bloom-bar-enquiry-page .card-title {
  margin-bottom: 15px !important;
}

/* Tighten field rows and especially label-to-input spacing. */
.bloom-bar-enquiry-page .field-grid {
  gap: 12px 16px !important;
}

.bloom-bar-enquiry-page .field {
  gap: 2px !important;
}

.bloom-bar-enquiry-page .field label {
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

.bloom-bar-enquiry-page .field input,
.bloom-bar-enquiry-page .field select,
.bloom-bar-enquiry-page .field textarea,
.bloom-bar-enquiry-page .event-date-trigger {
  margin-top: 0 !important;
}

/* NORMAL */
@media screen and (min-width: 1081px) and (max-width: 1280px) {

  .bloom-bar-enquiry-page .form-panel {
    gap: 27px !important;
  }
}

/* NARROW */
@media screen and (min-width: 821px) and (max-width: 1080px) {

  .bloom-bar-enquiry-page .form-panel {
    gap: 26px !important;
  }
}

/* NARROWER */
@media screen and (min-width: 737px) and (max-width: 820px) {
  .bloom-bar-enquiry-page .form-panel {
    gap: 24px !important;
  }
}

/* MOBILE */
@media screen and (min-width: 481px) and (max-width: 736px) {
  .bloom-bar-enquiry-page .form-panel {
    gap: 23px !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    gap: 10px !important;
  }
}

/* MOBILE PORTRAIT */
@media screen and (max-width: 480px) {
  .bloom-bar-enquiry-page .form-panel {
    gap: 22px !important;
  }

  .bloom-bar-enquiry-page .field-grid {
    gap: 9px !important;
  }

  .bloom-bar-enquiry-page .field label {
    margin-bottom: 1px !important;
  }
}


/* ==========================================================================
   BLOOM BAR PAGE TOP SPACING — SINGLE SOURCE OF TRUTH
   main-v13.css handles the navbar-height spacer.
   This value is only the breathing room BELOW the navbar.
   ========================================================================== */
.bloom-bar-enquiry-page .page-wrap {
  padding-top: 18px !important;
}

/* ==========================================================================
   BLOOM BAR ENQUIRY — SAFE DESKTOP FIT
   No negative margins. Keep title/header fully visible.
   ========================================================================== */
@media screen and (min-width: 1081px) {

  /* Bring the content closer to the nav, but never overlap it. */
  .bloom-bar-enquiry-page .page-wrap {
    padding-top: 18px !important;
  }

  /* Compact the summary internally, not by moving/clipping the whole card. */
  .bloom-bar-enquiry-page .summary-header {
    padding: 16px 22px !important;
  }

  .bloom-bar-enquiry-page .summary-header-label {
    margin-bottom: 2px !important;
  }

  .bloom-bar-enquiry-page .summary-body {
    padding: 16px 22px 16px !important;
  }

  .bloom-bar-enquiry-page .summary-row {
    margin-bottom: 8px !important;
  }

  .bloom-bar-enquiry-page .summary-divider {
    margin: 10px 0 !important;
  }

  .bloom-bar-enquiry-page .summary-palette-row {
    margin-bottom: 10px !important;
  }

  .bloom-bar-enquiry-page .price-breakdown {
    margin-top: 12px !important;
    padding: 11px 12px !important;
  }

  .bloom-bar-enquiry-page .price-line {
    margin-bottom: 4px !important;
  }

  .bloom-bar-enquiry-page .price-total {
    margin-top: 7px !important;
    padding-top: 7px !important;
  }

  .bloom-bar-enquiry-page .price-note {
    margin-top: 5px !important;
    line-height: 1.3 !important;
  }

  .bloom-bar-enquiry-page .cta-btn {
    margin-top: 12px !important;
    padding: 11px 18px !important;
  }
}

/* Short laptop screens: slightly tighter, still no clipping/overlap. */
@media screen and (min-width: 1081px) and (max-height: 820px) {
  .bloom-bar-enquiry-page .page-wrap {
    padding-top: 12px !important;
  }

  .bloom-bar-enquiry-page .summary-header {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  .bloom-bar-enquiry-page .summary-body {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  .bloom-bar-enquiry-page .summary-row {
    margin-bottom: 7px !important;
  }

  .bloom-bar-enquiry-page .summary-divider {
    margin: 9px 0 !important;
  }

  .bloom-bar-enquiry-page .price-breakdown {
    margin-top: 10px !important;
    padding: 10px 11px !important;
  }

  .bloom-bar-enquiry-page .cta-btn {
    margin-top: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* ==========================================================================
   BLOOM BAR — TALLER ORDER SUMMARY ON LARGE/TALL DESKTOPS
   Fill most of the visible screen while retaining a bottom breathing space.
   ========================================================================== */
@media screen and (min-width: 1281px) and (min-height: 850px) {
  .bloom-bar-enquiry-page .summary-panel {
    min-height: calc(100vh - 145px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .bloom-bar-enquiry-page .summary-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Let the blank breathing room expand naturally between details and pricing. */
  .bloom-bar-enquiry-page .price-breakdown {
    margin-top: auto !important;
  }

  .bloom-bar-enquiry-page .cta-btn {
    flex: 0 0 auto !important;
  }
}

/* Very tall desktop monitors: leave a little more breathing room at the bottom. */
@media screen and (min-width: 1281px) and (min-height: 1000px) {
  .bloom-bar-enquiry-page .summary-panel {
    min-height: calc(100vh - 160px) !important;
  }
}


/* ==========================================================================
   BLOOM BAR — TRUE FULL-HEIGHT SUMMARY CARD
   The visible bordered element is .summary-card, not .summary-panel.
   ========================================================================== */
@media screen and (min-width: 1281px) and (min-height: 850px) {

  .bloom-bar-enquiry-page .summary-panel {
    display: block !important;
    min-height: 0 !important;
  }

  .bloom-bar-enquiry-page .summary-card {
    min-height: calc(100vh - 125px) !important;
    height: calc(100vh - 125px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .bloom-bar-enquiry-page .summary-header {
    flex: 0 0 auto !important;
  }

  .bloom-bar-enquiry-page .summary-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Push pricing + CTA toward the bottom of the tall card. */
  .bloom-bar-enquiry-page .price-breakdown {
    margin-top: auto !important;
  }

  .bloom-bar-enquiry-page .cta-btn {
    flex: 0 0 auto !important;
  }
}

/* Taller displays: preserve a slightly larger bottom breathing space. */
@media screen and (min-width: 1281px) and (min-height: 1000px) {
  .bloom-bar-enquiry-page .summary-card {
    min-height: calc(100vh - 140px) !important;
    height: calc(100vh - 140px) !important;
  }
}


/* ==========================================================================
   BLOOM BAR — VIEWPORT-FILLING SUMMARY FROM NORMAL DESKTOP UP
   Applies from the site's normal desktop breakpoint (1081px+), including
   common laptop sizes such as 1130 × 818.
   ========================================================================== */
@media screen and (min-width: 1081px) {

  .bloom-bar-enquiry-page .summary-panel {
    display: block !important;
    min-height: 0 !important;
  }

  .bloom-bar-enquiry-page .summary-card {
    /* Summary begins roughly 100px from viewport top; retain ~18px below. */
    height: calc(100vh - 118px) !important;
    min-height: calc(100vh - 118px) !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;
  }

  .bloom-bar-enquiry-page .summary-header {
    flex: 0 0 auto !important;
  }

  .bloom-bar-enquiry-page .summary-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* Empty vertical space grows here rather than between individual rows. */
  .bloom-bar-enquiry-page .price-breakdown {
    margin-top: auto !important;
  }

  .bloom-bar-enquiry-page .cta-btn {
    flex: 0 0 auto !important;
  }
}

/* Shorter laptop screens: keep a slightly smaller bottom margin. */
@media screen and (min-width: 1081px) and (max-height: 850px) {
  .bloom-bar-enquiry-page .summary-card {
    height: calc(100vh - 108px) !important;
    min-height: calc(100vh - 108px) !important;
  }
}

/* Very tall displays can afford a little more bottom breathing room. */
@media screen and (min-width: 1081px) and (min-height: 1000px) {
  .bloom-bar-enquiry-page .summary-card {
    height: calc(100vh - 135px) !important;
    min-height: calc(100vh - 135px) !important;
  }
}


/* ==========================================================================
   BLOOM BAR — CLAMPED DESKTOP SUMMARY HEIGHT
   Replaces the earlier fixed viewport-height rules.
   Keeps the card near the bottom without overflowing at other desktop sizes.
   ========================================================================== */
@media screen and (min-width: 1081px) {

  .bloom-bar-enquiry-page .summary-card {
    height: clamp(560px, calc(100dvh - 150px), 700px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 125px) !important;

    display: flex !important;
    flex-direction: column !important;
  }

  .bloom-bar-enquiry-page .summary-header {
    flex: 0 0 auto !important;
  }

  .bloom-bar-enquiry-page .summary-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .bloom-bar-enquiry-page .price-breakdown {
    margin-top: auto !important;
  }

  .bloom-bar-enquiry-page .cta-btn {
    flex: 0 0 auto !important;
  }
}

/* Short laptop windows: allow the card to shrink further instead of overflowing. */
@media screen and (min-width: 1081px) and (max-height: 760px) {
  .bloom-bar-enquiry-page .summary-card {
    height: calc(100dvh - 135px) !important;
    max-height: calc(100dvh - 115px) !important;
  }
}

/* Taller desktops: cap the visual height so it doesn't become excessively long. */
@media screen and (min-width: 1081px) and (min-height: 950px) {
  .bloom-bar-enquiry-page .summary-card {
    height: min(calc(100dvh - 165px), 720px) !important;
    max-height: 720px !important;
  }
}


/* ==========================================================================
   BLOOM BAR — ORDER SUMMARY POSITION
   Single source of truth for sticky positioning.
   The shared navbar owns --site-nav-height; this file adds only the 18px gap.
   ========================================================================== */

.bloom-bar-enquiry-page,
.bloom-bar-enquiry-page #header-wrapper,
.bloom-bar-enquiry-page #header,
.bloom-bar-enquiry-page .page-wrap,
.bloom-bar-enquiry-page .form-panel {
  overflow: visible !important;
}

.bloom-bar-enquiry-page .page-wrap {
  align-items: start !important;
}

/* Desktop: align with the form start, then stick below the fixed navbar. */
@media screen and (min-width: 1081px) {
  .bloom-bar-enquiry-page .summary-panel {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--site-nav-height) + 18px) !important;
    align-self: start !important;
    height: max-content !important;
    z-index: 5 !important;
  }

  .bloom-bar-enquiry-page .summary-card {
    position: relative !important;
  }
}

/* 1080px and below: keep the summary in normal document flow. */
@media screen and (max-width: 1080px) {
  .bloom-bar-enquiry-page .summary-panel {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }
}


/* ========================================================================== 
   BLOOM BAR — LOOSER ESTIMATED TOTAL BOX
   Give the Base / Estimated total area more breathing room without changing
   the sticky summary card height or behaviour.
   ========================================================================== */
.bloom-bar-enquiry-page .price-breakdown {
  padding: 20px 18px !important;
  border-radius: 12px !important;
}

.bloom-bar-enquiry-page .price-line {
  margin-bottom: 10px !important;
  line-height: 1.45 !important;
}

.bloom-bar-enquiry-page .price-total {
  margin-top: 14px !important;
  padding-top: 14px !important;
  margin-bottom: 0 !important;
}

.bloom-bar-enquiry-page .price-note {
  margin-top: 12px !important;
  line-height: 1.5 !important;
}

@media screen and (max-width: 480px) {
  .bloom-bar-enquiry-page .price-breakdown {
    padding: 18px 16px !important;
  }
}


/* ==========================================================================
   BLOOM BAR SUMMARY — MAKE ROOM FOR FEEDBACK MESSAGES
   Tighten upper summary rows, but allow the card to GROW when a success/error
   message is shown instead of clipping it.
   ========================================================================== */

@media screen and (min-width: 821px) {

  /* Fixed heights were clipping the toast/error area.
     Keep a viewport-filling MINIMUM, but allow natural expansion. */
  .bloom-bar-enquiry-page .summary-card {
    height: auto !important;
    min-height: clamp(540px, calc(100dvh - 150px), 680px) !important;
    max-height: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .bloom-bar-enquiry-page .summary-body {
    overflow: visible !important;
  }

  /* Date / Guests / Contact: noticeably tighter. */
  .bloom-bar-enquiry-page .summary-row {
    margin-bottom: 7px !important;
    line-height: 1.25 !important;
  }

  /* Less air before Tier. */
  .bloom-bar-enquiry-page .summary-divider {
    margin: 8px 0 !important;
  }

  /* Tier + Palette section tighter too. */
  .bloom-bar-enquiry-page .summary-palette-row {
    margin-bottom: 10px !important;
  }

  .bloom-bar-enquiry-page .summary-palette-text {
    line-height: 1.25 !important;
  }

  /* Keep the pricing block roomy, but not wasteful. */
  .bloom-bar-enquiry-page .price-breakdown {
    margin-top: auto !important;
    padding: 16px 16px !important;
  }

  /* CTA should not consume unnecessary vertical space. */
  .bloom-bar-enquiry-page .cta-btn {
    margin-top: 12px !important;
  }

  /* Feedback message must fully render beneath the CTA. */
  .bloom-bar-enquiry-page .toast {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
    line-height: 1.45 !important;
  }
}

/* Narrower/mobile: also allow the message to expand naturally. */
@media screen and (max-width: 820px) {
  .bloom-bar-enquiry-page .summary-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .bloom-bar-enquiry-page .summary-row {
    margin-bottom: 7px !important;
  }

  .bloom-bar-enquiry-page .summary-divider {
    margin: 9px 0 !important;
  }

  .bloom-bar-enquiry-page .summary-palette-row {
    margin-bottom: 10px !important;
  }

  .bloom-bar-enquiry-page .toast {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
    white-space: normal !important;
    line-height: 1.45 !important;
  }
}