/*
 * ct-wizard.css
 *
 * CoffeeTrail Multi-Step Wizard — layout, components, states.
 *
 * Design system colors (from Figma Z8TzfW2y9vAOg3HBlwXtuZ):
 *   Primary green:  #00a63e
 *   Error orange:   #f97316
 *   Success teal:   #10b981
 *   Idle border:    #d1d5db
 *   Disabled:       bg #d1d5db (NOT opacity)
 *   Font:           Inter
 *
 * RTL: direction is set on the outer wrapper; all layout uses logical
 * properties where possible (margin-inline, padding-inline, etc.).
 */

/* ============================================================================
   1. CSS Variables
   ============================================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    /* Brand colors — extracted from Figma (Z8TzfW2y9vAOg3HBlwXtuZ),
       validation palette aligned to node 1269-8. */
    --cw-green:          rgb(31, 146, 84);
    --cw-green-dark:     #008c35;
    --cw-green-light:    #dcfce7;
    --cw-green-bg:       #f6fef9;
    --cw-success:        #109e81;
    --cw-error:          #f97216;
    --cw-error-light:    #fef3f2;
    --cw-border-idle:    rgb(210, 201, 184);
    --cw-border-section: #e5e7eb;
    --cw-border-focused: #00a93e;
    --cw-border-valid:   #109e81;
    --cw-border-error:   #f97216;
    --cw-text:           rgb(43, 38, 34);
    --cw-text-secondary: #4a5565;
    --cw-text-muted:     #6b7280;
    --cw-placeholder:    #9ca3af;
    --cw-bg:             #ffffff;
    --cw-radius:         14px;
    --cw-radius-sm:      10px;
    --cw-radius-lg:      16px;
    --cw-shadow:         0 1px 1.5px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
    --cw-header-h:       96px;
    --cw-footer-h:       97px;
    --cw-content-max:    672px;
    --cw-transition:     0.2s ease;
}

/* ============================================================================
   2. Base & Layout
   ============================================================================ */

.ct-wizard-page {
    min-height: 100vh;
    background: #ffffff;
    direction: rtl;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: var(--cw-text);
}

/* Suppress any Elementor / theme content bleeds into wizard shell */
.ct-wizard-page body,
.ct-wizard-page .site-header,
.ct-wizard-page .elementor-location-header,
.ct-wizard-page [class*="elementor-popup"],
.ct-wizard-page #wpadminbar {
    display: none !important;
}

#ct-wizard-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: rgb(244, 238, 227);
}

#ct-wizard-step-content {
    flex: 1;
    padding: 50px 15px calc(var(--cw-footer-h) + 32px);
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
}

#ct-wizard-step-content *{
    font-family: "Rubik", Sans-serif !important;
}

/* ============================================================================
   3. Wizard Header
   ============================================================================ */

       html body.admin-bar {
        margin-top: 0 !important;
    }

.ct-wizard-header {
    /* NOT sticky — static so content flows naturally */
    background: #ffffff;
    border-bottom: 1px solid var(--cw-border-section);
    flex-shrink: 0;
}

.ct-wizard-header__inner {
    max-width: 1040px;
    margin: 0px auto;
    padding: 13px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ---- Logo badge (RIGHT side in RTL = first DOM child) ---- */
.ct-wizard-header__logo-badge {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
}

.ct-wizard-header__logo-badge img {
    width: 48px;
    display: block;
}

.ct-wizard-header__logo-badge .ct-wizard-logo-emoji {
    font-size: 22px;
    line-height: 1;
}

/* Legacy logo image (kept for fallback) */
.ct-wizard-header__logo-img {
    height: 32px;
    display: block;
}

/* ---- Action buttons (LEFT side in RTL = last DOM child) ---- */
.ct-wizard-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
        flex-direction: row-reverse;
        flex: 1 1 0;
    min-width: 0;
}

.ct-wizard-header__save-exit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--cw-border-idle);
    border-radius: 9999px;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #364153;
    transition: background var(--cw-transition), border-color var(--cw-transition);
    white-space: nowrap;
    font-family: inherit;
}

.ct-wizard-header__save-exit-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.ct-wizard-header__questions-btn {
display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    cursor: pointer;
    color: rgb(138, 129, 117);
    font-size: 14px;
    font-weight: 600;
    padding: 6px;
    transition: color var(--cw-transition);
}

.ct-wizard-header__questions-btn:hover {
    color: var(--cw-text);
}

/* Three-segment group indicator ("שלב N מתוך 3") — replaces the old
   percentage progress bar. Hidden on landing/success via inline style set
   by header.php (get_step_group() returns null there). */
.ct-wizard-group-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 24px 14px;
    flex: 1 1 0;
    min-width: 0;
}

.ct-wizard-group-indicator__label {
    font-size: 12px;
    font-weight: 700;
    color: rgb(138, 129, 117);
    white-space: nowrap;
}

.ct-wizard-group-indicator__segments {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    width: 100%;
}

.ct-wizard-group-indicator__segment {
    height: 4px;
    border-radius: 2px;
    background: #e5e7eb;
    transition: background 0.3s ease;
    width: 26px;
}

.ct-wizard-group-indicator__segment.is-active {
    background: var(--cw-green);
}

/* ============================================================================
   4. Wizard Footer
   ============================================================================ */

.ct-wizard-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 100;
    background: rgba(244, 238, 227, 0.94);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgb(234, 227, 214);
    height: var(--cw-footer-h);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ct-wizard-footer__inner {
    max-width: 100%;
    width: 680px;
    margin: 0px auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ct-wizard-footer__message {
    font-size: 14px;
    color: var(--cw-text-secondary);
    text-align: center;
    flex: 1;
}

.ct-wizard-footer__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

/* ============================================================================
   5. Buttons
   ============================================================================ */

.ct-wizard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background var(--cw-transition), color var(--cw-transition);
    font-family: inherit;
    white-space: nowrap;
}

/* Next / primary action — LEFT side visually (RTL end) */
.ct-wizard-btn--next {
    background: rgb(31, 146, 84);
    color: rgb(255, 255, 255);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: rgba(31, 146, 84, 0.25) 0px 2px 8px;
}

.ct-wizard-btn--next:hover:not(:disabled):not(.ct-wizard-btn--disabled) {
    background: var(--cw-green-dark);
}

/* Disabled = green at 50% opacity (Figma: opacity 50%, keep green colour) */
.ct-wizard-btn--next:disabled,
.ct-wizard-btn--next.ct-wizard-btn--disabled {
    background: var(--cw-green);
    color: #ffffff;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
}

/* Back button — RIGHT side visually (RTL start), plain text */
.ct-wizard-btn--next {
    order: 2; /* always leftmost in RTL: Back(-1) | Message(0) | Next(2) */
}

.ct-wizard-btn--back {
background: rgb(255, 253, 249);
    border: 1px solid rgb(219, 212, 199);
    border-radius: 999px;
    padding:11px 26px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: rgb(94, 87, 75);
}

.ct-wizard-btn--back:hover {
    color: var(--cw-text-secondary);
}

.ct-wizard-footer__spacer {
    display: block;
    min-width: 80px;
}

/* ============================================================================
   6. Step content: Typography
   ============================================================================ */

.ct-step {
    padding-top: 8px;
}

.ct-step#ct-step-menu-categories .ct-step__title,
.ct-step#ct-step-menu-categories .ct-step__subtitle{
    text-align: center;
}

/* Step heading — 30px semibold, tracking -0.75px (from Figma) */
.ct-step__title {
    color: var(--cw-text);
    margin: 0 0 12px;
    line-height: 1.2;
    letter-spacing: -0.75px;
    text-align: right;
    font-size: clamp(24px, 5.5vw, 30px);
    font-weight: 800;
}

.ct-step__subtitle {
    font-size: 16px;
    color: var(--cw-text-secondary);
    margin: 0 0 32px;
    line-height: 1.5;
    text-align: right;
}

/* Section heading — 18px semibold */
.ct-step__section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--cw-text);
    margin: 28px 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: right;
}

/* ============================================================================
   7. Form fields
   ============================================================================ */

.ct-field-group {
    margin-bottom: 24px;
}

/* Field label — 16px semibold, right-aligned */
.ct-field-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--cw-text);
    margin-bottom: 12px;
    text-align: right;
}

