/* RESONATE BUILD: package-builder.css | v2026-01-03e | hash:6037ec | updated: 2026-01-03 */

/* --- PB CTA typography controls (edit these if kerning/spacing feels off) --- */
:root{
  --pb-cta-font-size: 0.87rem;
  --pb-cta-font-weight: 500;
  --pb-cta-letter-spacing: 0.13em;
}
/* Layout for the Your Event Vision page */

#ideas-builder {
    max-width: 1200px;
    margin: 5rem auto 3rem;
    padding: 0 1.5rem 3rem;
    box-sizing: border-box;
}

/* --- Vision hero (matches Resonate Family layout, scoped to this page) --- */

.vision-hero{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1.8rem;
    align-items: center;
    margin-bottom: 2.75rem;
}

.vision-hero-text h1{
    font-size: 2.6rem;
    letter-spacing: 0.02em;
    text-transform: none;
    margin: 0 0 1.1rem;
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
}

.vision-hero-text h1::after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 76px;
    height: 2px;
    background: rgba(203, 179, 131, 0.9);
    border-radius: 2px;
}


.vision-hero-lede,
.vision-hero-sub{
    font-size: 1rem;
    line-height: 1.85;
    color: #555;
    margin: 0 0 1rem;
}

.vision-hero-note{
    font-size: 0.92rem;
    line-height: 1.75;
    color: #777;
    margin: 0 0 1.35rem;
}

.vision-hero-actions{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem 1.1rem;
}

.vision-hero-link{
    font-size: 0.92rem;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid rgba(203, 179, 131, 0.65);
    padding-bottom: 2px;
}

.vision-hero-link:hover{
    border-bottom-color: rgba(203, 179, 131, 1);
}

.vision-hero-media{
    border-radius: 26px;
    overflow: hidden;
    background: #f2f2f2;
    border: 1px solid #e7e7e7;
    box-shadow: 0 18px 46px rgba(0,0,0,0.10);
    aspect-ratio: 4 / 3;
}

.vision-hero-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Hero CTA spacing + keep link independent (no layout shift on hover) --- */
.vision-hero-cta{
    display: flex;
    align-items: center;
    gap: 1.8rem;
    flex-wrap: nowrap;
}

@media (max-width: 780px){
  .vision-hero-cta{
    flex-wrap: wrap;
    gap: 0.9rem 1.4rem;
  }
}

/* Visualiser CTA: keep width stable + use static eye icon (no ident reveal) */
.vision-hero-cta .visualiser-cta{
    position: relative;
}

