body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Overlay chung cho cả error + success modal */
.yd-modal-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    display: none; /* mặc định ẩn */
    align-items: center; /* canh giữa theo trục dọc */
    justify-content: center; /* canh giữa theo trục ngang */
}

/* Overlay chung cho cả error + success */
.yd-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45); /* giống mẫu mờ */
    display: none; /* mặc định ẩn */
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

/* Khi mở modal: thêm class is-open */
.yd-modal-overlay.is-open {
    display: flex;
}

/* Card bên trong – style giống mẫu bên trái */
.yd-modal-card {
    width: 100%;
    max-width: 420px;
    border-radius: 24px;
    background: #ffffff;
    padding: 32px 40px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    text-align: center;
}

/* Dark mode */
html.dark .yd-modal-card {
    background: #111827; /* gần với dark:bg-gray-900 */
}

/* Icon tròn phía trên */
.yd-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

/* màu icon error */
.yd-modal-icon--error {
    background: #fee2e2; /* bg-red-100 */
}

.yd-modal-icon--success {
    background: #dcfce7; /* bg-green-100 */
}

html.dark .yd-modal-icon--error {
    background: rgba(127, 29, 29, 0.3);
}

html.dark .yd-modal-icon--success {
    background: rgba(22, 163, 74, 0.3);
}

/* Title + text */
.yd-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.yd-modal-text {
    font-size: 14px;
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
}

html.dark .yd-modal-text {
    color: #9ca3af; /* text-gray-400 */
}

/* Nút chính giống mẫu: full độ cong, màu xanh */
.yd-modal-primary-btn {
    border-radius: 9999px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 600;
    background: #2563eb; /* blue-600 */
    color: #fff;
    border: none;
}

.yd-modal-primary-btn:hover {
    background: #1d4ed8;
}
@font-face {
    font-family: "Inter";
    src: url("/static/css/font/Inter_1-english.woff2") format("woff2");
    font-display: block;
}