/* Pricing area shown to users without a subscription: billing-period tabs, the free and
   premium cards, and the plan comparison table.

   Moved out of Pages/Index.cshtml. Loaded AFTER bootstrap.min.css in _Layout.cshtml - see
   the note in licence-panel.css for why the order matters. */

/* Pricing DesignCraft Redesign Styles - Ultra Compact Mode */
/* Sizes to its content rather than to a fixed 420px. The tabs are nowrap and flex items do not
   shrink below their content (min-width defaults to auto), so a fixed width could only ever be
   right for one language: German and French run ~45% longer than English here and used to push
   the bar past its own edge. fit-content lets it take what it needs, max-width keeps it inside
   the 600px wrapper - which every translation fits within. */
.pricing-period-tabbar {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    background: #f7fbff;
    border: 1px solid #e2f0ff;
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
/* The comparison table's copy of the bar sits in a `d-flex justify-content-end` cell. Now that the
   bar is fit-content rather than 100% wide, the inherited `margin: 0 auto` would absorb the free
   space on both sides and centre it, overriding that justify-content. Dropping the right margin
   leaves only the left one auto, which keeps it against the right edge as designed. */
.pricing-period-tabbar.mirror-billing {
    margin-right: 0;
}

.pricing-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 3px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #8a8fa3;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.18s ease;
    outline: none !important;
}
.pricing-tab-btn:focus,
.pricing-tab-btn:focus-visible,
.pricing-tab-btn:active {
    outline: none !important;
    box-shadow: none;
}
.pricing-tab-btn.active, .pricing-tab-btn.is-active, .pricing-tab-btn.btn-primary {
    border: 1px solid #e2f0ff;
    background: #fff;
    box-shadow: 0 3px 10px -3px rgba(30, 90, 160, 0.22);
    color: #74b9ff;
}
.pricing-tab-btn.active:focus,
.pricing-tab-btn.active:focus-visible {
    outline: none !important;
    box-shadow: 0 3px 10px -3px rgba(30, 90, 160, 0.22) !important;
}
.pricing-tab-btn svg {
    width: 14px;
    height: 14px;
}

/* Saving claim on the Yearly tab. Smaller and in the accent colour so it reads as a note on the
   label rather than part of it; hidden below 480px, where the four tabs have no room to spare. */
.pricing-tab-btn .tab-save {
    font-size: 11px;
    font-weight: 600;
    color: #35d3c9;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .pricing-tab-btn .tab-save {
        display: none;
    }
}

.pricing-cards-wrapper {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
}

.pricing-card-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pricing-card-col.free-col {
    flex: 1 1 280px;
    min-width: 260px;
    max-width: 330px;
}
.pricing-card-col.premium-col {
    flex: 1 1 300px;
    min-width: 270px;
    max-width: 350px;
}

.pricing-card-shell {
    position: relative;
    width: 100%;
    margin-top: 24px;
    flex: 1;
    display: flex;
}

.pricing-card-badge {
    position: absolute;
    bottom: calc(100% - 2px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    border-radius: 8px 8px 0 0;
    padding: 4px 14px 5px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pricing-card-badge svg {
    width: 15px;
    height: 12px;
}
.pricing-card-badge.free-badge {
    background: #e9edf3;
    color: #6c7280;
}
.pricing-card-badge.premium-badge {
    background: #74b9ff;
    color: #fff;
}

.pricing-card-box {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    border-radius: 14px;
    padding: 18px 16px 16px;
}
.pricing-card-box.free-box {
    border: 1.5px solid #e4e8ee;
    box-shadow: 0 8px 24px -16px rgba(70, 80, 100, 0.18);
}
.pricing-card-box.premium-box {    
						border: 2px solid #74b9ff;   
						box-shadow: 0 8px 24px -14px #74b9ff; 
}

.pricing-card-desc {
    margin: 0 0 8px;
    min-height: 30px;
    color: #8a8fa3;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.no-card-req-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}
.no-card-req-badge {
    border: 1.5px solid #eceff4;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #a2a8b6;
}

.stepper-row-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 32px;
}
.stepper-row-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #8a8fa3;
}
.dc-stepper {
    display: inline-flex !important;
    align-items: stretch;
    border: 1.5px solid #cfe5ff;
    border-radius: 8px;
    overflow: hidden;
    background: #fff !important;
    height: 30px;
}
.dc-stepper .seat-step {
    border: none;
    background: #fff !important;
    color: #8a8fa3;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    width: 28px;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease;
    outline: none !important;
}
.dc-stepper .seat-step:hover {
    background: #f7fbff !important;
}
.dc-stepper .seat-step:focus,
.dc-stepper .seat-step:focus-visible,
.dc-stepper .seat-step:active {
    outline: none !important;
    box-shadow: none !important;
}
.dc-stepper .card-seat-input {
    min-width: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #151527;
    background: #fff !important;
    background-color: #fff !important;
    border-left: 1.5px solid #cfe5ff !important;
    border-right: 1.5px solid #cfe5ff !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    text-align: center;
}
.dc-stepper .card-seat-input:focus,
.dc-stepper .card-seat-input:focus-visible {
    background: #fff !important;
    background-color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}

@supports (-moz-appearance: none) {
    .dc-stepper .seat-step {
        flex-basis: auto;
    }
    .dc-stepper .card-seat-input {
        flex-basis: auto;
        min-width: 0;
    }
}

.pricing-hero-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}
.pricing-hero-price .hero-amount {
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    color: #151527;
    letter-spacing: -1px;
}
.pricing-hero-price .hero-period {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    color: #8a8fa3;
}

