/* ════════════════════════════════════════════
   MIW AI Tutor — Credits Order Form
   Inherits the parent plugin's --ait-* and
   --tonkla-* design tokens. Falls back to safe
   defaults when used on a page outside the
   parent's enqueue scope (e.g., a generic
   public sales page).
   ════════════════════════════════════════════ */

.miw-aitc-shop {
    --aitc-font:           var(--ait-font, var(--tonkla-font, 'Quicksand', system-ui, sans-serif));
    --aitc-font-display:   var(--ait-font-display, var(--aitc-font));

    --aitc-primary:        var(--ait-primary, var(--tonkla-primary, #2B84A0));
    --aitc-primary-dark:   var(--ait-primary-dark, var(--tonkla-primary-dark, #1F6882));
    --aitc-primary-light:  var(--ait-primary-light, rgba(43,132,160,0.09));
    --aitc-primary-glow:   var(--ait-primary-glow, rgba(43,132,160,0.22));
    --aitc-violet:         var(--ait-violet, var(--tonkla-secondary, #5F8CBE));
    --aitc-success:        var(--ait-success, var(--tonkla-success, #2EAA7B));
    --aitc-warning:        var(--ait-warning, var(--tonkla-warning, #E2A84B));
    --aitc-error:          var(--ait-error, var(--tonkla-error, #E25C5C));

    --aitc-text:           var(--ait-text, var(--tonkla-text, #1E3A4A));
    --aitc-text-soft:      var(--ait-text-soft, var(--tonkla-text-soft, #4A6B7C));
    --aitc-text-muted:     var(--ait-text-muted, var(--tonkla-text-muted, #8FA8B8));
    --aitc-bg:             var(--ait-bg, var(--tonkla-bg, #F5F8FA));
    --aitc-card:           var(--ait-card, var(--tonkla-card-bg, #ffffff));
    --aitc-border:         var(--ait-border, var(--tonkla-border, #D5DDE3));
    --aitc-border-light:   var(--ait-border-light, var(--tonkla-border-light, #E5ECF0));

    --aitc-radius:         var(--ait-radius, var(--tonkla-radius-xl, 12px));
    --aitc-radius-lg:      var(--ait-radius-lg, var(--tonkla-radius-lg, 8px));
    --aitc-radius-pill:    var(--ait-radius-pill, var(--tonkla-radius-pill, 20px));
    --aitc-shadow:         var(--ait-shadow, 0 2px 8px rgba(0,0,0,0.06));
    --aitc-shadow-lg:      var(--ait-shadow-lg, 0 6px 20px rgba(0,0,0,0.08));
    --aitc-shadow-hover:   0 10px 28px rgba(43,132,160,0.16);

    font-family: var(--aitc-font);
    color: var(--aitc-text);
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 4px;
    box-sizing: border-box;
}

.miw-aitc-shop *,
.miw-aitc-shop *::before,
.miw-aitc-shop *::after { box-sizing: border-box; }

/* ── Flash messages ── */

.miw-aitc-flash {
    padding: 14px 18px;
    border-radius: var(--aitc-radius-lg);
    margin-bottom: 22px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    border-left: 4px solid;
    animation: aitcFadeUp 0.4s ease both;
}
.miw-aitc-flash-success {
    background: rgba(46,170,123,0.08);
    color: var(--aitc-success);
    border-color: var(--aitc-success);
}
.miw-aitc-flash-info {
    background: var(--aitc-primary-light);
    color: var(--aitc-primary-dark);
    border-color: var(--aitc-primary);
}
.miw-aitc-flash-error {
    background: rgba(225,92,92,0.08);
    color: var(--aitc-error);
    border-color: var(--aitc-error);
}

/* ── Login prompt ── */

.miw-aitc-login-prompt {
    background: var(--aitc-card);
    border: 1px solid var(--aitc-border);
    border-radius: var(--aitc-radius);
    padding: 32px 28px;
    text-align: center;
    box-shadow: var(--aitc-shadow);
}
.miw-aitc-login-prompt h3 {
    font-family: var(--aitc-font-display);
    color: var(--aitc-text);
    font-size: 1.4rem;
    margin: 0 0 10px;
}
.miw-aitc-login-prompt p {
    color: var(--aitc-text-soft);
    margin: 0 0 18px;
}

/* ── Balance bar ── */

.miw-aitc-balance {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: linear-gradient(135deg, var(--aitc-primary-light) 0%, rgba(255,255,255,0.4) 100%);
    border: 1px solid var(--aitc-border-light);
    border-left: 4px solid var(--aitc-primary);
    border-radius: var(--aitc-radius-lg);
    padding: 14px 22px;
    margin-bottom: 24px;
    box-shadow: var(--aitc-shadow);
}
.miw-aitc-balance-label {
    color: var(--aitc-text-soft);
    font-size: 0.95rem;
    font-weight: 500;
}
.miw-aitc-balance-value {
    color: var(--aitc-primary-dark);
    font-family: var(--aitc-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
}
.miw-aitc-balance-unit {
    color: var(--aitc-text-soft);
    font-size: 1rem;
    font-weight: 500;
}

/* ── Empty state ── */

.miw-aitc-empty {
    text-align: center;
    color: var(--aitc-text-soft);
    padding: 40px 20px;
    font-size: 1rem;
}

/* ── Package grid ── */

.miw-aitc-packages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.miw-aitc-shop[data-columns="1"] .miw-aitc-packages { grid-template-columns: 1fr; }
.miw-aitc-shop[data-columns="2"] .miw-aitc-packages { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 720px; margin-inline: auto; }
.miw-aitc-shop[data-columns="3"] .miw-aitc-packages { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.miw-aitc-shop[data-columns="4"] .miw-aitc-packages { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── Package card ── */

.miw-aitc-package {
    background: var(--aitc-card);
    border: 1px solid var(--aitc-border);
    border-radius: var(--aitc-radius);
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--aitc-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
    animation: aitcFadeUp 0.5s ease both;
}
.miw-aitc-package:hover {
    transform: translateY(-3px);
    box-shadow: var(--aitc-shadow-hover);
    border-color: var(--aitc-primary-light);
}

/* Subtle decorative accent — a quarter-circle in the top-right that
   glows on hover. Visual signature without being noisy. */
.miw-aitc-package::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 30% 70%, var(--aitc-primary-glow), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.miw-aitc-package:hover::after { opacity: 1; }

.miw-aitc-package-head {
    border-bottom: 1px solid var(--aitc-border-light);
    padding-bottom: 12px;
}
.miw-aitc-package-name {
    font-family: var(--aitc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--aitc-text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.miw-aitc-package-desc {
    color: var(--aitc-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.miw-aitc-package-credits {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
}
.miw-aitc-credits-num {
    font-family: var(--aitc-font-display);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--aitc-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}
.miw-aitc-credits-label {
    color: var(--aitc-text-soft);
    font-size: 0.95rem;
    font-weight: 500;
}

.miw-aitc-package-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--aitc-text);
}
.miw-aitc-currency {
    font-size: 0.9rem;
    color: var(--aitc-text-soft);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.miw-aitc-amount {
    font-family: var(--aitc-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--aitc-text);
    letter-spacing: -0.01em;
}

.miw-aitc-per-credit {
    font-size: 0.8rem;
    color: var(--aitc-text-muted);
    margin-top: -4px;
}

.miw-aitc-package-actions {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Buttons ── */

.miw-aitc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: var(--aitc-font);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    border-radius: var(--aitc-radius-pill);
    border: 1.5px solid var(--aitc-border);
    background: var(--aitc-card);
    color: var(--aitc-text);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.miw-aitc-button:hover { transform: translateY(-1px); }
.miw-aitc-button:focus-visible {
    outline: 2px solid var(--aitc-primary);
    outline-offset: 2px;
}
.miw-aitc-button:disabled,
.miw-aitc-button.is-loading {
    opacity: 0.65;
    cursor: progress;
    transform: none;
}

.miw-aitc-button-primary {
    background: var(--aitc-primary);
    color: #fff;
    border-color: var(--aitc-primary);
}
.miw-aitc-button-primary:hover {
    background: var(--aitc-primary-dark);
    border-color: var(--aitc-primary-dark);
    box-shadow: 0 6px 16px var(--aitc-primary-glow);
}

/* PayPal's brand colour — kept distinguishable so users instantly
   recognise the option without us having to label it twice. */
.miw-aitc-button-paypal {
    background: #FFC439;
    color: #003087;
    border-color: #FFC439;
}
.miw-aitc-button-paypal:hover {
    background: #F0B62A;
    border-color: #F0B62A;
    box-shadow: 0 6px 16px rgba(255,196,57,0.30);
}

/* ── Sandbox banner inside cards ── */

.miw-aitc-sandbox-banner {
    margin-top: 4px;
    padding: 6px 10px;
    background: rgba(226,168,75,0.10);
    color: var(--aitc-warning);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--aitc-radius-lg);
    letter-spacing: 0.02em;
}

/* ── Inline error under a card after a failed AJAX ── */

.miw-aitc-card-error {
    margin-top: 8px;
    color: var(--aitc-error);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

/* ── Animations ── */

@keyframes aitcFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Stagger card reveals when there are a few of them — feels alive
   without being theatrical. */
.miw-aitc-package:nth-child(1) { animation-delay: 0.05s; }
.miw-aitc-package:nth-child(2) { animation-delay: 0.10s; }
.miw-aitc-package:nth-child(3) { animation-delay: 0.15s; }
.miw-aitc-package:nth-child(4) { animation-delay: 0.20s; }
.miw-aitc-package:nth-child(5) { animation-delay: 0.25s; }
.miw-aitc-package:nth-child(6) { animation-delay: 0.30s; }

/* ── Responsive ── */

@media (max-width: 600px) {
    .miw-aitc-shop { padding: 4px 0; }
    .miw-aitc-balance {
        flex-wrap: wrap;
        padding: 12px 16px;
    }
    .miw-aitc-balance-value { font-size: 1.6rem; }
    .miw-aitc-package { padding: 20px 18px; }
    .miw-aitc-credits-num { font-size: 2.2rem; }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
    .miw-aitc-package,
    .miw-aitc-flash,
    .miw-aitc-button { animation: none !important; transition: none !important; }
    .miw-aitc-button:hover { transform: none; }
}