@charset "UTF-8";
/**
 * AIny Member Component Library
 * Shared UI components: button, input, field, card, badge, notice, checkbox
 * Depends on: _tokens.css (must be enqueued first)
 */

/* ============================================================================
 * BUTTON
 * ============================================================================ */

.ainy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ainy-sp-2);
    padding: 12px 24px;
    min-height: 48px;
    border: 0;
    border-radius: var(--ainy-radius);
    font-family: var(--ainy-font);
    font-size: var(--ainy-font-size-base);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ainy-transition);
    user-select: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.ainy-btn:focus-visible {
    outline: 0;
    box-shadow: var(--ainy-shadow-focus);
}

.ainy-btn:disabled,
.ainy-btn[aria-busy="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary */
.ainy-btn-primary {
    background: var(--ainy-primary);
    color: var(--ainy-text-on-primary);
}
.ainy-btn-primary:hover:not(:disabled) {
    background: var(--ainy-primary-hover);
    color: var(--ainy-text-on-primary);
    text-decoration: none;
}

/* Accent (red CTA) */
.ainy-btn-accent {
    background: var(--ainy-accent);
    color: var(--ainy-text-on-primary);
}
.ainy-btn-accent:hover:not(:disabled) {
    background: var(--ainy-accent-hover);
    color: var(--ainy-text-on-primary);
    text-decoration: none;
}

/* Secondary / outline */
.ainy-btn-secondary,
.ainy-btn-outline {
    background: var(--ainy-surface);
    color: var(--ainy-primary);
    border: 1px solid var(--ainy-border-strong);
}
.ainy-btn-secondary:hover:not(:disabled),
.ainy-btn-outline:hover:not(:disabled) {
    background: var(--ainy-primary-tint);
    color: var(--ainy-primary);
    text-decoration: none;
}

/* Ghost */
.ainy-btn-ghost {
    background: transparent;
    color: var(--ainy-text);
    border: 0;
}
.ainy-btn-ghost:hover:not(:disabled) {
    background: var(--ainy-surface-2);
    text-decoration: none;
}

/* Success */
.ainy-btn-success {
    background: var(--ainy-success);
    color: var(--ainy-text-on-primary);
}
.ainy-btn-success:hover:not(:disabled) {
    background: #15803d;
    color: var(--ainy-text-on-primary);
    text-decoration: none;
}

/* Danger */
.ainy-btn-danger {
    background: var(--ainy-danger);
    color: var(--ainy-text-on-primary);
}
.ainy-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    color: var(--ainy-text-on-primary);
    text-decoration: none;
}

/* Link style */
.ainy-btn-link {
    background: transparent;
    color: var(--ainy-primary);
    border: 0;
    padding: 0;
    min-height: auto;
    font-weight: 500;
    text-decoration: underline;
}
.ainy-btn-link:hover:not(:disabled) {
    color: var(--ainy-primary-hover);
    background: transparent;
}

/* Modifiers */
.ainy-btn-block { width: 100%; }

.ainy-btn-sm {
    padding: 8px 16px;
    min-height: 36px;
    font-size: var(--ainy-font-size-sm);
    border-radius: var(--ainy-radius-sm);
}

.ainy-btn-lg {
    padding: 14px 32px;
    min-height: 52px;
    font-size: var(--ainy-font-size-lg);
}

/* ============================================================================
 * FORM FIELD
 * ============================================================================ */

.ainy-field {
    margin-bottom: var(--ainy-sp-5);
}

.ainy-field-label,
.ainy-field label {
    display: block;
    margin-bottom: var(--ainy-sp-2);
    font-size: var(--ainy-font-size-sm);
    font-weight: 600;
    color: var(--ainy-text);
}

.ainy-field-required::after,
.ainy-field-label.required::after {
    content: ' *';
    color: var(--ainy-accent);
}

.ainy-field-optional {
    margin-left: var(--ainy-sp-1);
    font-weight: 400;
    font-style: italic;
    color: var(--ainy-text-muted);
    font-size: var(--ainy-font-size-xs);
}