.pricing-summary-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 12px 0;
    min-height: 82px;
    box-sizing: border-box;
    border-top: 1px solid #edeff3;
    border-bottom: 1px solid #edeff3;
}
.pricing-summary-box .summary-label {
    font-size: 12px;
    font-weight: 700;
    color: #8a8fa3;
}
.pricing-summary-box .summary-amount {
    font-size: 18px;
    font-weight: 600;
    color: #151527;
    line-height: 1.1;
}
.pricing-summary-box .summary-note {
    font-size: 11px;
    font-weight: 500;
    color: #8a8fa3;
}

.pricing-grid-summary {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 12px 0;
    min-height: 82px;
    box-sizing: border-box;
    border-top: 1px solid #e6eef7;
    border-bottom: 1px solid #e6eef7;
}
.pricing-grid-summary .grid-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.pricing-grid-summary .grid-divider {
    background: #e6eef7;
}
.pricing-grid-summary .summary-label {
    font-size: 12px;
    font-weight: 700;
    color: #8a8fa3;
}
.pricing-grid-summary .summary-amount-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #151527;
    line-height: 1.1;
}
.pricing-grid-summary .summary-save-highlight {
    font-size: 18px;
    font-weight: 600;
    color: #35d3c9;
    line-height: 1.1;
}
/* The dash standing in for "no saving". Sized in em so it scales with whatever font
   size the card it sits in uses, and set on a child span so the compact card's
   inline font-size stays the thing it is measured against.
   line-height:0 keeps the enlarged glyph out of the line box calculation, so the
   row is still measured by its parent's strut - the summary grid ends up exactly
   as tall as it is when a real amount is showing. */
.summary-save-highlight .save-dash {
    font-size: 1.6em;
    line-height: 0;
    /* A hyphen sits a fixed fraction above its own baseline, so enlarging it also
       lifts it. This drops it back onto the line the amount would have occupied.
       The length is in the dash's own em (1.6x the card's), and the box stays
       zero-height either way, so nudging it cannot grow the row. */
    vertical-align: -0.14em;
}
.pricing-grid-summary .summary-note {
    font-size: 11px;
    font-weight: 500;
    color: #8a8fa3;
}
/* No saving to show (the Monthly tab, a single seat, or prices unavailable): the "You save"
   column and its divider come down, and the Total takes the whole width - centred, rather than
   sitting in the left half with an empty column beside it. Toggled by updateCardPrices /
   renderPricesUnavailable; the grid's own `align-items: center` keeps the Total centred. */
.pricing-grid-summary.no-save {
    grid-template-columns: 1fr;
}
.pricing-grid-summary.no-save .grid-divider,
.pricing-grid-summary.no-save .right-col {
    display: none;
}
.features-header {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #8a8fa3;
}

.pricing-feature-list {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    margin-bottom: 12px;
    flex: 1;
}
.pricing-feature-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 0;
    border-bottom: 1px solid #f2f4f7;
    box-sizing: border-box;
}
.pricing-feature-item svg {
    flex: none;
    width: 15px;
    height: 15px;
}
.pricing-feature-item span {
    font-size: 12px;
    font-weight: 500;
    color: #2a2a3c;
}

.btn-current-plan {
    box-sizing: border-box;
    margin-top: auto;
    width: 100%;
    height: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e4e8ee;
    border-radius: 8px;
    background: #f7f8fa;
    color: #8a8fa3;
    font-size: 14px;
    font-weight: 700;
    padding: 8px;
    line-height: 1.15;
    text-align: center;
}

.btn-subscribe {
    box-sizing: border-box;
    margin-top: auto;
    width: 100%;
    height: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: #74b9ff;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 8px;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease;
}
.btn-subscribe:hover {
    background: #4a9df0;
    color: #fff;
}

.view-more-container {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}
.view-more-link {
    font-size: 12px;
    font-weight: 600;
    color: #35d3c9;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.view-more-link:hover {
    color: #28b5ac;
}