/**
* All of the CSS for your public-facing functionality should be
* included in this file.
*/

/* ---------------------------------------------
   Layout / Global
----------------------------------------------*/
#content .row {
    max-width: 90%;
}

.cpb-pizza-builder-shortcode * {
    font-family: Montserrat, sans-serif;
}

.cpb-pizza-builder-shortcode {
    width: 100%;
    border-radius: 10px;
    padding: 30px 15px;
}

.cpb-pizza-builder-shortcode .cpb-main-title {
    color: rgba(74, 74, 74, 0.85);
    font-size: 36px;
    margin-bottom: 5px;
}

.cpb-pizza-builder-shortcode .cpb-sub-title {
    color: rgba(74, 74, 74, 0.85);
    font-size: 22px;
}

.cpb-pizza-builder-shortcode .cpb-main-container {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.cpb-pizza-builder-shortcode .cpb-steps-container {
    flex: 1 1 70%;
}
.cpb-pizza-builder-shortcode .cpb-order-summary-container {
    flex: 1 1 30%;
}

.cpb-pizza-builder-shortcode .cpb-order-summary-container .cpb-main-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cpb-pizza-builder-shortcode .cpb-main-card {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: left;
    /* border-top: 4px solid #f94c01; */
    /* border-bottom: 4px solid #f94c01; */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
    min-height: 500px;
}

.cpb-pizza-builder-shortcode .cpb-center {
    text-align: center;
}

/* ---------------------------------------------
   Step 1 — Size
----------------------------------------------*/
.cpb-pizza-builder-shortcode .cpb-size-container {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.cpb-pizza-builder-shortcode .cpb-single-size {
    flex: 1 1 30%;
    text-align: center;
    min-width: 220px;
}

/* Base Card */
.cpb-pizza-builder-shortcode .cpb-card {
    background: #fff;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* border-top: 4px solid #f94c01; */
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hover */
@media (hover: hover) {
    .cpb-pizza-builder-shortcode .cpb-card:hover {
        border: 1px solid #f94c01;
        border-top: 4px solid #f94c01;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
        transform: translateY(-2px);
    }
}

/* Click Press Feedback */
.cpb-pizza-builder-shortcode .cpb-card:active {
    transform: translateY(-1px);
}

/* Active / Selected */
.cpb-pizza-builder-shortcode .cpb-card.active {
    border: 1px solid #f94c01;
    border-top: 4px solid #f94c01;
    background-color: rgba(249, 76, 1, 0.07);
    box-shadow: 0 8px 20px rgba(249, 76, 1, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.14);
}

/* --- Pizza Graphic (shared in size/divide) --- */
.cpb-pizza-builder-shortcode .cpb-size-visual,
.cpb-pizza-builder-shortcode .cpb-divide-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.cpb-pizza-builder-shortcode .cpb-circle {
    width: 90px;
    height: 90px;
    background: #ff6b2c;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform 0.6s ease;
    box-shadow: 0 8px 14px rgba(249, 76, 1, 0.35);
}

/* Pizza Image Scale Control (shared) */
.cpb-pizza-builder-shortcode .cpb-pizza {
    width: var(--pizza-size, 100%);
    height: auto;
    transition: transform 0.4s ease;
    pointer-events: none;
    user-select: none;
}

/* Size Scaling (Step 1) */
.cpb-pizza-builder-shortcode .cpb-card[data-size="small"] {
    --pizza-size: 70%;
}
.cpb-pizza-builder-shortcode .cpb-card[data-size="medium"] {
    --pizza-size: 80%;
}
.cpb-pizza-builder-shortcode .cpb-card[data-size="large"] {
    --pizza-size: 90%;
}

/* Hover Animation */
/* .cpb-pizza-builder-shortcode .cpb-card:hover .cpb-circle,
.cpb-pizza-builder-shortcode .cpb-card.active .cpb-circle {
    animation: cpb-circle-spin 0.3s linear 1;
} */
.cpb-pizza-builder-shortcode .cpb-card:hover .cpb-pizza {
    transform: scale(1.06);
}

/* Spin Animation */
/* @keyframes cpb-circle-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
} */

/* Price + Meta */
.cpb-size-price {
    font-size: 18px;
    font-weight: bold;
    color: #f94c01;
    margin-top: 6px;
}
.cpb-size-meta {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------
   Stepper
----------------------------------------------*/
.cpb-pizza-builder-shortcode .cpb-steps-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin: 8px 0 18px;
    border-radius: 14px;
    overflow: auto;
    scrollbar-width: none;
}
.cpb-pizza-builder-shortcode .cpb-steps-nav::-webkit-scrollbar {
    display: none;
}

.cpb-pizza-builder-shortcode .cpb-step {
    all: unset;
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    min-width: 100px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
    transition: transform 0.18s ease;
}
.cpb-pizza-builder-shortcode .cpb-step:focus-visible {
    outline: 2px solid #f94c01;
    outline-offset: 4px;
    border-radius: 10px;
}

/* connectors */
.cpb-pizza-builder-shortcode .cpb-step::after {
    content: "";
    position: absolute;
    top: 21px;
    left: calc(50%);
    right: -50%;
    height: 3px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 1;
}
.cpb-pizza-builder-shortcode .cpb-step:last-child::after {
    display: none;
}

/* circle */
.cpb-pizza-builder-shortcode .cpb-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #fff;
    background: radial-gradient(circle at 30% 30%, #bababa, #cacaca);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
        background 0.2s ease;
    position: relative;
    z-index: 2;
}

.cpb-pizza-builder-shortcode .cpb-step-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
    letter-spacing: 0.2px;
}

/* ACTIVE / COMPLETE */
.cpb-pizza-builder-shortcode .cpb-step.is-active .cpb-step-circle {
    background: #f94c01;
    color: #fff;
    box-shadow: 0 0 14px rgba(249, 76, 1, 0.45);
    transform: scale(1.15);
}
.cpb-pizza-builder-shortcode .cpb-step.is-active .cpb-step-title {
    color: #f94c01;
    font-weight: 700;
}
.cpb-pizza-builder-shortcode .cpb-step.is-complete .cpb-step-circle {
    background: #ffb67a;
    color: #fff;
    transform: scale(1.08);
}
.cpb-pizza-builder-shortcode .cpb-step.is-complete .cpb-step-title {
    color: #d86d29;
}
.cpb-pizza-builder-shortcode .cpb-step.is-complete::after {
    background: #ffb67a;
}

@media (hover: hover) {
    .cpb-pizza-builder-shortcode .cpb-step:hover .cpb-step-circle,
    .cpb-pizza-builder-shortcode .cpb-step:hover .cpb-step-title {
        transform: translateY(-1px);
    }
}

/* ---------------------------------------------
   Actions (Prev / Next)
----------------------------------------------*/
.cpb-pizza-builder-shortcode .cpb-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
    display: none;
}
.cpb-pizza-builder-shortcode .cpb-actions button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cpb-pizza-builder-shortcode .cpb-prev-step-btn {
    grid-column: 1;
    background: #fff;
    color: #f94c01;
    border: 2px solid #f94c01;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.cpb-pizza-builder-shortcode .cpb-next-step-btn {
    grid-column: 2;
    background: radial-gradient(circle at 30% 30%, #ff7a3a, #f94c01);
    color: #fff;
    border: none;
    box-shadow: 0 6px 14px rgba(249, 76, 1, 0.35);
}
@media (hover: hover) {
    .cpb-pizza-builder-shortcode .cpb-next-step-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(249, 76, 1, 0.45);
    }
    .cpb-pizza-builder-shortcode .cpb-prev-step-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 14px rgba(0, 0, 0, 0.14);
    }
}
.cpb-pizza-builder-shortcode .cpb-actions button:active {
    transform: translateY(-1px);
}
.cpb-pizza-builder-shortcode .cpb-actions button:focus-visible {
    outline: 3px solid rgba(249, 76, 1, 0.45);
    outline-offset: 4px;
}
.cpb-pizza-builder-shortcode .cpb-actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}
.cpb-pizza-builder-shortcode .cpb-prev-step-btn:disabled {
    display: none;
}