.ainy-field-hint {
    margin-top: var(--ainy-sp-2);
    font-size: var(--ainy-font-size-xs);
    color: var(--ainy-text-muted);
    display: flex;
    align-items: flex-start;
    gap: var(--ainy-sp-1);
    line-height: 1.5;
}

/* ============================================================================
 * INPUT / TEXTAREA / SELECT
 * ============================================================================ */

.ainy-input,
.ainy-textarea,
.ainy-select {
    width: 100%;
    padding: 12px 14px;
    background: var(--ainy-surface);
    border: 1px solid var(--ainy-border-strong);
    border-radius: var(--ainy-radius);
    font-family: var(--ainy-font);
    font-size: 16px; /* iOS zoom threshold — do not lower */
    color: var(--ainy-text);
    transition: border-color var(--ainy-transition), box-shadow var(--ainy-transition);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.ainy-input:focus,
.ainy-textarea:focus,
.ainy-select:focus {
    outline: 0;
    border-color: var(--ainy-primary);
    box-shadow: var(--ainy-shadow-focus);
}

.ainy-input:disabled,
.ainy-textarea:disabled,
.ainy-select:disabled {
    background: var(--ainy-surface-2);
    color: var(--ainy-text-muted);
    cursor: not-allowed;
    border-color: var(--ainy-border);
}

.ainy-input::placeholder,
.ainy-textarea::placeholder {
    color: var(--ainy-text-disabled);
}

.ainy-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.ainy-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ============================================================================
 * CARD
 * ============================================================================ */

.ainy-card {
    background: var(--ainy-surface);
    border-radius: var(--ainy-radius-lg);
    box-shadow: var(--ainy-shadow);
    padding: var(--ainy-sp-6);
}

.ainy-card-sm {
    padding: var(--ainy-sp-4);
    border-radius: var(--ainy-radius);
}

/* ============================================================================
 * BADGE
 * ============================================================================ */

.ainy-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ainy-radius-pill);
    font-size: var(--ainy-font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.ainy-badge-primary   { background: var(--ainy-primary-tint); color: var(--ainy-primary); }
.ainy-badge-success   { background: var(--ainy-success-bg);   color: var(--ainy-success); }
.ainy-badge-warning   { background: var(--ainy-warning-bg);   color: var(--ainy-warning-dark); }
.ainy-badge-danger    { background: var(--ainy-danger-bg);    color: var(--ainy-danger); }
.ainy-badge-info      { background: var(--ainy-info-bg);      color: var(--ainy-info); }
.ainy-badge-neutral   { background: var(--ainy-surface-2);    color: var(--ainy-text-muted); }

/* Tier badges */
.ainy-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--ainy-radius-pill);
    font-size: var(--ainy-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ainy-tier-badge.trial   { background: var(--ainy-primary-tint); color: var(--ainy-primary); }
.ainy-tier-badge.reguler { background: var(--ainy-success-bg);   color: var(--ainy-success); }
.ainy-tier-badge.vip     { background: #fef3c7;                  color: #b45309; }
.ainy-tier-badge.expired { background: var(--ainy-danger-bg);    color: var(--ainy-danger); }

/* Status badges */
.ainy-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ainy-radius-pill);
    font-size: var(--ainy-font-size-xs);
    font-weight: 600;
}
.ainy-status-badge.active          { background: var(--ainy-success-bg); color: var(--ainy-success); }
.ainy-status-badge.suspended       { background: var(--ainy-danger-bg);  color: var(--ainy-danger); }
.ainy-status-badge.pending_payment { background: var(--ainy-warning-bg); color: var(--ainy-warning-dark); }
.ainy-status-badge.paid            { background: var(--ainy-success-bg); color: var(--ainy-success); }
.ainy-status-badge.cancelled,
.ainy-status-badge.expired         { background: var(--ainy-surface-2);  color: var(--ainy-text-muted); }

/* ============================================================================
 * NOTICE / ALERT
 * ============================================================================ */

.ainy-notice {
    padding: var(--ainy-sp-4);
    border-radius: var(--ainy-radius);
    margin-bottom: var(--ainy-sp-4);
    font-size: var(--ainy-font-size-sm);
    line-height: 1.6;
}