.ct-field-label--sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--cw-text-muted);
    margin-bottom: 8px;
    text-align: right;
}

.ct-field-label--required::after {
    content: ' *';
    color: var(--cw-error);
}

.ct-field-desc {
    font-size: 14px;
    color: var(--cw-text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
    text-align: right;
}

/* Hint with a leading icon (basics.php cart-name hint) — a wrapper around
   .ct-field-desc's existing text styling rather than a change to it, so the
   six other plain-text .ct-field-desc usages stay untouched. */
.ct-field-desc--with-icon {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.ct-field-desc__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.ct-field-desc__icon svg {
    width: 100%;
    height: 100%;
}

#ct-step-basics .ct-field-desc--with-icon {
   margin: 7px 0px 12px;
    font-size: 13px;
    color: rgb(138, 129, 117);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Collapsible "add English name" toggle link (basics.php) */
.ct-english-name-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 16px;
    cursor: pointer;
    color: var(--cw-green);
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
}

.ct-english-name-toggle:hover {
    color: var(--cw-green-dark);
}

.ct-english-name-toggle svg {
    width: 16px;
    height: 16px;
}

.ct-english-name-field {
    margin-bottom: 4px;
}

/* Input — 50px height, 14px border-radius (from Figma) */
.ct-field {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid var(--cw-border-idle);
    border-radius: var(--cw-radius);
    background: #ffffff;
    color: var(--cw-text);
    outline: none;
    transition: border-color var(--cw-transition), box-shadow var(--cw-transition), background var(--cw-transition);
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

#ct-step-social-links .ct-field{
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-inline-start: 35px;
}

.ct-field::placeholder,
.ct-phone-input::placeholder {
    color: var(--cw-placeholder);
}

/* Focused — green ring (from Figma: border + 2px shadow) */
.ct-field:focus {
    border-color: var(--cw-border-focused);
    box-shadow: 0 0 0 2px var(--cw-green);
    background: rgba(255,255,255,0);
}

/* Valid state — teal border + check glyph (Figma node 1269-8, state #3).
   Inputs don't support ::after, so the check is a background SVG on the
   leading (left, in RTL) edge. */
.ct-field.ct-field--valid {
    border-color: var(--cw-border-valid);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23109e81' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 40px;
}

/* Error state — orange border + warm bg */
.ct-field.ct-field--error {
    border-color: var(--cw-border-error);
    background: var(--cw-error-light);
}

.ct-field:disabled {
    background: #f9fafb;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Textarea variant */
.ct-field--textarea {
    height: auto;
    min-height: 100px;
    padding: 12px 16px;
    resize: vertical;
}

/* Error message below field */
.ct-field-error {
    font-size: 12px;
    color: var(--cw-error);
    margin-top: 6px;
    display: block;
    text-align: right;
}

/* Valid message below field */
.ct-field-valid-msg {
    font-size: 12px;
    color: var(--cw-success);
    margin-top: 6px;
    display: block;
    text-align: right;
}

/* Larger input variant (58px, 16px border-radius) used in address/URL */
.ct-field--lg {
    height: 58px;
    border-radius: var(--cw-radius-lg);
    font-size: 15px;
}

/* Phone input with prefix */
.ct-phone-field {
    display: flex;
    align-items: center;
    /* Phone numbers are LTR content. direction:ltr puts the +972 prefix on the
       LEFT side of the input regardless of the page's RTL direction. */
    direction: ltr;
    border: 1px solid var(--cw-border-idle);
    border-radius: var(--cw-radius-lg);
    overflow: hidden;
    background: #ffffff;
    transition: border-color var(--cw-transition), box-shadow var(--cw-transition);
    height: 49px;
}

.ct-phone-field:focus-within {
    border-color: var(--cw-border-focused);
    box-shadow: 0 0 0 2px var(--cw-green);
}

.ct-phone-field.ct-field--error {
    border-color: var(--cw-border-error);
    background: var(--cw-error-light);
}

.ct-phone-field.ct-field--valid {
    border-color: var(--cw-border-valid);
}

/* ----------------------------------------------------------------------------
   Location picker map (OSM/Leaflet)
   ---------------------------------------------------------------------------- */
#location-picker-map {
    width: 100%;
    height: 280px;
    border-radius: var(--cw-radius);
    margin-top: 8px;
    margin-bottom: 4px;
    overflow: hidden;
    z-index: 0;
}

/* Logo pin marker (L.icon className) — a rounded logo badge */
.ct-map-pin {
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    object-fit: cover;
    background: #fff;
}

@media (max-width: 600px) {
    #location-picker-map {
        height: 240px;
    }
}

.ct-phone-prefix {
    padding: 0 14px;
    font-size: 14px;
    color: var(--cw-text-secondary);
    background: transparent;
    border-right: 1px solid var(--cw-border-idle);
    white-space: nowrap;
    user-select: none;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Prefix dropdown variant (Israeli dialing prefixes) */
.ct-phone-prefix-select {
    padding: 0 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--cw-text-secondary);
    background: rgb(255, 253, 249);
    border: none;
    border-right: 1px solid var(--cw-border-idle);
    height: 100%;
    flex-shrink: 0;
    outline: none;
    cursor: pointer;
    direction: ltr;
    text-align: center;
    text-align-last: center;
}

.ct-phone-input {
    flex: 1;
    padding: 0 12px;
    font-size: 15px;
    font-family: inherit;
    border: none;
    outline: none;
    background: rgb(255, 253, 249);
    color: var(--cw-text);
    direction: ltr;
    text-align: left;
    height: 100%;
}

#ct-step-contact .ct-step__section-title{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: rgb(138, 129, 117);
}

#ct-step-contact .ct-checkbox-item{
        padding: 0;
    background: transparent;
    border: none;
    margin-block-end: 10px;
}

#ct-step-contact .ct-checkbox-item input[type="checkbox"]#ct-autofill-admin-phone{
    width: 15px;
    height: 15px;
}


#ct-step-contact .ct-checkbox-item .ct-checkbox-item__label{
   cursor: pointer;
    font-size: 14px;
    color: rgb(94, 87, 75); 
}

#ct-step-contact .ct-field-group{
    margin-bottom: 5px;
}

#ct-step-contact .ct-field-desc{
    font-size: 13px;
    color: rgb(138, 129, 117);
}

/* Stacked radio rows (business type on the basics step) — reuses .ct-checkbox-item */
.ct-radio-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ct-radio-rows.ct-field--error .ct-checkbox-item {
    border-color: var(--cw-border-error);
    background: var(--cw-error-light);
}

/* ============================================================================
   8. Card selections / Visual card grid (cart-type step)
      Figma node 1136:754 — 280×212px cards, icon on top, centred text
   ============================================================================ */

.ct-card-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

.ct-card-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 42px 26px;
    min-height: 212px;
    cursor: pointer;
    transition: border-color var(--cw-transition);
    background: #ffffff;
    user-select: none;
}

.ct-card-option:hover {
    border-color: var(--cw-border-idle);
}

.ct-card-option--selected {
    border-color: var(--cw-green);
}

.ct-card-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 64×64 rounded square with light-green tint */
.ct-card-option__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--cw-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-card-option__icon-img {
    width: 30px;
    height: 30px;
    display: block;
}

.ct-card-option__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.ct-card-option__title {
    font-size: 17px;
    font-weight: 500;
    color: var(--cw-text);
    line-height: 24px;
}

.ct-card-option__desc {
    font-size: 13px;
    font-weight: 500;
    color: var(--cw-text-muted);
    line-height: 20px;
}

@media (max-width: 480px) {
    .ct-card-group {
        grid-template-columns: 1fr;
    }
    .ct-card-option {
        min-height: 160px;
        padding: 32px 24px;
    }
}

/* ============================================================================
   9. Checkboxes & Radios (Figma: pill buttons with 20px checkbox on start)
   ============================================================================ */

.ct-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* 2-column grid used in perks/filters step */
.ct-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

/* Each checkbox row — pill style from Figma */
.ct-checkbox-item {
display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 11px;
    padding: 11px 16px;
    font-size: 15px;
    cursor: pointer;
    background: rgb(255, 253, 249);
    text-align: right;
    width: 100%;
    color: rgb(43, 38, 34);
    transition: border-color 0.12s;
    border: 1px solid rgb(219, 212, 199);
}