/* ---------------------------------------------
   Divider
----------------------------------------------*/
.cpb-pizza-builder-shortcode .cpb-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 6px 0 18px;
}
.cpb-pizza-builder-shortcode .cpb-divider::before,
.cpb-pizza-builder-shortcode .cpb-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 3px;
    background: #f94c01;
    opacity: 0.95;
    border-radius: 2px;
    visibility: hidden;
}
.cpb-pizza-builder-shortcode .cpb-divider__label {
    display: inline-block;
    color: #f94c01;
    border-radius: 8px;
    padding: 6px 18px;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.2px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 50%,
        calc(100% - 10px) 100%,
        10px 100%,
        0 50%
    );
}

/* ---------------------------------------------
   Step 2 — Divide
----------------------------------------------*/
.cpb-pizza-builder-shortcode .cpb-divide-container {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}
.cpb-pizza-builder-shortcode .cpb-single-divide {
    flex: 1 1 30%;
    text-align: center;
    min-width: 220px;
}
.cpb-pizza-builder-shortcode .cpb-card[data-divide="whole"] {
    --pizza-size: 88%;
}
.cpb-pizza-builder-shortcode .cpb-card[data-divide="half"] {
    --pizza-size: 88%;
}
.cpb-pizza-builder-shortcode .cpb-card[data-divide="quarters"] {
    --pizza-size: 86%;
}

.cpb-divide-meta {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

/* Accessibility focus (size & divide) */
.cpb-pizza-builder-shortcode .cpb-single-divide .cpb-card:focus-visible,
.cpb-pizza-builder-shortcode .cpb-single-size .cpb-card:focus-visible {
    outline: 3px solid rgba(249, 76, 1, 0.45);
    outline-offset: 4px;
    border-radius: 12px;
}

.cpb-pizza-builder-shortcode .cpb-d-none {
    display: none !important;
}

/* =========================================================
   Lightweight slide transitions
========================================================= */
.cpb-pizza-builder-shortcode .cpb-steps {
    position: relative;
}
.cpb-pizza-builder-shortcode .cpb-steps > [class*="cpb-step-"] {
    will-change: transform, opacity;
    transition: transform 280ms ease, opacity 280ms ease;
}
.cpb-pizza-builder-shortcode .cpb-step--overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}
.cpb-pizza-builder-shortcode .cpb-slide-in-from-right {
    transform: translateX(24px);
    opacity: 0;
}
.cpb-pizza-builder-shortcode .cpb-slide-in-from-left {
    transform: translateX(-24px);
    opacity: 0;
}
.cpb-pizza-builder-shortcode .cpb-anim-active {
    transform: translateX(0);
    opacity: 1;
}
.cpb-pizza-builder-shortcode .cpb-slide-out-to-left {
    transform: translateX(-24px);
    opacity: 0;
}
.cpb-pizza-builder-shortcode .cpb-slide-out-to-right {
    transform: translateX(24px);
    opacity: 0;
}

/* =========================================================
   Step 3 — Flavor (ALL FLAVOR CLASSES)
========================================================= */
.cpb-flavor-grid {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}
.cpb-single-flavor {
    flex: 1 1 30%;
    text-align: center;
    min-width: 220px;
}

/* flavor visual */
.cpb-flavor-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.cpb-flavor-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform 0.6s ease;
}
.cpb-flavor-image {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
    pointer-events: none;
    user-select: none;
}

/* Hover animation scoped to flavor */
/* .cpb-flavor-grid .cpb-card:hover .cpb-flavor-circle,
.cpb-flavor-grid .cpb-card.active .cpb-flavor-circle {
    animation: cpb-circle-spin 0.3s linear 1;
} */
.cpb-flavor-grid .cpb-card:hover .cpb-flavor-image {
    transform: scale(1.06);
}

/* flavor text */
.cpb-flavor-title {
    font-size: 1.05rem;
    margin: 6px 0 4px;
}
.cpb-flavor-desc {
    font-size: 0.92rem;
    color: rgba(0, 0, 0, 0.65);
    min-height: 2.6em;
    margin-bottom: 6px;
}
.cpb-flavor-price {
    font-size: 18px;
    font-weight: bold;
    color: #f94c01;
    margin-top: 6px;
}

/* ==== CONSISTENCY + PRICE ALIGNMENT ==== */
.cpb-pizza-builder-shortcode .cpb-single-size.cpb-card,
.cpb-pizza-builder-shortcode .cpb-single-divide.cpb-card,
.cpb-pizza-builder-shortcode .cpb-single-flavor.cpb-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cpb-pizza-builder-shortcode .cpb-size-price,
.cpb-pizza-builder-shortcode .cpb-flavor-price {
    margin-top: auto;
}

