/* Import font (IMPORTANT for Figma match) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background: #f5f7fb;
}

/* Wrapper */
.stripe-wrapper,#cards-container {
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    height: 85vh;
}

.stripe-powered{
    margin-top: 20px !important;
    color: #a8a29e !important;
}
.stripe-powered-line{
    display:flex;justify-content:center;align-items:center;
}
.stripe_S{
    width: 16px;
    margin-right: 5px !important;
}
/* Card */
.stripe-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 380px;
    /* background: #fff; */
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    border: 2px solid #e5e7eb;
    /* box-shadow: 0 8px 30px rgba(0,0,0,0.05); */
    transition: all 0.3s ease;
}

/* ICON CIRCLE */
.icon-circle {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* SVG icons */
.icon {
    width: 32px;
    height: 32px;
    stroke: currentColor;
}

/* Spinner */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #c7d2fe;
    border-top: 3px solid #4f46e5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Badge */
.badge {
    display: inline-block;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
    font-weight: 500;
    position: static !important;
    width: auto !important;
    height: auto !important;
}

/* Typography */
.stripe-card h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #111827;
}

.stripe-card p {
    font-size: 14px;
    color: #b8b8b8;
    margin-bottom: 22px;
}

/* Buttons */
.btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    margin: 8px 0 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

/* Button styles */
.btn.primary {
    background: linear-gradient(90deg, #0EA5E9, #4F46E5) !important;
    color: #fff !important;
}

.btn.secondary {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.btn.danger {
    background: #ef4444 !important;
    color: #fff !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}
.btn.connected{
    background: #16a34a !important;
    color: #fff !important;
}
.btn.incomplete,.btn.action_required{
    background: #D97706 !important;
    color: #fff !important;
}
.btn.dashboard{
    background: transparent !important;
    border: 2px solid #E7E5E4 !important;
    color: black !important;
}
.btn.dash{
    background: #4F46E5 !important;
    color: #fff !important;
}
/* ===== STATUS COLORS (MATCH FIGMA) ===== */

/* SUCCESS */
.stripe-card.success { border-color: #DCFCE7 !important; }
.success .icon-circle { background: #DCFCE7 !important; color: #16a34a !important; }
.badge.success { background: #DCFCE7 !important; color: #16a34a !important; }

/* INCOMPLETE */
.stripe-card.incomplete,.stripe-card.action_required  { border-color: #FEF3C7 !important; }
.incomplete .icon-circle,.action_required .icon-circle { background: #FEF3C7 !important; color: #D97706 !important;}
.badge.incomplete,.badge.action { background: #FEF3C7 !important; color: #D97706 !important; }

/* PENDING */
.stripe-card.pending { border-color: #c7d2fe !important; }
.pending .icon-circle { background: #E0E7FF !important; color: #4F46E5 !important; }
.badge.pending { background: #E0E7FF !important; color: #4F46E5 !important; }

/* RESTRICTED */
.stripe-card.restricted { border-color: #FEE2E2 !important; }
.restricted .icon-circle { background: #FEE2E2 !important; color: #dc2626 !important; }
.badge.restricted { background: #FEE2E2 !important; color: #dc2626 !important; }

/* ERROR */
.stripe-card.error { border-color: #FEE2E2 !important; }
.error .icon-circle { background: #FEE2E2 !important; color: #dc2626 !important; }
.badge.error { background: #FEE2E2 !important; color: #dc2626 !important; }

/* NEUTRAL */
.stripe-card.not_connected { border-color: #c7d2fe !important; }
.not_connected .icon-circle { background: #E0F2FE !important; color: #0284C7 !important; }
.badge.neutral { background: #E0F2FE !important; color: #0284C7 !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .stripe-card {
        width: 90%;
        padding: 24px;
    }
}

.spinner-icon {
    width: 56px;
    height: 56px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* Container */
.details-card {
    margin-top: 20px;              /* mt-5 */
    background: #fafaf9;           /* bg-neutral-50 */
    border: 1px solid #e7e5e4;     /* border-neutral-200 */
    border-radius: 12px;           /* rounded-xl */
    padding: 12px 16px;            /* py-3 px-4 */
    text-align: left;
}

/* Title */
.details-title {
    font-size: 12px;               /* text-caption */
    font-weight: 600;
    color: #57534e;                /* text-neutral-600 */
    margin-bottom: 8px;            /* mb-2 */
}

/* List */
.details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Item */
.details-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;                      /* gap-2 */
    font-size: 14px;               /* text-body-sm */
    color: #57534e;
    margin-bottom: 6px;            /* space-y-1.5 */
}

.details-item:last-child {
    margin-bottom: 0;
}

/* Dot */
.details-dot {
    width: 6px;                    /* w-1.5 */
    height: 6px;                   /* h-1.5 */
    background: #f59e0b;           /* bg-accent-500 */
    border-radius: 50%;
    margin-top: 6px;               /* mt-1.5 */
    flex-shrink: 0;
}