.ct-checkbox-item:hover {
    border-color: var(--cw-border-idle);
}

.ct-checkbox-item:has(input:checked) {
    border-color: rgb(31, 146, 84);
}

/* Validation error flare for a checkbox row (e.g. unaccepted terms on the
   terms step). Mirrors the field error state — red border + warm background. */
.ct-checkbox-item.ct-field--error {
    border-color: var(--cw-border-error);
    background: var(--cw-error-light);
}

.ct-checkbox-item.ct-field--error .ct-checkbox-item__label {
    color: var(--cw-error);
}

/* Figma checkbox: 20px square, 4px radius, 2px border */
.ct-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--cw-border-idle);
    border-radius: 4px;
    background: #ffffff;
    flex-shrink: 0;
    accent-color: var(--cw-green);
    appearance: auto;
    order: -1; /* on LEFT side in RTL (start of flex row) */
    cursor: pointer;
}

.ct-checkbox-item input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--cw-green);
    appearance: auto;
    order: -1;
    cursor: pointer;
        margin: 0;
}

.ct-checkbox-item__label {
font-size: 15px;
    font-weight: normal;
    color: rgb(43, 38, 34);
    flex: 1;
    text-align: right;
}

.ct-checkbox-item__desc {
    font-size: 12px;
    color: var(--cw-text-muted);
    margin-top: 2px;
    display: block;
}

/* Section heading inside checkbox groups */
.ct-checkboxes-section {
    margin-bottom: 28px;
}

.ct-checkboxes-section__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cw-text);
    margin: 0 0 5px;
    text-align: right;
}

.ct-checkboxes-section span.small{
    margin: 0px 0px 14px;
    font-size: 14px;
    color: rgb(138, 129, 117);
    line-height: 1.5;
    display: block;
}

.special-dish-block{
    border: 1px solid rgb(228, 220, 205);
    border-radius: 13px;
    padding: 16px;
    margin-bottom: 12px;
}

.special-dish-block span{
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgb(138, 129, 117);
    margin-bottom: 10px;
}

.special-dish-block .special-field label{
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.special-dish-block .field{
    margin-top: 12px;
}

.ct-special-info-box{
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgb(234, 243, 236);
    border: 1px solid rgb(205, 230, 214);
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 12px;
    font-size: 14px;
    color: rgb(26, 125, 71);
    line-height: 1.5;
}

/* ============================================================================
   10. Upload zones
   ============================================================================ */

.ct-upload-field {
    margin-bottom: 24px;
}

/* Upload zone — Figma: 2px dashed #d1d5db, 16px border-radius */
.ct-upload-zone {
    border: 1px dashed var(--cw-border-idle);
    border-radius: var(--cw-radius);
    padding: 50px 50px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--cw-transition), background var(--cw-transition);
    background: rgb(251, 248, 241);
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ct-upload-zone:hover,
.ct-upload-zone--dragover {
    border-color: var(--cw-green);
    background: var(--cw-green-light);
}

/* Upload icon circle — Figma: 48px green circle with icon */
.ct-upload-zone__icon-wrap {
    width: 48px;
    height: 48px;
    background: var(--cw-green-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    flex-shrink: 0;
}

.ct-upload-zone__icon {
    display: block;
    width: 26px;
    height: 26px;
    /* Centering used to come for free: the old emoji was inline content inside
       a full-width block, centered by .ct-upload-zone's text-align. A fixed-
       width block (needed to size the SVG consistently) no longer stretches to
       fill and center that way, so margin: 0 auto takes over the same job. */
    margin: 0 auto 10px;
    color: #8A8175;
}

.ct-upload-zone__icon svg {
    width: 100%;
    height: 100%;
}

.ct-upload-zone__title {
    font-size: 16px;
    font-weight: 500;
    color: var(--cw-text);
    display: block;
}

.ct-upload-zone__hint {
    font-size: 14px;
    color: var(--cw-text-muted);
    font-weight: 500;
}

.location-field-wrapper .ct-field-desc{
    text-align: center;
    margin-top: 4px;
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(255, 253, 249, 0.92);
    border: 1px solid rgb(228, 220, 205);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    color: rgb(110, 102, 88);
}

textarea#ct-arrival-instructions{
        width: 100%;
    border: 1px solid rgb(219, 212, 199);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    background: rgb(255, 253, 249);
    min-height: 92px;
    resize: vertical;
    margin-bottom: 26px;
    display: block;
    font-weight: 400;
}

.ct-upload-zone[data-field-key="cover_image"] .ct-upload-zone__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgb(230, 243, 234);
    color: rgb(31, 146, 84);
    margin-bottom: 13px;
}

.ct-upload-zone[data-field-key="cover_image"] .ct-upload-zone__icon svg{
    width: 24px;
    height: 24px;
}

.ct-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Gallery thumbnails — horizontal, drag-to-reorder row */
.ct-upload-previews {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}

.ct-upload-previews .ct-upload-preview {
    flex: 0 0 auto;
    cursor: grab;
}

.ct-upload-previews .ct-upload-preview:active {
    cursor: grabbing;
}

/* SortableJS drag states */
.ct-upload-preview.sortable-chosen {
    box-shadow: 0 0 0 2px var(--cw-green);
}

.ct-upload-preview.sortable-ghost {
    opacity: 0.4;
}

.ct-upload-preview {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--cw-radius-sm);
    overflow: hidden;
    background: #F3F4F6;
}

.ct-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-upload-remove {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-gallery-counter {
    font-size: 13px;
    color: var(--cw-text-muted);
    margin-top: 6px;
    display: block;
}

/* Upload processing spinner */
.ct-upload-spinner {
    position: fixed;
    bottom: calc(var(--cw-footer-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 200;
    display: none;
}

/* ============================================================================
   11. Crop overlay
   ============================================================================ */

.ct-crop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ct-crop-inner {
    background: var(--cw-bg);
    border-radius: var(--cw-radius);
    padding: 20px;
    max-width: 560px;
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

/* Cropper.js measures its own available area from this element's box
   (element.parentNode of the <img> it's given), not from anything the image
   itself renders at — so this needs an explicit, self-contained height that
   doesn't depend on what else is in the layout. .ct-crop-actions living
   outside this wrapper (a sibling of it, not of the image) is what makes
   that possible; previously they shared one flex container and Cropper's
   measurement silently absorbed the buttons row's height too. min() keeps
   it comfortably large on desktop while shrinking on short mobile
   viewports, where the buttons row eating a flat height would leave even
   less room for the image than on desktop. */
.ct-crop-image-wrap {
    width: 100%;
    height: min(380px, 55vh);
}

.ct-crop-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ct-crop-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .ct-crop-overlay {
        padding: 12px;
    }

    .ct-crop-inner {
        padding: 14px;
        gap: 12px;
    }

    .ct-crop-image-wrap {
        height: min(320px, 50vh);
    }
}

/* ============================================================================
   12. Modals
   ============================================================================ */

.ct-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ct-modal[hidden] {
    display: none;
}

.ct-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    cursor: pointer;
}

.ct-modal__box {
    position: relative;
    background: var(--cw-bg);
    border-radius: var(--cw-radius);
    padding: 32px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--cw-shadow);
    text-align: center;
    direction: rtl;
    z-index: 1;
}

.ct-modal__box--help {
    text-align: right;
}

.ct-modal__close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--cw-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--cw-transition);
}

.ct-modal__close:hover {
    background: #F3F4F6;
}

.ct-modal__icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.ct-modal__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
}

.ct-modal__subtitle,
.ct-modal__body {
    font-size: 14px;
    color: var(--cw-text-muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.ct-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-modal__contact-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-modal__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
}

.ct-modal__contact-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ct-modal__note {
    font-size: 12px;
    color: var(--cw-text-muted);
    display: block;
    margin-top: 2px;
}

.ct-modal__hours {
    font-size: 13px;
    color: var(--cw-text-muted);
    margin-top: 16px;
}

body.ct-modal-open {
    overflow: hidden;
}

/* ============================================================================
   13. Step-specific: Intro screens (two-column, from Figma Phase 1/2/3 title screens)
   ============================================================================ */

/* Two-column intro layout: image LEFT, text RIGHT in RTL */
.ct-intro-screen {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    min-height: calc(100vh - var(--cw-header-h) - var(--cw-footer-h) - 64px);
    padding: 0;
}

.ct-intro-screen.ct-intro-screen--3{
    flex-direction: row-reverse;
}

/* Image column — LEFT side. In RTL flex, higher order = leftmost. */
.ct-intro-screen__image-col {
    flex: 0 0 46%;
    order: 1; /* LEFT in RTL (higher = leftmost) */
}

.ct-intro-screen__image {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: var(--cw-radius-lg);
    display: block;
    background: var(--cw-border-idle);
    object-position: center 72%;
    height: 331px;
}

/* Text column — RIGHT side */
.ct-intro-screen__text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: right;
}