.ainy-notice-success { background: var(--ainy-success-bg); color: var(--ainy-success); }
.ainy-notice-warning { background: var(--ainy-warning-bg); color: var(--ainy-warning-dark); }
.ainy-notice-danger,
.ainy-notice-error   { background: var(--ainy-danger-bg);  color: var(--ainy-danger); }
.ainy-notice-info    { background: var(--ainy-info-bg);    color: var(--ainy-info); }

/* Legacy aliases */
.ainy-msg-success { background: var(--ainy-success-bg); color: var(--ainy-success); padding: var(--ainy-sp-3) var(--ainy-sp-4); border-radius: var(--ainy-radius-sm); font-size: var(--ainy-font-size-sm); }
.ainy-msg-error   { background: var(--ainy-danger-bg);  color: var(--ainy-danger);  padding: var(--ainy-sp-3) var(--ainy-sp-4); border-radius: var(--ainy-radius-sm); font-size: var(--ainy-font-size-sm); }

/* ============================================================================
 * CHECKBOX ROW
 * ============================================================================ */

.ainy-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ainy-sp-3);
    padding: var(--ainy-sp-3) 0;
    cursor: pointer;
}

.ainy-checkbox-row + .ainy-checkbox-row {
    border-top: 1px solid var(--ainy-border-soft);
}

.ainy-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    accent-color: var(--ainy-primary);
    cursor: pointer;
}

.ainy-checkbox-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ainy-checkbox-label strong {
    font-size: var(--ainy-font-size-sm);
    font-weight: 600;
    color: var(--ainy-text);
}

.ainy-checkbox-label small {
    font-size: var(--ainy-font-size-xs);
    color: var(--ainy-text-muted);
    line-height: 1.5;
}

/* ============================================================================
 * FIELDSET
 * ============================================================================ */

.ainy-fieldset {
    border: 1px solid var(--ainy-border);
    border-radius: var(--ainy-radius);
    padding: var(--ainy-sp-4) var(--ainy-sp-5);
    margin: 0 0 var(--ainy-sp-5);
}

.ainy-fieldset legend {
    padding: 0 var(--ainy-sp-2);
    font-size: var(--ainy-font-size-sm);
    font-weight: 600;
    color: var(--ainy-text);
}

/* ============================================================================
 * DIVIDER
 * ============================================================================ */

.ainy-divider {
    border: 0;
    border-top: 1px solid var(--ainy-border);
    margin: var(--ainy-sp-6) 0;
}

.ainy-divider-text {
    display: flex;
    align-items: center;
    gap: var(--ainy-sp-3);
    color: var(--ainy-text-muted);
    font-size: var(--ainy-font-size-xs);
    margin: var(--ainy-sp-5) 0;
}
.ainy-divider-text::before,
.ainy-divider-text::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--ainy-border);
}

.ainy-checkout-btn-wrap { display: inline-block; }

/* Program Catalog — [ainy_program_catalog] */
.ainy-catalog {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ainy-sp-6, 24px);
    justify-content: center;
}
.ainy-catalog-card {
    flex: 1 1 260px;
    max-width: 360px;
}

/* ============================================================================
 * RESPONSIVE — Mobile adjustments
 * ============================================================================ */

@media (max-width: 480px) {
    .ainy-btn {
        padding: 10px 18px;
        min-height: 44px;
    }

    .ainy-card {
        padding: var(--ainy-sp-4);
    }

    .ainy-card-sm {
        padding: var(--ainy-sp-3);
    }

    .ainy-fieldset {
        padding: var(--ainy-sp-3) var(--ainy-sp-4);
    }

    .ainy-notice {
        padding: var(--ainy-sp-3);
    }

    .ainy-catalog {
        gap: var(--ainy-sp-4, 16px);
    }

    .ainy-catalog-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .ainy-btn {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .ainy-badge,
    .ainy-tier-badge {
        font-size: 0.7rem;
        padding: 2px 7px;
    }
}