/* Match caps sizing to the snapshot pill buttons (COPY TO CLIPBOARD style) */
.vision-hero-cta .visualiser-cta{
    font-size: 0.88rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Keep the eye absolutely static: no lift/shift on hover */
.vision-hero-cta .visualiser-cta:hover{
    transform: none;
}


/* Override global ident reveal so the link never shifts */
.vision-hero-cta .visualiser-cta .hero-button-ident{
    position: static !important;
    width: 28px !important;
    height: 28px;
    opacity: 1 !important;
    margin-left: 22px;
    flex: 0 0 28px;
    transition: none !important;
    transform: none !important;
    pointer-events: none;
}

/* Prevent any global hover reveal from affecting layout */
.vision-hero-cta .visualiser-cta:hover .hero-button-ident{
    width: 28px !important;
    opacity: 1 !important;
    transform: none !important;
    margin-left: 22px !important;
}

/* Static eye icon (expects images/eye.png) */
.vision-hero-cta .visualiser-cta .cta-eye{
    width: 28px;
    height: 28px;
    display: block;
    background-color: #fff;
    -webkit-mask-image: url('images/eye.png');
    mask-image: url('images/eye.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 180ms ease;
    transform: none !important;
}

.vision-hero-cta .visualiser-cta:hover .cta-eye,
.vision-hero-cta .visualiser-cta:focus-visible .cta-eye{
    background-color: var(--champagne, #d6b46a);
}

.vision-hero-cta .vision-hero-link{
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Standardised pill buttons (hero + snapshot actions) --- */

/* Ensure all primary CTAs on this page share the same caps style */
.pill-cta.vision-pill{
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.88rem;
}

.pill-cta.vision-pill .hero-button-label{
    text-transform: inherit;
    letter-spacing: inherit;
    font-size: inherit;
    font-weight: 600;
}

/* --- Lock CTA typography so BUTTON and A render identically --- */
.pill-cta.vision-pill,
.pill-cta.vision-pill .hero-button-label,
.vision-hero-cta .visualiser-cta,
.vision-hero-cta .visualiser-cta .hero-button-label{
  font-size: var(--pb-cta-font-size);
  font-weight: var(--pb-cta-font-weight);
  letter-spacing: var(--pb-cta-letter-spacing);
  text-transform: uppercase;
  font-kerning: none;
  font-feature-settings: "kern" 0;
}



.vision-btn{
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 999px;
    min-height: 50px;
    padding: 0 1.35rem;
    font-size: 0.88rem;
    cursor: pointer;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    line-height: 1;
}

.vision-btn:hover{
    background-color: #222;
}

.vision-btn:focus-visible{
    outline: 2px solid rgba(203, 179, 131, 0.55);
    outline-offset: 3px;
}

.ideas-intro {
    text-align: left;
    margin-bottom: 2.5rem;
}

.ideas-intro h1 {
    font-size: 2.4rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.ideas-intro p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}

/* Section framing */

.ideas-section {
    border-top: 1px solid #eee;
    padding-top: 2rem;
    margin-top: 2rem;
}

.ideas-section h2 {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}

.field-group {
    margin-bottom: 1.5rem;
}

.field-group .label,
.field-group > label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.field-hint {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: #777;
}

/* Inputs & textareas */

.field-group input[type="text"],
.field-group textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.field-group textarea {
    min-height: 90px;
    resize: vertical;
}

/* Styled select (dropdown) */

.select-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 0.6rem; /* breathing room under dropdown */
}

.select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #ccc;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: #f7f7f7;
    color: #333;
    box-sizing: border-box;
}

.select-wrap::after {
    content: "▾";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #555;
    pointer-events: none;
}

.select-wrap select:focus {
    outline: none;
    border-color: #000;
    background-color: #fdfdfd;
}

/* Base grid wrapper for options */

.option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0.75rem 0 0.75rem;
}

/* Text-only options (chips) */

.option-grid.option-grid-text {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem 1.2rem;
}

/* Wider chips (two per row on desktop) */

.option-grid.option-grid-text-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Stacked chip groups for Spaces, services & key people */

.option-grid.option-grid-text-stacked {
    display: block; /* we control layout via chip-subgroups */
    margin-top: 0.75rem;
}

.chip-subgroup {
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem; /* row gap / column gap for chips */
}

.chip-subheading {
    flex: 0 0 100%;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 0.35rem;
}

/* ensure chips inside subgroups behave nicely */
.chip-subgroup .pill-option {
    flex: 0 0 auto; /* size to content, sit horizontally */
    margin-bottom: 0.5rem; /* Added spacing between rows of chips */
}

/* Chip-style options (used for feel, prompts, formats, infrastructure) */

.pill-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.pill-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fafafa;
    box-sizing: border-box;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.pill-bullet {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.25);
    margin-top: 0.08rem;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.02);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.pill-bullet::before {
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    background-color: currentColor;
    -webkit-mask: url("images/resonate-ident-white.png") no-repeat center / contain;
    mask: url("images/resonate-ident-white.png") no-repeat center / contain;
}


.pill-label {
    flex: 1;
    font-size: 0.86rem;
    line-height: 1.4;
    color: #444;
}

/* Pill icon colour (used by the masked ident) */
.pill-inner {
    color: #444;
}

.pill-option input[type="checkbox"]:checked + .pill-inner {
    color: #fff;
}

/* Hover state */

.pill-option:hover .pill-inner {
    background-color: #f0f0f0;
    border-color: #ccc;
}

/* Checked state: charcoal background, white text */

.pill-option input[type="checkbox"]:checked + .pill-inner {
    background-color: #333;
    border-color: #333;
    box-shadow: 0 0 0 1px #333;
}

.pill-option input[type="checkbox"]:checked + .pill-inner .pill-label {
    color: #fff;
    font-weight: 500;
}

.pill-option input[type="checkbox"]:checked + .pill-inner .pill-bullet {
    background-color: rgba(203, 179, 131, 0.14);
    border-color: rgba(203, 179, 131, 0.9);
}

/* Spin the ident on hover + on selection */
.pill-option:hover .pill-bullet::before,
.pill-option input[type="checkbox"]:checked + .pill-inner .pill-bullet::before {
    animation: nav-logo-spin 0.85s cubic-bezier(0.2, 0.7, 0.1, 1);
}


/* --- Pill ident: remove ring + scale ident to full bullet size --- */
.pill-bullet{
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: 18px !important;
  height: 18px !important;
  box-shadow: none !important;
}

.pill-bullet::before{
  width: 18px !important;
  height: 18px !important;
}