.ct-intro-screen__step-label {
display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: rgb(31, 146, 84);
    margin-bottom: 12px;
}

.ct-intro-screen__title {
    color: var(--cw-text);
margin: 0px 0px 14px;
    font-size: clamp(28px, 6.5vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.4px;

}

.ct-intro-screen__subtitle {
margin: 0px 0px 22px;
    font-size: clamp(16px, 4vw, 19px);
    color: rgb(138, 129, 117);
    line-height: 1.6;
}

/* Status badge (Phase 2: "אתם כבר על המפה") */
.ct-intro-screen__badge {
    display: flex;
    align-items: flex-start;
    gap: 0;
    background: var(--cw-green-bg);
    border-radius: var(--cw-radius-sm);
    padding: 14px 16px;
    max-width: 340px;
    align-self: flex-end; /* right side of text column */
}

.ct-intro-screen__badge-title {
    margin: 0px 0px 3px;
    font-size: 15px;
    font-weight: 700;
    color: rgb(26, 125, 71);
}

.ct-intro-screen__badge-body {
text-align: right;
    margin: 0px;
    font-size: 14px;
    color: rgb(58, 122, 86);
    line-height: 1.5;
    padding-inline-start: 22px;
}

/* Free-tier exit link (intro-2 only) — plain underlined text, no button chrome,
   sits below the subtitle/badge so it reads as a quieter secondary path next to
   the primary "ממשיכים" footer button. */
.ct-intro-screen__exit-link {
background: none;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    cursor: pointer;
    color: rgb(31, 146, 84);
    font-weight: 700;
    font-size: 15px;
    padding: 0px;
    text-decoration: none;
    text-align: right;
}

.ct-intro-screen__exit-link:hover {
    color: var(--cw-text);
}

/* ── Per-step overrides ── */

/* Intro-1: dark step label */
.ct-intro-screen--1 .ct-intro-screen__step-label {
display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: rgb(31, 146, 84);
    margin-bottom: 12px;
}

/* Intro-2: larger title + subtitle */
.ct-intro-screen--2 .ct-intro-screen__subtitle {
    font-size: 18px;
}
.ct-intro-screen--2 .ct-intro-screen__badge {
   display: flex;
    align-items: flex-start;
    gap: 11px;
    background: rgb(234, 243, 236);
    border: 1px solid rgb(205, 230, 214);
    border-radius: 14px;
    padding: 15px 18px;
    margin-bottom: 22px;
    width: 100%;
    max-width: none;
}

.ct-intro-screen.ct-intro-screen--2{
    align-items: flex-start;
}

/* Intro-3: bold title, smaller subtitle */
.ct-intro-screen--3 .ct-intro-screen__title {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.7px;
}
.ct-intro-screen--3 .ct-intro-screen__subtitle {
    font-size: 16px;
    letter-spacing: -0.31px;
}
.ct-intro-screen--3 .ct-intro-screen__badge {
    background: #f0fdf4;
    border: 1px solid #b9f8cf;
    border-radius: 14px;
    width: 100%;
    max-width: max-content;
    align-self: flex-start;
    margin-block-end: 20px;
}
.ct-intro-screen--3 .ct-intro-screen__badge-title {
    color: #0d542b;
}
.ct-intro-screen--3 .ct-intro-screen__badge-body {
    color: #15803d;
}

/* Image card wrapper (intro-2 and intro-3) */
.ct-intro-screen__image-card {
    background: #fff;
    border-radius: var(--cw-radius-lg);
    overflow: hidden;
}
.ct-intro-screen--2 .ct-intro-screen__image-card {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
}
.ct-intro-screen--3 .ct-intro-screen__image-card {
    padding: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.ct-intro-screen--3 .ct-intro-screen__image-card .ct-intro-screen__image {
    border-radius: 14px;
}

/* Intro-3 reversed: image on RIGHT, text on LEFT */
.ct-intro-screen--reversed .ct-intro-screen__image-col {
    order: 0; /* RIGHT in RTL (0 < text order:1, so image is rightmost) */
}
.ct-intro-screen--reversed .ct-intro-screen__text-col {
    order: 1; /* LEFT in RTL (higher order = leftmost) */
    text-align: right;
}

/* Stacked fallback for mobile / small screens */
@media (max-width: 720px) {
    .ct-intro-screen {
        flex-direction: column-reverse;
        gap: 24px;
        min-height: auto;
    }
    .ct-intro-screen--reversed {
        flex-direction: column-reverse;
    }
    .ct-intro-screen__image-col {
        flex: none;
        width: 100%;
        order: 0;
    }
    .ct-intro-screen__title {
        font-size: 32px;
    }
}

/* ============================================================================
   13a. Step-specific: Welcome / live outro screen ('intro-1-outro')
   ============================================================================ */

.ct-welcome-intro {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 24px 40px;
    text-align: center;
}

.ct-welcome-intro__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 24px;
    padding: 6px 14px;
    border: 1px solid #ece5d8;
    border-radius: 999px;
    background: #f4efe6;
    color: #8a8175;
    font-size: 13px;
    font-weight: 700;
}

.ct-welcome-intro__title {
    margin: 0 0 18px;
    font-family: inherit !important;
    font-size: clamp(28px, 6vw, 38px) !important;
    font-weight: 800 !important;
    line-height: 1.3;
}

.ct-welcome-intro__description {
    margin: 0 0 40px;
    color: #8a8175;
    font-size: 17px;
    line-height: 1.7;
}

.ct-welcome-video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 0;
    border: 1px solid #e4dccd;
    border-radius: 20px;
    background-image: repeating-linear-gradient(
        45deg,
        #ede6d9 0,
        #ede6d9 16px,
        #e5dccb 16px,
        #e5dccb 32px
    );
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font-family: inherit;
}

.ct-welcome-video__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(20, 16, 13, 0.55),
        rgba(20, 16, 13, 0.05) 55%
    );
}

.ct-welcome-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
}

.ct-welcome-video__play-icon {
    margin-right: -2px;
    fill: #1f9254;
}

.ct-welcome-video__speaker {
    position: absolute;
    right: 20px;
    bottom: 16px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
}

.ct-welcome-video__avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #1f9254;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.ct-welcome-video__speaker-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.ct-welcome-intro__note {
    margin: 22px 0 0;
    color: #8a8175;
    font-size: 13.5px;
}

@media (max-width: 600px) {
    .ct-welcome-intro {
        padding: 40px 16px 30px;
    }

    .ct-welcome-intro__description {
        margin-bottom: 28px;
        font-size: 15px;
    }

    .ct-welcome-video {
        aspect-ratio: 4 / 3;
    }

    .ct-welcome-video__play {
        width: 56px;
        height: 56px;
    }
}

/* ============================================================================
   14. Step-specific: Hours
   ============================================================================ */

.ct-hours-banner {
    background: var(--cw-green-light);
    color: var(--cw-green);
    border: 1px solid var(--cw-green);
    border-radius: var(--cw-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.ct-hours-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--cw-text-muted);
    font-size: 13px;
}

.ct-hours-divider::before,
.ct-hours-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

/* Per-day rows */
.ct-hours-rows {
    display: flex;
    flex-direction: column;
}

.ct-hours-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
    direction: rtl;
}

.ct-hours-row__label {
    min-width: 28px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cw-text);
    text-align: right;
}

/* iOS-style toggle switch */
.ct-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}
.ct-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.ct-toggle-slider {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 26px;
    cursor: pointer;
    transition: background .2s;
}
.ct-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.ct-toggle-switch input:checked + .ct-toggle-slider {
    background: var(--cw-green);
}
.ct-toggle-switch input:checked + .ct-toggle-slider::before {
    transform: translateX(18px);
}

