/* Invitation Website Builder — accordion shell (modern pass) */

/* The site's full nav menu (desktop .header_menu + mobile #wprmenu_bar
   hamburger from the wp-responsive-menu plugin) now shows normally on
   this page — the earlier "minimal app-shell, hide everything but logo
   + login" approach doesn't apply anymore now that the header is just
   the header and .iw-bottom-actions handles the form's own actions
   separately (sticky bar, not a second header). The Contact button is
   still hidden — that one's unrelated to navigation. */
body.iw-builder-page .site-header .info_list li:first-child {
    display: none;
}

/* page.php (the template this page uses) always renders a page-title +
   featured-image banner (.contact_banner) above the_content() for every
   page — a leftover from the generic page template, not something this
   tool needs. Hiding it here (rather than touching the shared template)
   keeps the builder page starting straight from the toolbar, matching
   the reference, and removes a variable-height element (depends on
   whether a featured image happens to be set) that was contributing to
   inconsistent spacing further down the page. */
body.iw-builder-page .contact_banner {
    display: none;
}

.iw-builder {
    --iw-accent: #ff5c82;
    --iw-accent-dark: #e8446c;
    --iw-accent-tint: #fff0f4;
    --iw-accent-tint-strong: #ffe1eb;
    --iw-ink: #1a1d24;
    --iw-ink-soft: #565c6b;
    --iw-muted: #6b7280;
    --iw-border: #eaecf1;
    --iw-input-border: #d9dce3;
    --iw-surface: #ffffff;
    --iw-surface-sunken: #fbfbfd;
    /* Flat white canvas (confirmed preference, overriding the reference
       screenshot's gray canvas) — since surface is white too, cards need
       their own border/shadow for separation instead of relying on a
       canvas-vs-card color contrast (see .iw-accordion-section below). */
    --iw-canvas: white;

    /* Type scale — every text style in this form maps to one of these, no
       one-off .5px sizes scattered around. */
    --iw-fs-micro: 11px;
    --iw-fs-small: 12px;
    --iw-fs-secondary: 14px;
    --iw-fs-caption: 13px;
    --iw-fs-body: 15.5px;
    --iw-fs-title: 16px;
    --iw-fs-button: 15px;

    --iw-fw-regular: 400;
    --iw-fw-medium: 500;
    --iw-fw-semibold: 600;
    --iw-fw-bold: 700;

    /* One shared horizontal rhythm for header + body so the icon chip and
       the fields below it line up on the same left edge. */
    --iw-section-px: 20px;

    max-width: 720px;
    margin: 0 auto 48px;

    font-family: inherit;
    color: var(--iw-ink);
    background: var(--iw-canvas);
    -webkit-font-smoothing: antialiased;
}
#iw-edit-pane{
    padding: 16px 0;
}

/* Post-purchase edit mode only (?edit_order=/?edit_item=) — lets the
   customer get back to the order they arrived from without relying on the
   browser's own back button, which is unreliable once they've saved/
   previewed a few times. */
.iw-back-to-order-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: var(--iw-fs-secondary);
    font-weight: var(--iw-fw-medium);
    color: var(--iw-ink-soft);
    text-decoration: none;
}

.iw-back-to-order-link:hover {
    color: var(--iw-accent);
}

.iw-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------------------------------------------------------------
   Accordion section card
--------------------------------------------------------------- */

/* Canvas and card are both white, so a border is what actually separates
   one card from the next/from the page — a shadow alone barely reads
   against a same-color background. */
.iw-accordion-section {
    background: var(--iw-surface);
    border: 1px solid var(--iw-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.iw-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px var(--iw-section-px);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

.iw-accordion-header:hover {
    background: var(--iw-surface-sunken);
}

/* Plain, quiet icon — no colored chip/background, no color change when
   open. Matches the reference's minimal accordion look. */
.iw-accordion-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--iw-muted);
}

.iw-accordion-icon svg {
    width: 19px;
    height: 19px;
}

.iw-accordion-title {
    flex: 1;
    font-size: var(--iw-fs-title);
    font-weight: var(--iw-fw-semibold);
    color: var(--iw-ink);
    letter-spacing: -0.01em;
}

.iw-accordion-chevron {
    /* order:-1 moves this first in the row (before the icon/title) to
       match the reference, without touching the PHP markup order in five
       separate section-render methods — chevron stays last in the DOM/
       markup, only its visual position changes. */
    order: -1;
    flex: 0 0 auto;
    display: flex;
    color: var(--iw-muted);
    transform: rotate(0deg);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.iw-accordion-chevron svg {
    width: 18px;
    height: 18px;
}

/* Closed = pointing right (tap to reveal), open = pointing down (content is
   below) — standard disclosure-triangle convention. */
.iw-accordion-section.open .iw-accordion-chevron {
    transform: rotate(90deg);
}

.iw-accordion-section.has-error .iw-accordion-title {
    color: #d33a5a;
}

.iw-accordion-section.has-error .iw-accordion-icon {
    color: #e0334f;
}

.iw-accordion-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--iw-section-px);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

