/* =============================================
   BELLAMY PRICING TABLE - Elementor Widget CSS
   ============================================= */

.bellamywidget-pricing-table {
    --bellamy-pricing-scale: 1.06;
    --bellamy-pricing-accent: #0073AA;
    --bellamy-pricing-divider-color: #e5e5e5;
    /* Drives the horizontal position of every flex-based element
       (icon, price, feature rows, button). Set by the "Content
       Alignment" control as a raw 'left' / 'center' / 'right'
       keyword and inherited down to every descendant, so a single
       control keeps text-align and every flex row in sync. */
    --bellamy-pricing-align: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.bellamywidget-pricing-table * {
    box-sizing: border-box;
}

/* ==================== FEATURED / CASCADING ==================== */
.bellamywidget-pricing-table.is-featured {
    position: relative;
    z-index: 2;
    transform: scale(var(--bellamy-pricing-scale));
}

.bellamywidget-pricing-table-featured-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    padding: 6px 18px;
    border-radius: 30px;
    z-index: 3;
    line-height: 1.4;
}

/* ==================== RIBBON / BADGE ==================== */
.bellamywidget-pricing-table-ribbon {
    position: absolute;
    top: 18px;
    z-index: 3;
    padding: 5px 14px;
    line-height: 1.4;
    border-radius: 30px;
}

.bellamywidget-pricing-table-ribbon-right {
    right: 18px;
}

.bellamywidget-pricing-table-ribbon-left {
    left: 18px;
}

/* ==================== INNER / IMAGE LAYOUT ==================== */
.bellamywidget-pricing-table-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bellamywidget-pricing-table.bellamywidget-pricing-table-image-side .bellamywidget-pricing-table-inner {
    flex-direction: row;
    align-items: stretch;
}

.bellamywidget-pricing-table.bellamywidget-pricing-table-image-side .bellamywidget-pricing-table-image {
    flex: 0 0 42%;
    max-width: 42%;
}

.bellamywidget-pricing-table.bellamywidget-pricing-table-image-side .bellamywidget-pricing-table-image img {
    height: 100%;
}

.bellamywidget-pricing-table-image {
    line-height: 0;
}

.bellamywidget-pricing-table-image img {
    display: block;
    width: 100%;
}

.bellamywidget-pricing-table-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* ==================== ICON ==================== */
.bellamywidget-pricing-table-icon-wrap {
    display: flex;
    justify-content: var(--bellamy-pricing-align);
    width: 100%;
}

.bellamywidget-pricing-table-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ==================== TITLE & SUBTITLE ==================== */
.bellamywidget-pricing-table-title {
    margin: 0;
    line-height: 1.3;
}

.bellamywidget-pricing-table-subtitle {
    margin: 4px 0 0;
    line-height: 1.4;
}

/* ==================== PRICE ==================== */
.bellamywidget-pricing-table-price-wrap {
    display: flex;
    align-items: baseline;
    justify-content: var(--bellamy-pricing-align);
    flex-wrap: wrap;
    width: 100%;
    line-height: 1;
}

.bellamywidget-pricing-table-currency {
    align-self: flex-start;
}

.bellamywidget-pricing-table-currency-before {
    margin-right: 4px;
}

.bellamywidget-pricing-table-currency-after {
    margin-left: 4px;
}

.bellamywidget-pricing-table-amount {
    line-height: 1;
}

.bellamywidget-pricing-table-period {
    margin-left: 6px;
    align-self: flex-end;
}

/* ==================== VERTICAL LAYOUT ==================== */
.bellamywidget-pricing-table-layout-vertical .bellamywidget-pricing-table-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: left;
}

/* The price sits in its own column next to the title in the
   Vertical layout, so it always hugs that column's edge instead of
   following the general Content Alignment setting. */
.bellamywidget-pricing-table-layout-vertical .bellamywidget-pricing-table-price-wrap {
    justify-content: flex-end;
    width: auto;
}

/* ==================== MINIMAL LAYOUT ==================== */
.bellamywidget-pricing-table-layout-minimal .bellamywidget-pricing-table-price-wrap {
    order: -1;
}

/* ==================== FEATURES LIST ==================== */
.bellamywidget-pricing-table-features {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    counter-reset: bellamy-pricing-counter;
}

.bellamywidget-pricing-table-features li {
    display: flex;
    align-items: center;
    justify-content: var(--bellamy-pricing-align);
    gap: 8px;
}

.bellamywidget-pricing-table-features li:last-child {
    margin-bottom: 0 !important;
}

.bellamywidget-pricing-table-feature-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}

.bellamywidget-pricing-table-feature-text {
    line-height: 1.5;
}

/* Numbered marker, rendered via a single CSS counter so numbering
   always follows the current visible order of items in the editor.
   NOTE: the counter must only be incremented ONCE per item. It is
   intentionally incremented here on the ::before pseudo-element only
   -- do not also add counter-increment on the <li> itself, or every
   item will count up by 2 (2, 4, 6, 8...) instead of 1, 2, 3, 4. */
.bellamywidget-pricing-table-marker-number li:before {
    counter-increment: bellamy-pricing-counter;
    content: counter(bellamy-pricing-counter) '.';
    flex-shrink: 0;
    font-weight: 700;
}

/* ==================== BUTTON ==================== */
.bellamywidget-pricing-table-button-wrap {
    display: flex;
    justify-content: var(--bellamy-pricing-align);
    width: 100%;
}

.bellamywidget-pricing-table-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.bellamywidget-pricing-table-button-full {
    width: 100%;
}

.bellamywidget-pricing-table-button-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}