/* Inline times */
.ct-hours-row__times {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    direction: rtl;
}

.ct-hours-row__time-label {
    font-size: 13px;
    color: var(--cw-text-muted);
    white-space: nowrap;
}

.ct-hours-time-input {
    width: 108px;
    height: 40px;
    border: 1px solid var(--cw-border-idle);
    border-radius: var(--cw-radius-sm);
    padding: 0 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--cw-text);
    background: #fff;
    direction: ltr;
    text-align: center;
}
.ct-hours-time-input:focus {
    outline: none;
    border-color: var(--cw-green);
    box-shadow: 0 0 0 3px rgba(0,166,62,.12);
}

/* Hide the browser's clock glyph, which the design does not show (R68).
   This removes the ICON ONLY — it is the picker's click affordance, not the
   picker. The field itself stays fully interactive: typing works, the segments
   still take keyboard input, and the picker is still reachable with the down
   arrow. On mobile it is irrelevant either way, because tapping anywhere in
   the field opens the OS picker regardless of this indicator — which is the
   behaviour worth protecting, since cart owners are mostly on phones.
   Chromium-only pseudo-element; Firefox and Safari draw no such glyph, so
   they are unaffected. The AM/PM segment is part of the input's internal
   field structure, NOT this indicator, so this rule deliberately does not
   (and cannot) remove it — that follows the browser/OS locale. */
.ct-hours-time-input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.ct-hours-row__dash {
    color: var(--cw-text-muted);
    font-size: 14px;
}

/* "סגור" sits directly beside the toggle, as in docs/design/hours.html, where
   it is a sibling of the toggle rather than pushed to the far edge (R68). */
.ct-hours-row__closed {
    font-size: 14px;
    color: var(--cw-text-muted);
}

/* ---- R67: per-day status modes + multi-range repeater ----
   The mockup draws only an on/off pill per day and has no control for
   open-all-day or by-appointment-only, both of which the native field supports.
   These styles add that control in the mockup's own visual language rather than
   altering the pill it does specify. */

.ct-hours-row__body {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* Legacy state note (R68). NOT a control — the design has no way to select
   open-all-day or by-appointment-only, and the client accepted dropping them.
   This only reports a state the listing already has, so a cart that is open by
   appointment is not misrepresented as closed, plus one explicit exit to
   ordinary hours. */
.ct-hours-legacy-state {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border: 1px dashed rgb(219, 212, 199);
    border-radius: 10px;
    background: rgb(251, 248, 241);
}

.ct-hours-legacy-state__label {
    font-size: 13px;
    font-weight: 600;
    color: rgb(94, 87, 75);
}

.ct-hours-legacy-state__replace {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cw-green);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
}

.ct-hours-ranges {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-hours-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ct-hours-range__label {
    font-size: 13px;
    color: var(--cw-text-muted);
    white-space: nowrap;
}

.ct-hours-range__separator {
    color: var(--cw-text-muted);
}

.ct-hours-range__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e4dccd;
    border-radius: 8px;
    background: rgb(251, 248, 241);
    color: rgb(138, 129, 117);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.ct-hours-range__remove:hover {
    border-color: var(--cw-border-error);
    color: var(--cw-error);
}

.ct-hours-day__add-range {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cw-green);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .ct-hours-range { gap: 6px; }
    .ct-hours-range__label { display: none; }
}

@media (max-width: 640px) {
    .ct-hours-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .ct-hours-row__times {
        flex-wrap: wrap;
    }
    .ct-hours-time-input {
        width: 90px;
    }
}

/* ============================================================================
   15. Step-specific: Payment
   ============================================================================ */

.ct-payment-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 24px;
    align-items: start;
}

.ct-order-summary {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: var(--cw-radius);
    padding: 20px;
}

.ct-order-summary__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px;
}

.ct-order-line {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #E5E7EB;
}

.ct-order-total {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    padding-top: 10px;
    margin-top: 4px;
}

.ct-order-info-box {
    background: var(--cw-green-light);
    border-radius: var(--cw-radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--cw-green);
    margin-top: 14px;
}

.ct-plan-option {
    border: 2px solid var(--cw-border-idle);
    border-radius: var(--cw-radius-sm);
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color var(--cw-transition), background var(--cw-transition);
}

.ct-plan-option--selected {
    border-color: var(--cw-green);
    background: var(--cw-green-light);
}

.ct-plan-option--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ct-plan-option__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ct-plan-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: #E5E7EB;
    color: var(--cw-text-muted);
}

.ct-plan-badge--soon {
    background: #FEF3C7;
    color: #92400E;
}

/* ============================================================================
   16. Step-specific: Success
   ============================================================================ */

/* ============================================================================
   Success / Completion Screen — Figma 1368:182 (free) / 1369:209 (pro)
   ============================================================================ */

.ct-success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    min-height: 100vh;
    padding: 48px 24px;
}

/* Black 64×64 logo badge, coffee emoji centred inside */
.ct-success-screen__logo {
    width: 64px;
    height: 64px;
    background: #000;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.ct-success-screen__logo-emoji {
    font-size: 32px;
    line-height: 1;
}

/* Free branch only — plain logo image, per docs/design/ct-onboarding-complete-clean.html */
.ct-success-screen__logo-image {
    display: block;
    width: auto;
    height: 58px;
    margin-bottom: 32px;
}

.ct-success-screen__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--cw-text);
    letter-spacing: -0.53px;
    margin: 0 0 24px;
    line-height: 1.25;
}

.ct-success-screen__subtitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--cw-text);
    letter-spacing: -0.45px;
    margin: 0 0 16px;
    max-width: 480px;
}

.ct-success-screen__body {
    font-size: 16px;
    font-weight: 400;
    color: var(--cw-text);
    line-height: 1.6;
    letter-spacing: -0.31px;
    max-width: 560px;
    margin: 0 0 24px;
}

.ct-success-screen__note {
    font-size: 14px;
    color: var(--cw-text-muted);
    letter-spacing: -0.15px;
    margin: 0 0 40px;
}

/* Teal CTA button — #10b981 per Figma */
.ct-success-screen__cta {
    display: block;
    width: 100%;
    max-width: 400px;
    height: 50px;
    background: #10b981;
    color: #fff!important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.23px;
    text-decoration: none;
    border-radius: 10px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 4px;
    transition: background var(--cw-transition);
}

.ct-success-screen__cta:hover {
    background: #059669;
}

/* Underlined secondary link */
.ct-success-screen__link {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--cw-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: 4px;
}

.ct-success-screen__link:hover {
    color: var(--cw-text-secondary);
}

.ct-suggestions-list {
    text-align: right;
    margin-top: 28px;
}

.ct-suggestions-section {
    margin-bottom: 28px;
}

.ct-suggestions-section__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cw-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
}

.ct-suggestion-item {
    border: 1.5px solid #E5E7EB;
    border-radius: var(--cw-radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cw-bg);
}

.ct-suggestion-item__content {
    flex: 1;
}

.ct-suggestion-item__title {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.ct-suggestion-item__desc {
    font-size: 13px;
    color: var(--cw-text-muted);
    line-height: 1.4;
}

.ct-suggestion-item__action {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--cw-green);
    color: var(--cw-green);
    padding: 6px 12px;
    border-radius: var(--cw-radius-sm);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

/* ============================================================================
   17. Info boxes
   ============================================================================ */

.ct-info-box {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--cw-radius-sm);
    padding: 12px 14px;
    font-size: 13px;
    color: #92400E;
    margin: 12px 0;
    line-height: 1.5;
}

.ct-info-box--green {
    background: var(--cw-green-light);
    border-color: var(--cw-green);
    color: var(--cw-green);
}

/* Reset the default browser <p> margin so a body paragraph sits flush —
   matters now that it's a sibling of .ct-info-box__heading rather than the
   box's only content. Inert for the other .ct-info-box usages until/unless
   they're wrapped in <p> too. */
.ct-info-box p {
    margin: 0;
}

/* Heading + icon badge — first .ct-info-box usage with this structure (see
   FINDINGS.md's menu-upload entry); scoped to its own sub-elements rather
   than changing .ct-info-box/.ct-info-box--green, so the other six plain-
   paragraph callouts (images/menu-details/payment) are untouched. */