.pill-option input[type="checkbox"]:checked + .pill-inner .pill-bullet{
  background: transparent !important;
  border: none !important;
}


/* Card-style options with imagery */

.option-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
    cursor: pointer;
    aspect-ratio: 4 / 3;
}

/* Image fills the card */
.option-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
    z-index: 0;
}

/* Gradient overlay behind the text */
.option-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.25) 35%,
        rgba(0, 0, 0, 0.82) 100%
    );
    pointer-events: none;
    z-index: 1;
}


/* Text wrapper so title & caption never collide */
.option-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.7rem;
    padding: 0 0.9rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    box-sizing: border-box;
    z-index: 2; /* text above image, below tick */
}

.option-title {
    font-size: 0.95rem;
    font-weight: 500;
}

.option-caption {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #e4e4e4;
}

/* Tick indicator (top-right) */

.option-check {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 3; /* tick above everything */
}

.option-check::before {
    content: "✓";
    position: absolute;
    inset: 0;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Hide the native checkbox but keep it accessible */
.option-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Hover & selected states */

.option-card:hover img {
    transform: scale(1.03);
    filter: brightness(0.94);
}

.option-card input[type="checkbox"]:checked ~ img {
    filter: brightness(0.65) contrast(1.03);
}

/* Make selected cards feel richer/darker (modern browsers) */
.option-card:has(input[type="checkbox"]:checked)::before{
    height: 58%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.35) 30%,
        rgba(0, 0, 0, 0.92) 100%
    );
}

.option-card input[type="checkbox"]:checked ~ .option-text {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.option-card input[type="checkbox"]:checked ~ .option-check {
    opacity: 1;
    background-color: #000;
    border-color: #000;
}

/* Snapshot & buttons */

.ideas-actions {
    margin: 2.5rem 0 1rem;
    text-align: left;
}

#generateSnapshot {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    font-size: 0.95rem;
    cursor: pointer;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    line-height: 1;
}

#generateSnapshot:hover {
    background-color: #222;
}

.snapshot-section {
    border-top: 1px solid #eee;
    padding-top: 2.5rem;
    margin-top: 2.5rem;
}

.snapshot-section h2 {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.snapshot-help {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 0.75rem;
}

/* Space between snapshot button and textarea */
.snapshot-create{
    margin-bottom: 16px;
}

/* Snapshot created highlight (JS adds .snapshot-ready / .snapshot-flash) */
#snapshot{
    position: relative;
}

#snapshot.snapshot-ready{
    border: 1px solid rgba(201, 169, 109, 0.70);
    box-shadow: 0 0 0 4px rgba(201, 169, 109, 0.14);
    border-radius: 20px;
    padding: 18px;                 /* keeps highlight off the textarea */
    margin-top: 2.25rem;           /* preserves rhythm once padding is applied */
}

#snapshot.snapshot-ready{
    border-top: none;              /* override .snapshot-section top rule visually */
    padding-top: 18px;
}

#snapshot.snapshot-ready #snapshotText{
    border-color: rgba(201, 169, 109, 0.55);
    margin-top: 6px;
}

#snapshotIndicator{
    display: inline-flex;
    align-items: center;
    min-height: 1.2em;
    font-size: 0.85rem;
    color: rgba(120, 92, 33, 0.95);
    margin-left: 6px;              /* small gap from button */
}

/* A brief "flash" so it's obvious something happened */
#snapshot.snapshot-flash{
    animation: snapshotFlash 900ms ease;
}

@keyframes snapshotFlash{
    0%   { box-shadow: 0 0 0 0 rgba(201, 169, 109, 0.0); }
    35%  { box-shadow: 0 0 0 7px rgba(201, 169, 109, 0.22); }
    100% { box-shadow: 0 0 0 4px rgba(201, 169, 109, 0.14); }
}




#snapshotText {
    width: 100%;
    min-height: 220px;
    padding: 0.8rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.6;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.snapshot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

#copySnapshot,
.button-link {
    background-color: #000;
    color: #fff;
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    line-height: 1;
}

/* Cost estimate text */

.cost-text {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.7;
}

/* Hover */

#copySnapshot:hover,
.button-link:hover {
    background-color: #222;
}

/* Mobile tweaks */

@media (max-width: 768px) {
    #ideas-builder {
        margin-top: 4rem;
    }

    .ideas-intro h1 {
        font-size: 1.8rem;
    }

    .ideas-section h2 {
        font-size: 1.1rem;
    }

    /* Vision hero */
    .vision-hero{
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .vision-hero-media{
        order: -1;
        border-radius: 22px;
    }
    .vision-hero-text h1{
        font-size: 2.1rem;
    }

    /* Wide chips: force 1 column on mobile to prevent overspill */
    .option-grid.option-grid-text-wide{
        grid-template-columns: 1fr;
    }
    .option-grid.option-grid-text-wide .pill-inner{
        width: 100%;
    }
    .pill-label{
        overflow-wrap: anywhere;
        word-break: break-word;
    }

}


