/* Non‑critical CSS moved from page‑frp.php for better TTI/cacheability */

/* Enhanced Modal Styles */
.modal {
    position: fixed;
    /* Ensure the overlay always sits above any theme header */
    z-index: 99999;
    /* Cover the entire viewport regardless of ancestors */
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    /* Darker backdrop for better contrast */
    /* Force overlay above any theme and make it clearly opaque */
    background-color: rgba(0,0,0,0.75) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
    /* Force solid background to avoid theme transparency */
    background-color: #ffffff !important;
    margin: auto;
    padding: 0;
    border: 1px solid var(--color-border);
    width: 90%;
    max-width: 1200px;
    position: relative;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}
/* Force explicit background for both modals to avoid theme overrides */
#frp-modal .modal-content,
#feedback-modal .modal-content {
    background-color: #ffffff;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
    background-color: #f8f9fa !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.modal-header h2 { margin: 0; font-size: 1.5rem; }
.modal-countdown { color: #dc3545; font-weight: bold; }
.modal-close { color: #333; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.3s; }
.modal-close:hover, .modal-close:focus { color: #000; }
.modal-close.disabled { color: #999; cursor: not-allowed; opacity: 0.5; pointer-events: none; }
.modal-body-container { display: flex; flex-wrap: wrap; }
.modal-info { width: 100%; padding: 15px 20px; background-color: #f8f9fa !important; border-bottom: 1px solid var(--color-border); }
.device-compatibility h3, .difficulty-level h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.1rem; }
.difficulty-badge { display: inline-block; padding: 5px 10px; border-radius: 4px; font-weight: bold; color: white; }
.difficulty-badge.easy { background-color: #28a745; }
.difficulty-badge.medium { background-color: #ffc107; color: #212529; }
.difficulty-badge.hard { background-color: #fd7e14; }
.difficulty-badge.expert { background-color: #dc3545; }
.modal-body { flex: 1; padding: 20px; min-width: 300px; }
.modal-ad-top { margin-bottom: 20px; text-align: center; }

/* Video wrapper + overlay/controls (modal only) */
#modal-video { width: 100%; max-width: 720px; margin: 16px auto 0; }
#modal-video .video-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background: #000; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-md); }
#modal-video .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#modal-video .yt-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); z-index: 5; }
#modal-video .yt-shield { position: absolute; inset: 0; z-index: 2; background: transparent; cursor: pointer; }
#modal-video .yt-controls { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; background: rgba(0,0,0,0.35); padding: 6px 10px; border-radius: 20px; z-index: 4; transition: opacity 0.25s ease; }
#modal-video .yt-controls button { appearance: none; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.25); color: #FFD700; border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#modal-video .yt-controls button:hover { background: rgba(255,255,255,0.08); }
#modal-video .yt-controls.hidden { opacity: 0; pointer-events: none; }

/* Feedback modal tweaks */
.feedback-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.feedback-actions .button { padding: 0.4rem 0.8rem; font-size: 0.875rem; }
.feedback-form label { display: block; margin: 8px 0 4px; }
.feedback-form input[type="text"], .feedback-form input[type="email"], .feedback-form textarea { width: 100%; padding: 0.6rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); box-sizing: border-box; }
.feedback-form textarea { resize: vertical; }
.feedback-form .button { margin-top: 10px; }
#feedback-modal .modal-content { width: calc(100% - 40px); max-width: 520px; padding: 20px; }

/* Modal responsive */
@media (max-width: 1024px) {
  .modal-body-container { flex-direction: column; }
}