.iw-accordion-section.open .iw-accordion-body {
    max-height: 4000px;
    padding: 4px var(--iw-section-px) 24px;
}

/* ---------------------------------------------------------------
   Shared field styles
--------------------------------------------------------------- */

.iw-field-wrapper {
    margin-bottom: 18px;
}

.iw-field-wrapper:last-child {
    margin-bottom: 0;
}

.iw-field-label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: #444;
    font-size: 12px;
    letter-spacing: 0.1px;
    margin-bottom: 7px;
}

.iw-field-label small {
    font-weight: var(--iw-fw-regular);
    font-size: var(--iw-fs-small);
    color: var(--iw-muted);
}

.iw-req {
    color: var(--iw-accent-dark);
    margin-left: 3px;
    font-weight: var(--iw-fw-semibold);
}

.iw-input,
.iw-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: var(--iw-fw-regular);
    font-family: inherit;
    line-height: 1.4;
    color: var(--iw-ink);
    background: var(--iw-surface);
    border: 1.5px solid var(--iw-input-border);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: none;
}

.iw-textarea {
    height: 20px;
}

/* Force every non-textarea control (text, date, select) to the same box
   height — browsers size a date input's internal segments differently from
   a plain text input, which otherwise makes rows in the same form look
   like they belong to different UIs. */
.iw-input:not(.iw-textarea) {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 48px;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
}

.iw-input::placeholder,
.iw-textarea::placeholder {
    color: #b3b8c4;
}

.iw-input:hover::placeholder,
.iw-textarea:hover::placeholder,
.iw-input:focus::placeholder,
.iw-textarea:focus::placeholder {
    color: #b3b8c4 !important;
}

.iw-family-split .iw-family-prefix{
    font-size: 12px;
}
.iw-family-split{
    border: none;
}

.iw-input:hover,
.iw-textarea:hover {
    border-color: #c5c9d3;
}

.iw-input:focus,
.iw-textarea:focus {
    box-shadow: rgba(255, 92, 130, 0.12) 0px 0px 0px 4px;
    border-color: var(--iw-accent) !important;
}

.iw-input.error,
.iw-textarea.error {
    border-color: red !important;
    background: #fff8f8;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12) !important;
}

.iw-textarea {
    min-height: 96px;
    resize: none;
    line-height: 1.5;
}

/* Keeps the native date-picker icon legible in dark mode (browsers render
   it black by default, which disappears against a dark input). */
input[type="date"].iw-input {
    color-scheme: light;
}

/* Recolor the calendar icon to sit quietly with the rest of the form
   instead of the default flat grey browser icon. */
input[type="date"].iw-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    padding: 4px;
    margin-right: -4px;
    border-radius: 6px;
    transition: opacity 0.15s ease, background 0.15s ease;
}

input[type="date"].iw-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--iw-accent-tint);
}

input[type="date"].iw-input::-webkit-datetime-edit {
    padding: 0;
}

/* Custom dropdown arrow — replaces the browser's default (inconsistent
   across OSes and visually at odds with the rest of the polished inputs). */
select.iw-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 15px;
    padding-right: 38px;
    cursor: pointer;
}

