/* ==========================================================================
   TIER CARDS — Shared selectable tier/package cards
   ==========================================================================
   Use for:  Creator tier selection (nano/micro/small/mid), package pickers,
             any multi-select card grid where items toggle on/off.

   Markup:
     <div class="tier-cards">
       <label class="tier-card tier-card--selected tier-card--locked" data-tier="nano">
         <div class="tier-card__check"><i class="fas fa-lock"></i></div>
         <div class="tier-card__body">
           <div class="tier-card__name">
             Nano Creators
             <span class="tier-card__badge tier-card__badge--included">
               <i class="fas fa-check-circle"></i> Always included
             </span>
           </div>
           <div class="tier-card__range">100 - 10,000 subscribers</div>
           <div class="tier-card__meta"><i class="fas fa-rocket"></i> Fastest completion</div>
         </div>
         <div class="tier-card__price-wrap">
           <span class="tier-card__price">$0.20</span>
           <span class="tier-card__price-label">per shoutout</span>
         </div>
         <input type="checkbox" class="tier-card__input" value="nano" checked disabled>
       </label>
     </div>

   Modifiers:
     .tier-card--selected     Active/checked state
     .tier-card--locked       Cannot be toggled (always included, cursor: default)
     .tier-card--addon        Optional/premium tier (slightly muted until selected)

   Badge variants:
     .tier-card__badge--included      Blue "Always included"
     .tier-card__badge--recommended   Green "Recommended"
   ========================================================================== */

/* --- Grid container --- */
.tier-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

/* --- Base card --- */
.tier-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    cursor: pointer;
    position: relative;
    transition: all 150ms ease;
}

.tier-card:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* --- Selected state --- */
.tier-card--selected {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
}

/* --- Locked state (nano / always-included) --- */
.tier-card--locked {
    cursor: default;
}

.tier-card--locked:hover {
    transform: none;
    box-shadow: none;
}

/* --- Addon tiers (optional, muted until selected) --- */
.tier-card--addon {
    opacity: 0.75;
}

.tier-card--addon.tier-card--selected {
    opacity: 1;
}

/* --- Check circle (top-right) --- */
.tier-card__check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    color: white;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.tier-card--selected .tier-card__check {
    background: var(--color-primary);
}

.tier-card--locked .tier-card__check i {
    font-size: 10px;
}

/* --- Hidden native checkbox --- */
.tier-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* --- Body content --- */
.tier-card__body {
    flex: 1;
    min-width: 0;
    padding-right: var(--space-6);
}

.tier-card__name {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--color-gray-900);
    margin-bottom: 2px;
    line-height: 1.4;
}

.tier-card__range {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.tier-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tier-card__meta i {
    font-size: 10px;
}

.tier-card--selected .tier-card__meta {
    color: var(--color-gray-500);
}

/* --- Price pill (right side) --- */
.tier-card__price-wrap {
    flex-shrink: 0;
    text-align: center;
}

.tier-card__price {
    background: var(--color-gray-800);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    display: block;
    text-align: center;
}

.tier-card--selected .tier-card__price {
    background: var(--color-primary);
}

.tier-card__price-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    display: block;
    text-align: center;
    margin-top: 2px;
    white-space: nowrap;
}

.tier-card--selected .tier-card__price-label {
    color: var(--color-gray-500);
}

/* --- Inline cost (alternative to price pill, shown below range) --- */
.tier-card__cost {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-1);
}

/* --- Note line (e.g. "Limited availability") --- */
.tier-card__note {
    font-size: var(--font-size-xs);
    color: var(--color-warning);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-1);
}

/* --- "Always included" inline label --- */
.tier-card__always {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    margin-left: var(--space-1);
}

/* --- Badges (inline with name) --- */
.tier-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    vertical-align: middle;
    margin-left: var(--space-1);
}

.tier-card__badge i {
    font-size: 10px;
}

.tier-card__badge--included {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.tier-card__badge--recommended {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success-dark);
}

/* --- Strikethrough original price (for monthly discount) --- */
.tier-card__price s {
    opacity: 0.5;
    font-weight: var(--font-weight-medium);
    margin-right: 4px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
    .tier-cards {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .tier-card {
        padding: var(--space-3);
    }
}