/* AI Generator page custom styles */

.ai-templates-section {
    padding: 40px 0 60px;
    background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, transparent 100%);
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    max-width: 100%;
}

.template-card-frontend {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.5);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    background: #020617;
}

.template-card-frontend:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.7);
    border-color: rgba(129, 140, 248, 0.9);
}

.template-card-frontend img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.template-card-body {
    display: none;
}

.template-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Modal form inputs - ensure visible on any background */
#aiGeneratorModal .form-control,
#aiGeneratorModal .form-select {
    color: #111 !important;
    background-color: #fff !important;
    border: 1px solid rgba(0,0,0,0.15);
}

#aiGeneratorModal .form-control::placeholder {
    color: #777;
}

/* Dark message modal (e.g. email already exists) */
#aiMessageModal .modal-content {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}
#aiMessageModal .modal-header {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    color: #f1f5f9;
}
#aiMessageModal .modal-header .modal-title {
    color: #f1f5f9;
}
#aiMessageModal .modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}
#aiMessageModal .modal-body {
    background: #0f172a;
    color: #e2e8f0;
}
#aiMessageModal .modal-footer {
    background: rgba(15, 23, 42, 0.95);
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}
#aiMessageModal .modal-footer .btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* Loading skeleton for templates */
.template-skeleton-card {
    border-radius: 12px;
    overflow: hidden;
    background: #020617;
    position: relative;
    border: 1px solid rgba(15, 23, 42, 0.7);
}

.template-skeleton-image {
    height: 260px;
    background: linear-gradient(90deg, #1f2937 25%, #020617 37%, #1f2937 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease-in-out infinite;
}

.template-skeleton-body {
    display: none; /* no bottom strip on skeleton */
}

.template-skeleton-line {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1f2937 25%, #020617 37%, #1f2937 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease-in-out infinite;
    margin-bottom: 6px;
}

.template-skeleton-line.w-75 { width: 75%; }
.template-skeleton-line.w-50 { width: 50%; }

@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}