.cpb-pizza-builder-shortcode .cpb-flavor-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.4;
    min-height: calc(1em * 1.4 * 3);
}

.cpb-pizza-builder-shortcode .cpb-card h1 {
    margin: 8px 0 6px;
}
.cpb-pizza-builder-shortcode .cpb-flavor-visual,
.cpb-pizza-builder-shortcode .cpb-size-visual,
.cpb-pizza-builder-shortcode .cpb-divide-visual {
    margin-bottom: 12px;
}

.cpb-pizza-builder-shortcode .cpb-circle,
.cpb-pizza-builder-shortcode .cpb-flavor-circle {
    width: 90px;
    height: 90px;
}

.cpb-pizza-builder-shortcode .cpb-flavor-image,
.cpb-pizza-builder-shortcode .cpb-pizza {
    width: 100%;
    height: auto;
    max-width: 90px;
}

/* =========================================================
   Search Input (Underline Animation)
========================================================= */
.cpb-search {
    position: relative;
    margin: 10px 0 6px;
}
.cpb-search-wrapper {
    position: relative;
}
.cpb-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: none;
    outline: none;
    border-radius: 0;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.86);
    -webkit-appearance: none;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 2px !important;
    border-bottom: 1px solid #f54e11 !important;
}
.cpb-search-input::placeholder {
    color: rgba(0, 0, 0, 0.45);
}
.cpb-search-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    height: 2px;
    background: #f94c01;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 280ms ease;
    pointer-events: none;
    border-radius: 2px;
}
.cpb-search-input:focus + .cpb-search-wrapper::after,
.cpb-search-wrapper:has(.cpb-search-input:focus)::after {
    transform: scaleX(1);
    transform-origin: left;
}
.cpb-search-empty {
    color: rgba(0, 0, 0, 0.6);
    margin-top: 8px;
}
.cpb-hidden {
    display: none !important;
}

/* =========================================================
   STEP 4 Sub-steps (Remove / Ingredients / Exclusive / Premium)
========================================================= */
.cpb-pizza-builder-shortcode .cpb-substeps-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin: 6px 0 14px;
    border-radius: 12px;
    overflow: auto;
    scrollbar-width: none;
}
.cpb-pizza-builder-shortcode .cpb-substeps-nav::-webkit-scrollbar {
    display: none;
}

.cpb-pizza-builder-shortcode .cpb-substep {
    all: unset;
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    min-width: 140px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    text-align: center;
    transition: transform 0.18s ease;
}
.cpb-pizza-builder-shortcode .cpb-substep::after {
    content: "";
    position: absolute;
    top: 20px;
    left: calc(50% + 24px);
    right: -50%;
    height: 3px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}
.cpb-pizza-builder-shortcode .cpb-substep:last-child::after {
    display: none;
}
.cpb-pizza-builder-shortcode .cpb-substep .cpb-step-circle {
    width: 40px;
    height: 40px;
}
.cpb-pizza-builder-shortcode .cpb-substep.is-active .cpb-step-circle {
    background: #f94c01;
    color: #fff;
    box-shadow: 0 0 14px rgba(249, 76, 1, 0.45);
    transform: scale(1.1);
}
.cpb-pizza-builder-shortcode .cpb-substep.is-active .cpb-step-title {
    color: #f94c01;
    font-weight: 700;
}
.cpb-pizza-builder-shortcode .cpb-substep.is-complete .cpb-step-circle {
    background: #ffb67a;
    color: #fff;
    transform: scale(1.06);
}
.cpb-pizza-builder-shortcode .cpb-substep.is-complete .cpb-step-title {
    color: #d86d29;
}
@media (hover: hover) {
    .cpb-pizza-builder-shortcode .cpb-substep:hover {
        transform: translateY(-1px);
    }
}

/* Panels */
.cpb-pizza-builder-shortcode .cpb-substeps {
    position: relative;
}
.cpb-pizza-builder-shortcode .cpb-substeps .cpb-substep-panel {
    will-change: transform, opacity;
    transition: transform 220ms ease, opacity 220ms ease;
}
.cpb-pizza-builder-shortcode .cpb-substep-in {
    transform: translateX(18px);
    opacity: 0;
}
.cpb-pizza-builder-shortcode .cpb-substep-active {
    transform: translateX(0);
    opacity: 1;
}
.cpb-pizza-builder-shortcode .cpb-substep-out {
    transform: translateX(-18px);
    opacity: 0;
}
.cpb-remove-placeholder {
    width: 100%;
}

/* =========================================================
   ORDER SUMMARY — Updated to match Figma design
========================================================= */

/* container */
.cpb-summary {
    display: block;
}
.cpb-summary-empty {
    padding: 6px 4px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
}

/* Each row - modern card-like design with stacked layout */
.cpb-summary-row {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    position: relative;
    background: linear-gradient(135deg, #fff 0%, #fef9f6 100%);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    gap: 8px;
}

.cpb-summary-row:hover {
    box-shadow: 0 4px 12px rgba(249, 76, 1, 0.15);
    transform: translateX(2px);
    cursor: pointer;
}

/* Top row - label and goto icon */
.cpb-summary-row > :first-child {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
}

/* Label/Tag on the top */
.cpb-summary-tag {
    position: relative;
    display: flex;
    align-items: center;
    color: #f94c01;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Small dot indicator */
.cpb-summary-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #f94c01;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 2px rgba(249, 76, 1, 0.2);
}

/* Remove any after elements */
.cpb-summary-tag::after {
    display: none;
}

/* Remove the line element - not needed in this design */
.cpb-summary-line {
    display: none;
}

/* Bottom row - value text */
.cpb-summary-value {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: #333;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 14px;
}

/* Go-to-step icon - just icon, no background */
.cpb-summary-goto {
    all: unset;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f94c01;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.cpb-summary-goto::before {
    content: "›";
}

@media (hover: hover) {
    .cpb-summary-goto:hover {
        opacity: 1;
        transform: translateX(3px);
    }
}

/* Section chip - more modern style */
.cpb-summary-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 16px;
    position: relative;
}

.cpb-summary-chip__rule {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(249, 76, 1, 0.3) 20%,
        rgba(249, 76, 1, 0.3) 80%,
        transparent 100%
    );
    z-index: 1;
}

