/* Parent container that holds the plan boxes */
.plan-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Adjust spacing between the boxes */
}

/* Box container */
.plan-box {
    width: 300px;
    padding: 20px;
    margin: 20px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: Arial, sans-serif;
    flex: 1 1 300px; /* Flex-grow, flex-shrink, flex-basis */
    max-width: 300px; /* Ensure boxes don't get too wide */
}


/* Plan title */
.plan-title {
    font-size: 20px;
    color: #0073e6;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Pricing */
.plan-price {
    font-size: 28px;
    color: #3fb14a;
    margin-bottom: 11px;
    font-weight: bold;
}

/* Upgrade button */
.plan-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073e6;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

    .plan-button:hover {
        background-color: #005bb5;
    }

/* Features list */
.plan-features {
    background-color: whitesmoke
    padding: 15px;
    margin-top: 20px;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    text-align: left;
}

/* Feature item */
.plan-feature-item {
    font-size: 16px;
    color: #333;
    margin: 5px 0;
    font-weight: normal;
}






/* base for copyable + wrapping */
pre.copyable-wrap {
    position: relative;
    padding: 1rem 3rem 1rem 1rem;
    font-family: Consolas, monospace;
    border-radius: 4px;
    white-space: pre-wrap !important;
    /* HARD override the global keep-all */
    word-break: break-all !important; /* or break-word, see note below */
    overflow-wrap: anywhere; /* extra safety */
    max-width: 100%;
    display: block;
}

    /* inner spans inherit white-space rules */
    pre.copyable-wrap * {
        white-space: inherit !important;
    }



    /* copy icon */
    pre.copyable-wrap .copy-icon {
        position: absolute;
        top: .5rem;
        right: .5rem;
        width: auto;
        height: auto;
        cursor: pointer;
        opacity: .6;
        transition: opacity .15s;
        user-select: none;
    }

        pre.copyable-wrap .copy-icon:hover {
            opacity: 1;
        }










/* --- base styling for every copy-enabled block --- */
pre.copyable {
    position: relative; /* anchor for the icon            */
    padding: 1rem 3rem 1rem 1rem; /* keep extra room on the right   */
    font-family: Consolas,monospace;
    border-radius: 4px;
    overflow-x: auto;
    /* background removed – we no longer force a light colour */
}

    /* --- icon injected by JS --- */
    pre.copyable .copy-icon {
        position: absolute;
        top: .5rem;
        right: .5rem;
        /* let the SVG display at its intrinsic size */
        width: auto;
        height: auto;
        cursor: pointer;
        opacity: .6;
        transition: opacity .15s;
        user-select: none;
    }

        /* simple hover feedback */
        pre.copyable .copy-icon:hover {
            opacity: 1;
        }

/* optional flash after a successful copy */
@keyframes flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .2;
    }

    100% {
        opacity: 1;
    }
}

pre.copyable .copy-icon.copied {
    animation: flash 1.2s;
}