.ct-info-box__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: rtl;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
}

.ct-info-box__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--cw-radius-sm);
    background: var(--cw-green-dark);
}

.ct-step#ct-step-menu-upload .ct-step__title,
.ct-step#ct-step-menu-upload .ct-step__subtitle {
    text-align: center;
}

.ct-step#ct-step-menu-upload .ct-info-box--green .ct-info-box__heading strong{
    margin: 0px 0px 3px;
    font-size: 15px;
    font-weight: 800;
    color: rgb(25, 97, 59);
}


.ct-step#ct-step-menu-upload .ct-info-box--green .ct-info-box__heading strong,
.ct-step#ct-step-menu-upload .ct-info-box--green .ct-info-box__heading{
    margin-bottom: 0;
}

.ct-step#ct-step-menu-upload .ct-info-box--green p{
    margin: 0px;
    font-size: 13.5px;
    color: rgb(63, 114, 86);
    line-height: 1.55;
    padding-inline-start: 40px;
}


/* Extra bottom spacing before the upload cards — was an inline style on
   this one box; scoped via :has() (same pattern already used elsewhere in
   this file, e.g. .ct-checkbox-item:has(input:checked)) instead of
   touching the shared base rule's margin, since the other six callouts
   don't want it. */
.ct-info-box:has(.ct-info-box__heading) {
    margin-bottom: 20px;
}

/* ============================================================================
   18. Step-specific: Menu upload (either/or image/PDF cards)
   ============================================================================ */

.ct-menu-upload-card {
    position: relative;
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--cw-border-idle);
    border-radius: var(--cw-radius);
    background: #fffdf9;
    transition: border-color var(--cw-transition);
}

.ct-menu-upload-card--selected {
    border: 2px solid var(--cw-green);
}

.ct-menu-upload-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    cursor: pointer;
}

.ct-menu-upload-card__radio-label {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
}

/* Real radio — posted as menu_type, visually hidden in favour of the
   styled dot below (same opacity:0 pattern .ct-card-option uses). */
.ct-menu-upload-card__radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ct-menu-upload-card__radio {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cw-border-idle);
    border-radius: 50%;
    box-sizing: border-box;
    transition: border-color var(--cw-transition), border-width var(--cw-transition);
}

.ct-menu-upload-card--selected .ct-menu-upload-card__radio {
    border-width: 5px;
    border-color: var(--cw-green);
}

.ct-menu-upload-card__title {
    flex: 1 1 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--cw-text);
    text-align: right;
}

.ct-menu-upload-card__type-icon {
    display: flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--cw-text-muted);
}

.ct-menu-upload-card__type-icon svg {
    width: 100%;
    height: 100%;
}

/* "Already uploaded" PDF state — same corner-remove-button convention as
   the image preview (.ct-upload-preview / .ct-upload-remove below), sized
   to fill the dropzone width instead of the fixed 80x80 gallery-tile size
   used for image thumbnails. */
.ct-upload-preview--pdf {
    width: 100%;
    height: auto;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: var(--cw-green-light);
}

.ct-upload-preview__icon {
    display: flex;
    width: 28px;
    height: 28px;
    color: var(--cw-green);
}

.ct-upload-preview__icon svg {
    width: 100%;
    height: 100%;
}

.ct-upload-preview__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--cw-green);
    text-decoration: none;
}

.ct-upload-preview__link:hover {
    text-decoration: underline;
}

/* ============================================================================
   19. Loading state
   ============================================================================ */

.ct-wizard--loading {
    pointer-events: none;
}

.ct-wizard--loading #ct-wizard-step-content {
    opacity: 0.6;
    transition: opacity 0.2s;
}

/* ============================================================================
   19b. Step-specific: Kosher & dietary preferences (ct-step-kosher)

   Adapted from docs/design/kosher-open.css. Two deliberate departures from
   that file, both because it is a static mockup built out of <button>s:
     - selected state uses :has(input:checked) on real radios/checkboxes
       rather than a JS-applied --selected class (same technique
       .ct-checkbox-item already uses in section 9);
     - the certificate uploader reuses the module's own .ct-upload-zone
       instead of the mockup's .ct-dietary-upload, so it keeps the real file
       input, drag/drop, compression and preview/remove behaviour.
   Greens are taken from --cw-green (rgb(31,146,84)), which is exactly the
   mockup's #1f9254; the warm neutrals have no token equivalent and are
   carried over as literals.
   ============================================================================ */

.ct-dietary-card {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid #e4dccd;
    border-radius: 14px;
}

.ct-dietary-card--spaced    { margin-bottom: 26px; }
.ct-dietary-card--top-space { margin-top: 18px; }

.ct-dietary-card__title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cw-text);
    text-align: right;
}

.ct-dietary-card__options {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

/* Same pill component, stacked one per line instead of in a row — used by the
   kosher-type selector, which renders one pill per taxonomy term rather than a
   yes/no pair. ONLY the direction differs; the pill's own colours, border,
   radius and padding are untouched and still come from .ct-dietary-option.

   The two .ct-dietary-option overrides below are not restyling: they neutralise
   the mobile rule at the bottom of this section (`flex: 1 1 0;
   justify-content: center`), which is correct for a horizontal pair but in a
   column would stretch every pill to fill the available height and centre its
   label. Scoped to this modifier so the yes/no groups keep that behaviour. */
.ct-dietary-card__options--stack {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 18px;
}

.ct-dietary-card__options--stack .ct-dietary-option {
    flex: 0 0 auto;
    justify-content: flex-start;
}

/* Yes/no pill. The real radio is visually hidden but still focusable, so
   keyboard and screen-reader behaviour stays native. */
.ct-dietary-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: 1px solid rgb(219, 212, 199);
    border-radius: 11px;
    background: rgb(255, 253, 249);
    color: rgb(94, 87, 75);
    cursor: pointer;
    font-size: 15px;
    transition: border-color 0.12s;
}

.ct-dietary-option input[type="radio"],
.ct-dietary-choice input[type="radio"],
.ct-dietary-choice input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ct-dietary-option:has(input:checked) {
    border: 1.5px solid var(--cw-green);
    color: var(--cw-text);
}

.ct-dietary-option__radio,
.ct-dietary-choice__radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid #cfc6b5;
    border-radius: 50%;
}

.ct-dietary-option:has(input:checked) .ct-dietary-option__radio,
.ct-dietary-choice:has(input:checked) .ct-dietary-choice__radio {
    border: 5px solid var(--cw-green);
}

/* Kosher types are checkboxes (multi-select — מהדרין and רבנות legitimately
   co-occur, see FINDINGS.md R54), so their indicator is square. */
.ct-dietary-choice:has(input[type="checkbox"]) .ct-dietary-choice__radio {
    border-radius: 5px;
}

.ct-dietary-choice:has(input[type="checkbox"]:checked) .ct-dietary-choice__radio {
    border: 2px solid var(--cw-green);
    background: var(--cw-green);
}

.ct-dietary-option:focus-within,
.ct-dietary-choice:focus-within {
    box-shadow: 0 0 0 2px var(--cw-green-light);
}

.ct-dietary-card__details {
    margin-top: 18px;
}

.ct-dietary-card__details-label,
.ct-dietary-card__upload-label {
    color: rgb(138, 129, 117);
    font-size: 14px;
    text-align: right;
}

.ct-dietary-card__details-label { margin: 0 0 12px; }
.ct-dietary-card__upload-label  { margin: 18px 0 8px; }

.ct-dietary-choice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.ct-dietary-choice-list--descriptive { margin-bottom: 20px; }

.ct-dietary-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid rgb(219, 212, 199);
    border-radius: 11px;
    background: rgb(255, 253, 249);
    color: var(--cw-text);
    cursor: pointer;
    font-size: 15px;
    text-align: right;
    transition: border-color 0.12s;
}

.ct-dietary-choice-list--descriptive .ct-dietary-choice { align-items: flex-start; }
.ct-dietary-choice:has(input:checked) { border: 1.5px solid var(--cw-green); }
.ct-dietary-choice-list--descriptive .ct-dietary-choice__radio { margin-top: 1px; }

.ct-dietary-choice__label,
.ct-dietary-choice__content { flex: 1 1 0; }

.ct-dietary-choice__title,
.ct-dietary-choice__description { display: block; }