.cpb-summary-chip__label {
    position: relative;
    z-index: 2;
    color: #f94c01;
    background: #fff;
    border: 2px solid #f94c01;
    border-radius: 24px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(249, 76, 1, 0.15);
}

/* Keep active flavor cards highlight consistent */
.cpb-flavor-grid .cpb-card.active {
    border: 1px solid #f94c01;
    border-top: 4px solid #f94c01;
    background-color: rgba(249, 76, 1, 0.07);
    box-shadow: 0 8px 20px rgba(249, 76, 1, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.14);
}

/* =========================================================
   STEP 5 — Review Order GRID LAYOUT
========================================================= */
.cpb-review-order {
    margin: 20px 0;
}

.cpb-step-5 .cpb-summary {
    background: transparent;
    padding: 0;
}

/* Disable hover effects and pointer events for review order summary rows */
.cpb-step-5 .cpb-summary-row {
    pointer-events: none;
    cursor: default;
}

.cpb-step-5 .cpb-summary-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: none;
}

/* Review Order Grid Layout */
.cpb-review-order-grid {
    display: grid;
    gap: 15px;
    margin-bottom: 20px;
}

/* Small/Medium Pizza Layout (2x2 grid) */
.cpb-review-order-small-medium {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "size flavor"
        "ingredients ingredients";
}

.cpb-review-order-small-medium .cpb-grid-size {
    grid-area: size;
}

.cpb-review-order-small-medium .cpb-grid-flavor {
    grid-area: flavor;
}

