/* Widget "pricing" */
.karnak-pricing-grid {
    display: grid;
    align-items: start;
}

/* ── Card base ─────────────────────────────────────────────── */
.karnak-pricing-card {
    background:    var(--pricing-card-bg, #ffffff);
    /* Texto emparejado con el fondo propio de la tarjeta (blanco por default) —
       sin esto heredaba el color de la sección: blanco sobre blanco en fondos oscuros. */
    color:         var(--pricing-card-color, #18181b);
    border:        1px solid var(--pricing-card-border, #e5e7eb);
    border-radius: var(--pricing-card-radius, 12px);
    box-shadow:    var(--pricing-card-shadow);
    padding:       32px 24px;
    display:       flex;
    flex-direction: column;
    gap:           0;
    position:      relative;
    overflow:      hidden;
    text-align:    var(--pricing-align);
    transition:    box-shadow .2s, transform .2s;
}
.karnak-pricing-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

/* ── Badge ─────────────────────────────────────────────────── */
.karnak-pricing-badge {
    display:         inline-block;
    background:      var(--pricing-badge-bg, #6366f1);
    color:           var(--pricing-badge-color, #ffffff);
    font-size:       var(--pricing-badge-size, 11px);
    font-weight:     700;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    padding:         4px 12px;
    border-radius:   20px;
    margin-bottom:   16px;
    align-self:      flex-start;
}

/* ── Name / Description ────────────────────────────────────── */
.karnak-pricing-name {
    color:        var(--pricing-name-color);
    font-family:  var(--pricing-name-font);
    font-size:    var(--pricing-name-size, 18px);
    font-weight:  var(--pricing-name-weight, 700);
    margin-bottom: 8px;
}
.karnak-pricing-description {
    color:        var(--pricing-desc-color);
    font-size:    var(--pricing-desc-size, 14px);
    opacity:      .65;
    margin-bottom: 16px;
    line-height:  1.5;
}

/* ── Price ─────────────────────────────────────────────────── */
.karnak-pricing-price-wrap {
    display:      flex;
    align-items:  baseline;
    gap:          3px;
    margin-bottom: 20px;
    margin-top:   8px;
}
.karnak-pricing-currency {
    font-size:   var(--pricing-period-size, 22px);
    font-weight: 600;
    color:       var(--pricing-price-color, inherit);
}
.karnak-pricing-amount {
    font-size:   var(--pricing-price-size, 42px);
    font-weight: 800;
    line-height: 1;
    color:       var(--pricing-price-color, inherit);
}
.karnak-pricing-period {
    font-size:   var(--pricing-period-size, 14px);
    color:       var(--pricing-period-color);
    opacity:     .6;
    margin-left: 2px;
}
.karnak-pricing-was {
    font-size:       13px;
    opacity:         .5;
    text-decoration: line-through;
    margin-top:      -14px;
    margin-bottom:   12px;
}

/* ── Features ──────────────────────────────────────────────── */
.karnak-pricing-features {
    list-style:   none;
    margin:       0 0 24px;
    padding:      0;
    display:      flex;
    flex-direction: column;
    gap:          10px;
}
.karnak-pricing-feature {
    display:     flex;
    align-items: center;
    gap:         10px;
    color:       var(--pricing-feat-color);
    font-size:   var(--pricing-feat-size, 14px);
    line-height: 1.4;
}
.karnak-pricing-feature-icon {
    flex-shrink:  0;
    width:        20px;
    height:       20px;
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    font-size:    11px;
    font-weight:  700;
    background:   var(--pricing-check-color, #22c55e);
    color:        #fff;
}
.karnak-pricing-feature--excluded .karnak-pricing-feature-icon {
    background: var(--pricing-cross-color, #e5e7eb);
    color:      #9ca3af;
}
/* Ícono propio elegido para el feature (ej. Font Awesome) — sin el círculo
   de fondo ni el blanco forzado del ✓/✗ (esos tenían sentido para un check
   pero no para un ícono cualquiera elegido a mano); se ve tal cual, del
   color del texto del feature (pedido 2026-09-13: "lo metió blanco dentro
   de círculo"). Tamaño común a todos los íconos vía --pricing-icon-size
   (Estilos → Features → "Tamaño del ícono", pedido 2026-09-13: "es común a
   todos los íconos"). El slot (width/height) sigue el mismo --pricing-icon-size
   que el font-size — antes quedaba fijo a 20x20 para que el ícono "creciera
   en su lugar" en vez de empujar el texto (pedido 2026-09-13), pero con
   tamaños grandes (ej. 60px) el desborde del slot fijo se metía encima del
   texto del feature y de la fila de abajo (bug reportado 2026-09-14: "se
   solapa... no debería"). Con el slot del mismo tamaño que el ícono, tanto
   el gap horizontal con el texto como la altura de la fila (y por lo tanto
   el espacio hacia el feature siguiente) crecen junto con el ícono — mismo
   patrón que .karnak-icon-list-icon en icon-list.css. */
.karnak-pricing-feature-icon--custom,
.karnak-pricing-feature--excluded .karnak-pricing-feature-icon--custom {
    background:    none;
    color:         inherit;
    width:         var(--pricing-icon-size, 16px);
    height:        var(--pricing-icon-size, 16px);
    border-radius: 0;
    font-size:     var(--pricing-icon-size, 16px);
    line-height:   1;
}
.karnak-pricing-feature--excluded {
    opacity: .55;
}
.karnak-pricing-features--divider {
    gap: 0;
}
.karnak-pricing-features--divider .karnak-pricing-feature {
    padding:       10px 0;
    border-bottom: 1px solid var(--pricing-divider-color, rgba(0,0,0,.08));
}
.karnak-pricing-features--divider .karnak-pricing-feature:last-child {
    border-bottom: none;
}
.karnak-pricing-featured .karnak-pricing-features--divider .karnak-pricing-feature {
    border-bottom-color: var(--pricing-divider-color, rgba(255,255,255,.15));
}

/* ── Button ────────────────────────────────────────────────── */
.karnak-pricing-btn {
    display:         block;
    align-self:      var(--pricing-btn-align, stretch);
    text-align:      center;
    background:      var(--pricing-btn-bg, #6366f1);
    color:           var(--pricing-btn-color, #ffffff);
    border-style:    var(--pricing-btn-border-style, none);
    border-width:    var(--pricing-btn-border-width, medium);
    border-radius:   var(--pricing-btn-border-radius, 5px);
    border-color:    var(--pricing-btn-border-color, currentColor);
    padding:         var(--pricing-btn-padding, 11px 20px);
    font-family:     var(--pricing-btn-font);
    font-size:       var(--pricing-btn-size, 15px);
    font-weight:     var(--pricing-btn-weight, 600);
    text-shadow:     var(--pricing-btn-text-shadow, none);
    text-decoration: none;
    cursor:          pointer;
    margin-top:      auto;
    transition:      background .18s, opacity .18s, border-color .18s;
}
.karnak-pricing-btn:hover {
    background:    var(--pricing-btn-bg-hover, color-mix(in srgb, var(--pricing-btn-bg, #6366f1) 85%, #000));
    color:         var(--pricing-btn-color-hover, var(--pricing-btn-color, #ffffff));
    border-style:  var(--pricing-btn-border-hover-style, var(--pricing-btn-border-style, none));
    border-width:  var(--pricing-btn-border-hover-width, var(--pricing-btn-border-width, medium));
    border-radius: var(--pricing-btn-border-hover-radius, var(--pricing-btn-border-radius, 5px));
    border-color:  var(--pricing-btn-border-hover-color, var(--pricing-btn-border-color, currentColor));
    padding:       var(--pricing-btn-padding-hover, var(--pricing-btn-padding, 11px 20px));
    opacity:       .9;
}

/* ── Featured card ─────────────────────────────────────────── */
.karnak-pricing-featured {
    background:    var(--pricing-featured-bg, #6366f1);
    border-color:  var(--pricing-featured-border, #6366f1);
    color:         var(--pricing-featured-color, #ffffff);
    box-shadow:    0 12px 40px color-mix(in srgb, var(--pricing-featured-bg, #6366f1) 25%, transparent);
    transform:     translateY(-6px);
}
.karnak-pricing-featured .karnak-pricing-period {
    opacity: .75;
}
.karnak-pricing-featured .karnak-pricing-btn {
    background: var(--pricing-btn-bg-featured, #ffffff);
    color:      var(--pricing-btn-color-featured, #6366f1);
}
.karnak-pricing-featured .karnak-pricing-btn:hover {
    opacity: .9;
}

/* ── Design 2: badge centered at top ──────────────────────── */
.karnak-pricing-design-2 .karnak-pricing-badge {
    align-self:   center;
    margin-bottom: 20px;
}
.karnak-pricing-design-2 .karnak-pricing-card {
    text-align:   center;
}
.karnak-pricing-design-2 .karnak-pricing-price-wrap {
    justify-content: center;
}
.karnak-pricing-design-2 .karnak-pricing-features {
    text-align: left;
}

/* ── Design 3: compact rows ────────────────────────────────── */
.karnak-pricing-design-3 .karnak-pricing-grid {
    grid-template-columns: 1fr !important;
}
.karnak-pricing-design-3 .karnak-pricing-card {
    flex-direction: row;
    align-items:    center;
    padding:        20px 24px;
    gap:            16px;
    transform:      none !important;
}
.karnak-pricing-design-3 .karnak-pricing-name {
    flex:          1;
    margin-bottom: 0;
    font-size:     16px;
}
.karnak-pricing-design-3 .karnak-pricing-price-wrap {
    flex:          0 0 auto;
    margin:        0;
}
.karnak-pricing-design-3 .karnak-pricing-description,
.karnak-pricing-design-3 .karnak-pricing-features,
.karnak-pricing-design-3 .karnak-pricing-badge {
    display: none;
}
.karnak-pricing-design-3 .karnak-pricing-btn {
    flex:       0 0 auto;
    margin-top: 0;
    padding:    8px 18px;
    font-size:  14px;
}
.karnak-pricing-design-3 .karnak-pricing-amount {
    font-size: 26px;
}
.karnak-pricing-design-3 .karnak-pricing-currency {
    font-size: 16px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .karnak-pricing-featured {
        transform: none;
    }
}