/* ═══════════════════════════════════════════════
   Pricing Packages – Front-end Styles
   ═══════════════════════════════════════════════ */

:root {
    --pp-accent:    #0a0034;
    --pp-accent-h:  #1a0060;       /* hover — slightly lighter */
    --pp-accent-bg: #f0eeff;       /* very light tint for active tab */
    --pp-dark:      #0a0034;
    --pp-border:    #e0e0e0;
    --pp-bg:        #fff;
    --pp-radius:    10px;
    --pp-shadow:    0 2px 16px rgba(10,0,52,.1);
    --pp-font:      inherit;
    --pp-gap:       24px;
    --pp-feat-h:    220px;         /* max-height for features scrollbox */
}

/* ── Wrapper ── */
.pp-wrapper {
    font-family: var(--pp-font);
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ─────────────────────────────────────────────
   TABS — underline style (default)
───────────────────────────────────────────── */
.pp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--pp-border);
    margin-bottom: 36px;
    padding-bottom: 0;
}

.pp-tab-underline .pp-tab-btn {
    background: none;
    border: none;
    padding: 10px 18px;
    font-size: .95rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}

.pp-tab-underline .pp-tab-btn:hover {
    color: var(--pp-accent);
}

.pp-tab-underline .pp-tab-btn.pp-tab-active {
    color: var(--pp-accent);
    border-bottom-color: var(--pp-accent);
    background: var(--pp-accent-bg);
}

/* ─────────────────────────────────────────────
   TABS — pill style
───────────────────────────────────────────── */
.pp-tab-pill .pp-tabs {
    border-bottom: none;
    gap: 8px;
    justify-content: center;
    margin-bottom: 36px;
}

.pp-tab-pill .pp-tab-btn {
    background: #f2f2f2;
    border: 2px solid transparent;
    border-radius: 30px;
    padding: 8px 22px;
    font-size: .9rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.pp-tab-pill .pp-tab-btn:hover {
    background: var(--pp-accent-bg);
    color: var(--pp-accent);
}

.pp-tab-pill .pp-tab-btn.pp-tab-active {
    background: var(--pp-accent);
    color: #fff;
    border-color: var(--pp-accent);
}

/* ── Panels ── */
.pp-panel {
    display: none;
}
.pp-panel.pp-panel-active {
    display: block;
}

/* ─────────────────────────────────────────────
   GRID
───────────────────────────────────────────── */
.pp-grid {
    display: grid;
    gap: var(--pp-gap);
    align-items: start;
}

.pp-cols-1 { grid-template-columns: minmax(0,520px); justify-content: center; }
.pp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pp-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .pp-cols-3, .pp-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pp-cols-2, .pp-cols-3, .pp-cols-4 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   CARD
───────────────────────────────────────────── */
.pp-card {
    position: relative;
    background: var(--pp-bg);
    border: 2px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding: 32px 28px;
    box-shadow: var(--pp-shadow);
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s, transform .25s;
}

.pp-card:hover {
    box-shadow: 0 8px 32px rgba(10,0,52,.16);
    transform: translateY(-3px);
}

.pp-card--highlight {
    border-color: var(--pp-accent);
    border-width: 3px;
}

/* Badge */
.pp-badge {
    display: inline-block;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pp-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Title */
.pp-card__title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--pp-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 8px;
    line-height: 1.1;
}

/* Price */
.pp-card__price {
    display: flex;
    align-items: flex-start;
    line-height: 1;
    margin-bottom: 2px;
}

.pp-price__prefix {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pp-accent);
    margin-top: 6px;
}

.pp-price__amount {
    font-size: 3.4rem;
    font-weight: 900;
    color: var(--pp-accent);
    letter-spacing: -.02em;
}

.pp-card__period {
    font-size: .85rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 20px;
}

/* ─────────────────────────────────────────────
   Features — scrollable box
───────────────────────────────────────────── */
.pp-card__features {
    border-top: 2px solid var(--pp-border);
    padding-top: 16px;
    margin-bottom: 20px;

    /* scrollbox */
    max-height: var(--pp-feat-h);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;     /* gap between content and scrollbar */
}

/* Left accent bar on features */
.pp-card__features > ul:first-of-type {
    border-left: 3px solid var(--pp-accent);
    padding-left: 12px;
    margin-bottom: 16px;
}

/* ── Custom scrollbar (Webkit) ── */
.pp-card__features::-webkit-scrollbar {
    width: 5px;
}
.pp-card__features::-webkit-scrollbar-track {
    background: #f0eeff;
    border-radius: 10px;
}
.pp-card__features::-webkit-scrollbar-thumb {
    background: var(--pp-accent);
    border-radius: 10px;
    opacity: .7;
}
.pp-card__features::-webkit-scrollbar-thumb:hover {
    background: var(--pp-accent-h);
}

/* Firefox */
.pp-card__features {
    scrollbar-width: thin;
    scrollbar-color: var(--pp-accent) #f0eeff;
}

.pp-feature-group {
    font-size: .9rem;
    font-weight: 800;
    color: var(--pp-accent);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 16px 0 6px;
}

.pp-feature-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0 0 8px;
}

.pp-feature-list li {
    font-size: .88rem;
    color: #333;
    line-height: 1.55;
    margin-bottom: 4px;
}

.pp-feature-list li strong {
    color: var(--pp-accent);
}

/* ─────────────────────────────────────────────
   Buttons
───────────────────────────────────────────── */
.pp-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;   /* fixed gap — not flex:1 push since features scrolls */
}

.pp-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
    flex: 1;
    min-width: 90px;
}

.pp-btn--primary {
    background: var(--pp-accent);
    color: #fff;
    border: 2px solid var(--pp-accent);
}

.pp-btn--primary:hover {
    background: var(--pp-accent-h);
    border-color: var(--pp-accent-h);
    color: #fff;
}

.pp-btn--outline {
    background: transparent;
    color: var(--pp-accent);
    border: 2px solid var(--pp-accent);
}

.pp-btn--outline:hover {
    background: var(--pp-accent);
    color: #fff;
}

/* ── Empty state ── */
.pp-no-packages {
    text-align: center;
    color: #888;
    padding: 40px 0;
}