.cpb-review-order-small-medium .cpb-grid-ingredients {
    grid-area: ingredients;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Large Pizza - Whole Layout (2x5 grid) */
.cpb-review-order-large-whole {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "size divide"
        "piece-details piece-details";
}

.cpb-review-order-large-whole .cpb-grid-size {
    grid-area: size;
}

.cpb-review-order-large-whole .cpb-grid-divide {
    grid-area: divide;
}

.cpb-review-order-large-whole .cpb-grid-piece-details {
    grid-area: piece-details;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.cpb-review-order-large-whole .cpb-grid-piece-details > *:first-child {
    grid-column: 1 / -1;
}

/* Large Pizza - Multiple Pieces Layout */
.cpb-review-order-large-multiple {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "size divide";
}

.cpb-review-order-large-multiple .cpb-grid-size {
    grid-area: size;
}

.cpb-review-order-large-multiple .cpb-grid-divide {
    grid-area: divide;
}

/* Piece Grid for Large Multiple Pieces */
.cpb-piece-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.cpb-piece-grid > *:first-child {
    grid-column: 1 / -1;
}

.cpb-piece-section {
    margin-top: 25px;
    border-top: 2px solid #f94c01;
    padding-top: 15px;
}

.cpb-piece-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 10px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #fff5f0 0%, #fef9f6 100%);
    border-radius: 8px;
    border-left: 4px solid #f94c01;
}

.cpb-piece-header h4 {
    margin: 0;
    color: #f94c01;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grid cell styling */
.cpb-grid-cell {
    display: flex;
    flex-direction: column;
}

.cpb-grid-cell .cpb-summary-row {
    height: 100%;
    margin: 0;
}

/* Ensure consistent height for grid items */
.cpb-review-order-grid .cpb-summary-row,
.cpb-piece-grid .cpb-summary-row {
    display: flex;
    flex-direction: column;
}

.cpb-review-order-grid .cpb-summary-value,
.cpb-piece-grid .cpb-summary-value {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Review Order Help Text Styles */
.cpb-review-help-top,
.cpb-review-help-bottom {
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #f94c01;
}

.cpb-review-help-top {
    background: linear-gradient(135deg, #fff5f0 0%, #fef9f6 100%);
}

.cpb-review-help-bottom {
    background: linear-gradient(135deg, #f0f8ff 0%, #f6f9fe 100%);
    border-left-color: #007cba;
}

.cpb-review-help-top p,
.cpb-review-help-bottom p {
    margin: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

/* Summary line items with totals */
.cpb-summary-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.cpb-summary-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* =========================================================
   NEW: Hide Order Summary on Step 5
========================================================= */
.cpb-pizza-builder-shortcode
    .cpb-main-container.cpb-hide-summary
    .cpb-order-summary-container {
    display: none;
}

.cpb-pizza-builder-shortcode
    .cpb-main-container.cpb-hide-summary
    .cpb-steps-container {
    flex: 1 1 100%;
}

/* =========================================================
   NEW: Remove Icon in Review Order and Order Summary
========================================================= */
.cpb-remove-icon {
    all: unset;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4444;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
    transition: all 0.2s ease;
    opacity: 0.7;
    margin-left: 8px;
}

.cpb-remove-icon::before {
    content: "×";
}

@media (hover: hover) {
    .cpb-remove-icon:hover {
        opacity: 1;
        transform: scale(1.1);
        color: #ff0000;
    }
}

/* Adjust line items to accommodate remove icon */
.cpb-summary-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.cpb-summary-line-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.cpb-summary-line-name {
    flex: 1;
}

.cpb-summary-line-price {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Review Order specific remove icon positioning */
.cpb-step-5 .cpb-summary-line-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpb-step-5 .cpb-remove-icon {
    margin-left: 0;
    margin-right: 4px;
}

/* Enable pointer events for remove icons in Review Order */
.cpb-step-5 .cpb-remove-icon {
    pointer-events: auto;
    cursor: pointer;
}

/* Enable pointer events for breadcrumb steps */
.cpb-pizza-builder-shortcode .cpb-steps-nav .cpb-step {
    pointer-events: auto;
}

/* Disable Divide step for small/medium pizzas */
.cpb-pizza-builder-shortcode
    .cpb-steps-nav
    .cpb-step[data-step="2"].cpb-step-disabled {
    pointer-events: none;
}

.cpb-pizza-builder-shortcode
    .cpb-steps-nav
    .cpb-step[data-step="2"].cpb-step-disabled
    .cpb-step-circle {
    background: #bababa !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

.cpb-pizza-builder-shortcode
    .cpb-steps-nav
    .cpb-step[data-step="2"].cpb-step-disabled
    .cpb-step-title {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* =========================================================
   FLOATING NAVIGATION BUTTONS (Always Visible)
========================================================= */
.cpb-floating-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(249, 76, 1, 0.9);
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(249, 76, 1, 0.4);
    border: none;
    outline: none;
    margin-right: 0rem;
}

.cpb-floating-nav:hover {
    background: rgba(249, 76, 1, 1);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 25px rgba(249, 76, 1, 0.6);
}

.cpb-floating-nav:active {
    transform: translateY(-50%) scale(1.05);
}

.cpb-floating-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(186, 186, 186, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Left button (Previous) */
.cpb-floating-nav-prev {
    left: 20px;
}

.cpb-floating-nav-prev::before {
    content: "‹";
    display: block;
    line-height: 1;
}

/* Right button (Next) */
.cpb-floating-nav-next {
    right: 20px;
}

.cpb-floating-nav-next::before {
    content: "›";
    display: block;
    line-height: 1;
}

/* Tooltip labels (optional, shows on hover) */
.cpb-floating-nav::after {
    content: attr(aria-label);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.cpb-floating-nav-prev::after {
    left: calc(100% + 12px);
}

.cpb-floating-nav-next::after {
    right: calc(100% + 12px);
}

.cpb-floating-nav:hover::after {
    opacity: 1;
}

/* Pulse animation when button becomes available */
@keyframes cpb-pulse {
    0% {
        box-shadow: 0 4px 20px rgba(249, 76, 1, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(249, 76, 1, 0.7);
    }
    100% {
        box-shadow: 0 4px 20px rgba(249, 76, 1, 0.4);
    }
}

.cpb-floating-nav:not(:disabled) {
    animation: cpb-pulse 2s ease-in-out infinite;
}

.cpb-floating-nav:hover {
    animation: none;
}

/* =========================================================
   MOBILE RESPONSIVE STYLES - COMPREHENSIVE FIXES
========================================================= */

/* Tablet & Below (900px) */
@media (max-width: 900px) {
    /* Main container - keep side by side but adjust proportions */
    .cpb-pizza-builder-shortcode .cpb-main-container {
        gap: 15px;
    }

    .cpb-pizza-builder-shortcode .cpb-steps-container {
        flex: 1 1 65%;
    }

    .cpb-pizza-builder-shortcode .cpb-order-summary-container {
        flex: 1 1 35%;
    }

    /* Reduce main card padding */
    .cpb-pizza-builder-shortcode .cpb-main-card {
        padding: 1rem;
        min-height: 400px;
    }

    /* Make divide cards 2-column on tablet */
    .cpb-pizza-builder-shortcode .cpb-divide-container {
        gap: 12px;
    }

    .cpb-pizza-builder-shortcode .cpb-single-divide {
        min-width: 45%;
        flex: 1 1 45%;
    }

    /* Adjust flavor grid */
    .cpb-single-flavor {
        flex: 1 1 45%;
        min-width: 180px;
    }

    /* Order summary adjustments */
    .cpb-summary-row {
        padding: 10px 14px;
    }

    .cpb-summary-tag {
        font-size: 12px;
    }

    .cpb-summary-value {
        font-size: 13px;
    }

    .cpb-summary-chip__label {
        padding: 7px 18px;
        font-size: 11px;
    }

    /* Review Order Grid - tablet */
    .cpb-review-order-small-medium {
        grid-template-columns: 1fr;
        grid-template-areas:
            "size"
            "flavor"
            "ingredients";
    }

    .cpb-review-order-small-medium .cpb-grid-ingredients {
        grid-template-columns: 1fr 1fr;
    }

    .cpb-review-order-large-whole {
        grid-template-columns: 1fr;
        grid-template-areas:
            "size"
            "divide"
            "piece-details";
    }

    .cpb-review-order-large-whole .cpb-grid-piece-details {
        grid-template-columns: 1fr 1fr;
    }

    .cpb-review-order-large-multiple {
        grid-template-columns: 1fr;
        grid-template-areas:
            "size"
            "divide";
    }

    .cpb-piece-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile Landscape & Below (768px) */
@media (max-width: 768px) {
    #content .row {
        max-width: 100%;
    }
    /* Stack main container vertically - Order summary below steps */
    .cpb-pizza-builder-shortcode .cpb-main-container {
        flex-direction: column;
        gap: 20px;
    }

    .cpb-pizza-builder-shortcode .cpb-steps-container {
        flex: 1 1 100%;
        order: 1;
    }

    .cpb-pizza-builder-shortcode .cpb-order-summary-container {
        flex: 1 1 100%;
        order: 2;
    }

    /* Adjust titles */
    .cpb-pizza-builder-shortcode .cpb-main-title {
        font-size: 28px;
    }

    .cpb-pizza-builder-shortcode .cpb-sub-title {
        font-size: 18px;
    }

    /* Steps navigation - show all 5 steps with scroll */
    .cpb-pizza-builder-shortcode .cpb-steps-nav {
        gap: 10px;
        padding: 12px 10px;
        justify-content: flex-start;
    }

    .cpb-pizza-builder-shortcode .cpb-step {
        min-width: 80px;
        flex: 0 0 auto;
    }

    .cpb-pizza-builder-shortcode .cpb-step-circle {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .cpb-pizza-builder-shortcode .cpb-step-title {
        font-size: 12px;
    }

    .cpb-pizza-builder-shortcode .cpb-step::after {
        top: 19px;
    }

    /* Substeps navigation - scroll horizontally */
    .cpb-pizza-builder-shortcode .cpb-substeps-nav {
        gap: 8px;
        padding: 8px 10px;
        justify-content: flex-start;
    }

    .cpb-pizza-builder-shortcode .cpb-substep {
        min-width: 120px;
        flex: 0 0 auto;
    }

    .cpb-pizza-builder-shortcode .cpb-substep .cpb-step-circle {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep .cpb-step-title {
        font-size: 11px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep::after {
        top: 18px;
    }

    /* Divider label */
    .cpb-pizza-builder-shortcode .cpb-divider__label {
        font-size: 16px;
        padding: 6px 14px;
    }

    /* Floating navigation buttons */
    .cpb-floating-nav {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .cpb-floating-nav-prev {
        left: 10px;
    }

    .cpb-floating-nav-next {
        right: 10px;
    }

    /* Hide tooltips on mobile */
    .cpb-floating-nav::after {
        display: none;
    }
}

/* Mobile Portrait & Below (600px) */
@media (max-width: 600px) {
    #content .row {
        max-width: 100%;
    }
    /* Reduce overall padding */
    .cpb-pizza-builder-shortcode {
        padding: 20px 10px;
    }

    /* Titles */
    .cpb-pizza-builder-shortcode .cpb-main-title {
        font-size: 24px;
        margin-bottom: 3px;
    }

    .cpb-pizza-builder-shortcode .cpb-sub-title {
        font-size: 16px;
    }

    /* Main card */
    .cpb-pizza-builder-shortcode .cpb-main-card {
        padding: 0.875rem;
        min-height: 350px;
    }

    /* Size/Divide containers - single column */
    .cpb-pizza-builder-shortcode .cpb-size-container,
    .cpb-pizza-builder-shortcode .cpb-divide-container {
        gap: 10px;
    }

    .cpb-pizza-builder-shortcode .cpb-single-size,
    .cpb-pizza-builder-shortcode .cpb-single-divide {
        min-width: 100%;
        flex: 1 1 100%;
    }

    /* Flavor grid - 2 columns */
    .cpb-flavor-grid {
        gap: 10px;
    }

    .cpb-single-flavor {
        flex: 1 1 100%;
        min-width: 100%;
    }

    /* Reduce flavor description lines */
    .cpb-pizza-builder-shortcode .cpb-flavor-desc {
        -webkit-line-clamp: 2;
        min-height: calc(1em * 1.4 * 2);
        font-size: 0.85rem;
    }

    /* Circle sizes */
    .cpb-pizza-builder-shortcode .cpb-circle,
    .cpb-pizza-builder-shortcode .cpb-flavor-circle {
        width: 75px;
        height: 75px;
    }

    .cpb-pizza-builder-shortcode .cpb-flavor-image,
    .cpb-pizza-builder-shortcode .cpb-pizza {
        max-width: 75px;
    }

    /* Steps navigation - compact */
    .cpb-pizza-builder-shortcode .cpb-steps-nav {
        gap: 8px;
        padding: 10px 8px;
        margin: 6px 0 14px;
        justify-content: center;
    }

    .cpb-pizza-builder-shortcode .cpb-step {
        min-width: 70px;
        gap: 6px;
    }

    .cpb-pizza-builder-shortcode .cpb-step-circle {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .cpb-pizza-builder-shortcode .cpb-step-title {
        font-size: 11px;
    }

    .cpb-pizza-builder-shortcode .cpb-step::after {
        top: 17px;
        height: 2px;
    }

    /* Substeps navigation */
    .cpb-pizza-builder-shortcode .cpb-substeps-nav {
        gap: 6px;
        padding: 8px 8px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep {
        min-width: 100px;
        gap: 4px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep .cpb-step-circle {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep .cpb-step-title {
        font-size: 10px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep::after {
        top: 16px;
        height: 2px;
    }

    /* Divider */
    .cpb-pizza-builder-shortcode .cpb-divider {
        gap: 8px;
        margin: 4px 0 14px;
    }

    .cpb-pizza-builder-shortcode .cpb-divider__label {
        font-size: 14px;
        padding: 5px 12px;
    }

    /* Actions buttons */
    .cpb-pizza-builder-shortcode .cpb-actions {
        gap: 10px;
        margin-top: 20px;
    }

    .cpb-pizza-builder-shortcode .cpb-actions button {
        font-size: 14px;
        padding: 10px 16px;
    }

    /* Search input */
    .cpb-search-input {
        padding: 0.6rem 0.8rem;
        font-size: 14px;
    }

    /* Order Summary */
    .cpb-summary-row {
        padding: 8px 12px;
        gap: 6px;
    }

    .cpb-summary-tag {
        font-size: 11px;
    }

    .cpb-summary-tag::before {
        width: 5px;
        height: 5px;
        margin-right: 6px;
    }

    .cpb-summary-value {
        font-size: 12px;
        padding-left: 11px;
    }

    .cpb-summary-goto {
        width: 22px;
        height: 22px;
        font-size: 18px;
    }

    .cpb-summary-chip {
        margin: 20px 0 14px;
    }

    .cpb-summary-chip__label {
        padding: 6px 14px;
        font-size: 10px;
    }

    /* Review Order - single column layout */
    .cpb-review-order-small-medium {
        grid-template-columns: 1fr;
        grid-template-areas:
            "size"
            "flavor"
            "ingredients";
    }

    .cpb-review-order-small-medium .cpb-grid-ingredients {
        grid-template-columns: 1fr;
    }

    .cpb-review-order-large-whole {
        grid-template-columns: 1fr;
    }

    .cpb-review-order-large-whole .cpb-grid-piece-details {
        grid-template-columns: 1fr;
    }

    .cpb-review-order-large-multiple {
        grid-template-columns: 1fr;
    }

    .cpb-piece-grid {
        grid-template-columns: 1fr;
    }

    .cpb-review-help-top,
    .cpb-review-help-bottom {
        padding: 12px;
        margin: 15px 0;
    }

    .cpb-review-help-top p,
    .cpb-review-help-bottom p {
        font-size: 13px;
    }

    .cpb-piece-header h4 {
        font-size: 12px;
    }

    /* Remove icon adjustments */
    .cpb-remove-icon {
        width: 22px;
        height: 22px;
        font-size: 18px;
    }
}

/* Extra Small Mobile (480px) */
@media (max-width: 480px) {
    /* Further reduce spacing */
    .cpb-pizza-builder-shortcode {
        padding: 15px 8px;
    }

    .cpb-pizza-builder-shortcode .cpb-main-title {
        font-size: 22px;
    }

    .cpb-pizza-builder-shortcode .cpb-sub-title {
        font-size: 14px;
    }

    .cpb-pizza-builder-shortcode .cpb-main-card {
        padding: 0.75rem;
    }

    /* Very compact steps */
    .cpb-pizza-builder-shortcode .cpb-step {
        min-width: 60px;
    }

    .cpb-pizza-builder-shortcode .cpb-step-circle {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .cpb-pizza-builder-shortcode .cpb-step-title {
        font-size: 10px;
    }

    .cpb-pizza-builder-shortcode .cpb-step::after {
        top: 15px;
    }

    /* Substeps */
    .cpb-pizza-builder-shortcode .cpb-substep {
        min-width: 85px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep .cpb-step-circle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep .cpb-step-title {
        font-size: 9px;
    }

    .cpb-pizza-builder-shortcode .cpb-substep::after {
        top: 14px;
    }

    /* Divider */
    .cpb-pizza-builder-shortcode .cpb-divider__label {
        font-size: 13px;
        padding: 4px 10px;
    }

    /* Smaller circles */
    .cpb-pizza-builder-shortcode .cpb-circle,
    .cpb-pizza-builder-shortcode .cpb-flavor-circle {
        width: 65px;
        height: 65px;
    }

    .cpb-pizza-builder-shortcode .cpb-flavor-image,
    .cpb-pizza-builder-shortcode .cpb-pizza {
        max-width: 65px;
    }

    /* Card text */
    .cpb-pizza-builder-shortcode .cpb-card h1 {
        font-size: 16px;
    }

    .cpb-size-meta,
    .cpb-divide-meta {
        font-size: 12px;
    }

    .cpb-size-price,
    .cpb-flavor-price {
        font-size: 16px;
    }

    /* Floating nav */
    .cpb-floating-nav {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .cpb-floating-nav-prev {
        left: 8px;
    }

    .cpb-floating-nav-next {
        right: 8px;
    }

    /* Actions */
    .cpb-pizza-builder-shortcode .cpb-actions button {
        font-size: 13px;
        padding: 9px 14px;
    }

    /* Summary */
    .cpb-summary-row {
        padding: 7px 10px;
    }

    .cpb-summary-tag {
        font-size: 10px;
    }

    .cpb-summary-value {
        font-size: 11px;
    }

    .cpb-summary-chip__label {
        padding: 5px 12px;
        font-size: 9px;
    }
}

/* Fix for horizontal scroll on small screens */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .cpb-pizza-builder-shortcode {
        max-width: 100%;
        overflow-x: hidden;
    }

    .cpb-pizza-builder-shortcode * {
        max-width: 100%;
    }

    /* Ensure search inputs don't overflow */
    .cpb-search-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Ensure cards don't overflow */
    .cpb-pizza-builder-shortcode .cpb-card {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Landscape phone optimization */
@media (max-width: 900px) and (orientation: landscape) {
    /* Keep side-by-side layout in landscape */
    .cpb-pizza-builder-shortcode .cpb-main-container {
        flex-direction: row;
    }

    .cpb-pizza-builder-shortcode .cpb-steps-container {
        flex: 1 1 60%;
    }

    .cpb-pizza-builder-shortcode .cpb-order-summary-container {
        flex: 1 1 40%;
    }

    /* Compact vertical spacing */
    .cpb-pizza-builder-shortcode .cpb-main-title {
        font-size: 22px;
        margin-bottom: 2px;
    }

    .cpb-pizza-builder-shortcode .cpb-sub-title {
        font-size: 14px;
    }

    .cpb-pizza-builder-shortcode .cpb-main-card {
        padding: 0.75rem;
        min-height: 300px;
    }
}

@media (max-width: 600px) {
    /* Size card layout for mobile */
    .cpb-pizza-builder-shortcode .cpb-single-size.cpb-card {
        display: grid;
        grid-template-columns: auto 1fr; /* image | text */
        grid-template-rows: auto auto auto; /* h1, meta, price */
        column-gap: 12px;
        align-items: center;
        text-align: left;
    }

    /* Image: left, spanning full height */
    .cpb-pizza-builder-shortcode .cpb-single-size.cpb-card .cpb-size-visual {
        grid-column: 1;
        grid-row: 1 / 4;
        margin: 0;
        justify-self: center;
    }

    /* Title */
    .cpb-pizza-builder-shortcode .cpb-single-size.cpb-card h1 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 2px;
    }

    /* Meta under title */
    .cpb-pizza-builder-shortcode .cpb-single-size.cpb-card .cpb-size-meta {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }

    /* Price under meta */
    .cpb-pizza-builder-shortcode .cpb-single-size.cpb-card .cpb-size-price {
        grid-column: 2;
        grid-row: 3;
        margin-top: 4px; /* override desktop "margin-top: auto" */
        margin-bottom: 0px;
    }

    /* Divide card layout for mobile */
    .cpb-pizza-builder-shortcode .cpb-single-divide.cpb-card {
        display: grid;
        grid-template-columns: auto 1fr; /* image | text */
        grid-template-rows: auto auto auto; /* h1, meta, price */
        column-gap: 12px;
        align-items: center;
        text-align: left;
    }

    /* Image: left, spanning full height */
    .cpb-pizza-builder-shortcode
        .cpb-single-divide.cpb-card
        .cpb-divide-visual {
        grid-column: 1;
        grid-row: 1 / 4;
        margin: 0;
        justify-self: center;
    }

    /* Title */
    .cpb-pizza-builder-shortcode .cpb-single-divide.cpb-card h1 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 2px;
    }

    /* Meta under title */
    .cpb-pizza-builder-shortcode .cpb-single-divide.cpb-card .cpb-divide-meta {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }

    /* Price under meta */
    .cpb-pizza-builder-shortcode .cpb-single-divide.cpb-card .cpb-size-price {
        grid-column: 2;
        grid-row: 3;
        margin-top: 4px; /* override desktop "margin-top: auto" */
        margin-bottom: 0px;
    }

    /* Flavor card layout for mobile */
    .cpb-pizza-builder-shortcode .cpb-single-flavor.cpb-card {
        display: grid;
        grid-template-columns: auto 1fr; /* image | text */
        grid-template-rows: auto auto auto; /* h1, meta, price */
        column-gap: 12px;
        align-items: center;
        text-align: left;
    }

    /* Image: left, spanning full height */
    .cpb-pizza-builder-shortcode
        .cpb-single-flavor.cpb-card
        .cpb-flavor-visual {
        grid-column: 1;
        grid-row: 1 / 4;
        margin: 0;
        justify-self: center;
    }

    /* Title */
    .cpb-pizza-builder-shortcode .cpb-single-flavor.cpb-card h1 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 2px;
    }

    /* Meta under title */
    .cpb-pizza-builder-shortcode .cpb-single-flavor.cpb-card .cpb-flavor-desc {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }

    /* Price under meta */
    .cpb-pizza-builder-shortcode .cpb-single-flavor.cpb-card .cpb-flavor-price {
        grid-column: 2;
        grid-row: 3;
        margin-top: 4px; /* override desktop "margin-top: auto" */
        margin-bottom: 0px;
    }
}

@media (max-width: 600px) {
    /* Keep circles aligned on one line */
    .cpb-pizza-builder-shortcode .cpb-substeps-nav {
        align-items: flex-start; /* circles align horizontally */
        justify-content: center;
    }

    /* Center the circle + text INSIDE each button */
    .cpb-pizza-builder-shortcode .cpb-substeps-nav .cpb-substep {
        display: flex;
        flex-direction: column;
        align-items: center; /* centers circle + text */
        justify-content: flex-start;
        min-width: 0;
        text-align: center;
    }

    /* Titles wrap */
    .cpb-pizza-builder-shortcode .cpb-substeps-nav .cpb-step-title {
        white-space: normal;
        word-break: break-word;
        max-width: 80px;
        line-height: 1.2;
        margin-top: 4px; /* spacing under circle */
        text-align: center;
    }

    .cpb-pizza-builder-shortcode .cpb-substep::after {
        left: calc(29% + 24px);
        right: -60%;
    }
}

/* =========================================================
   NEW: FIXED BOTTOM NAVIGATION (50% width each)
========================================================= */
.cpb-fixed-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 9999;
    height: 60px;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.cpb-fixed-prev-btn,
.cpb-fixed-next-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.cpb-fixed-prev-btn {
    background: #fff;
    color: #f94c01;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0px;
    margin: 0px;
}

.cpb-fixed-next-btn {
    background: #f94c01;
    color: #fff;
    border-left: 1px solid rgba(249, 76, 1, 0.3);
    padding: 0px;
    margin: 0px;
}

/* Button hover effects */
.cpb-fixed-prev-btn:not(:disabled):hover {
    background: linear-gradient(135deg, #fff5f0 0%, #fef9f6 100%);
    color: #e64500;
    box-shadow: inset 0 -3px 0 #f94c01;
}

.cpb-fixed-next-btn:not(:disabled):hover {
    background: linear-gradient(135deg, #ff7a3a 0%, #f94c01 100%);
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.3);
}

/* Button active effects */
.cpb-fixed-prev-btn:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: inset 0 -1px 0 #f94c01;
}

.cpb-fixed-next-btn:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

/* Disabled state */
.cpb-fixed-prev-btn:disabled,
.cpb-fixed-next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
    color: #999;
}

.cpb-fixed-prev-btn:disabled {
    background: #f5f5f5;
    color: #999;
}

.cpb-fixed-next-btn:disabled {
    background: #ffb67a;
    color: rgba(255, 255, 255, 0.7);
}

/* Button text and icons */
.cpb-fixed-btn-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.cpb-fixed-btn-icon {
    font-size: 20px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.cpb-fixed-prev-btn:hover:not(:disabled) .cpb-fixed-btn-icon {
    transform: translateX(-3px);
}

.cpb-fixed-next-btn:hover:not(:disabled) .cpb-fixed-btn-icon {
    transform: translateX(3px);
}

/* Loading state */
.cpb-fixed-next-btn.cpb-is-loading {
    position: relative;
    color: transparent !important;
}

.cpb-fixed-next-btn.cpb-is-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cpb-spin 0.8s linear infinite;
}

.cpb-fixed-prev-btn.cpb-is-loading::after {
    border: 2px solid rgba(249, 76, 1, 0.3);
    border-top-color: #f94c01;
}

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

/* Step 5 specific styling */
.cpb-fixed-next-btn[data-step="5"] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.cpb-fixed-next-btn[data-step="5"]:not(:disabled):hover {
    background: linear-gradient(135deg, #218838 0%, #1e9e6f 100%);
}

/* Add padding to main container to prevent content from being hidden behind fixed nav */
.cpb-pizza-builder-shortcode {
    padding-bottom: 80px; /* Adjust based on your fixed nav height */
}

/* Remove old floating navigation styles if they exist */
.cpb-floating-nav,
#cpb-floating-prev,
#cpb-floating-next {
    display: none !important;
}

/* =========================================================
   MOBILE RESPONSIVE FOR FIXED NAV
========================================================= */

/* Tablet */
@media (max-width: 900px) {
    .cpb-fixed-bottom-nav {
        height: 55px;
    }

    .cpb-fixed-btn-text {
        font-size: 15px;
    }

    .cpb-fixed-btn-icon {
        font-size: 18px;
    }

    .cpb-pizza-builder-shortcode {
        padding-bottom: 75px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .cpb-fixed-bottom-nav {
        height: 50px;
    }

    .cpb-fixed-btn-text {
        font-size: 14px;
    }

    .cpb-fixed-btn-icon {
        font-size: 16px;
    }

    .cpb-fixed-prev-btn,
    .cpb-fixed-next-btn {
        gap: 6px;
    }

    .cpb-pizza-builder-shortcode {
        padding-bottom: 70px;
    }
}

/* Small Mobile */
@media (max-width: 600px) {
    .cpb-fixed-bottom-nav {
        height: 45px;
    }

    .cpb-fixed-btn-text {
        font-size: 13px;
    }

    .cpb-fixed-btn-icon {
        font-size: 14px;
    }

    .cpb-fixed-prev-btn,
    .cpb-fixed-next-btn {
        gap: 4px;
        padding: 0 10px;
    }

    .cpb-pizza-builder-shortcode {
        padding-bottom: 65px;
    }
}

/* Landscape mode */
@media (max-width: 900px) and (orientation: landscape) {
    .cpb-fixed-bottom-nav {
        height: 40px;
    }

    .cpb-fixed-btn-text {
        font-size: 12px;
    }

    .cpb-pizza-builder-shortcode {
        padding-bottom: 60px;
    }
}

.cpb-alert {
    background: #fff8e6;
    border-left: 5px solid #f94c01;
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 600;
    color: #b45309;
    margin-bottom: 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Ingredient Category Badges/Labels
========================================================= */
.cpb-ingredient-badge {
    position: absolute;
    top: 15px;
    right: 0px;
    background: #F94C01;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.cpb-badge-premium {
    color: #fff;
    border: 1px solid #F94C01;
}

.cpb-badge-exclusive {
    color: #fff;
    border: 1px solid #F94C01;
}

/* Position the card relative for absolute badge positioning */
.cpb-single-flavor.cpb-card {
    position: relative;
    overflow: hidden;
}