.ct-dietary-choice__title { font-weight: 600; }

.ct-dietary-choice__description {
    margin-top: 2px;
    color: rgb(138, 129, 117);
    font-size: 13px;
    line-height: 1.45;
}

/* Warning/notice callout (kosher certificate + alcohol licence) */
.ct-dietary-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 13px 15px;
    border: 1px solid #f0ddb0;
    border-radius: 11px;
    background: #fff8ea;
    direction: rtl;
}

.ct-dietary-notice__icon {
    display: flex;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #8a5e12;
}

.ct-dietary-notice__icon svg { width: 100%; height: 100%; }

.ct-dietary-notice__text {
    margin: 0;
    color: rgb(110, 102, 88);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: right;
}

.ct-dietary-notice__text strong { color: #3a352c; }

/* Informational callout (gluten sterility explanation) */
.ct-dietary-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 1px solid #eedfbc;
    border-radius: 12px;
    background: #fcf7ec;
    direction: rtl;
}

.ct-dietary-info__icon {
    display: flex;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: #9a6b14;
}

.ct-dietary-info__icon svg { width: 100%; height: 100%; }

.ct-dietary-info__text {
    color: #6e5a2e;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: right;
}

/* ---- Dish repeater ---- */

.ct-dietary-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-dietary-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-dietary-item__input {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 15px;
    border: 1px solid rgb(219, 212, 199);
    border-radius: 11px;
    background: rgb(255, 253, 249);
    font-family: inherit;
    font-size: 15px;
    color: var(--cw-text);
    direction: rtl;
    text-align: right;
    outline: none;
    transition: border-color var(--cw-transition), box-shadow var(--cw-transition);
}

.ct-dietary-item__input:focus {
    border-color: var(--cw-border-focused);
    box-shadow: 0 0 0 2px var(--cw-green-light);
}

.ct-dietary-item__remove {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e4dccd;
    border-radius: 10px;
    background: rgb(251, 248, 241);
    color: rgb(138, 129, 117);
    cursor: pointer;
}

.ct-dietary-item__remove:hover {
    border-color: var(--cw-border-error);
    color: var(--cw-error);
}

.ct-dietary-item__remove svg { width: 16px; height: 16px; }

.ct-dietary-add-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cw-green);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
}

.ct-dietary-add-item:hover { color: var(--cw-green-dark); }
.ct-dietary-add-item svg { width: 17px; height: 17px; }

/* The certificate zone reuses .ct-upload-zone; only trim its default padding
   so it doesn't dominate the card. */
#ct-step-kosher .ct-upload-zone {
    padding: 22px 20px;
    min-height: 0;
}

@media (max-width: 600px) {
    .ct-dietary-card { padding: 18px; }
    .ct-dietary-card__options { flex-wrap: wrap; }
    .ct-dietary-option { flex: 1 1 0; justify-content: center; }
}

/* ============================================================================
   20. Utilities
   ============================================================================ */

.ct-hidden {
    display: none !important;
}

/* ============================================================================
   21. Mobile responsive
   ============================================================================ */

@media (max-width: 640px) {
    .ct-wizard-header__inner {
        padding: 0 16px;
    }

    #ct-wizard-step-content {
        padding: 20px 16px calc(var(--cw-footer-h) + 20px);
    }

    .ct-modal__box {
        padding: 24px 20px;
    }

    .ct-days-grid {
        gap: 6px;
    }

    .ct-day-toggle-btn {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

/* ============================================================================
   Inline overlay variant
   Used when the wizard is rendered inside an Elementor page (filter fallback)
   rather than via the standalone wizard-shell.php (template_redirect path).
   Covers the full viewport so the Elementor chrome is invisible to the user.
   ============================================================================ */

#ct-wizard-container.ct-wizard-inline {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow-y: auto;
    min-height: 100vh;
    background: #ffffff;
}

/* Prevent the page body from scrolling behind the fixed overlay. */
body:has(#ct-wizard-container.ct-wizard-inline) {
    overflow: hidden;
}

/* ============================================================================
   Landing step — all phases overview
   ============================================================================ */

#ct-wizard-step-content:has(.ct-wizard-landing) {
    max-width: 1000px;
    padding-inline: 24px;
}

#ct-wizard-step-content:has(.ct-step){
    max-width: 710px;

}

.ct-wizard-landing__resume-notice {
    max-width: 952px;
    margin: 20px auto 0;
    padding: 12px 16px;
    font-size: 14px;
}

.ct-wizard-landing__resume-link {
    color: var(--cw-green);
    font-weight: 600;
    margin-inline-start: 8px;
}

.ct-wizard-landing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(32px, 6vw, 72px);
    padding: 48px 0 40px;
}

.ct-wizard-landing__title-col {
    flex: 1 1 340px;
    min-width: 280px;
    text-align: right;
}

.ct-wizard-landing__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: #1f9254;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.ct-wizard-landing__title {
    margin: 0;
    color: #2b2622;
    font-size: clamp(28px, 6.5vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.4px;
    text-wrap: balance;
}

.ct-wizard-landing__plan-note {
    margin: 16px 0 0;
    color: #8a8175;
    font-size: 14px;
}

.ct-wizard-landing__phases-col {
    flex: 1 1 340px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-wizard-landing__phase {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 22px 0;
}

.ct-wizard-landing__phase:first-child {
    padding-top: 4px;
}

.ct-wizard-landing__phase:last-child {
    padding-bottom: 4px;
}

.ct-wizard-landing__phase:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 110px;
    height: 1px;
    background: #efe9dc;
}

.ct-wizard-landing__phase-num {
    font-size: 16px;
    color: #8a8175;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 1px;
}

.ct-wizard-landing__phase-texts {
    text-align: right;
    flex: 1;
}

.ct-wizard-landing__phase-title {
    margin: 0 0 4px;
    color: #2b2622;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.ct-wizard-landing__phase-desc {
    margin: 0;
    color: #8a8175;
    font-size: 14.5px;
    line-height: 1.55;
}

.ct-wizard-landing__phase-media {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #e4dccd;
    border-radius: 20px;
    background: #f6f1e7;
    font-size: 30px;
}