/* --- Button ident (snapshot / clipboard / enquiry) --- */
.btn-label{ display:inline-block; }

.btn-ident{
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-ident img{
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
}

/* Spin on hover / focus */
#generateSnapshot:hover .btn-ident img,
#copySnapshot:hover .btn-ident img,
#addToEnquiry:hover .btn-ident img,
#generateSnapshot:focus-visible .btn-ident img,
#copySnapshot:focus-visible .btn-ident img,
#addToEnquiry:focus-visible .btn-ident img{
    animation: nav-logo-spin 0.85s cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* Fallback if global keyframes aren't loaded */
@keyframes nav-logo-spin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* --- Ensure standardised button sizing wins (legacy rules exist above) --- */
#generateSnapshot.vision-btn,
#copySnapshot.vision-btn,
#addToEnquiry.vision-btn{
    min-height: 50px;
    padding: 0 1.35rem;
    font-size: 0.88rem;
    letter-spacing: 0.11em;
    line-height: 1;
}
/* Spin ident on hover / focus for any vision button */
.vision-btn:hover .btn-ident img,
.vision-btn:focus-visible .btn-ident img{
    animation: nav-logo-spin 0.85s cubic-bezier(0.2, 0.7, 0.1, 1);
}


/* --- Visualiser CTA hover: gently expand pill BACKGROUND only (no eye/label movement) --- */
.vision-hero-cta{
  width: 100%;
}

/* keep link closer to the CTA (no far-right push) */
.vision-hero-cta .vision-hero-link{
  margin-left: 0;
}

/* Visualiser CTA: remove layout-changing hover and expand only the pill background */
.vision-hero-cta .visualiser-cta{
  position: relative;
  z-index: 0;
  background: transparent !important;
  overflow: visible;
  /* keep the base pill sizing identical to other vision pills */
}

/* base pill backdrop */
.vision-hero-cta .visualiser-cta::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #000;
  z-index: -1;
  transform: scale(1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* hover/focus: expand the pill only (text + eye remain static) */
.vision-hero-cta .visualiser-cta:hover::after,
.vision-hero-cta .visualiser-cta:focus-visible::after{
  transform: scale(1.035);
  box-shadow: 0 0 0 4px rgba(216,180,106,.14);
}

@media (max-width: 780px){
  .vision-hero-cta{ width: auto; }
}


/* keep the eye absolutely static even on hover (override any old hover rules) */
.vision-hero-cta .visualiser-cta:hover .hero-button-ident,
.vision-hero-cta .visualiser-cta:focus-visible .hero-button-ident{
  margin-left: 22px !important;
  transform: none !important;
}

/* Option grid responsive lock (keeps balanced 3-across on desktop even with wider content) */
@media (max-width: 1023px){
  .option-grid,
  .option-grid.option-grid-text,
  .option-grid.option-grid-text-wide{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }
}

@media (max-width: 649px){
  .option-grid,
  .option-grid.option-grid-text,
  .option-grid.option-grid-text-wide{
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

/* =======================================================================
   FIX: Snapshot "Create my event snapshot" button overhang when active
   -----------------------------------------------------------------------
   On some layouts (notably iOS Safari), the right-side ident/loader can
   spill outside the pill during/after generation. We reserve right space
   and pin the ident/loader inside the pill, without touching any JS logic.
   ======================================================================= */

#generateSnapshot[aria-busy="true"],
#generateSnapshot.is-loading,
#generateSnapshot.loading,
#snapshot.snapshot-ready #generateSnapshot{
    /* Keep the button as a normal pill width (no full-width jump) */
    width: auto;
    max-width: none;
    display: inline-flex;
    flex: 0 0 auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#generateSnapshot[aria-busy="true"] .hero-button-label,
#generateSnapshot.is-loading .hero-button-label,
#generateSnapshot.loading .hero-button-label,
#snapshot.snapshot-ready #generateSnapshot .hero-button-label{
    /* Keep label visually centered while reserving space for the right-side loader/ident */
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
    padding: 0 2.75rem;
}

#generateSnapshot[aria-busy="true"] .hero-button-ident,
#generateSnapshot.is-loading .hero-button-ident,
#generateSnapshot.loading .hero-button-ident,
#snapshot.snapshot-ready #generateSnapshot .hero-button-ident{
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Optional: on touch widths, keep the ident static to avoid accidental spins */
@media (max-width: 768px){
  /* Match mobile pill heights across snapshot actions (so they align with "Add this to my enquiry") */
  #generateSnapshot,
  #copySnapshot{
    min-height: 58px;
    padding: 0.95rem 1.6rem;
    line-height: 1;
  }

  #snapshot.snapshot-ready #generateSnapshot .ident-spin{
    animation: none !important;
  }
}

