/* ============================================================
   IVQA – Verification Type Selector Cards
   Used on /verification  (2-step: choose type → enter code)
   ============================================================ */

/* ── grid ────────────────────────────────────────────────── */
.vtype-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   max-width: 960px;
   margin: 0 auto 28px;
}

@media (max-width: 991px) {
   .vtype-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
   .vtype-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── card base ───────────────────────────────────────────── */
.vtype-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 26px 16px 20px;
   border-radius: 14px;
   background: #ffffff;
   border: 2px solid #e2e8f0;
   cursor: pointer;
   transition: border-color .2s, box-shadow .2s, transform .15s;
   text-align: center;
   user-select: none;
}
.vtype-card:hover {
   border-color: var(--ivqa-accent, #2563eb);
   box-shadow: 0 4px 20px rgba(37,99,235,.12);
   transform: translateY(-2px);
}
.vtype-card.active {
   border-color: var(--ivqa-accent, #2563eb);
   box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 4px 20px rgba(37,99,235,.12);
}

/* icon circle */
.vtype-icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 12px;
   flex-shrink: 0;
}

/* color variants */
.vtype-icon.blue   { background: #dbeafe; color: #2563eb; }
.vtype-icon.purple { background: #ede9fe; color: #7c3aed; }
.vtype-icon.amber  { background: #fef3c7; color: #d97706; }
.vtype-icon.teal   { background: #ccfbf1; color: #0d9488; }

/* label */
.vtype-label {
   font-weight: 600;
   font-size: .95rem;
   color: var(--ivqa-primary, #0f172a);
   margin-bottom: 4px;
   line-height: 1.3;
}

.vtype-desc {
   font-size: .8rem;
   color: var(--ivqa-muted, #6b7280);
   line-height: 1.4;
   margin: 0;
}

/* ── coming-soon badge ───────────────────────────────────── */
.vtype-card.coming-soon {
   opacity: .72;
   cursor: default;
}
.vtype-card.coming-soon:hover {
   transform: none;
   box-shadow: none;
   border-color: #e2e8f0;
}
.vtype-soon-tag {
   position: absolute;
   top: 8px;
   right: 8px;
   font-size: .65rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   background: #fef3c7;
   color: #92400e;
   padding: 2px 8px;
   border-radius: 6px;
}

/* ── coming-soon message (shown in place of form) ────────── */
.vtype-coming-soon-msg {
   display: none;
   text-align: center;
   padding: 40px 24px;
}
.vtype-coming-soon-msg.show { display: block; }

.vtype-coming-soon-msg .cs-icon {
   font-size: 48px;
   color: #d97706;
   margin-bottom: 16px;
}
.vtype-coming-soon-msg h3 {
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--ivqa-primary, #0f172a);
   margin-bottom: 8px;
}
.vtype-coming-soon-msg p {
   font-size: .9rem;
   color: var(--ivqa-muted, #6b7280);
   max-width: 420px;
   margin: 0 auto;
}

/* ── animate form visibility ─────────────────────────────── */
.vtype-form-wrap {
   transition: opacity .25s ease;
}
.vtype-form-wrap.hidden {
   display: none;
}

/* ── step labels ─────────────────────────────────────────── */
.vtype-step-label {
   font-weight: 600;
   font-size: .85rem;
   color: var(--ivqa-muted, #6b7280);
   text-transform: uppercase;
   letter-spacing: .6px;
   margin-bottom: 10px;
}