.ct-wizard-landing__phase-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (max-width: 720px) {
    #ct-wizard-step-content:has(.ct-wizard-landing) {
        padding-inline: 16px;
    }

    .ct-wizard-landing {
        flex-direction: column;
        gap: 24px;
        min-height: auto;
        padding: 28px 0 24px;
    }

    .ct-wizard-landing__title-col {
        flex: none;
        width: 100%;
    }

    .ct-wizard-landing__phases-col {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ct-wizard-landing__phase {
        gap: 10px;
    }

    .ct-wizard-landing__phase-media {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .ct-wizard-landing__phase:not(:last-child)::after {
        left: 88px;
    }

    .ct-wizard-landing__phase-title {
        font-size: 16px;
    }

    .ct-wizard-landing__phase-desc {
        font-size: 13.5px;
    }
}

/* ============================================================================
   Intro step image placeholder (fallback when no real photo exists)
   ============================================================================ */

.ct-intro-screen__image-placeholder {
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: var(--cw-radius-lg);
    background: linear-gradient(135deg, #e2f5eb 0%, #c3e9d5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}

/* Mobile responsive fix */
@media (max-width: 640px) {
    .ct-wizard-footer__inner {
        padding: 0 16px;
    }
    .ct-wizard-btn--next,
    .ct-wizard-btn--back {
        font-size: 15px;
    }
    .ct-step__title {
        font-size: 22px;
        letter-spacing: -0.5px;
    }
    .ct-checkbox-grid {
        grid-template-columns: 1fr;
    }
    .ct-payment-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Third-party floating button clearance (wizard shell only)
   Scoped to body.ct-wizard-page so it never affects other pages.
   ============================================================================ */
body.ct-wizard-page .tr-button,
body.ct-wizard-page #tr-button-mobile,
body.ct-wizard-page .wpconsent-consent-floating-button,
body.ct-wizard-page #wpconsent-consent-floating {
    bottom: 105px !important;
}

/* =========================================================================
   Google Business search — hours step (R69)

   Replaces the old pasted-link field. Visual language follows the existing
   ct-field / ct-hours components: same radius, same border tokens, same
   spacing rhythm, so this reads as part of the step rather than bolted on.
   ========================================================================= */

.ct-places {
	position: relative;
}

.ct-places__search {
	position: relative;
}

.ct-places__input {
	width: 100%;
}

.ct-places__spinner {
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid #d8d8d8;
	border-top-color: #219156;
	border-radius: 50%;
	animation: ct-places-spin 0.7s linear infinite;
}

@keyframes ct-places-spin {
	to { transform: rotate(360deg); }
}

.ct-places__results {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.ct-places__result {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	text-align: start;
}

.ct-places__result:hover,
.ct-places__result:focus {
	background: #f4f7f5;
}

.ct-places__result-title {
	font-weight: 600;
	font-size: 14px;
	color: #1a1a1a;
}

.ct-places__result-sub {
	font-size: 12px;
	color: #7a7a7a;
}

.ct-places__empty {
	padding: 12px;
	font-size: 13px;
	color: #7a7a7a;
	text-align: center;
}

.ct-places__connected {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #f1f8f4;
	border: 1px solid #cfe6d9;
	border-radius: 10px;
}

.ct-places__connected-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #219156;
	color: #fff;
	font-size: 13px;
	line-height: 1;
}

.ct-places__connected-name {
	flex: 1;
	font-weight: 600;
	font-size: 14px;
	color: #1a1a1a;
}

.ct-places__disconnect {
	background: none;
	border: none;
	padding: 4px 6px;
	font-size: 13px;
	color: #7a7a7a;
	text-decoration: underline;
	cursor: pointer;
}

.ct-places__disconnect:hover {
	color: #1a1a1a;
}

.ct-places__notice {
	margin: 8px 0 0;
	font-size: 13px;
	color: #4a4a4a;
}

/* =========================================================================
   Story step (story.php)

   From docs/design/story.css. Values kept as designed; the only additions
   are form-state rules the mockup never needed (focus ring, placeholder
   colour, the skip button as a real <button>) and a reset of the outer
   padding, which the wizard shell already provides around every step.
   ========================================================================= */

.ct-story h1,
.ct-story h2,
.ct-story h3,
.ct-story h4 {
  font-family: inherit !important;
}

.ct-story {
  max-width: 680px;
  margin: 0px auto;
  padding: 8px 0 24px;
}

.ct-story__intro {
  text-align: center;
  margin-bottom: 36px;
}

.ct-story__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgb(244, 239, 230);
  border: 1px solid rgb(236, 229, 216);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgb(138, 129, 117);
  margin-bottom: 24px;
}

.ct-story__title {
  margin: 0px 0px 18px;
  font-size: clamp(26px, 5.5vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.3;
}

.ct-story__description {
  margin: 0px 0px 16px;
  font-size: 16px;
  color: rgb(138, 129, 117);
  line-height: 1.7;
}

.ct-story__instructions {
  margin: 0px;
  font-size: 14.5px;
  color: rgb(138, 129, 117);
}

.ct-story-question {
  border: 1px solid rgb(236, 229, 216);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgb(255, 253, 249);
  margin-bottom: 14px;
}

.ct-story-question__header {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 10px;
}

.ct-story-question__number {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(234, 243, 236);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(31, 146, 84);
  font-size: 13px;
  font-weight: 700;
}

.ct-story-question__content {
  flex: 1 1 0%;
}

.ct-story-question__label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ct-story-question__label {
  font-size: 15px;
  font-weight: 700;
  color: rgb(43, 38, 34);
}

.ct-story-question__hint {
  margin: 3px 0px 0px;
  font-size: 13px;
  color: rgb(138, 129, 117);
  line-height: 1.5;
}

.ct-story-question__answer {
  width: 100%;
  border: 1px solid rgb(219, 212, 199);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.6;
  resize: none;
  height: 78px;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  font-family: inherit;
}

.ct-story-question__actions {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
}

.ct-story-question__record {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  background: rgb(234, 243, 236);
  border: 1px solid rgb(205, 231, 213);
  color: rgb(31, 122, 71);
}

.ct-story-question__optional {
  font-size: 11px;
  font-weight: 600;
  color: rgb(138, 129, 117);
  background: rgb(241, 236, 225);
  border-radius: 999px;
  padding: 2px 9px;
}

.ct-story__footer {
  text-align: center;
  margin-top: 8px;
}

.ct-story__skip {
  background: none;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  padding: 6px;
  font-size: 13px;
  color: rgb(179, 170, 155);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}



.ct-story-question__answer:focus {
	outline: none;
	border-color: rgb(31, 146, 84);
	box-shadow: 0 0 0 3px rgba(31, 146, 84, 0.15);
}

.ct-story-question__answer::placeholder {
	color: rgb(179, 170, 155);
}

.ct-story__skip:focus-visible {
	outline: 2px solid rgb(31, 146, 84);
	outline-offset: 2px;
}

.ct-story-question__record:focus-visible {
	outline: 2px solid rgb(31, 146, 84);
	outline-offset: 2px;
}

/* =========================================================================
   Story — record button states (R82)
   is-recording: live, with a pulsing dot so it reads as "on air" without
   relying on colour alone. is-busy: transcribing.
   ========================================================================= */

.ct-story-question__record.is-recording {
	background: rgb(253, 236, 234);
	border-color: rgb(240, 196, 190);
	color: rgb(176, 42, 30);
}

.ct-story-question__record.is-recording .ct-story-question__record-icon {
	animation: ct-story-pulse 1.2s ease-in-out infinite;
}

.ct-story-question__record.is-busy,
.ct-story-question__record:disabled {
	opacity: 0.6;
	cursor: progress;
}

.ct-story-question__record-status {
	font-size: 12px;
	color: rgb(138, 129, 117);
}

.ct-story-question__record-status.is-error {
	color: rgb(176, 42, 30);
}

@keyframes ct-story-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.ct-story-question__record.is-recording .ct-story-question__record-icon {
		animation: none;
	}
}

/* =========================================================================
   Story result step (R83) — from the client's design screenshot
   (2026-09-28): right-aligned title, grey subtitle, one large rounded text
   box per block, grey approval note. Same content width and palette as the
   questions step (.ct-story) so the two read as one flow.
   ========================================================================= */

.ct-story-result {
	max-width: 680px;
	margin: 0 auto;
	padding: 8px 0 24px;
}

.ct-story-result__block + .ct-story-result__block {
	margin-top: 36px;
}

.ct-story-result__title {
	margin: 0 0 6px;
	font-size: clamp(22px, 4.5vw, 26px) !important;
	font-weight: 800 !important;
	line-height: 1.3;
}

.ct-story-result__subtitle {
	margin: 0 0 16px;
	font-size: 15px;
	color: rgb(138, 129, 117);
}

.ct-story-result__box {
	position: relative;
}

.ct-story-result__textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgb(228, 222, 210);
	border-radius: 16px;
	padding: 18px 20px;
	background: rgb(255, 255, 255);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.8;
	color: inherit;
	resize: vertical;
}

.ct-story-result__block--story .ct-story-result__textarea {
	min-height: 380px;
}

.ct-story-result__block--summary .ct-story-result__textarea {
	min-height: 140px;
}

.ct-story-result__textarea:focus {
	outline: none;
	border-color: rgb(31, 146, 84);
	box-shadow: 0 0 0 3px rgba(31, 146, 84, 0.15);
}

.ct-story-result__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	color: rgb(31, 122, 71);
}

.ct-story-result__loading[hidden] {
	display: none;
}

.ct-story-result__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid rgb(205, 231, 213);
	border-top-color: rgb(31, 146, 84);
	border-radius: 50%;
	animation: ct-story-spin 0.9s linear infinite;
}

@keyframes ct-story-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ct-story-result__spinner { animation: none; }
}

.ct-story-result__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font-size: 14px;
	color: rgb(176, 42, 30);
}

.ct-story-result__status[hidden] {
	display: none;
}

.ct-story-result__retry {
	border: 1px solid rgb(205, 231, 213);
	border-radius: 999px;
	background: rgb(234, 243, 236);
	color: rgb(31, 122, 71);
	padding: 6px 14px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ct-story-result__retry:focus-visible {
	outline: 2px solid rgb(31, 146, 84);
	outline-offset: 2px;
}

.ct-story-result__note {
	margin: 24px 0 0;
	font-size: 13px;
	color: rgb(138, 129, 117);
}