.iw-section-sub {
    font-size: var(--iw-fs-caption);
    font-weight: var(--iw-fw-regular);
    color: var(--iw-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   Action row — ONE copy of Save Draft/Preview/Add to Cart. Mobile keeps
   the fixed-to-bottom bar (confirmed working well). Desktop dropped the
   sticky-to-top treatment — it kept fighting the theme's own header
   (fixed-header collision at some widths, floating alone with no visual
   anchor once the header scrolled away at others) and never quite
   looked intentional. A plain in-flow row at the end of the form, same
   spot the video-form's Back/Next row uses, is simpler and has none of
   sticky positioning's edge cases.
--------------------------------------------------------------- */

.iw-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* nowrap, not wrap — the save-status text (e.g. "Saving...") used to
       push the row over its available width and wrap the buttons onto a
       second line the moment a status message appeared. Buttons are
       flex-shrink:0 (never shrink) and .iw-save-status absorbs any width
       pressure by truncating instead (min-width:0 + ellipsis below). */
    flex-wrap: nowrap;
    gap: 10px;
}

/* Desktop — plain in-flow row after the accordion, separated by a
   divider line rather than its own background/shadow. */
@media (min-width: 681px) {
    .iw-bottom-actions {
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px solid var(--iw-border);
    }
}

/* Mobile — fixed to the bottom of the viewport, thumb-reachable while
   scrolling a long form. Background matches the page canvas exactly
   (opaque, but not a visually distinct strip), since it overlays
   scrolling content underneath it. */
@media (max-width: 680px) {
    .iw-bottom-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--iw-canvas);
        box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.06);
    }

    /* The on-screen keyboard shrinks the viewport but this bar stays
       pinned to the (unshrunk) layout viewport's bottom, so it ends up
       sitting right on top of the keyboard, overlapping whatever field
       is being typed into. Simplest fix that works consistently across
       browsers: hide it entirely while any field has focus (toggled by
       iw-form.js's focusin/focusout delegation) rather than chasing the
       keyboard with visualViewport math. */
    .iw-bottom-actions.iw-keyboard-open {
        display: none;
    }

    /* On mobile there's no spare width left for a truncating status
       string once 2-3 buttons are on the same row (it used to ellipsis
       down to a couple of characters — unreadable for the actual error
       text). Give it its own full-width line above the buttons instead
       of fighting them for space. */
    .iw-save-status {
        order: -1;
        flex: 1 1 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        text-align: center;
        margin-bottom: 2px;
    }

    .iw-save-status:empty {
        display: none;
        margin-bottom: 0;
    }

    /* Reserve room at the bottom of the scrollable content so the fixed
       bar never overlaps the last accordion section. */
    .iw-builder {
        padding-bottom: 84px;
    }

    .iw-accordion-title{
        font-size: 14px;
    }
    .iw-accordion-icon svg{
        width: 16px;
        height: 16px;
    }
    .iw-accordion-header{
        padding: 12px;
    }
    .iw-accordion-chevron svg{
        width: 14px;
        height: 14px;
    }
    .iw-accordion-section.open .iw-accordion-body{
        padding: 4px 12px 20px;
    }
    .iw-accordion-body{
        padding: 0 12px;
    }

}

.iw-save-status {
    /* Shrinks/truncates instead of forcing the row to wrap — min-width:0
       overrides the flex-item default (min-width:auto), which otherwise
       refuses to shrink a nowrap text node below its full natural width. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--iw-fs-caption);
    font-weight: var(--iw-fw-regular);
    color: var(--iw-muted);
    white-space: nowrap;
}

.iw-save-status.iw-status-error {
    color: #e0334f;
    font-weight: var(--iw-fw-semibold);
}

.iw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 7px;
    padding: 12px 18px;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    font-size: var(--iw-fs-button);
    font-family: inherit;
    font-weight: var(--iw-fw-semibold);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.iw-btn:active {
    transform: scale(0.97);
}

.iw-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* A real secondary button (bordered pill) — the earlier plain-text
   treatment read as broken/unstyled rather than "deliberately quiet". */
.iw-btn-save {
    background: var(--iw-surface);
    color: var(--iw-ink-soft);
    border: 1.5px solid var(--iw-input-border);
}

.iw-btn-save:hover {
    border-color: #c5c9d3;
    background: var(--iw-surface-sunken);
}

/* Publish — outline style (white fill, pink border + text) matching the
   reference exactly, rather than a solid filled pill. Color itself still
   matches the theme header's own Login/Signup button (.btn-primary in
   style.css: #FF7396 / hover #e6506f), so it's the same intentional
   accent, just applied as an outline here instead of a solid fill. */
.iw-btn-cart {
    background: var(--iw-surface);
    color: #FF7396;
    border: 1.5px solid #FF7396;
}

.iw-btn-cart:hover {
    background: #fff0f4;
    border-color: #e6506f;
    color: #e6506f;
}

/* Preview sits between the two — a real bordered pill (more visual weight
   than the plain-text Save Draft) but not filled/colored like Add to Cart,
   since it opens something rather than committing to a purchase. */
.iw-btn-outline {
    background: var(--iw-surface);
    color: var(--iw-ink-soft);
    border: 1.5px solid var(--iw-input-border);
}

.iw-btn-outline:hover {
    border-color: #c5c9d3;
    background: var(--iw-surface-sunken);
}

/* ---------------------------------------------------------------
   Full-screen preview overlay — a real immersive takeover (matches the
   video product flow's preview step) instead of an in-page pane sitting
   under the site header. body.iw-preview-active (added by iw-form.js)
   hides the theme header entirely while this is open.
--------------------------------------------------------------- */

.iw-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    background: var(--iw-surface);
}

body.iw-preview-active .site-header {
    display: none !important;
}

body.iw-preview-active {
    overflow: hidden;
}

.iw-preview-body {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: var(--iw-surface);
}

