header {
    position: relative;
}

#mobile-menu {
    position: absolute;
    left: 200%;
    transition: left 0.3s ease;
    z-index: 999;
    display: none;

}

#mobile-menu.menu-visible {
    left: 0;
    display: block;
}

.elementor-widget-text-editor p {
    margin: 0;
}



.story-video .elementor-custom-embed-play {
    inset-block-start: 1.5rem;
    inset-inline-start: inherit;
    inset-inline-end: 1.5rem;
    position: absolute;
    transform: inherit;
}

.story-video .elementor-custom-embed-play svg {
    opacity: 1;
    filter: none;
}



/* Custom compact progress header */
#custom-progress {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    font-family: inherit;
    color: #85766a;
    /* muted text */
}

/* left small counter */
#custom-progress .cp-left {
    min-width: 56px;
    text-align: left;
    font-weight: 600;
    color: #4b4b45;
}

#custom-progress .cp-step-current {
    color: #2c6b57;
}

/* highlight current number */

/* center track */
#custom-progress .cp-track-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

#custom-progress .cp-track {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

#custom-progress .cp-fill {
    width: 0%;
    height: 100%;
    background: #6B6E62;
    transition: width .35s ease;
    border-radius: 6px;
}

/* right percent */
#custom-progress .cp-right {
    min-width: 140px;
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 2px;
}

#custom-progress .cp-percent {
    font-weight: 600;
    color: #A78E72;
    font-size: 16px;
}

#custom-progress .cp-label {
    font-size: 16px;
    font-weight: 600;
    color: #A78E72;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.info-fields {
    display: flex;
    flex-direction: column;
}

/* small-screen adjustments */
@media (max-width:768px) {
    #book-package h3 {
        font-size: 20px;
    }

    .info-fields {
        flex-direction: row;
    }

    #custom-progress {
        gap: 10px;
        margin-bottom: 14px;
    }

    #custom-progress .cp-right {
        min-width: 40px;
        font-size: 13px;
        justify-content: flex-end
    }

    #custom-progress .cp-left {
        min-width: 48px;
        font-size: 14px;
    }

    .seconds {
        display: none;
    }

    #custom-progress .cp-label {
        display: none;
    }
}



/* Package selection radio inputs */
.group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

/* Payment plan vertical */
[data-field="payment"] {
    flex-direction: column;
    gap: 16px;
}

/* Hide native radio */
.group input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Pill button */
.group label {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 12px 20px 12px 42px;
    border: 1.5px solid #cdc1b3;
    border-radius: 40px;
    background: #ffffff;
    cursor: pointer;
    font-size: 16px;
    color: #4b463d;
    transition: background-color .25s ease, border-color .25s ease;
    min-height: 48px;
}

/* Hover */
.group label:hover {
    border-color: #b9a995;
}

/* Custom radio outer circle */
.group label::before {
    content: "";
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #bfae9b;
    background: #ffffff;
}

/* Inner dot when checked */
.group label:has(input[type="radio"]:checked)::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #bfae9b;
    border-radius: 50%;
    transform: translateY(-50%);
}

.group label:has(input[type="radio"]:checked) {
    background: #f5f0ea;
    border-color: #bfae9b;
    font-weight: 500;
}

/* Payment rows full width */
[data-field="payment"] label {
    width: 100%;
    justify-content: space-between;
}


.next-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.94061 9.84339L14.2003 16.1031C14.4134 16.3162 14.5208 16.5774 14.5224 16.8866C14.5241 17.1958 14.4183 17.4589 14.2051 17.6761C13.9827 17.8986 13.7149 18.0098 13.4018 18.0098C13.0887 18.0098 12.8236 17.8986 12.6064 17.6761L6.05019 11.1366C5.86682 10.9532 5.73226 10.7497 5.64651 10.5261C5.56077 10.3024 5.5179 10.0749 5.5179 9.84339C5.5179 9.61192 5.56077 9.38437 5.64651 9.16073C5.73226 8.9371 5.86682 8.7336 6.05019 8.55023L12.6154 1.985C12.8378 1.76257 13.1008 1.65482 13.4044 1.66177C13.7079 1.66871 13.9709 1.7834 14.1933 2.00583C14.4065 2.22826 14.5154 2.4924 14.52 2.79825C14.5247 3.10411 14.4157 3.36825 14.1933 3.59068L7.94061 9.84339Z' fill='%232C301F'/%3E%3C/svg%3E");
}



/* =========================
   Mobile responsiveness
   ========================= */

@media (max-width: 768px) {

    /* Stack options vertically */
    .group {
        flex-direction: column;
        gap: 10px;
    }

    /* Make all pills full width on mobile */
    .group label {
        width: 100%;
        padding: 14px 16px 14px 44px;
        font-size: 15px;
        min-height: 52px;
    }

    /* Center radio vertically */
    .group label::before {
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    .group label:has(input[type="radio"]:checked)::after {
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Payment plan stays vertical and clean */
    [data-field="payment"] {
        gap: 12px;
    }

    /* Improve tap targets */
    .group label {
        touch-action: manipulation;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .group label {
        font-size: 14px;
        padding: 14px 14px 14px 42px;
    }
}



.package-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 18px 28px;
    border: 1.5px dashed #A78E72;
    border-radius: 999px;

    background: #fff;
    max-width: 100%;
}

/* LEFT LABEL */
.package-label {
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b49a7c;
    font-weight: 600;
    color: #A78E72;
    white-space: nowrap;
}

/* PACKAGE NAME */
.package-name {
    flex: 1;
    font-family: "Chewie DEMO";
    font-size: 22px;
    font-weight: 500;
    color: #2C301F;
}

/* PRICE */
.package-price {
    font-size: 18px;
    font-weight: 500;
    color: #2C301F;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px) {
    .package-summary {
        flex-wrap: wrap;
        border-radius: 24px;
        padding: 16px 20px;
    }

    .package-name,
    .package-price {
        font-size: 22px;
    }

    .package-label {
        width: 100%;
    }
}