/* =========================================================
   v2026-04-06 – Your Vision CTA size rebalance
   Reason: this page inherits the shared .pill-cta sizing from style.css,
   which leaves the Visualiser and snapshot buttons taller than intended.
   Keep this fix scoped to .page-vision only.
   ========================================================= */

.page-vision .pill-cta.vision-pill,
.page-vision .vision-hero-cta .visualiser-cta,
.page-vision #generateSnapshot,
.page-vision #copySnapshot,
.page-vision #addToEnquiry {
  min-height: 50px;
  padding: 11px 24px;
  font-size: 0.92rem;
  line-height: 1;
  box-sizing: border-box;
}

.page-vision .pill-cta.vision-pill .hero-button-label,
.page-vision .vision-hero-cta .visualiser-cta .hero-button-label,
.page-vision #generateSnapshot .hero-button-label,
.page-vision #copySnapshot .hero-button-label,
.page-vision #addToEnquiry .hero-button-label {
  font-size: 0.92rem;
  line-height: 1;
}

.page-vision .pill-cta.vision-pill .hero-button-ident img,
.page-vision #generateSnapshot .hero-button-ident img,
.page-vision #copySnapshot .hero-button-ident img,
.page-vision #addToEnquiry .hero-button-ident img {
  width: 24px;
  height: 24px;
}

.page-vision .vision-hero-cta .visualiser-cta {
  padding-right: 24px;
}

.page-vision .vision-hero-cta .visualiser-cta .hero-button-ident,
.page-vision .vision-hero-cta .visualiser-cta:hover .hero-button-ident,
.page-vision .vision-hero-cta .visualiser-cta:focus-visible .hero-button-ident {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px;
  margin-left: 18px !important;
}

.page-vision .vision-hero-cta .visualiser-cta .cta-eye {
  width: 24px;
  height: 24px;
}

.page-vision .snapshot-actions {
  gap: 14px 18px;
}

@media (hover: hover) and (pointer: fine) {
  .page-vision .pill-cta.vision-pill:hover {
    padding-right: 20px;
  }

  .page-vision .pill-cta.vision-pill:hover .hero-button-ident {
    width: 24px;
    margin-left: 12px;
  }
}

@media (max-width: 768px) {
  .page-vision .pill-cta.vision-pill,
  .page-vision .vision-hero-cta .visualiser-cta,
  .page-vision #generateSnapshot,
  .page-vision #copySnapshot,
  .page-vision #addToEnquiry {
    min-height: 50px;
    padding: 11px 20px;
    font-size: 0.88rem;
  }

  .page-vision .pill-cta.vision-pill .hero-button-label,
  .page-vision .vision-hero-cta .visualiser-cta .hero-button-label,
  .page-vision #generateSnapshot .hero-button-label,
  .page-vision #copySnapshot .hero-button-label,
  .page-vision #addToEnquiry .hero-button-label {
    font-size: 0.88rem;
  }

  .page-vision .vision-hero-cta .visualiser-cta {
    padding-right: 20px;
  }

  .page-vision .vision-hero-cta .visualiser-cta .hero-button-ident,
  .page-vision .vision-hero-cta .visualiser-cta:hover .hero-button-ident,
  .page-vision .vision-hero-cta .visualiser-cta:focus-visible .hero-button-ident {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px;
    margin-left: 16px !important;
  }

  .page-vision .vision-hero-cta .visualiser-cta .cta-eye {
    width: 22px;
    height: 22px;
  }

  /* Override older, taller mobile snapshot sizing */
  #generateSnapshot,
  #copySnapshot {
    min-height: 50px !important;
    padding: 11px 20px !important;
  }
}


/* =========================================================
   HARD OVERRIDE: never allow "Build my summary" to become full width
   ========================================================= */
.page-vision #generateSnapshot,
.page-vision #generateSnapshot[aria-busy="true"],
.page-vision #generateSnapshot.is-loading,
.page-vision #generateSnapshot.loading,
.page-vision #snapshot.snapshot-ready #generateSnapshot{
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
}