.iw-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ---------------------------------------------------------------
   Preview loading — a step-by-step "preparing your website" screen
   instead of a bare spinner. The heading is the only category-specific
   piece (rendered server-side from IWB_Category_Base::get_label()) —
   the step list/copy is deliberately generic so a future category
   (birthday, anniversary, ...) gets this exact same loader for free.
   Progress is simulated (advanceOneMoreStep()/finishPreviewSteps() in
   iw-form.js) since a same-origin iframe load is a single opaque
   event, not real granular progress.
--------------------------------------------------------------- */
.iw-preview-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 32px 20px;
    overflow-y: auto;
    text-align: center;
    background: radial-gradient( 120% 100% at 50% 0%, var(--iw-accent-tint-strong) 0%, var(--iw-surface) 55%, var(--iw-accent-tint) 100% );
}

.iw-preview-loading.is-visible {
    display: flex;
}

.iw-preview-loading__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    color: var(--iw-accent);
}

.iw-preview-loading__icon svg {
    width: 100%;
    height: 100%;
}

.iw-preview-loading__eyebrow {
    margin: 0;
    font-size: var(--iw-fs-caption);
    font-weight: var(--iw-fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c9a55d;
}

.iw-preview-loading__title {
    margin: 4px 0 0;
    font-size: 28px;
    font-weight: var(--iw-fw-semibold);
    color: var(--iw-ink);
}

.iw-preview-loading__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 130px;
    margin: 14px 0 12px;
}

.iw-preview-loading__divider::before,
.iw-preview-loading__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--iw-input-border);
}

.iw-preview-loading__divider-heart {
    display: flex;
    width: 13px;
    height: 13px;
    color: var(--iw-accent);
}

.iw-preview-loading__divider-heart svg {
    width: 100%;
    height: 100%;
}

.iw-preview-loading__subtitle {
    margin: 0 0 22px;
    max-width: 360px;
    font-size: var(--iw-fs-secondary);
    color: var(--iw-ink-soft);
    line-height: 1.55;
}

.iw-preview-loading__card {
    width: 100%;
    max-width: 380px;
    padding: 24px 22px;
    border-radius: 20px;
    background: var(--iw-surface);
    box-shadow: 0 24px 50px -24px rgba( 16, 24, 40, 0.18 );
}

.iw-preview-loading__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.iw-preview-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 20px;
}

.iw-preview-step:last-child {
    padding-bottom: 0;
}

.iw-preview-step__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--iw-input-border);
    color: transparent;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.iw-preview-step__icon svg {
    width: 12px;
    height: 12px;
}

.iw-preview-step:not(:last-child) .iw-preview-step__icon::after {
    content: '';
    position: absolute;
    top: 104%;
    left: 50%;
    width: 1px;
    height: 45px;
    background: var(--iw-input-border);
    transform: translateX(-50%);
}

.iw-preview-step__text {
    padding-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.iw-preview-step__title {
    font-size: var(--iw-fs-secondary);
    font-weight: var(--iw-fw-semibold);
    color: var(--iw-muted);
    transition: color 0.25s ease;
}

.iw-preview-step__subtitle {
    font-size: var(--iw-fs-small);
    color: var(--iw-muted);
    opacity: 0.8;
}

.iw-preview-step.is-active .iw-preview-step__icon {
    border-style: dashed;
    border-color: var(--iw-accent);
}

.iw-preview-step.is-active .iw-preview-step__title {
    color: var(--iw-accent-dark);
}

.iw-preview-step.is-done .iw-preview-step__icon {
    border-style: solid;
    border-color: var(--iw-accent);
    background: var(--iw-accent);
    color: #fff;
}

.iw-preview-step.is-done .iw-preview-step__title {
    color: var(--iw-ink);
}

.iw-preview-loading__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.iw-preview-loading__progress-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--iw-border);
    overflow: hidden;
}

.iw-preview-loading__progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--iw-accent);
    transition: width 0.6s ease;
}

.iw-preview-loading__progress-percent {
    flex-shrink: 0;
    min-width: 34px;
    font-size: var(--iw-fs-caption);
    font-weight: var(--iw-fw-semibold);
    color: var(--iw-accent-dark);
    text-align: right;
}

.iw-preview-loading__footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 0;
    font-size: var(--iw-fs-small);
    color: var(--iw-muted);
}

.iw-preview-loading__footer svg {
    width: 14px;
    height: 14px;
    color: var(--iw-accent);
}

.iw-preview-bottom-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px var(--iw-section-px) calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--iw-border);
    background: var(--iw-surface);
}

/* Small phones — reclaim a bit of horizontal room; --iw-section-px keeps
   header/body/field alignment intact since everything derives from it. */
@media (max-width: 380px) {
    .iw-builder {
        --iw-section-px: 14px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .iw-save-status {
        display: none;
    }

    .iw-btn {
        padding: 12px 14px;
    }

    .iw-btn-save {
        padding: 12px 8px;
    }
}


.site-footer{
    display:none;
}