/*
 * ShortU — Pricing plans page styles
 * Used in front/plans/index.html
 */

/* ── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
    --su-color-primary:      #140c40;
    --su-color-text-muted:   #646d77;
    --su-color-accent:       #fa8f77;
    --su-color-accent-hover: #f87060;
    --su-color-white:        #ffffff;
    --su-radius:             10px;
}

/* ── Billing toggle row ────────────────────────────────────────────────── */
.su-billing-toggle {
    align-items:     center;
    display:         flex;
    gap:             12px;
    justify-content: center;
}

.su-billing-lbl {
    color:       var(--su-color-text-muted);
    font-weight: 400;
    transition:  color 0.15s, font-weight 0.15s;
}

.su-billing-lbl--active {
    color:       var(--su-color-primary);
    font-weight: 600;
}

/* ── Savings badge next to "Yearly" ────────────────────────────────────── */
.su-billing-badge {
    background:    var(--su-color-accent);
    border-radius: 10px;
    color:         var(--su-color-white);
    font-size:     0.7rem;
    margin-left:   4px;
    padding:       2px 7px;
}

/* ── Plan card layout ──────────────────────────────────────────────────── */
.single-card {
    display:        flex;
    flex-direction: column;
    height:         100%;
}

.card-bottom {
    display:        flex;
    flex:           1;
    flex-direction: column;
}

.card-bottom ul {
    flex: 1;
}

/* ── Current plan banner ────────────────────────────────────────────────── */
.su-current-plan-banner {
    background:     var(--su-color-accent);
    color:          var(--su-color-white);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 1px;
    padding:        4px 0;
    text-transform: uppercase;
}

/* ── Price display (Bootstrap d-none handles toggling via JS) ──────────── */
.price-monthly,
.price-yearly { display: block; }

/* ── Annual savings note below yearly price ────────────────────────────── */
.su-savings-note {
    color:     var(--su-color-accent);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
}

/* ── Feature list ───────────────────────────────────────────────────────── */
.su-plan-features {
    list-style: none;
    margin:     0 0 20px;
    padding:    0;
    text-align: left;
}

.su-plan-feature {
    align-items: flex-start;
    display:     flex;
    font-size:   0.88rem;
    gap:         10px;
    padding:     10px;
}

.su-plan-feature + .su-plan-feature {
    border-top: 1px solid #f0f0f8;
}

.su-feature-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    margin-top: 4px;
    width: 20px;
}

.su-feature-icon--yes { color: #09cc7f; }
.su-feature-icon--no  { color: #ccc;    }

.su-plan-feature--no {
    color: #aaaaaa;
}

/* ── CTA button wrapper inside card ────────────────────────────────────── */
.su-plan-cta {
    margin-top: auto;
    padding-top: 0px;
    align-items: center !important;
}

.su-plan-cta .borders-btn {
    display: block;
    margin-left: 20%;
    margin-right: 20%;
}

/* ── Highlighted card for current plan ─────────────────────────────────── */
.su-current-plan-card {
    border-color: var(--su-color-accent) !important;
}

/* ── Contact CTA paragraph ─────────────────────────────────────────────── */
.su-plans-cta {
    color: var(--su-color-text-muted);
}

.su-plans-cta a {
    color:       var(--su-color-accent);
    font-weight: 600;
}

.su-plans-cta a:hover {
    color:           var(--su-color-accent-hover);
    text-decoration: underline;
}