BIFA+ News – Latest Stories & Updates<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 - \u0421\u041e\u0412\u041c\u0415\u0421\u0422\u0418\u041c\u041e\u0421\u0422\u042c \u0421 \u0428\u0410\u041f\u041a\u041e\u0419 ========= *\/\n.bifa-page-wrapper {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;\n --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* ========= RESET - \u041d\u0415 \u0412\u041b\u0418\u042f\u0415\u041c \u041d\u0410 \u0428\u0410\u041f\u041a\u0423 ========= *\/\n.bifa-page-wrapper * {\n box-sizing: border-box;\n}<\/p>\n<p>\/* \u0421\u0431\u0440\u043e\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u043c \u0448\u0430\u043f\u043a\u0443 *\/\n.bifa-page-wrapper .bifa-main-content * {\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c background \u0441 body, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u0442\u044c *\/<\/p>\n<p>\/* ========= MAIN PAGE WRAPPER - \u0411\u0415\u0417 \u041a\u041e\u041d\u0424\u041b\u0418\u041a\u0422\u0410 \u0421 \u0428\u0410\u041f\u041a\u041e\u0419 ========= *\/\n.bifa-page-wrapper {\n min-height: 100vh;\n position: relative;\n background: linear-gradient(180deg, \n rgba(248, 249, 250, 0.8) 0%, \n rgba(255, 255, 255, 1) 100%\n );\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n padding: 0;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ========= *\/\n.page-bg-animation {\n position: fixed;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n pointer-events: none;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b *\/\n.page-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatPage 25s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.15;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatPage {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.2; }\n 90% { opacity: 0.2; }\n 100% {\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b *\/\n.floating-shape {\n position: absolute;\n border-radius: 50%;\n filter: blur(150px);\n animation: morphFloat 30s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.4;\n}<\/p>\n<p>.shape-page-1 {\n width: 500px;\n height: 500px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.06), transparent);\n top: -250px;\n right: -250px;\n}<\/p>\n<p>.shape-page-2 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.04), transparent);\n bottom: -200px;\n left: -200px;\n animation-delay: 10s;\n}<\/p>\n<p>.shape-page-3 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.05), transparent);\n top: 30%;\n left: 70%;\n animation-delay: 20s;\n}<\/p>\n<p>@keyframes morphFloat {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(150px);\n }\n 25% { \n transform: translate(150px, -100px) scale(1.3) rotate(90deg);\n filter: blur(180px);\n }\n 50% { \n transform: translate(-100px, 150px) scale(0.7) rotate(180deg);\n filter: blur(120px);\n }\n 75% { \n transform: translate(-150px, -80px) scale(1.2) rotate(270deg);\n filter: blur(160px);\n }\n}<\/p>\n<p>\/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u043e\u044e \u0448\u0430\u043f\u043a\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e BIFA+ *\/<\/p>\n<p>\/* ========= MAIN CONTENT - \u0410\u0414\u0410\u041f\u0422\u0410\u0426\u0418\u042f \u041f\u041e\u0414 \u0421\u0423\u0429\u0415\u0421\u0422\u0412\u0423\u042e\u0429\u0423\u042e \u0428\u0410\u041f\u041a\u0423 ========= *\/\n.bifa-main-content {\n position: relative;\n z-index: 10;\n padding: 80px 0 60px 0; \/* \u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 *\/\n width: 100%;\n}<\/p>\n<p>.bifa-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n width: 100%;\n}<\/p>\n<p>\/* ========= PAGE HEADER ========= *\/\n.bifa-page-header {\n text-align: center;\n margin-bottom: 80px;\n animation: fadeInDown 1.2s ease;\n}<\/p>\n<p>.bifa-page-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(3rem, 5vw, 4.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-page-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.bifa-page-title:hover {\n transform: translateY(-5px);\n filter: drop-shadow(0 15px 30px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>.bifa-page-title:hover::after {\n width: 100%;\n}<\/p>\n<p>.bifa-page-subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 2px;\n margin-bottom: 20px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.3s forwards;\n}<\/p>\n<p>.bifa-page-description {\n max-width: 900px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n line-height: 1.8;\n color: #4a5568;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.6s forwards;\n}<\/p>\n<p>\/* ========= SEARCH & FILTER BAR ========= *\/\n.bifa-filter-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 60px;\n gap: 30px;\n flex-wrap: wrap;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.8s forwards;\n}<\/p>\n<p>.bifa-search-container {\n position: relative;\n flex: 1;\n max-width: 400px;\n}<\/p>\n<p>.bifa-search-input {\n width: 100%;\n padding: 18px 55px 18px 25px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n background: white;\n backdrop-filter: blur(10px);\n transition: var(--bifa-transition);\n outline: none;\n}<\/p>\n<p>.bifa-search-input:focus {\n border-color: var(--bifa-heritage-gold);\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-search-btn {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-search-btn:hover {\n transform: translateY(-50%) scale(1.1);\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-search-btn svg {\n width: 18px;\n height: 18px;\n stroke: var(--bifa-deep-navy);\n stroke-width: 2.5;\n}<\/p>\n<p>.bifa-filter-options {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n}<\/p>\n<p>.bifa-filter-btn {\n padding: 12px 24px;\n border: 2px solid rgba(212, 175, 55, 0.3);\n background: white;\n border-radius: 30px;\n font-family: var(--bifa-font-heading);\n font-weight: 600;\n font-size: 0.9rem;\n color: var(--bifa-deep-navy);\n cursor: pointer;\n transition: var(--bifa-transition);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}<\/p>\n<p>.bifa-filter-btn.active,\n.bifa-filter-btn:hover {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-color: var(--bifa-heritage-gold);\n color: var(--bifa-deep-navy);\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>\/* ========= LOADING STATE ========= *\/\n.bifa-loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 500px;\n gap: 30px;\n}<\/p>\n<p>.bifa-loader {\n width: 100px;\n height: 100px;\n position: relative;\n}<\/p>\n<p>.bifa-loader-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-radius: 50%;\n animation: loaderSpin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(1) {\n border-top-color: var(--bifa-heritage-gold);\n animation-delay: 0s;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(2) {\n width: 75%;\n height: 75%;\n top: 12.5%;\n left: 12.5%;\n border-right-color: var(--bifa-deep-navy);\n animation-delay: 0.3s;\n animation-direction: reverse;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(3) {\n width: 50%;\n height: 50%;\n top: 25%;\n left: 25%;\n border-bottom-color: var(--bifa-civic-green);\n animation-delay: 0.6s;\n}<\/p>\n<p>@keyframes loaderSpin {\n 0% { \n transform: rotate(0deg) scale(1);\n }\n 50% {\n transform: rotate(180deg) scale(1.1);\n }\n 100% { \n transform: rotate(360deg) scale(1);\n }\n}<\/p>\n<p>.loading-text {\n font-family: var(--bifa-font-heading);\n font-size: 1.4rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: textGlow 2.5s ease-in-out infinite;\n}<\/p>\n<p>\/* ========= NEWS GRID ========= *\/\n.bifa-news-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 40px;\n margin-bottom: 80px;\n}<\/p>\n<p>\/* ========= NEWS CARD PREMIUM ========= *\/\n.bifa-news-card {\n background: white;\n backdrop-filter: blur(20px);\n border-radius: 25px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n opacity: 0;\n animation: fadeInUp 1.2s ease forwards;\n}<\/p>\n<p>.bifa-news-card:nth-child(1) { animation-delay: 0.1s; }\n.bifa-news-card:nth-child(2) { animation-delay: 0.2s; }\n.bifa-news-card:nth-child(3) { animation-delay: 0.3s; }\n.bifa-news-card:nth-child(4) { animation-delay: 0.4s; }\n.bifa-news-card:nth-child(5) { animation-delay: 0.5s; }\n.bifa-news-card:nth-child(6) { animation-delay: 0.6s; }<\/p>\n<p>.bifa-news-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n}<\/p>\n<p>.bifa-news-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-news-card:hover {\n transform: translateY(-10px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-news-image {\n position: relative;\n height: 240px;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n}<\/p>\n<p>.bifa-news-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n transparent 60%, \n rgba(10, 31, 68, 0.8) 100%\n );\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-image::before {\n opacity: 0.9;\n}<\/p>\n<p>\/* Shimmer effect *\/\n.bifa-news-image::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -100%;\n width: 50%;\n height: 200%;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(255, 255, 255, 0.4) 50%, \n transparent 100%\n );\n transform: skewX(-25deg);\n transition: left 1s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-image::after {\n left: 150%;\n}<\/p>\n<p>.bifa-news-badge {\n position: absolute;\n top: 25px;\n left: 25px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 10px 24px;\n border-radius: 30px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-badge {\n transform: translateY(-3px);\n box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-news-content {\n padding: 35px;\n}<\/p>\n<p>.bifa-news-date {\n font-family: var(--bifa-font-body);\n font-size: 0.9rem;\n color: var(--bifa-gray);\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 500;\n}<\/p>\n<p>.bifa-news-date::before {\n content: '';\n width: 6px;\n height: 6px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n}<\/p>\n<p>.bifa-news-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.35rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n line-height: 1.4;\n margin-bottom: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-title {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-news-excerpt {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n color: #4a5568;\n line-height: 1.7;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 30px;\n}<\/p>\n<p>.bifa-news-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 25px;\n border-top: 1px solid rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-news-link {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n color: var(--bifa-heritage-gold);\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.95rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: var(--bifa-transition);\n position: relative;\n}<\/p>\n<p>.bifa-news-link::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.3s ease;\n}<\/p>\n<p>.bifa-news-link:hover {\n gap: 15px;\n}<\/p>\n<p>.bifa-news-link:hover::after {\n width: calc(100% - 25px);\n}<\/p>\n<p>.bifa-news-link svg {\n width: 18px;\n height: 18px;\n stroke: currentColor;\n stroke-width: 2.5;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-news-link:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>.bifa-news-stats {\n display: flex;\n gap: 20px;\n font-size: 0.85rem;\n color: var(--bifa-gray);\n}<\/p>\n<p>.bifa-news-stat {\n display: flex;\n align-items: center;\n gap: 5px;\n}<\/p>\n<p>.bifa-news-stat svg {\n width: 14px;\n height: 14px;\n stroke: currentColor;\n}<\/p>\n<p>\/* ========= PAGINATION ========= *\/\n.bifa-pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n margin-top: 60px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 1s forwards;\n}<\/p>\n<p>.bifa-pagination-btn {\n width: 50px;\n height: 50px;\n border: 2px solid rgba(212, 175, 55, 0.3);\n background: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n color: var(--bifa-deep-navy);\n text-decoration: none;\n}<\/p>\n<p>.bifa-pagination-btn.active,\n.bifa-pagination-btn:hover {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-color: var(--bifa-heritage-gold);\n transform: scale(1.1);\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-pagination-btn svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n stroke-width: 2.5;\n}<\/p>\n<p>\/* ========= ERROR STATE ========= *\/\n.bifa-error-container {\n display: none;\n text-align: center;\n padding: 100px 20px;\n animation: fadeIn 0.5s ease-out;\n}<\/p>\n<p>.bifa-error-icon {\n width: 120px;\n height: 120px;\n margin: 0 auto 40px;\n background: linear-gradient(135deg, #FF6B6B, #FF4757);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.3);\n animation: errorPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes errorPulse {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 30px 70px rgba(255, 71, 87, 0.4);\n }\n}<\/p>\n<p>.bifa-error-icon svg {\n width: 60px;\n height: 60px;\n stroke: white;\n stroke-width: 3;\n}<\/p>\n<p>.bifa-error-title {\n font-family: var(--bifa-font-heading);\n font-size: 2.2rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 25px;\n}<\/p>\n<p>.bifa-error-message {\n font-family: var(--bifa-font-body);\n font-size: 1.2rem;\n color: #4a5568;\n margin-bottom: 50px;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.7;\n}<\/p>\n<p>.bifa-retry-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 18px 40px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 1rem;\n text-decoration: none;\n cursor: pointer;\n border: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-retry-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-retry-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-retry-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-retry-btn svg {\n width: 22px;\n height: 22px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-retry-btn:hover svg {\n transform: rotate(180deg);\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}<\/p>\n<p>@keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes textGlow {\n 0%, 100% {\n text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);\n }\n 50% {\n text-shadow: 0 0 25px rgba(212, 175, 55, 0.8), 0 0 35px rgba(212, 175, 55, 0.6);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE - \u0411\u0415\u0417 \u041a\u041e\u041d\u0424\u041b\u0418\u041a\u0422\u0410 \u0421 \u0428\u0410\u041f\u041a\u041e\u0419 ========= *\/\n@media (max-width: 1200px) {\n .bifa-news-grid {\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 35px;\n }\n}<\/p>\n<p>@media (max-width: 992px) {\n .bifa-filter-bar {\n flex-direction: column;\n align-items: stretch;\n gap: 25px;\n }<\/p>\n<p> .bifa-search-container {\n max-width: none;\n }<\/p>\n<p> .bifa-filter-options {\n justify-content: center;\n }<\/p>\n<p> .bifa-main-content {\n padding: 60px 0 40px 0; \/* \u041c\u0435\u043d\u044c\u0448\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u043d\u0430 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430\u0445 *\/\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-main-content {\n padding: 40px 0 30px 0; \/* \u0415\u0449\u0435 \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n }<\/p>\n<p> .bifa-page-header {\n margin-bottom: 50px;\n }<\/p>\n<p> .bifa-news-grid {\n grid-template-columns: 1fr;\n gap: 25px;\n }<\/p>\n<p> .bifa-news-content {\n padding: 25px;\n }<\/p>\n<p> .bifa-pagination {\n gap: 10px;\n }<\/p>\n<p> .bifa-pagination-btn {\n width: 45px;\n height: 45px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-main-content {\n padding: 20px 0;\n }<\/p>\n<p> .bifa-page-title {\n font-size: 2.5rem;\n }<\/p>\n<p> .bifa-page-subtitle {\n font-size: 1.2rem;\n letter-spacing: 1px;\n }<\/p>\n<p> .bifa-filter-options {\n flex-direction: column;\n align-items: center;\n }<\/p>\n<p> .bifa-filter-btn {\n width: 100%;\n max-width: 200px;\n text-align: center;\n }<\/p>\n<p> .bifa-news-content {\n padding: 20px;\n }<\/p>\n<p> .bifa-news-footer {\n flex-direction: column;\n gap: 15px;\n align-items: flex-start;\n }<\/p>\n<p> .bifa-news-stats {\n width: 100%;\n justify-content: space-between;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-page-wrapper\">\n <\/p>\n<div class=\"page-bg-animation\">\n <\/p>\n<div class=\"floating-shape shape-page-1\"><\/div>\n<div class=\"floating-shape shape-page-2\"><\/div>\n<div class=\"floating-shape shape-page-3\"><\/div>\n<p> \n <\/div>\n<p> <\/p>\n<p> <br \/>\n <main class=\"bifa-main-content\"><\/p>\n<div class=\"bifa-container\">\n <\/p>\n<div class=\"bifa-page-header\">\n<h1 class=\"bifa-page-title\">News Center<\/h1>\n<p class=\"bifa-page-subtitle\">Latest Stories & Updates<\/p>\n<p class=\"bifa-page-description\">\n Stay informed with the latest news, updates, and stories from BIFA+. Discover how football unites nations and builds communities across the globe.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-filter-bar\">\n<div class=\"bifa-search-container\">\n <input type=\"text\" class=\"bifa-search-input\" placeholder=\"Search news...\" id=\"bifaSearchInput\"><br \/>\n <button class=\"bifa-search-btn\" id=\"bifaSearchBtn\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n <path d=\"m21 21-4.35-4.35\"><\/path>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaLoadingState\" class=\"bifa-loading-container\">\n<div class=\"bifa-loader\">\n<div class=\"bifa-loader-ring\"><\/div>\n<div class=\"bifa-loader-ring\"><\/div>\n<div class=\"bifa-loader-ring\"><\/div>\n<\/p><\/div>\n<p class=\"loading-text\">Loading Latest Stories…<\/p>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaNewsGrid\" class=\"bifa-news-grid\" style=\"display: none;\">\n \n <\/div>\n<p> <\/p>\n<div id=\"bifaPagination\" class=\"bifa-pagination\" style=\"display: none;\">\n \n <\/div>\n<p> <\/p>\n<div id=\"bifaErrorState\" class=\"bifa-error-container\">\n<div class=\"bifa-error-icon\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n<h3 class=\"bifa-error-title\">\u65e0\u6cd5\u52a0\u8f7d\u65b0\u95fb<\/h3>\n<p class=\"bifa-error-message\">We’re having trouble fetching the latest stories. Please check your connection and try again.<\/p>\n<p> <button class=\"bifa-retry-btn\" onclick=\"BifaNewsPage.loadNews()\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M1 4V10H7M23 20V14H17M20.49 9C19.62 5.33 16.31 2.5 12.23 2.5C7.09 2.5 2.7 7.17 3.04 12.5C3.38 17.83 8.09 22 13.5 22C17.83 22 21.53 19.19 22.68 15.36M12 8V12L15 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <span>\u91cd\u8bd5<\/span><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<p> <\/main>\n<\/div>\n<p><script>\n\/\/ BIFA+ Premium News Page Module\nconst BifaNewsPage = {\n \/\/ Configuration\n config: {\n apiUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events',\n perPage: 12,\n currentPage: 1,\n totalPages: 1,\n newsParams: '_embed&per_page=50&orderby=date&order=desc&meta_query[relation]=OR&meta_query[0][key]=_bifa_event_date&meta_query[0][compare]=NOT EXISTS&meta_query[1][key]=_bifa_event_date&meta_query[1][value]=&meta_query[1][compare]==',\n allNews: [],\n filteredNews: [],\n currentFilter: 'all',\n searchQuery: ''\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.setupEventListeners();\n this.loadNews();\n },<\/p>\n<p> \/\/ Create golden particles\n createParticles() {\n const particlesContainer = document.querySelector('.page-bg-animation');\n const particleCount = 15;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'page-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (20 + Math.random() * 10) + 's';\n \n const size = 3 + Math.random() * 3;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n },\n\n \/\/ Setup event listeners\n setupEventListeners() {\n \/\/ Search functionality\n const searchInput = document.getElementById('bifaSearchInput');\n const searchBtn = document.getElementById('bifaSearchBtn');\n \n if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n this.config.searchQuery = e.target.value.toLowerCase();\n this.filterAndDisplayNews();\n });\n }<\/p>\n<p> if (searchBtn) {\n searchBtn.addEventListener('click', () => {\n this.filterAndDisplayNews();\n });\n }<\/p>\n<p> \/\/ Filter buttons\n const filterBtns = document.querySelectorAll('.bifa-filter-btn');\n filterBtns.forEach(btn => {\n btn.addEventListener('click', (e) => {\n \/\/ Remove active class from all buttons\n filterBtns.forEach(b => b.classList.remove('active'));\n \/\/ Add active class to clicked button\n e.target.classList.add('active');<\/p>\n<p> this.config.currentFilter = e.target.dataset.filter;\n this.config.currentPage = 1;\n this.filterAndDisplayNews();\n });\n });\n },<\/p>\n<p> \/\/ Load news from API\n async loadNews() {\n const loadingState = document.getElementById('bifaLoadingState');\n const newsGrid = document.getElementById('bifaNewsGrid');\n const pagination = document.getElementById('bifaPagination');\n const errorState = document.getElementById('bifaErrorState');<\/p>\n<p> try {\n \/\/ Show loading\n loadingState.style.display = 'flex';\n newsGrid.style.display = 'none';\n pagination.style.display = 'none';\n errorState.style.display = 'none';<\/p>\n<p> \/\/ Fetch all news\n const response = await fetch(`${this.config.apiUrl}?${this.config.newsParams}`);<\/p>\n<p> if (!response.ok) {\n throw new Error('Failed to fetch news');\n }<\/p>\n<p> const allData = await response.json();<\/p>\n<p> \/\/ Filter only news (no event dates)\n const newsData = allData.filter(item => {\n const eventDate = item._bifa_event_date || item.meta?._bifa_event_date;\n return !eventDate || eventDate === '';\n });<\/p>\n<p> if (newsData.length === 0) {\n throw new Error('No news available');\n }<\/p>\n<p> \/\/ Store all news\n this.config.allNews = newsData;\n this.config.filteredNews = newsData;<\/p>\n<p> \/\/ Hide loading, show content\n loadingState.style.display = 'none';\n newsGrid.style.display = 'grid';<\/p>\n<p> \/\/ Display news\n this.filterAndDisplayNews();<\/p>\n<p> } catch (error) {\n console.error('Error loading news:', error);\n loadingState.style.display = 'none';\n errorState.style.display = 'block';\n }\n },<\/p>\n<p> \/\/ Filter and display news\n filterAndDisplayNews() {\n let filtered = this.config.allNews;<\/p>\n<p> \/\/ Apply category filter\n if (this.config.currentFilter !== 'all') {\n filtered = filtered.filter(news => {\n const badge = this.getBadgeText(news).toLowerCase();\n const category = news._embedded?.['wp:term']?.[0]?.[0]?.name?.toLowerCase() || '';<\/p>\n<p> switch (this.config.currentFilter) {\n case 'featured':\n return badge.includes('featured') || badge.includes('\u0432\u0430\u0436\u043d\u043e\u0435');\n case 'announcements':\n return badge.includes('announcement') || category.includes('announcement');\n case 'updates':\n return badge.includes('update') || category.includes('update');\n default:\n return true;\n }\n });\n }<\/p>\n<p> \/\/ Apply search filter\n if (this.config.searchQuery) {\n filtered = filtered.filter(news => {\n const title = news.title.rendered.toLowerCase();\n const excerpt = this.stripHtml(news.excerpt.rendered).toLowerCase();\n return title.includes(this.config.searchQuery) || \n excerpt.includes(this.config.searchQuery);\n });\n }<\/p>\n<p> this.config.filteredNews = filtered;\n this.config.totalPages = Math.ceil(filtered.length \/ this.config.perPage);<\/p>\n<p> this.renderNews();\n this.renderPagination();\n },<\/p>\n<p> \/\/ Render news grid\n renderNews() {\n const newsGrid = document.getElementById('bifaNewsGrid');\n if (!newsGrid) return;<\/p>\n<p> \/\/ Calculate start and end indices for current page\n const startIndex = (this.config.currentPage - 1) * this.config.perPage;\n const endIndex = startIndex + this.config.perPage;\n const pageNews = this.config.filteredNews.slice(startIndex, endIndex);<\/p>\n<p> \/\/ Clear existing content\n newsGrid.innerHTML = '';<\/p>\n<p> if (pageNews.length === 0) {\n newsGrid.innerHTML = `<\/p>\n<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 80px 20px;\">\n<h3 style=\"font-family: var(--bifa-font-heading); font-size: 1.5rem; color: var(--bifa-deep-navy); margin-bottom: 10px;\">No news found<\/h3>\n<p style=\"color: var(--bifa-gray);\">Try adjusting your search or filter criteria.<\/p>\n<\/p><\/div>\n<p> `;\n return;\n }<\/p>\n<p> \/\/ Render each news item\n pageNews.forEach((news, index) => {\n const card = this.createNewsCard(news, index);\n newsGrid.appendChild(card);\n });<\/p>\n<p> \/\/ Scroll to top of grid\n newsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });\n },<\/p>\n<p> \/\/ Create news card\n createNewsCard(news, index) {\n const card = document.createElement('div');\n card.className = 'bifa-news-card';\n card.style.animationDelay = `${index * 0.1}s`;<\/p>\n<p> \/\/ Get data\n const media = news._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || `\/wp-content\/themes\/yootheme-child\/assets\/images\/news-placeholder-${(index % 3) + 1}.jpg`;\n const date = new Date(news.date).toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n });\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 120) + '...';\n const badge = this.getBadgeText(news);<\/p>\n<p> card.innerHTML = `<\/p>\n<div class=\"bifa-news-image\" style=\"background-image: url('${imageUrl}')\">\n <span class=\"bifa-news-badge\">${badge}<\/span>\n <\/div>\n<div class=\"bifa-news-content\">\n<div class=\"bifa-news-date\">${date}<\/div>\n<h3 class=\"bifa-news-title\">${news.title.rendered}<\/h3>\n<p class=\"bifa-news-excerpt\">${excerpt}<\/p>\n<div class=\"bifa-news-footer\">\n <a href=\"\/$%7Bnews.link%7D\" class=\"bifa-news-link\" target=\"_blank\" onclick=\"event.stopPropagation()\">\n <span>Read More<\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/a><\/p>\n<div class=\"bifa-news-stats\">\n<div class=\"bifa-news-stat\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M19 14C19 18.4183 15.4183 22 11 22C6.58172 22 3 18.4183 3 14C3 9.58172 6.58172 6 11 6M19 14V10M19 14H15M19 10L13 4M19 10H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>Read<\/span>\n <\/div>\n<div class=\"bifa-news-stat\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M16 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H8M16 4C16 2.89543 15.1046 2 14 2H10C8.89543 2 8 2.89543 8 4M16 4C16 5.10457 15.1046 6 14 6H10C8.89543 6 8 5.10457 8 4M9 12L11 14L15 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>Verified<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> \/\/ Add click handler\n card.addEventListener('click', () => {\n window.open(news.link, '_blank');\n });<\/p>\n<p> return card;\n },<\/p>\n<p> \/\/ Render pagination\n renderPagination() {\n const pagination = document.getElementById('bifaPagination');\n if (!pagination || this.config.totalPages <= 1) {\n pagination.style.display = 'none';\n return;\n }\n\n pagination.style.display = 'flex';\n pagination.innerHTML = '';\n\n \/\/ Previous button\n if (this.config.currentPage > 1) {\n const prevBtn = document.createElement('a');\n prevBtn.className = 'bifa-pagination-btn';\n prevBtn.href = '#';\n prevBtn.innerHTML = `\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n `;\n prevBtn.addEventListener('click', (e) => {\n e.preventDefault();\n this.config.currentPage--;\n this.renderNews();\n this.renderPagination();\n });\n pagination.appendChild(prevBtn);\n }<\/p>\n<p> \/\/ Page numbers\n const startPage = Math.max(1, this.config.currentPage - 2);\n const endPage = Math.min(this.config.totalPages, this.config.currentPage + 2);<\/p>\n<p> for (let i = startPage; i <= endPage; i++) {\n const pageBtn = document.createElement('a');\n pageBtn.className = `bifa-pagination-btn ${i === this.config.currentPage ? 'active' : ''}`;\n pageBtn.href = '#';\n pageBtn.textContent = i;\n pageBtn.addEventListener('click', (e) => {\n e.preventDefault();\n this.config.currentPage = i;\n this.renderNews();\n this.renderPagination();\n });\n pagination.appendChild(pageBtn);\n }<\/p>\n<p> \/\/ Next button\n if (this.config.currentPage < this.config.totalPages) {\n const nextBtn = document.createElement('a');\n nextBtn.className = 'bifa-pagination-btn';\n nextBtn.href = '#';\n nextBtn.innerHTML = `\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n `;\n nextBtn.addEventListener('click', (e) => {\n e.preventDefault();\n this.config.currentPage++;\n this.renderNews();\n this.renderPagination();\n });\n pagination.appendChild(nextBtn);\n }\n },<\/p>\n<p> \/\/ Get badge text\n getBadgeText(news) {\n if (news._bifa_badge_text) {\n return news._bifa_badge_text;\n }<\/p>\n<p> const category = news._embedded?.['wp:term']?.[0]?.[0];\n return category?.name || 'News';\n },<\/p>\n<p> \/\/ Strip HTML\n stripHtml(html) {\n const temp = document.createElement('div');\n temp.innerHTML = html;\n return temp.textContent || temp.innerText || '';\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaNewsPage.init();\n});\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<p><br \/>\n\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 - \\u0421\\u041e\\u0412\\u041c\\u0415\\u0421\\u0422\\u0418\\u041c\\u041e\\u0421\\u0422\\u042c \\u0421 \\u0428\\u0410\\u041f\\u041a\\u041e\\u0419 ========= *\\\/\\n.bifa-page-wrapper {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n\\\/* ========= RESET - \\u041d\\u0415 \\u0412\\u041b\\u0418\\u042f\\u0415\\u041c \\u041d\\u0410 \\u0428\\u0410\\u041f\\u041a\\u0423 ========= *\\\/\\n.bifa-page-wrapper * {\\n box-sizing: border-box;\\n}\\n\\n\\\/* \\u0421\\u0431\\u0440\\u043e\\u0441 \\u0442\\u043e\\u043b\\u044c\\u043a\\u043e \\u0434\\u043b\\u044f \\u043d\\u0430\\u0448\\u0435\\u0433\\u043e \\u043a\\u043e\\u043d\\u0442\\u0435\\u043d\\u0442\\u0430, \\u043d\\u0435 \\u0442\\u0440\\u043e\\u0433\\u0430\\u0435\\u043c \\u0448\\u0430\\u043f\\u043a\\u0443 *\\\/\\n.bifa-page-wrapper .bifa-main-content * {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n}\\n\\n\\\/* \\u0423\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c background \\u0441 body, \\u0447\\u0442\\u043e\\u0431\\u044b \\u043d\\u0435 \\u043a\\u043e\\u043d\\u0444\\u043b\\u0438\\u043a\\u0442\\u043e\\u0432\\u0430\\u0442\\u044c *\\\/\\n\\n\\\/* ========= MAIN PAGE WRAPPER - \\u0411\\u0415\\u0417 \\u041a\\u041e\\u041d\\u0424\\u041b\\u0418\\u041a\\u0422\\u0410 \\u0421 \\u0428\\u0410\\u041f\\u041a\\u041e\\u0419 ========= *\\\/\\n.bifa-page-wrapper {\\n min-height: 100vh;\\n position: relative;\\n background: linear-gradient(180deg, \\n rgba(248, 249, 250, 0.8) 0%, \\n rgba(255, 255, 255, 1) 100%\\n );\\n width: 100vw;\\n margin-left: calc(-50vw + 50%);\\n padding: 0;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ========= *\\\/\\n.page-bg-animation {\\n position: fixed;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n pointer-events: none;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b *\\\/\\n.page-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatPage 25s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.15;\\n will-change: transform;\\n}\\n\\n@keyframes floatPage {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.2; }\\n 90% { opacity: 0.2; }\\n 100% {\\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b *\\\/\\n.floating-shape {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(150px);\\n animation: morphFloat 30s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.4;\\n}\\n\\n.shape-page-1 {\\n width: 500px;\\n height: 500px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.06), transparent);\\n top: -250px;\\n right: -250px;\\n}\\n\\n.shape-page-2 {\\n width: 400px;\\n height: 400px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.04), transparent);\\n bottom: -200px;\\n left: -200px;\\n animation-delay: 10s;\\n}\\n\\n.shape-page-3 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.05), transparent);\\n top: 30%;\\n left: 70%;\\n animation-delay: 20s;\\n}\\n\\n@keyframes morphFloat {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(150px);\\n }\\n 25% { \\n transform: translate(150px, -100px) scale(1.3) rotate(90deg);\\n filter: blur(180px);\\n }\\n 50% { \\n transform: translate(-100px, 150px) scale(0.7) rotate(180deg);\\n filter: blur(120px);\\n }\\n 75% { \\n transform: translate(-150px, -80px) scale(1.2) rotate(270deg);\\n filter: blur(160px);\\n }\\n}\\n\\n\\\/* \\u0423\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u043c\\u043e\\u044e \\u0448\\u0430\\u043f\\u043a\\u0443, \\u0438\\u0441\\u043f\\u043e\\u043b\\u044c\\u0437\\u0443\\u0435\\u043c \\u0441\\u0443\\u0449\\u0435\\u0441\\u0442\\u0432\\u0443\\u044e\\u0449\\u0443\\u044e BIFA+ *\\\/\\n\\n\\\/* ========= MAIN CONTENT - \\u0410\\u0414\\u0410\\u041f\\u0422\\u0410\\u0426\\u0418\\u042f \\u041f\\u041e\\u0414 \\u0421\\u0423\\u0429\\u0415\\u0421\\u0422\\u0412\\u0423\\u042e\\u0429\\u0423\\u042e \\u0428\\u0410\\u041f\\u041a\\u0423 ========= *\\\/\\n.bifa-main-content {\\n position: relative;\\n z-index: 10;\\n padding: 80px 0 60px 0; \\\/* \\u0423\\u0432\\u0435\\u043b\\u0438\\u0447\\u0435\\u043d \\u0432\\u0435\\u0440\\u0445\\u043d\\u0438\\u0439 \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f \\u0434\\u043b\\u044f \\u0448\\u0430\\u043f\\u043a\\u0438 *\\\/\\n width: 100%;\\n}\\n\\n.bifa-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n width: 100%;\\n}\\n\\n\\\/* ========= PAGE HEADER ========= *\\\/\\n.bifa-page-header {\\n text-align: center;\\n margin-bottom: 80px;\\n animation: fadeInDown 1.2s ease;\\n}\\n\\n.bifa-page-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(3rem, 5vw, 4.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-page-title::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 4px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n}\\n\\n.bifa-page-title:hover {\\n transform: translateY(-5px);\\n filter: drop-shadow(0 15px 30px rgba(212, 175, 55, 0.3));\\n}\\n\\n.bifa-page-title:hover::after {\\n width: 100%;\\n}\\n\\n.bifa-page-subtitle {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 2px;\\n margin-bottom: 20px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.3s forwards;\\n}\\n\\n.bifa-page-description {\\n max-width: 900px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n line-height: 1.8;\\n color: #4a5568;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.6s forwards;\\n}\\n\\n\\\/* ========= SEARCH & FILTER BAR ========= *\\\/\\n.bifa-filter-bar {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-bottom: 60px;\\n gap: 30px;\\n flex-wrap: wrap;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.8s forwards;\\n}\\n\\n.bifa-search-container {\\n position: relative;\\n flex: 1;\\n max-width: 400px;\\n}\\n\\n.bifa-search-input {\\n width: 100%;\\n padding: 18px 55px 18px 25px;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n border-radius: 50px;\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n background: white;\\n backdrop-filter: blur(10px);\\n transition: var(--bifa-transition);\\n outline: none;\\n}\\n\\n.bifa-search-input:focus {\\n border-color: var(--bifa-heritage-gold);\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-search-btn {\\n position: absolute;\\n right: 8px;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 40px;\\n height: 40px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border: none;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n}\\n\\n.bifa-search-btn:hover {\\n transform: translateY(-50%) scale(1.1);\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-search-btn svg {\\n width: 18px;\\n height: 18px;\\n stroke: var(--bifa-deep-navy);\\n stroke-width: 2.5;\\n}\\n\\n.bifa-filter-options {\\n display: flex;\\n gap: 15px;\\n flex-wrap: wrap;\\n}\\n\\n.bifa-filter-btn {\\n padding: 12px 24px;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n background: white;\\n border-radius: 30px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 600;\\n font-size: 0.9rem;\\n color: var(--bifa-deep-navy);\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n}\\n\\n.bifa-filter-btn.active,\\n.bifa-filter-btn:hover {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-color: var(--bifa-heritage-gold);\\n color: var(--bifa-deep-navy);\\n transform: translateY(-2px);\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n}\\n\\n\\\/* ========= LOADING STATE ========= *\\\/\\n.bifa-loading-container {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n min-height: 500px;\\n gap: 30px;\\n}\\n\\n.bifa-loader {\\n width: 100px;\\n height: 100px;\\n position: relative;\\n}\\n\\n.bifa-loader-ring {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n border: 4px solid transparent;\\n border-radius: 50%;\\n animation: loaderSpin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\\n}\\n\\n.bifa-loader-ring:nth-child(1) {\\n border-top-color: var(--bifa-heritage-gold);\\n animation-delay: 0s;\\n}\\n\\n.bifa-loader-ring:nth-child(2) {\\n width: 75%;\\n height: 75%;\\n top: 12.5%;\\n left: 12.5%;\\n border-right-color: var(--bifa-deep-navy);\\n animation-delay: 0.3s;\\n animation-direction: reverse;\\n}\\n\\n.bifa-loader-ring:nth-child(3) {\\n width: 50%;\\n height: 50%;\\n top: 25%;\\n left: 25%;\\n border-bottom-color: var(--bifa-civic-green);\\n animation-delay: 0.6s;\\n}\\n\\n@keyframes loaderSpin {\\n 0% { \\n transform: rotate(0deg) scale(1);\\n }\\n 50% {\\n transform: rotate(180deg) scale(1.1);\\n }\\n 100% { \\n transform: rotate(360deg) scale(1);\\n }\\n}\\n\\n.loading-text {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.4rem;\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n animation: textGlow 2.5s ease-in-out infinite;\\n}\\n\\n\\\/* ========= NEWS GRID ========= *\\\/\\n.bifa-news-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\\n gap: 40px;\\n margin-bottom: 80px;\\n}\\n\\n\\\/* ========= NEWS CARD PREMIUM ========= *\\\/\\n.bifa-news-card {\\n background: white;\\n backdrop-filter: blur(20px);\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease forwards;\\n}\\n\\n.bifa-news-card:nth-child(1) { animation-delay: 0.1s; }\\n.bifa-news-card:nth-child(2) { animation-delay: 0.2s; }\\n.bifa-news-card:nth-child(3) { animation-delay: 0.3s; }\\n.bifa-news-card:nth-child(4) { animation-delay: 0.4s; }\\n.bifa-news-card:nth-child(5) { animation-delay: 0.5s; }\\n.bifa-news-card:nth-child(6) { animation-delay: 0.6s; }\\n\\n.bifa-news-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.4s ease;\\n}\\n\\n.bifa-news-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-news-card:hover {\\n transform: translateY(-10px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-news-image {\\n position: relative;\\n height: 240px;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n}\\n\\n.bifa-news-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n transparent 60%, \\n rgba(10, 31, 68, 0.8) 100%\\n );\\n transition: opacity 0.4s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-image::before {\\n opacity: 0.9;\\n}\\n\\n\\\/* Shimmer effect *\\\/\\n.bifa-news-image::after {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -100%;\\n width: 50%;\\n height: 200%;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(255, 255, 255, 0.4) 50%, \\n transparent 100%\\n );\\n transform: skewX(-25deg);\\n transition: left 1s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-image::after {\\n left: 150%;\\n}\\n\\n.bifa-news-badge {\\n position: absolute;\\n top: 25px;\\n left: 25px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 10px 24px;\\n border-radius: 30px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.8rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-badge {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-news-content {\\n padding: 35px;\\n}\\n\\n.bifa-news-date {\\n font-family: var(--bifa-font-body);\\n font-size: 0.9rem;\\n color: var(--bifa-gray);\\n margin-bottom: 15px;\\n display: flex;\\n align-items: center;\\n gap: 10px;\\n font-weight: 500;\\n}\\n\\n.bifa-news-date::before {\\n content: '';\\n width: 6px;\\n height: 6px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n}\\n\\n.bifa-news-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.35rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n line-height: 1.4;\\n margin-bottom: 18px;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-title {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-news-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n color: #4a5568;\\n line-height: 1.7;\\n display: -webkit-box;\\n -webkit-line-clamp: 3;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n margin-bottom: 30px;\\n}\\n\\n.bifa-news-footer {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n padding-top: 25px;\\n border-top: 1px solid rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-news-link {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n color: var(--bifa-heritage-gold);\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.95rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n transition: var(--bifa-transition);\\n position: relative;\\n}\\n\\n.bifa-news-link::after {\\n content: '';\\n position: absolute;\\n bottom: -3px;\\n left: 0;\\n width: 0;\\n height: 2px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.3s ease;\\n}\\n\\n.bifa-news-link:hover {\\n gap: 15px;\\n}\\n\\n.bifa-news-link:hover::after {\\n width: calc(100% - 25px);\\n}\\n\\n.bifa-news-link svg {\\n width: 18px;\\n height: 18px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-news-link:hover svg {\\n transform: translateX(5px);\\n}\\n\\n.bifa-news-stats {\\n display: flex;\\n gap: 20px;\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n}\\n\\n.bifa-news-stat {\\n display: flex;\\n align-items: center;\\n gap: 5px;\\n}\\n\\n.bifa-news-stat svg {\\n width: 14px;\\n height: 14px;\\n stroke: currentColor;\\n}\\n\\n\\\/* ========= PAGINATION ========= *\\\/\\n.bifa-pagination {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n gap: 15px;\\n margin-top: 60px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 1s forwards;\\n}\\n\\n.bifa-pagination-btn {\\n width: 50px;\\n height: 50px;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n background: white;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n text-decoration: none;\\n}\\n\\n.bifa-pagination-btn.active,\\n.bifa-pagination-btn:hover {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-color: var(--bifa-heritage-gold);\\n transform: scale(1.1);\\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-pagination-btn svg {\\n width: 20px;\\n height: 20px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n}\\n\\n\\\/* ========= ERROR STATE ========= *\\\/\\n.bifa-error-container {\\n display: none;\\n text-align: center;\\n padding: 100px 20px;\\n animation: fadeIn 0.5s ease-out;\\n}\\n\\n.bifa-error-icon {\\n width: 120px;\\n height: 120px;\\n margin: 0 auto 40px;\\n background: linear-gradient(135deg, #FF6B6B, #FF4757);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.3);\\n animation: errorPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes errorPulse {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 30px 70px rgba(255, 71, 87, 0.4);\\n }\\n}\\n\\n.bifa-error-icon svg {\\n width: 60px;\\n height: 60px;\\n stroke: white;\\n stroke-width: 3;\\n}\\n\\n.bifa-error-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 2.2rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 25px;\\n}\\n\\n.bifa-error-message {\\n font-family: var(--bifa-font-body);\\n font-size: 1.2rem;\\n color: #4a5568;\\n margin-bottom: 50px;\\n max-width: 600px;\\n margin-left: auto;\\n margin-right: auto;\\n line-height: 1.7;\\n}\\n\\n.bifa-retry-btn {\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 18px 40px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 1rem;\\n text-decoration: none;\\n cursor: pointer;\\n border: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-retry-btn::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-retry-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-retry-btn:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-retry-btn svg {\\n width: 22px;\\n height: 22px;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-retry-btn:hover svg {\\n transform: rotate(180deg);\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeIn {\\n from { opacity: 0; }\\n to { opacity: 1; }\\n}\\n\\n@keyframes fadeInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes textGlow {\\n 0%, 100% {\\n text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);\\n }\\n 50% {\\n text-shadow: 0 0 25px rgba(212, 175, 55, 0.8), 0 0 35px rgba(212, 175, 55, 0.6);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE - \\u0411\\u0415\\u0417 \\u041a\\u041e\\u041d\\u0424\\u041b\\u0418\\u041a\\u0422\\u0410 \\u0421 \\u0428\\u0410\\u041f\\u041a\\u041e\\u0419 ========= *\\\/\\n@media (max-width: 1200px) {\\n .bifa-news-grid {\\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\\n gap: 35px;\\n }\\n}\\n\\n@media (max-width: 992px) {\\n .bifa-filter-bar {\\n flex-direction: column;\\n align-items: stretch;\\n gap: 25px;\\n }\\n \\n .bifa-search-container {\\n max-width: none;\\n }\\n \\n .bifa-filter-options {\\n justify-content: center;\\n }\\n \\n .bifa-main-content {\\n padding: 60px 0 40px 0; \\\/* \\u041c\\u0435\\u043d\\u044c\\u0448\\u0438\\u0439 \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f \\u043d\\u0430 \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u0430\\u0445 *\\\/\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-main-content {\\n padding: 40px 0 30px 0; \\\/* \\u0415\\u0449\\u0435 \\u043c\\u0435\\u043d\\u044c\\u0448\\u0438\\u0439 \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f \\u043d\\u0430 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n }\\n \\n .bifa-page-header {\\n margin-bottom: 50px;\\n }\\n \\n .bifa-news-grid {\\n grid-template-columns: 1fr;\\n gap: 25px;\\n }\\n \\n .bifa-news-content {\\n padding: 25px;\\n }\\n \\n .bifa-pagination {\\n gap: 10px;\\n }\\n \\n .bifa-pagination-btn {\\n width: 45px;\\n height: 45px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-main-content {\\n padding: 20px 0;\\n }\\n \\n .bifa-page-title {\\n font-size: 2.5rem;\\n }\\n \\n .bifa-page-subtitle {\\n font-size: 1.2rem;\\n letter-spacing: 1px;\\n }\\n \\n .bifa-filter-options {\\n flex-direction: column;\\n align-items: center;\\n }\\n \\n .bifa-filter-btn {\\n width: 100%;\\n max-width: 200px;\\n text-align: center;\\n }\\n \\n .bifa-news-content {\\n padding: 20px;\\n }\\n \\n .bifa-news-footer {\\n flex-direction: column;\\n gap: 15px;\\n align-items: flex-start;\\n }\\n \\n .bifa-news-stats {\\n width: 100%;\\n justify-content: space-between;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-page-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"page-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"floating-shape\" shape-page-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-shape\" shape-page-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-shape\" shape-page-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n \\n\\n \\n <main class=\"\\\"bifa-main-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-page-header\\\"\">\\n <\/p>\n<h1 class=\"\\\"bifa-page-title\\\"\">News Center<\\\/h1>\\n <\/p>\n<p class=\"\\\"bifa-page-subtitle\\\"\">Latest Stories & Updates<\\\/p>\\n <\/p>\n<p class=\"\\\"bifa-page-description\\\"\">\\n Stay informed with the latest news, updates, and stories from BIFA+. Discover how football unites nations and builds communities across the globe.\\n <\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"bifa-filter-bar\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-search-container\\\"\">\\n <input type=\"\\\"text\\\"\" class=\"\\\"bifa-search-input\\\"\" placeholder=\"\\\"Search\" news...\\\" id=\"\\\"bifaSearchInput\\\"\">\\n <button class=\"\\\"bifa-search-btn\\\"\" id=\"\\\"bifaSearchBtn\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <circle cx=\"\\\"11\\\"\" cy=\"\\\"11\\\"\" r=\"\\\"8\\\"\"><\\\/circle>\\n <path d=\"\\\"m21\" 21-4.35-4.35\\\"><\\\/path>\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaLoadingState\\\"\" class=\"\\\"bifa-loading-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loader\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"loading-text\\\"\">Loading Latest Stories...<\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaNewsGrid\\\"\" class=\"\\\"bifa-news-grid\\\"\" style=\"\\\"display:\" none;\\\">\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaPagination\\\"\" class=\"\\\"bifa-pagination\\\"\" style=\"\\\"display:\" none;\\\">\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaErrorState\\\"\" class=\"\\\"bifa-error-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-error-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M12\" 9v13m12 17h12.01m21 12c21 16.9706 21 12 21c7.02944 3 12c3 7.02944 3c16.9706 12z\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-error-title\\\"\">Unable to Load News<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-error-message\\\"\">We're having trouble fetching the latest stories. Please check your connection and try again.<\\\/p>\\n <button class=\"\\\"bifa-retry-btn\\\"\" onclick=\"\\\"BifaNewsPage.loadNews()\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M1\" 4v10h7m23 20v14h17m20.49 9c19.62 5.33 16.31 2.5 12.23 2.5c7.09 2.7 7.17 3.04 12.5c3.38 17.83 8.09 22 13.5 22c17.83 21.53 19.19 22.68 15.36m12 8v12l15 15\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>Retry<\\\/span>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/main>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Premium News Page Module\\nconst BifaNewsPage = {\\n \\\/\\\/ Configuration\\n config: {\\n apiUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events',\\n perPage: 12,\\n currentPage: 1,\\n totalPages: 1,\\n newsParams: '_embed&per_page=50&orderby=date&order=desc&meta_query[relation]=OR&meta_query[0][key]=_bifa_event_date&meta_query[0][compare]=NOT EXISTS&meta_query[1][key]=_bifa_event_date&meta_query[1][value]=&meta_query[1][compare]==',\\n allNews: [],\\n filteredNews: [],\\n currentFilter: 'all',\\n searchQuery: ''\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.setupEventListeners();\\n this.loadNews();\\n },\\n\\n \\\/\\\/ Create golden particles\\n createParticles() {\\n const particlesContainer = document.querySelector('.page-bg-animation');\\n const particleCount = 15;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'page-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (20 + Math.random() * 10) + 's';\\n \\n const size = 3 + Math.random() * 3;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n },\\n\\n \\\/\\\/ Setup event listeners\\n setupEventListeners() {\\n \\\/\\\/ Search functionality\\n const searchInput = document.getElementById('bifaSearchInput');\\n const searchBtn = document.getElementById('bifaSearchBtn');\\n \\n if (searchInput) {\\n searchInput.addEventListener('input', (e) => {\\n this.config.searchQuery = e.target.value.toLowerCase();\\n this.filterAndDisplayNews();\\n });\\n }\\n \\n if (searchBtn) {\\n searchBtn.addEventListener('click', () => {\\n this.filterAndDisplayNews();\\n });\\n }\\n\\n \\\/\\\/ Filter buttons\\n const filterBtns = document.querySelectorAll('.bifa-filter-btn');\\n filterBtns.forEach(btn => {\\n btn.addEventListener('click', (e) => {\\n \\\/\\\/ Remove active class from all buttons\\n filterBtns.forEach(b => b.classList.remove('active'));\\n \\\/\\\/ Add active class to clicked button\\n e.target.classList.add('active');\\n \\n this.config.currentFilter = e.target.dataset.filter;\\n this.config.currentPage = 1;\\n this.filterAndDisplayNews();\\n });\\n });\\n },\\n\\n \\\/\\\/ Load news from API\\n async loadNews() {\\n const loadingState = document.getElementById('bifaLoadingState');\\n const newsGrid = document.getElementById('bifaNewsGrid');\\n const pagination = document.getElementById('bifaPagination');\\n const errorState = document.getElementById('bifaErrorState');\\n\\n try {\\n \\\/\\\/ Show loading\\n loadingState.style.display = 'flex';\\n newsGrid.style.display = 'none';\\n pagination.style.display = 'none';\\n errorState.style.display = 'none';\\n\\n \\\/\\\/ Fetch all news\\n const response = await fetch(`${this.config.apiUrl}?${this.config.newsParams}`);\\n \\n if (!response.ok) {\\n throw new Error('Failed to fetch news');\\n }\\n\\n const allData = await response.json();\\n \\n \\\/\\\/ Filter only news (no event dates)\\n const newsData = allData.filter(item => {\\n const eventDate = item._bifa_event_date || item.meta?._bifa_event_date;\\n return !eventDate || eventDate === '';\\n });\\n\\n if (newsData.length === 0) {\\n throw new Error('No news available');\\n }\\n\\n \\\/\\\/ Store all news\\n this.config.allNews = newsData;\\n this.config.filteredNews = newsData;\\n\\n \\\/\\\/ Hide loading, show content\\n loadingState.style.display = 'none';\\n newsGrid.style.display = 'grid';\\n\\n \\\/\\\/ Display news\\n this.filterAndDisplayNews();\\n\\n } catch (error) {\\n console.error('Error loading news:', error);\\n loadingState.style.display = 'none';\\n errorState.style.display = 'block';\\n }\\n },\\n\\n \\\/\\\/ Filter and display news\\n filterAndDisplayNews() {\\n let filtered = this.config.allNews;\\n\\n \\\/\\\/ Apply category filter\\n if (this.config.currentFilter !== 'all') {\\n filtered = filtered.filter(news => {\\n const badge = this.getBadgeText(news).toLowerCase();\\n const category = news._embedded?.['wp:term']?.[0]?.[0]?.name?.toLowerCase() || '';\\n \\n switch (this.config.currentFilter) {\\n case 'featured':\\n return badge.includes('featured') || badge.includes('\\u0432\\u0430\\u0436\\u043d\\u043e\\u0435');\\n case 'announcements':\\n return badge.includes('announcement') || category.includes('announcement');\\n case 'updates':\\n return badge.includes('update') || category.includes('update');\\n default:\\n return true;\\n }\\n });\\n }\\n\\n \\\/\\\/ Apply search filter\\n if (this.config.searchQuery) {\\n filtered = filtered.filter(news => {\\n const title = news.title.rendered.toLowerCase();\\n const excerpt = this.stripHtml(news.excerpt.rendered).toLowerCase();\\n return title.includes(this.config.searchQuery) || \\n excerpt.includes(this.config.searchQuery);\\n });\\n }\\n\\n this.config.filteredNews = filtered;\\n this.config.totalPages = Math.ceil(filtered.length \\\/ this.config.perPage);\\n \\n this.renderNews();\\n this.renderPagination();\\n },\\n\\n \\\/\\\/ Render news grid\\n renderNews() {\\n const newsGrid = document.getElementById('bifaNewsGrid');\\n if (!newsGrid) return;\\n\\n \\\/\\\/ Calculate start and end indices for current page\\n const startIndex = (this.config.currentPage - 1) * this.config.perPage;\\n const endIndex = startIndex + this.config.perPage;\\n const pageNews = this.config.filteredNews.slice(startIndex, endIndex);\\n\\n \\\/\\\/ Clear existing content\\n newsGrid.innerHTML = '';\\n\\n if (pageNews.length === 0) {\\n newsGrid.innerHTML = `\\n <\/p>\n<div style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<h3 style=\"\\\"font-family:\" var(--bifa-font-heading); font-size: 1.5rem; color: var(--bifa-deep-navy); margin-bottom: 10px;\\\">No news found<\\\/h3>\\n <\/p>\n<p style=\"\\\"color:\" var(--bifa-gray);\\\">Try adjusting your search or filter criteria.<\\\/p>\\n <\\\/div>\\n `;\\n return;\\n }\\n\\n \\\/\\\/ Render each news item\\n pageNews.forEach((news, index) => {\\n const card = this.createNewsCard(news, index);\\n newsGrid.appendChild(card);\\n });\\n\\n \\\/\\\/ Scroll to top of grid\\n newsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });\\n },\\n\\n \\\/\\\/ Create news card\\n createNewsCard(news, index) {\\n const card = document.createElement('div');\\n card.className = 'bifa-news-card';\\n card.style.animationDelay = `${index * 0.1}s`;\\n\\n \\\/\\\/ Get data\\n const media = news._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || `\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/news-placeholder-${(index % 3) + 1}.jpg`;\\n const date = new Date(news.date).toLocaleDateString('en-US', {\\n month: 'long',\\n day: 'numeric',\\n year: 'numeric'\\n });\\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 120) + '...';\\n const badge = this.getBadgeText(news);\\n\\n card.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-news-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n <span class=\"\\\"bifa-news-badge\\\"\">${badge}<\\\/span>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-news-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-news-date\\\"\">${date}<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-news-title\\\"\">${news.title.rendered}<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-news-excerpt\\\"\">${excerpt}<\\\/p>\\n <\/p>\n<div class=\"\\\"bifa-news-footer\\\"\">\\n <a href=\"\\\"${news.link}\\\"\" class=\"\\\"bifa-news-link\\\"\" target=\"\\\"_blank\\\"\" onclick=\"\\\"event.stopPropagation()\\\"\">\\n <span>Read More<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\/p>\n<div class=\"\\\"bifa-news-stats\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-news-stat\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M19\" 14c19 18.4183 15.4183 22 11 22c6.58172 3 14c3 9.58172 6.58172 6 6m19 14v10m19 14h15m19 10l13 4m19 10h15\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>Read<\\\/span>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-news-stat\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M16\" 4h18c19.1046 4 20 4.89543 6v18c20 19.1046 18 20h6c4.89543 18v6c4 6 4h8m16 4c16 2.89543 15.1046 2 14 2h10c8.89543 8 4m16 5.10457 6h10c8.89543 4m9 12l11 14l15 10\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>Verified<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n `;\\n\\n \\\/\\\/ Add click handler\\n card.addEventListener('click', () => {\\n window.open(news.link, '_blank');\\n });\\n\\n return card;\\n },\\n\\n \\\/\\\/ Render pagination\\n renderPagination() {\\n const pagination = document.getElementById('bifaPagination');\\n if (!pagination || this.config.totalPages <= 1) {\\n pagination.style.display = 'none';\\n return;\\n }\\n\\n pagination.style.display = 'flex';\\n pagination.innerHTML = '';\\n\\n \\\/\\\/ Previous button\\n if (this.config.currentPage > 1) {\\n const prevBtn = document.createElement('a');\\n prevBtn.className = 'bifa-pagination-btn';\\n prevBtn.href = '#';\\n prevBtn.innerHTML = `\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M15\" 18l9 12l15 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n `;\\n prevBtn.addEventListener('click', (e) => {\\n e.preventDefault();\\n this.config.currentPage--;\\n this.renderNews();\\n this.renderPagination();\\n });\\n pagination.appendChild(prevBtn);\\n }\\n\\n \\\/\\\/ Page numbers\\n const startPage = Math.max(1, this.config.currentPage - 2);\\n const endPage = Math.min(this.config.totalPages, this.config.currentPage + 2);\\n\\n for (let i = startPage; i <= endPage; i++) {\\n const pageBtn = document.createElement('a');\\n pageBtn.className = `bifa-pagination-btn ${i === this.config.currentPage ? 'active' : ''}`;\\n pageBtn.href = '#';\\n pageBtn.textContent = i;\\n pageBtn.addEventListener('click', (e) => {\\n e.preventDefault();\\n this.config.currentPage = i;\\n this.renderNews();\\n this.renderPagination();\\n });\\n pagination.appendChild(pageBtn);\\n }\\n\\n \\\/\\\/ Next button\\n if (this.config.currentPage < this.config.totalPages) {\\n const nextBtn = document.createElement('a');\\n nextBtn.className = 'bifa-pagination-btn';\\n nextBtn.href = '#';\\n nextBtn.innerHTML = `\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M9\" 18l15 12l9 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n `;\\n nextBtn.addEventListener('click', (e) => {\\n e.preventDefault();\\n this.config.currentPage++;\\n this.renderNews();\\n this.renderPagination();\\n });\\n pagination.appendChild(nextBtn);\\n }\\n },\\n\\n \\\/\\\/ Get badge text\\n getBadgeText(news) {\\n if (news._bifa_badge_text) {\\n return news._bifa_badge_text;\\n }\\n \\n const category = news._embedded?.['wp:term']?.[0]?.[0];\\n return category?.name || 'News';\\n },\\n\\n \\\/\\\/ Strip HTML\\n stripHtml(html) {\\n const temp = document.createElement('div');\\n temp.innerHTML = html;\\n return temp.textContent || temp.innerText || '';\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaNewsPage.init();\\n});\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}}]}]}]}],\"version\":\"4.5.20\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ News – Latest Stories & Updates News Center Latest Stories & Updates Stay informed with the latest news, updates, and stories from BIFA+. Discover how football unites nations and builds communities across the globe. Loading Latest Stories… Unable to Load News We’re having trouble fetching the latest stories. Please check your connection and try […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-713","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/pages\/713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/comments?post=713"}],"version-history":[{"count":5,"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/pages\/713\/revisions"}],"predecessor-version":[{"id":740,"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/pages\/713\/revisions\/740"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/media?parent=713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\nBIFA+ News – Latest Stories & Updates<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ========= \u041f\u0415\u0420\u0415\u041c\u0415\u041d\u041d\u042b\u0415 - \u0421\u041e\u0412\u041c\u0415\u0421\u0422\u0418\u041c\u041e\u0421\u0422\u042c \u0421 \u0428\u0410\u041f\u041a\u041e\u0419 ========= *\/\n.bifa-page-wrapper {\n \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 BIFA+ *\/\n --bifa-deep-navy: #0A1F44;\n --bifa-heritage-gold: #D4AF37;\n --bifa-civic-green: #1D6143;\n --bifa-bright-white: #FFFFFF;\n --bifa-soft-black: #1A1A1A;\n --bifa-gray-light: #F8F9FA;\n --bifa-gray: #6C757D;<\/p>\n<p> \/* \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b BIFA+ *\/\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;<\/p>\n<p> \/* \u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043d\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b *\/\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}<\/p>\n<p>\/* ========= RESET - \u041d\u0415 \u0412\u041b\u0418\u042f\u0415\u041c \u041d\u0410 \u0428\u0410\u041f\u041a\u0423 ========= *\/\n.bifa-page-wrapper * {\n box-sizing: border-box;\n}<\/p>\n<p>\/* \u0421\u0431\u0440\u043e\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u043c \u0448\u0430\u043f\u043a\u0443 *\/\n.bifa-page-wrapper .bifa-main-content * {\n box-sizing: border-box;\n}<\/p>\n<p>body {\n font-family: var(--bifa-font-body);\n color: var(--bifa-soft-black);\n line-height: 1.6;\n}<\/p>\n<p>\/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c background \u0441 body, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u0442\u044c *\/<\/p>\n<p>\/* ========= MAIN PAGE WRAPPER - \u0411\u0415\u0417 \u041a\u041e\u041d\u0424\u041b\u0418\u041a\u0422\u0410 \u0421 \u0428\u0410\u041f\u041a\u041e\u0419 ========= *\/\n.bifa-page-wrapper {\n min-height: 100vh;\n position: relative;\n background: linear-gradient(180deg, \n rgba(248, 249, 250, 0.8) 0%, \n rgba(255, 255, 255, 1) 100%\n );\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n padding: 0;\n}<\/p>\n<p>\/* ========= ANIMATED BACKGROUND ========= *\/\n.page-bg-animation {\n position: fixed;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: 0;\n pointer-events: none;\n}<\/p>\n<p>\/* \u0417\u043e\u043b\u043e\u0442\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0446\u044b *\/\n.page-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-radius: 50%;\n animation: floatPage 25s infinite linear;\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\n opacity: 0.15;\n will-change: transform;\n}<\/p>\n<p>@keyframes floatPage {\n 0% {\n transform: translateY(100vh) translateX(0) rotate(0deg);\n opacity: 0;\n }\n 10% { opacity: 0.2; }\n 90% { opacity: 0.2; }\n 100% {\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\n opacity: 0;\n }\n}<\/p>\n<p>\/* \u041f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b *\/\n.floating-shape {\n position: absolute;\n border-radius: 50%;\n filter: blur(150px);\n animation: morphFloat 30s ease-in-out infinite;\n pointer-events: none;\n opacity: 0.4;\n}<\/p>\n<p>.shape-page-1 {\n width: 500px;\n height: 500px;\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.06), transparent);\n top: -250px;\n right: -250px;\n}<\/p>\n<p>.shape-page-2 {\n width: 400px;\n height: 400px;\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.04), transparent);\n bottom: -200px;\n left: -200px;\n animation-delay: 10s;\n}<\/p>\n<p>.shape-page-3 {\n width: 350px;\n height: 350px;\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.05), transparent);\n top: 30%;\n left: 70%;\n animation-delay: 20s;\n}<\/p>\n<p>@keyframes morphFloat {\n 0%, 100% { \n transform: translate(0, 0) scale(1) rotate(0deg);\n filter: blur(150px);\n }\n 25% { \n transform: translate(150px, -100px) scale(1.3) rotate(90deg);\n filter: blur(180px);\n }\n 50% { \n transform: translate(-100px, 150px) scale(0.7) rotate(180deg);\n filter: blur(120px);\n }\n 75% { \n transform: translate(-150px, -80px) scale(1.2) rotate(270deg);\n filter: blur(160px);\n }\n}<\/p>\n<p>\/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u043e\u044e \u0448\u0430\u043f\u043a\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e BIFA+ *\/<\/p>\n<p>\/* ========= MAIN CONTENT - \u0410\u0414\u0410\u041f\u0422\u0410\u0426\u0418\u042f \u041f\u041e\u0414 \u0421\u0423\u0429\u0415\u0421\u0422\u0412\u0423\u042e\u0429\u0423\u042e \u0428\u0410\u041f\u041a\u0423 ========= *\/\n.bifa-main-content {\n position: relative;\n z-index: 10;\n padding: 80px 0 60px 0; \/* \u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 *\/\n width: 100%;\n}<\/p>\n<p>.bifa-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n width: 100%;\n}<\/p>\n<p>\/* ========= PAGE HEADER ========= *\/\n.bifa-page-header {\n text-align: center;\n margin-bottom: 80px;\n animation: fadeInDown 1.2s ease;\n}<\/p>\n<p>.bifa-page-title {\n font-family: var(--bifa-font-heading);\n font-size: clamp(3rem, 5vw, 4.5rem);\n font-weight: 900;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 20px;\n text-transform: uppercase;\n position: relative;\n display: inline-block;\n cursor: pointer;\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-page-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.4s ease;\n}<\/p>\n<p>.bifa-page-title:hover {\n transform: translateY(-5px);\n filter: drop-shadow(0 15px 30px rgba(212, 175, 55, 0.3));\n}<\/p>\n<p>.bifa-page-title:hover::after {\n width: 100%;\n}<\/p>\n<p>.bifa-page-subtitle {\n font-family: var(--bifa-font-heading);\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\n color: var(--bifa-deep-navy);\n font-weight: 600;\n letter-spacing: 2px;\n margin-bottom: 20px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.3s forwards;\n}<\/p>\n<p>.bifa-page-description {\n max-width: 900px;\n margin: 0 auto;\n font-family: var(--bifa-font-body);\n font-size: clamp(1rem, 1.5vw, 1.2rem);\n line-height: 1.8;\n color: #4a5568;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.6s forwards;\n}<\/p>\n<p>\/* ========= SEARCH & FILTER BAR ========= *\/\n.bifa-filter-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 60px;\n gap: 30px;\n flex-wrap: wrap;\n opacity: 0;\n animation: fadeInUp 1.2s ease 0.8s forwards;\n}<\/p>\n<p>.bifa-search-container {\n position: relative;\n flex: 1;\n max-width: 400px;\n}<\/p>\n<p>.bifa-search-input {\n width: 100%;\n padding: 18px 55px 18px 25px;\n border: 2px solid rgba(212, 175, 55, 0.2);\n border-radius: 50px;\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n background: white;\n backdrop-filter: blur(10px);\n transition: var(--bifa-transition);\n outline: none;\n}<\/p>\n<p>.bifa-search-input:focus {\n border-color: var(--bifa-heritage-gold);\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-search-btn {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n}<\/p>\n<p>.bifa-search-btn:hover {\n transform: translateY(-50%) scale(1.1);\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-search-btn svg {\n width: 18px;\n height: 18px;\n stroke: var(--bifa-deep-navy);\n stroke-width: 2.5;\n}<\/p>\n<p>.bifa-filter-options {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n}<\/p>\n<p>.bifa-filter-btn {\n padding: 12px 24px;\n border: 2px solid rgba(212, 175, 55, 0.3);\n background: white;\n border-radius: 30px;\n font-family: var(--bifa-font-heading);\n font-weight: 600;\n font-size: 0.9rem;\n color: var(--bifa-deep-navy);\n cursor: pointer;\n transition: var(--bifa-transition);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}<\/p>\n<p>.bifa-filter-btn.active,\n.bifa-filter-btn:hover {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-color: var(--bifa-heritage-gold);\n color: var(--bifa-deep-navy);\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>\/* ========= LOADING STATE ========= *\/\n.bifa-loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 500px;\n gap: 30px;\n}<\/p>\n<p>.bifa-loader {\n width: 100px;\n height: 100px;\n position: relative;\n}<\/p>\n<p>.bifa-loader-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-radius: 50%;\n animation: loaderSpin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(1) {\n border-top-color: var(--bifa-heritage-gold);\n animation-delay: 0s;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(2) {\n width: 75%;\n height: 75%;\n top: 12.5%;\n left: 12.5%;\n border-right-color: var(--bifa-deep-navy);\n animation-delay: 0.3s;\n animation-direction: reverse;\n}<\/p>\n<p>.bifa-loader-ring:nth-child(3) {\n width: 50%;\n height: 50%;\n top: 25%;\n left: 25%;\n border-bottom-color: var(--bifa-civic-green);\n animation-delay: 0.6s;\n}<\/p>\n<p>@keyframes loaderSpin {\n 0% { \n transform: rotate(0deg) scale(1);\n }\n 50% {\n transform: rotate(180deg) scale(1.1);\n }\n 100% { \n transform: rotate(360deg) scale(1);\n }\n}<\/p>\n<p>.loading-text {\n font-family: var(--bifa-font-heading);\n font-size: 1.4rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: textGlow 2.5s ease-in-out infinite;\n}<\/p>\n<p>\/* ========= NEWS GRID ========= *\/\n.bifa-news-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 40px;\n margin-bottom: 80px;\n}<\/p>\n<p>\/* ========= NEWS CARD PREMIUM ========= *\/\n.bifa-news-card {\n background: white;\n backdrop-filter: blur(20px);\n border-radius: 25px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\n transition: var(--bifa-transition);\n cursor: pointer;\n position: relative;\n border: none;\n opacity: 0;\n animation: fadeInUp 1.2s ease forwards;\n}<\/p>\n<p>.bifa-news-card:nth-child(1) { animation-delay: 0.1s; }\n.bifa-news-card:nth-child(2) { animation-delay: 0.2s; }\n.bifa-news-card:nth-child(3) { animation-delay: 0.3s; }\n.bifa-news-card:nth-child(4) { animation-delay: 0.4s; }\n.bifa-news-card:nth-child(5) { animation-delay: 0.5s; }\n.bifa-news-card:nth-child(6) { animation-delay: 0.6s; }<\/p>\n<p>.bifa-news-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\n transform: scaleX(0);\n transition: transform 0.4s ease;\n}<\/p>\n<p>.bifa-news-card:hover::before {\n transform: scaleX(1);\n}<\/p>\n<p>.bifa-news-card:hover {\n transform: translateY(-10px) scale(1.02);\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\n}<\/p>\n<p>.bifa-news-image {\n position: relative;\n height: 240px;\n background-size: cover;\n background-position: center;\n overflow: hidden;\n}<\/p>\n<p>.bifa-news-image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, \n transparent 0%, \n transparent 60%, \n rgba(10, 31, 68, 0.8) 100%\n );\n transition: opacity 0.4s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-image::before {\n opacity: 0.9;\n}<\/p>\n<p>\/* Shimmer effect *\/\n.bifa-news-image::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -100%;\n width: 50%;\n height: 200%;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(255, 255, 255, 0.4) 50%, \n transparent 100%\n );\n transform: skewX(-25deg);\n transition: left 1s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-image::after {\n left: 150%;\n}<\/p>\n<p>.bifa-news-badge {\n position: absolute;\n top: 25px;\n left: 25px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 10px 24px;\n border-radius: 30px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n z-index: 2;\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\n transition: all 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-badge {\n transform: translateY(-3px);\n box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-news-content {\n padding: 35px;\n}<\/p>\n<p>.bifa-news-date {\n font-family: var(--bifa-font-body);\n font-size: 0.9rem;\n color: var(--bifa-gray);\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 500;\n}<\/p>\n<p>.bifa-news-date::before {\n content: '';\n width: 6px;\n height: 6px;\n background: var(--bifa-heritage-gold);\n border-radius: 50%;\n}<\/p>\n<p>.bifa-news-title {\n font-family: var(--bifa-font-heading);\n font-size: 1.35rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n line-height: 1.4;\n margin-bottom: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n transition: color 0.3s ease;\n}<\/p>\n<p>.bifa-news-card:hover .bifa-news-title {\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}<\/p>\n<p>.bifa-news-excerpt {\n font-family: var(--bifa-font-body);\n font-size: 1rem;\n color: #4a5568;\n line-height: 1.7;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin-bottom: 30px;\n}<\/p>\n<p>.bifa-news-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 25px;\n border-top: 1px solid rgba(212, 175, 55, 0.2);\n}<\/p>\n<p>.bifa-news-link {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n color: var(--bifa-heritage-gold);\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n font-size: 0.95rem;\n text-decoration: none;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: var(--bifa-transition);\n position: relative;\n}<\/p>\n<p>.bifa-news-link::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 0;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\n transition: width 0.3s ease;\n}<\/p>\n<p>.bifa-news-link:hover {\n gap: 15px;\n}<\/p>\n<p>.bifa-news-link:hover::after {\n width: calc(100% - 25px);\n}<\/p>\n<p>.bifa-news-link svg {\n width: 18px;\n height: 18px;\n stroke: currentColor;\n stroke-width: 2.5;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-news-link:hover svg {\n transform: translateX(5px);\n}<\/p>\n<p>.bifa-news-stats {\n display: flex;\n gap: 20px;\n font-size: 0.85rem;\n color: var(--bifa-gray);\n}<\/p>\n<p>.bifa-news-stat {\n display: flex;\n align-items: center;\n gap: 5px;\n}<\/p>\n<p>.bifa-news-stat svg {\n width: 14px;\n height: 14px;\n stroke: currentColor;\n}<\/p>\n<p>\/* ========= PAGINATION ========= *\/\n.bifa-pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n margin-top: 60px;\n opacity: 0;\n animation: fadeInUp 1.2s ease 1s forwards;\n}<\/p>\n<p>.bifa-pagination-btn {\n width: 50px;\n height: 50px;\n border: 2px solid rgba(212, 175, 55, 0.3);\n background: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: var(--bifa-transition);\n font-family: var(--bifa-font-heading);\n font-weight: 700;\n color: var(--bifa-deep-navy);\n text-decoration: none;\n}<\/p>\n<p>.bifa-pagination-btn.active,\n.bifa-pagination-btn:hover {\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n border-color: var(--bifa-heritage-gold);\n transform: scale(1.1);\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\n}<\/p>\n<p>.bifa-pagination-btn svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n stroke-width: 2.5;\n}<\/p>\n<p>\/* ========= ERROR STATE ========= *\/\n.bifa-error-container {\n display: none;\n text-align: center;\n padding: 100px 20px;\n animation: fadeIn 0.5s ease-out;\n}<\/p>\n<p>.bifa-error-icon {\n width: 120px;\n height: 120px;\n margin: 0 auto 40px;\n background: linear-gradient(135deg, #FF6B6B, #FF4757);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.3);\n animation: errorPulse 2s ease-in-out infinite;\n}<\/p>\n<p>@keyframes errorPulse {\n 0%, 100% {\n transform: scale(1);\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.3);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 30px 70px rgba(255, 71, 87, 0.4);\n }\n}<\/p>\n<p>.bifa-error-icon svg {\n width: 60px;\n height: 60px;\n stroke: white;\n stroke-width: 3;\n}<\/p>\n<p>.bifa-error-title {\n font-family: var(--bifa-font-heading);\n font-size: 2.2rem;\n font-weight: 800;\n color: var(--bifa-deep-navy);\n margin-bottom: 25px;\n}<\/p>\n<p>.bifa-error-message {\n font-family: var(--bifa-font-body);\n font-size: 1.2rem;\n color: #4a5568;\n margin-bottom: 50px;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.7;\n}<\/p>\n<p>.bifa-retry-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\n color: var(--bifa-deep-navy);\n padding: 18px 40px;\n border-radius: 50px;\n font-family: var(--bifa-font-heading);\n font-weight: 800;\n font-size: 1rem;\n text-decoration: none;\n cursor: pointer;\n border: none;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--bifa-transition);\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\n position: relative;\n overflow: hidden;\n}<\/p>\n<p>.bifa-retry-btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: all 0.6s ease;\n}<\/p>\n<p>.bifa-retry-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\n}<\/p>\n<p>.bifa-retry-btn:hover::before {\n width: 300px;\n height: 300px;\n}<\/p>\n<p>.bifa-retry-btn svg {\n width: 22px;\n height: 22px;\n transition: transform 0.3s ease;\n}<\/p>\n<p>.bifa-retry-btn:hover svg {\n transform: rotate(180deg);\n}<\/p>\n<p>\/* ========= ANIMATIONS ========= *\/\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}<\/p>\n<p>@keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/p>\n<p>@keyframes textGlow {\n 0%, 100% {\n text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);\n }\n 50% {\n text-shadow: 0 0 25px rgba(212, 175, 55, 0.8), 0 0 35px rgba(212, 175, 55, 0.6);\n }\n}<\/p>\n<p>\/* ========= RESPONSIVE - \u0411\u0415\u0417 \u041a\u041e\u041d\u0424\u041b\u0418\u041a\u0422\u0410 \u0421 \u0428\u0410\u041f\u041a\u041e\u0419 ========= *\/\n@media (max-width: 1200px) {\n .bifa-news-grid {\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 35px;\n }\n}<\/p>\n<p>@media (max-width: 992px) {\n .bifa-filter-bar {\n flex-direction: column;\n align-items: stretch;\n gap: 25px;\n }<\/p>\n<p> .bifa-search-container {\n max-width: none;\n }<\/p>\n<p> .bifa-filter-options {\n justify-content: center;\n }<\/p>\n<p> .bifa-main-content {\n padding: 60px 0 40px 0; \/* \u041c\u0435\u043d\u044c\u0448\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u043d\u0430 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430\u0445 *\/\n }\n}<\/p>\n<p>@media (max-width: 768px) {\n .bifa-main-content {\n padding: 40px 0 30px 0; \/* \u0415\u0449\u0435 \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n }<\/p>\n<p> .bifa-page-header {\n margin-bottom: 50px;\n }<\/p>\n<p> .bifa-news-grid {\n grid-template-columns: 1fr;\n gap: 25px;\n }<\/p>\n<p> .bifa-news-content {\n padding: 25px;\n }<\/p>\n<p> .bifa-pagination {\n gap: 10px;\n }<\/p>\n<p> .bifa-pagination-btn {\n width: 45px;\n height: 45px;\n }\n}<\/p>\n<p>@media (max-width: 480px) {\n .bifa-main-content {\n padding: 20px 0;\n }<\/p>\n<p> .bifa-page-title {\n font-size: 2.5rem;\n }<\/p>\n<p> .bifa-page-subtitle {\n font-size: 1.2rem;\n letter-spacing: 1px;\n }<\/p>\n<p> .bifa-filter-options {\n flex-direction: column;\n align-items: center;\n }<\/p>\n<p> .bifa-filter-btn {\n width: 100%;\n max-width: 200px;\n text-align: center;\n }<\/p>\n<p> .bifa-news-content {\n padding: 20px;\n }<\/p>\n<p> .bifa-news-footer {\n flex-direction: column;\n gap: 15px;\n align-items: flex-start;\n }<\/p>\n<p> .bifa-news-stats {\n width: 100%;\n justify-content: space-between;\n }\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"bifa-page-wrapper\">\n <\/p>\n<div class=\"page-bg-animation\">\n <\/p>\n<div class=\"floating-shape shape-page-1\"><\/div>\n<div class=\"floating-shape shape-page-2\"><\/div>\n<div class=\"floating-shape shape-page-3\"><\/div>\n<p> \n <\/div>\n<p> <\/p>\n<p> <br \/>\n <main class=\"bifa-main-content\"><\/p>\n<div class=\"bifa-container\">\n <\/p>\n<div class=\"bifa-page-header\">\n<h1 class=\"bifa-page-title\">News Center<\/h1>\n<p class=\"bifa-page-subtitle\">Latest Stories & Updates<\/p>\n<p class=\"bifa-page-description\">\n Stay informed with the latest news, updates, and stories from BIFA+. Discover how football unites nations and builds communities across the globe.\n <\/p>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"bifa-filter-bar\">\n<div class=\"bifa-search-container\">\n <input type=\"text\" class=\"bifa-search-input\" placeholder=\"Search news...\" id=\"bifaSearchInput\"><br \/>\n <button class=\"bifa-search-btn\" id=\"bifaSearchBtn\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n <path d=\"m21 21-4.35-4.35\"><\/path>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaLoadingState\" class=\"bifa-loading-container\">\n<div class=\"bifa-loader\">\n<div class=\"bifa-loader-ring\"><\/div>\n<div class=\"bifa-loader-ring\"><\/div>\n<div class=\"bifa-loader-ring\"><\/div>\n<\/p><\/div>\n<p class=\"loading-text\">Loading Latest Stories…<\/p>\n<\/p><\/div>\n<p> <\/p>\n<div id=\"bifaNewsGrid\" class=\"bifa-news-grid\" style=\"display: none;\">\n \n <\/div>\n<p> <\/p>\n<div id=\"bifaPagination\" class=\"bifa-pagination\" style=\"display: none;\">\n \n <\/div>\n<p> <\/p>\n<div id=\"bifaErrorState\" class=\"bifa-error-container\">\n<div class=\"bifa-error-icon\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/div>\n<h3 class=\"bifa-error-title\">\u65e0\u6cd5\u52a0\u8f7d\u65b0\u95fb<\/h3>\n<p class=\"bifa-error-message\">We’re having trouble fetching the latest stories. Please check your connection and try again.<\/p>\n<p> <button class=\"bifa-retry-btn\" onclick=\"BifaNewsPage.loadNews()\"><br \/>\n <svg viewbox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M1 4V10H7M23 20V14H17M20.49 9C19.62 5.33 16.31 2.5 12.23 2.5C7.09 2.5 2.7 7.17 3.04 12.5C3.38 17.83 8.09 22 13.5 22C17.83 22 21.53 19.19 22.68 15.36M12 8V12L15 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg><br \/>\n <span>\u91cd\u8bd5<\/span><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<p> <\/main>\n<\/div>\n<p><script>\n\/\/ BIFA+ Premium News Page Module\nconst BifaNewsPage = {\n \/\/ Configuration\n config: {\n apiUrl: 'https:\/\/bifa.ai\/wp-json\/wp\/v2\/bifa_news_events',\n perPage: 12,\n currentPage: 1,\n totalPages: 1,\n newsParams: '_embed&per_page=50&orderby=date&order=desc&meta_query[relation]=OR&meta_query[0][key]=_bifa_event_date&meta_query[0][compare]=NOT EXISTS&meta_query[1][key]=_bifa_event_date&meta_query[1][value]=&meta_query[1][compare]==',\n allNews: [],\n filteredNews: [],\n currentFilter: 'all',\n searchQuery: ''\n },<\/p>\n<p> \/\/ Initialize\n init() {\n this.createParticles();\n this.setupEventListeners();\n this.loadNews();\n },<\/p>\n<p> \/\/ Create golden particles\n createParticles() {\n const particlesContainer = document.querySelector('.page-bg-animation');\n const particleCount = 15;<\/p>\n<p> for (let i = 0; i < particleCount; i++) {\n const particle = document.createElement('div');\n particle.className = 'page-particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 20 + 's';\n particle.style.animationDuration = (20 + Math.random() * 10) + 's';\n \n const size = 3 + Math.random() * 3;\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n \n particlesContainer.appendChild(particle);\n }\n },\n\n \/\/ Setup event listeners\n setupEventListeners() {\n \/\/ Search functionality\n const searchInput = document.getElementById('bifaSearchInput');\n const searchBtn = document.getElementById('bifaSearchBtn');\n \n if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n this.config.searchQuery = e.target.value.toLowerCase();\n this.filterAndDisplayNews();\n });\n }<\/p>\n<p> if (searchBtn) {\n searchBtn.addEventListener('click', () => {\n this.filterAndDisplayNews();\n });\n }<\/p>\n<p> \/\/ Filter buttons\n const filterBtns = document.querySelectorAll('.bifa-filter-btn');\n filterBtns.forEach(btn => {\n btn.addEventListener('click', (e) => {\n \/\/ Remove active class from all buttons\n filterBtns.forEach(b => b.classList.remove('active'));\n \/\/ Add active class to clicked button\n e.target.classList.add('active');<\/p>\n<p> this.config.currentFilter = e.target.dataset.filter;\n this.config.currentPage = 1;\n this.filterAndDisplayNews();\n });\n });\n },<\/p>\n<p> \/\/ Load news from API\n async loadNews() {\n const loadingState = document.getElementById('bifaLoadingState');\n const newsGrid = document.getElementById('bifaNewsGrid');\n const pagination = document.getElementById('bifaPagination');\n const errorState = document.getElementById('bifaErrorState');<\/p>\n<p> try {\n \/\/ Show loading\n loadingState.style.display = 'flex';\n newsGrid.style.display = 'none';\n pagination.style.display = 'none';\n errorState.style.display = 'none';<\/p>\n<p> \/\/ Fetch all news\n const response = await fetch(`${this.config.apiUrl}?${this.config.newsParams}`);<\/p>\n<p> if (!response.ok) {\n throw new Error('Failed to fetch news');\n }<\/p>\n<p> const allData = await response.json();<\/p>\n<p> \/\/ Filter only news (no event dates)\n const newsData = allData.filter(item => {\n const eventDate = item._bifa_event_date || item.meta?._bifa_event_date;\n return !eventDate || eventDate === '';\n });<\/p>\n<p> if (newsData.length === 0) {\n throw new Error('No news available');\n }<\/p>\n<p> \/\/ Store all news\n this.config.allNews = newsData;\n this.config.filteredNews = newsData;<\/p>\n<p> \/\/ Hide loading, show content\n loadingState.style.display = 'none';\n newsGrid.style.display = 'grid';<\/p>\n<p> \/\/ Display news\n this.filterAndDisplayNews();<\/p>\n<p> } catch (error) {\n console.error('Error loading news:', error);\n loadingState.style.display = 'none';\n errorState.style.display = 'block';\n }\n },<\/p>\n<p> \/\/ Filter and display news\n filterAndDisplayNews() {\n let filtered = this.config.allNews;<\/p>\n<p> \/\/ Apply category filter\n if (this.config.currentFilter !== 'all') {\n filtered = filtered.filter(news => {\n const badge = this.getBadgeText(news).toLowerCase();\n const category = news._embedded?.['wp:term']?.[0]?.[0]?.name?.toLowerCase() || '';<\/p>\n<p> switch (this.config.currentFilter) {\n case 'featured':\n return badge.includes('featured') || badge.includes('\u0432\u0430\u0436\u043d\u043e\u0435');\n case 'announcements':\n return badge.includes('announcement') || category.includes('announcement');\n case 'updates':\n return badge.includes('update') || category.includes('update');\n default:\n return true;\n }\n });\n }<\/p>\n<p> \/\/ Apply search filter\n if (this.config.searchQuery) {\n filtered = filtered.filter(news => {\n const title = news.title.rendered.toLowerCase();\n const excerpt = this.stripHtml(news.excerpt.rendered).toLowerCase();\n return title.includes(this.config.searchQuery) || \n excerpt.includes(this.config.searchQuery);\n });\n }<\/p>\n<p> this.config.filteredNews = filtered;\n this.config.totalPages = Math.ceil(filtered.length \/ this.config.perPage);<\/p>\n<p> this.renderNews();\n this.renderPagination();\n },<\/p>\n<p> \/\/ Render news grid\n renderNews() {\n const newsGrid = document.getElementById('bifaNewsGrid');\n if (!newsGrid) return;<\/p>\n<p> \/\/ Calculate start and end indices for current page\n const startIndex = (this.config.currentPage - 1) * this.config.perPage;\n const endIndex = startIndex + this.config.perPage;\n const pageNews = this.config.filteredNews.slice(startIndex, endIndex);<\/p>\n<p> \/\/ Clear existing content\n newsGrid.innerHTML = '';<\/p>\n<p> if (pageNews.length === 0) {\n newsGrid.innerHTML = `<\/p>\n<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 80px 20px;\">\n<h3 style=\"font-family: var(--bifa-font-heading); font-size: 1.5rem; color: var(--bifa-deep-navy); margin-bottom: 10px;\">No news found<\/h3>\n<p style=\"color: var(--bifa-gray);\">Try adjusting your search or filter criteria.<\/p>\n<\/p><\/div>\n<p> `;\n return;\n }<\/p>\n<p> \/\/ Render each news item\n pageNews.forEach((news, index) => {\n const card = this.createNewsCard(news, index);\n newsGrid.appendChild(card);\n });<\/p>\n<p> \/\/ Scroll to top of grid\n newsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });\n },<\/p>\n<p> \/\/ Create news card\n createNewsCard(news, index) {\n const card = document.createElement('div');\n card.className = 'bifa-news-card';\n card.style.animationDelay = `${index * 0.1}s`;<\/p>\n<p> \/\/ Get data\n const media = news._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.source_url || `\/wp-content\/themes\/yootheme-child\/assets\/images\/news-placeholder-${(index % 3) + 1}.jpg`;\n const date = new Date(news.date).toLocaleDateString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric'\n });\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 120) + '...';\n const badge = this.getBadgeText(news);<\/p>\n<p> card.innerHTML = `<\/p>\n<div class=\"bifa-news-image\" style=\"background-image: url('${imageUrl}')\">\n <span class=\"bifa-news-badge\">${badge}<\/span>\n <\/div>\n<div class=\"bifa-news-content\">\n<div class=\"bifa-news-date\">${date}<\/div>\n<h3 class=\"bifa-news-title\">${news.title.rendered}<\/h3>\n<p class=\"bifa-news-excerpt\">${excerpt}<\/p>\n<div class=\"bifa-news-footer\">\n <a href=\"\/$%7Bnews.link%7D\" class=\"bifa-news-link\" target=\"_blank\" onclick=\"event.stopPropagation()\">\n <span>Read More<\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/a><\/p>\n<div class=\"bifa-news-stats\">\n<div class=\"bifa-news-stat\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M19 14C19 18.4183 15.4183 22 11 22C6.58172 22 3 18.4183 3 14C3 9.58172 6.58172 6 11 6M19 14V10M19 14H15M19 10L13 4M19 10H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>Read<\/span>\n <\/div>\n<div class=\"bifa-news-stat\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M16 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H8M16 4C16 2.89543 15.1046 2 14 2H10C8.89543 2 8 2.89543 8 4M16 4C16 5.10457 15.1046 6 14 6H10C8.89543 6 8 5.10457 8 4M9 12L11 14L15 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <span>Verified<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> \/\/ Add click handler\n card.addEventListener('click', () => {\n window.open(news.link, '_blank');\n });<\/p>\n<p> return card;\n },<\/p>\n<p> \/\/ Render pagination\n renderPagination() {\n const pagination = document.getElementById('bifaPagination');\n if (!pagination || this.config.totalPages <= 1) {\n pagination.style.display = 'none';\n return;\n }\n\n pagination.style.display = 'flex';\n pagination.innerHTML = '';\n\n \/\/ Previous button\n if (this.config.currentPage > 1) {\n const prevBtn = document.createElement('a');\n prevBtn.className = 'bifa-pagination-btn';\n prevBtn.href = '#';\n prevBtn.innerHTML = `\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n `;\n prevBtn.addEventListener('click', (e) => {\n e.preventDefault();\n this.config.currentPage--;\n this.renderNews();\n this.renderPagination();\n });\n pagination.appendChild(prevBtn);\n }<\/p>\n<p> \/\/ Page numbers\n const startPage = Math.max(1, this.config.currentPage - 2);\n const endPage = Math.min(this.config.totalPages, this.config.currentPage + 2);<\/p>\n<p> for (let i = startPage; i <= endPage; i++) {\n const pageBtn = document.createElement('a');\n pageBtn.className = `bifa-pagination-btn ${i === this.config.currentPage ? 'active' : ''}`;\n pageBtn.href = '#';\n pageBtn.textContent = i;\n pageBtn.addEventListener('click', (e) => {\n e.preventDefault();\n this.config.currentPage = i;\n this.renderNews();\n this.renderPagination();\n });\n pagination.appendChild(pageBtn);\n }<\/p>\n<p> \/\/ Next button\n if (this.config.currentPage < this.config.totalPages) {\n const nextBtn = document.createElement('a');\n nextBtn.className = 'bifa-pagination-btn';\n nextBtn.href = '#';\n nextBtn.innerHTML = `\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n `;\n nextBtn.addEventListener('click', (e) => {\n e.preventDefault();\n this.config.currentPage++;\n this.renderNews();\n this.renderPagination();\n });\n pagination.appendChild(nextBtn);\n }\n },<\/p>\n<p> \/\/ Get badge text\n getBadgeText(news) {\n if (news._bifa_badge_text) {\n return news._bifa_badge_text;\n }<\/p>\n<p> const category = news._embedded?.['wp:term']?.[0]?.[0];\n return category?.name || 'News';\n },<\/p>\n<p> \/\/ Strip HTML\n stripHtml(html) {\n const temp = document.createElement('div');\n temp.innerHTML = html;\n return temp.textContent || temp.innerText || '';\n }\n};<\/p>\n<p>\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', () => {\n BifaNewsPage.init();\n});\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html>\n<\/div>\n<p><br \/>\n\\n<link href=\"\\\"https:\\\/\\\/fonts.googleapis.com\\\/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap\\\"\" rel=\"\\\"stylesheet\\\"\">\\n\\n<\/p>\n<style>\\n\\\/* ========= \\u041f\\u0415\\u0420\\u0415\\u041c\\u0415\\u041d\\u041d\\u042b\\u0415 - \\u0421\\u041e\\u0412\\u041c\\u0415\\u0421\\u0422\\u0418\\u041c\\u041e\\u0421\\u0422\\u042c \\u0421 \\u0428\\u0410\\u041f\\u041a\\u041e\\u0419 ========= *\\\/\\n.bifa-page-wrapper {\\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0446\\u0432\\u0435\\u0442\\u0430 BIFA+ *\\\/\\n --bifa-deep-navy: #0A1F44;\\n --bifa-heritage-gold: #D4AF37;\\n --bifa-civic-green: #1D6143;\\n --bifa-bright-white: #FFFFFF;\\n --bifa-soft-black: #1A1A1A;\\n --bifa-gray-light: #F8F9FA;\\n --bifa-gray: #6C757D;\\n \\n \\\/* \\u041e\\u0444\\u0438\\u0446\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0448\\u0440\\u0438\\u0444\\u0442\\u044b BIFA+ *\\\/\\n --bifa-font-heading: 'Montserrat', 'Cairo', sans-serif;\\n --bifa-font-body: 'Poppins', 'Tajawal', sans-serif;\\n --bifa-font-arabic: 'Cairo', 'Tajawal', 'GE SS Text', sans-serif;\\n \\n \\\/* \\u041f\\u0440\\u0435\\u043c\\u0438\\u0430\\u043b\\u044c\\u043d\\u044b\\u0435 \\u0442\\u0435\\u043d\\u0438 \\u0438 \\u044d\\u0444\\u0444\\u0435\\u043a\\u0442\\u044b *\\\/\\n --bifa-shadow-premium: 0 25px 80px rgba(10, 31, 68, 0.15);\\n --bifa-shadow-hover: 0 35px 100px rgba(10, 31, 68, 0.2);\\n --bifa-shadow-gold: 0 15px 40px rgba(212, 175, 55, 0.3);\\n --bifa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n\\\/* ========= RESET - \\u041d\\u0415 \\u0412\\u041b\\u0418\\u042f\\u0415\\u041c \\u041d\\u0410 \\u0428\\u0410\\u041f\\u041a\\u0423 ========= *\\\/\\n.bifa-page-wrapper * {\\n box-sizing: border-box;\\n}\\n\\n\\\/* \\u0421\\u0431\\u0440\\u043e\\u0441 \\u0442\\u043e\\u043b\\u044c\\u043a\\u043e \\u0434\\u043b\\u044f \\u043d\\u0430\\u0448\\u0435\\u0433\\u043e \\u043a\\u043e\\u043d\\u0442\\u0435\\u043d\\u0442\\u0430, \\u043d\\u0435 \\u0442\\u0440\\u043e\\u0433\\u0430\\u0435\\u043c \\u0448\\u0430\\u043f\\u043a\\u0443 *\\\/\\n.bifa-page-wrapper .bifa-main-content * {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n font-family: var(--bifa-font-body);\\n color: var(--bifa-soft-black);\\n line-height: 1.6;\\n}\\n\\n\\\/* \\u0423\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c background \\u0441 body, \\u0447\\u0442\\u043e\\u0431\\u044b \\u043d\\u0435 \\u043a\\u043e\\u043d\\u0444\\u043b\\u0438\\u043a\\u0442\\u043e\\u0432\\u0430\\u0442\\u044c *\\\/\\n\\n\\\/* ========= MAIN PAGE WRAPPER - \\u0411\\u0415\\u0417 \\u041a\\u041e\\u041d\\u0424\\u041b\\u0418\\u041a\\u0422\\u0410 \\u0421 \\u0428\\u0410\\u041f\\u041a\\u041e\\u0419 ========= *\\\/\\n.bifa-page-wrapper {\\n min-height: 100vh;\\n position: relative;\\n background: linear-gradient(180deg, \\n rgba(248, 249, 250, 0.8) 0%, \\n rgba(255, 255, 255, 1) 100%\\n );\\n width: 100vw;\\n margin-left: calc(-50vw + 50%);\\n padding: 0;\\n}\\n\\n\\\/* ========= ANIMATED BACKGROUND ========= *\\\/\\n.page-bg-animation {\\n position: fixed;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n z-index: 1;\\n top: 0;\\n left: 0;\\n pointer-events: none;\\n}\\n\\n\\\/* \\u0417\\u043e\\u043b\\u043e\\u0442\\u044b\\u0435 \\u0447\\u0430\\u0441\\u0442\\u0438\\u0446\\u044b *\\\/\\n.page-particle {\\n position: absolute;\\n width: 3px;\\n height: 3px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-radius: 50%;\\n animation: floatPage 25s infinite linear;\\n box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);\\n opacity: 0.15;\\n will-change: transform;\\n}\\n\\n@keyframes floatPage {\\n 0% {\\n transform: translateY(100vh) translateX(0) rotate(0deg);\\n opacity: 0;\\n }\\n 10% { opacity: 0.2; }\\n 90% { opacity: 0.2; }\\n 100% {\\n transform: translateY(-100vh) translateX(100px) rotate(360deg);\\n opacity: 0;\\n }\\n}\\n\\n\\\/* \\u041f\\u043b\\u0430\\u0432\\u0430\\u044e\\u0449\\u0438\\u0435 \\u0433\\u0435\\u043e\\u043c\\u0435\\u0442\\u0440\\u0438\\u0447\\u0435\\u0441\\u043a\\u0438\\u0435 \\u0444\\u0438\\u0433\\u0443\\u0440\\u044b *\\\/\\n.floating-shape {\\n position: absolute;\\n border-radius: 50%;\\n filter: blur(150px);\\n animation: morphFloat 30s ease-in-out infinite;\\n pointer-events: none;\\n opacity: 0.4;\\n}\\n\\n.shape-page-1 {\\n width: 500px;\\n height: 500px;\\n background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.06), transparent);\\n top: -250px;\\n right: -250px;\\n}\\n\\n.shape-page-2 {\\n width: 400px;\\n height: 400px;\\n background: radial-gradient(circle at 70% 70%, rgba(10, 31, 68, 0.04), transparent);\\n bottom: -200px;\\n left: -200px;\\n animation-delay: 10s;\\n}\\n\\n.shape-page-3 {\\n width: 350px;\\n height: 350px;\\n background: radial-gradient(circle at 50% 50%, rgba(29, 97, 67, 0.05), transparent);\\n top: 30%;\\n left: 70%;\\n animation-delay: 20s;\\n}\\n\\n@keyframes morphFloat {\\n 0%, 100% { \\n transform: translate(0, 0) scale(1) rotate(0deg);\\n filter: blur(150px);\\n }\\n 25% { \\n transform: translate(150px, -100px) scale(1.3) rotate(90deg);\\n filter: blur(180px);\\n }\\n 50% { \\n transform: translate(-100px, 150px) scale(0.7) rotate(180deg);\\n filter: blur(120px);\\n }\\n 75% { \\n transform: translate(-150px, -80px) scale(1.2) rotate(270deg);\\n filter: blur(160px);\\n }\\n}\\n\\n\\\/* \\u0423\\u0431\\u0438\\u0440\\u0430\\u0435\\u043c \\u043c\\u043e\\u044e \\u0448\\u0430\\u043f\\u043a\\u0443, \\u0438\\u0441\\u043f\\u043e\\u043b\\u044c\\u0437\\u0443\\u0435\\u043c \\u0441\\u0443\\u0449\\u0435\\u0441\\u0442\\u0432\\u0443\\u044e\\u0449\\u0443\\u044e BIFA+ *\\\/\\n\\n\\\/* ========= MAIN CONTENT - \\u0410\\u0414\\u0410\\u041f\\u0422\\u0410\\u0426\\u0418\\u042f \\u041f\\u041e\\u0414 \\u0421\\u0423\\u0429\\u0415\\u0421\\u0422\\u0412\\u0423\\u042e\\u0429\\u0423\\u042e \\u0428\\u0410\\u041f\\u041a\\u0423 ========= *\\\/\\n.bifa-main-content {\\n position: relative;\\n z-index: 10;\\n padding: 80px 0 60px 0; \\\/* \\u0423\\u0432\\u0435\\u043b\\u0438\\u0447\\u0435\\u043d \\u0432\\u0435\\u0440\\u0445\\u043d\\u0438\\u0439 \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f \\u0434\\u043b\\u044f \\u0448\\u0430\\u043f\\u043a\\u0438 *\\\/\\n width: 100%;\\n}\\n\\n.bifa-container {\\n max-width: 1400px;\\n margin: 0 auto;\\n padding: 0 20px;\\n width: 100%;\\n}\\n\\n\\\/* ========= PAGE HEADER ========= *\\\/\\n.bifa-page-header {\\n text-align: center;\\n margin-bottom: 80px;\\n animation: fadeInDown 1.2s ease;\\n}\\n\\n.bifa-page-title {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(3rem, 5vw, 4.5rem);\\n font-weight: 900;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n margin-bottom: 20px;\\n text-transform: uppercase;\\n position: relative;\\n display: inline-block;\\n cursor: pointer;\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-page-title::after {\\n content: '';\\n position: absolute;\\n bottom: -15px;\\n left: 50%;\\n transform: translateX(-50%);\\n width: 0;\\n height: 4px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.4s ease;\\n}\\n\\n.bifa-page-title:hover {\\n transform: translateY(-5px);\\n filter: drop-shadow(0 15px 30px rgba(212, 175, 55, 0.3));\\n}\\n\\n.bifa-page-title:hover::after {\\n width: 100%;\\n}\\n\\n.bifa-page-subtitle {\\n font-family: var(--bifa-font-heading);\\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\\n color: var(--bifa-deep-navy);\\n font-weight: 600;\\n letter-spacing: 2px;\\n margin-bottom: 20px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.3s forwards;\\n}\\n\\n.bifa-page-description {\\n max-width: 900px;\\n margin: 0 auto;\\n font-family: var(--bifa-font-body);\\n font-size: clamp(1rem, 1.5vw, 1.2rem);\\n line-height: 1.8;\\n color: #4a5568;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.6s forwards;\\n}\\n\\n\\\/* ========= SEARCH & FILTER BAR ========= *\\\/\\n.bifa-filter-bar {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-bottom: 60px;\\n gap: 30px;\\n flex-wrap: wrap;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 0.8s forwards;\\n}\\n\\n.bifa-search-container {\\n position: relative;\\n flex: 1;\\n max-width: 400px;\\n}\\n\\n.bifa-search-input {\\n width: 100%;\\n padding: 18px 55px 18px 25px;\\n border: 2px solid rgba(212, 175, 55, 0.2);\\n border-radius: 50px;\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n background: white;\\n backdrop-filter: blur(10px);\\n transition: var(--bifa-transition);\\n outline: none;\\n}\\n\\n.bifa-search-input:focus {\\n border-color: var(--bifa-heritage-gold);\\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-search-btn {\\n position: absolute;\\n right: 8px;\\n top: 50%;\\n transform: translateY(-50%);\\n width: 40px;\\n height: 40px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border: none;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n}\\n\\n.bifa-search-btn:hover {\\n transform: translateY(-50%) scale(1.1);\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-search-btn svg {\\n width: 18px;\\n height: 18px;\\n stroke: var(--bifa-deep-navy);\\n stroke-width: 2.5;\\n}\\n\\n.bifa-filter-options {\\n display: flex;\\n gap: 15px;\\n flex-wrap: wrap;\\n}\\n\\n.bifa-filter-btn {\\n padding: 12px 24px;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n background: white;\\n border-radius: 30px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 600;\\n font-size: 0.9rem;\\n color: var(--bifa-deep-navy);\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n}\\n\\n.bifa-filter-btn.active,\\n.bifa-filter-btn:hover {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-color: var(--bifa-heritage-gold);\\n color: var(--bifa-deep-navy);\\n transform: translateY(-2px);\\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);\\n}\\n\\n\\\/* ========= LOADING STATE ========= *\\\/\\n.bifa-loading-container {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n min-height: 500px;\\n gap: 30px;\\n}\\n\\n.bifa-loader {\\n width: 100px;\\n height: 100px;\\n position: relative;\\n}\\n\\n.bifa-loader-ring {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n border: 4px solid transparent;\\n border-radius: 50%;\\n animation: loaderSpin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\\n}\\n\\n.bifa-loader-ring:nth-child(1) {\\n border-top-color: var(--bifa-heritage-gold);\\n animation-delay: 0s;\\n}\\n\\n.bifa-loader-ring:nth-child(2) {\\n width: 75%;\\n height: 75%;\\n top: 12.5%;\\n left: 12.5%;\\n border-right-color: var(--bifa-deep-navy);\\n animation-delay: 0.3s;\\n animation-direction: reverse;\\n}\\n\\n.bifa-loader-ring:nth-child(3) {\\n width: 50%;\\n height: 50%;\\n top: 25%;\\n left: 25%;\\n border-bottom-color: var(--bifa-civic-green);\\n animation-delay: 0.6s;\\n}\\n\\n@keyframes loaderSpin {\\n 0% { \\n transform: rotate(0deg) scale(1);\\n }\\n 50% {\\n transform: rotate(180deg) scale(1.1);\\n }\\n 100% { \\n transform: rotate(360deg) scale(1);\\n }\\n}\\n\\n.loading-text {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.4rem;\\n font-weight: 700;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n animation: textGlow 2.5s ease-in-out infinite;\\n}\\n\\n\\\/* ========= NEWS GRID ========= *\\\/\\n.bifa-news-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\\n gap: 40px;\\n margin-bottom: 80px;\\n}\\n\\n\\\/* ========= NEWS CARD PREMIUM ========= *\\\/\\n.bifa-news-card {\\n background: white;\\n backdrop-filter: blur(20px);\\n border-radius: 25px;\\n overflow: hidden;\\n box-shadow: 0 8px 30px rgba(10, 31, 68, 0.08);\\n transition: var(--bifa-transition);\\n cursor: pointer;\\n position: relative;\\n border: none;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease forwards;\\n}\\n\\n.bifa-news-card:nth-child(1) { animation-delay: 0.1s; }\\n.bifa-news-card:nth-child(2) { animation-delay: 0.2s; }\\n.bifa-news-card:nth-child(3) { animation-delay: 0.3s; }\\n.bifa-news-card:nth-child(4) { animation-delay: 0.4s; }\\n.bifa-news-card:nth-child(5) { animation-delay: 0.5s; }\\n.bifa-news-card:nth-child(6) { animation-delay: 0.6s; }\\n\\n.bifa-news-card::before {\\n content: '';\\n position: absolute;\\n top: 0;\\n left: 0;\\n right: 0;\\n height: 3px;\\n background: linear-gradient(90deg, transparent, var(--bifa-heritage-gold), transparent);\\n transform: scaleX(0);\\n transition: transform 0.4s ease;\\n}\\n\\n.bifa-news-card:hover::before {\\n transform: scaleX(1);\\n}\\n\\n.bifa-news-card:hover {\\n transform: translateY(-10px) scale(1.02);\\n box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15);\\n}\\n\\n.bifa-news-image {\\n position: relative;\\n height: 240px;\\n background-size: cover;\\n background-position: center;\\n overflow: hidden;\\n}\\n\\n.bifa-news-image::before {\\n content: '';\\n position: absolute;\\n inset: 0;\\n background: linear-gradient(180deg, \\n transparent 0%, \\n transparent 60%, \\n rgba(10, 31, 68, 0.8) 100%\\n );\\n transition: opacity 0.4s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-image::before {\\n opacity: 0.9;\\n}\\n\\n\\\/* Shimmer effect *\\\/\\n.bifa-news-image::after {\\n content: '';\\n position: absolute;\\n top: -50%;\\n left: -100%;\\n width: 50%;\\n height: 200%;\\n background: linear-gradient(90deg, \\n transparent 0%, \\n rgba(255, 255, 255, 0.4) 50%, \\n transparent 100%\\n );\\n transform: skewX(-25deg);\\n transition: left 1s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-image::after {\\n left: 150%;\\n}\\n\\n.bifa-news-badge {\\n position: absolute;\\n top: 25px;\\n left: 25px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 10px 24px;\\n border-radius: 30px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 0.8rem;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n z-index: 2;\\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\\n transition: all 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-badge {\\n transform: translateY(-3px);\\n box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-news-content {\\n padding: 35px;\\n}\\n\\n.bifa-news-date {\\n font-family: var(--bifa-font-body);\\n font-size: 0.9rem;\\n color: var(--bifa-gray);\\n margin-bottom: 15px;\\n display: flex;\\n align-items: center;\\n gap: 10px;\\n font-weight: 500;\\n}\\n\\n.bifa-news-date::before {\\n content: '';\\n width: 6px;\\n height: 6px;\\n background: var(--bifa-heritage-gold);\\n border-radius: 50%;\\n}\\n\\n.bifa-news-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 1.35rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n line-height: 1.4;\\n margin-bottom: 18px;\\n display: -webkit-box;\\n -webkit-line-clamp: 2;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n transition: color 0.3s ease;\\n}\\n\\n.bifa-news-card:hover .bifa-news-title {\\n background: linear-gradient(135deg, var(--bifa-deep-navy), #162e5a);\\n -webkit-background-clip: text;\\n background-clip: text;\\n color: transparent;\\n}\\n\\n.bifa-news-excerpt {\\n font-family: var(--bifa-font-body);\\n font-size: 1rem;\\n color: #4a5568;\\n line-height: 1.7;\\n display: -webkit-box;\\n -webkit-line-clamp: 3;\\n -webkit-box-orient: vertical;\\n overflow: hidden;\\n margin-bottom: 30px;\\n}\\n\\n.bifa-news-footer {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n padding-top: 25px;\\n border-top: 1px solid rgba(212, 175, 55, 0.2);\\n}\\n\\n.bifa-news-link {\\n display: inline-flex;\\n align-items: center;\\n gap: 10px;\\n color: var(--bifa-heritage-gold);\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n font-size: 0.95rem;\\n text-decoration: none;\\n text-transform: uppercase;\\n letter-spacing: 0.5px;\\n transition: var(--bifa-transition);\\n position: relative;\\n}\\n\\n.bifa-news-link::after {\\n content: '';\\n position: absolute;\\n bottom: -3px;\\n left: 0;\\n width: 0;\\n height: 2px;\\n background: linear-gradient(90deg, var(--bifa-heritage-gold), #ffd700);\\n transition: width 0.3s ease;\\n}\\n\\n.bifa-news-link:hover {\\n gap: 15px;\\n}\\n\\n.bifa-news-link:hover::after {\\n width: calc(100% - 25px);\\n}\\n\\n.bifa-news-link svg {\\n width: 18px;\\n height: 18px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-news-link:hover svg {\\n transform: translateX(5px);\\n}\\n\\n.bifa-news-stats {\\n display: flex;\\n gap: 20px;\\n font-size: 0.85rem;\\n color: var(--bifa-gray);\\n}\\n\\n.bifa-news-stat {\\n display: flex;\\n align-items: center;\\n gap: 5px;\\n}\\n\\n.bifa-news-stat svg {\\n width: 14px;\\n height: 14px;\\n stroke: currentColor;\\n}\\n\\n\\\/* ========= PAGINATION ========= *\\\/\\n.bifa-pagination {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n gap: 15px;\\n margin-top: 60px;\\n opacity: 0;\\n animation: fadeInUp 1.2s ease 1s forwards;\\n}\\n\\n.bifa-pagination-btn {\\n width: 50px;\\n height: 50px;\\n border: 2px solid rgba(212, 175, 55, 0.3);\\n background: white;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n transition: var(--bifa-transition);\\n font-family: var(--bifa-font-heading);\\n font-weight: 700;\\n color: var(--bifa-deep-navy);\\n text-decoration: none;\\n}\\n\\n.bifa-pagination-btn.active,\\n.bifa-pagination-btn:hover {\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n border-color: var(--bifa-heritage-gold);\\n transform: scale(1.1);\\n box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);\\n}\\n\\n.bifa-pagination-btn svg {\\n width: 20px;\\n height: 20px;\\n stroke: currentColor;\\n stroke-width: 2.5;\\n}\\n\\n\\\/* ========= ERROR STATE ========= *\\\/\\n.bifa-error-container {\\n display: none;\\n text-align: center;\\n padding: 100px 20px;\\n animation: fadeIn 0.5s ease-out;\\n}\\n\\n.bifa-error-icon {\\n width: 120px;\\n height: 120px;\\n margin: 0 auto 40px;\\n background: linear-gradient(135deg, #FF6B6B, #FF4757);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.3);\\n animation: errorPulse 2s ease-in-out infinite;\\n}\\n\\n@keyframes errorPulse {\\n 0%, 100% {\\n transform: scale(1);\\n box-shadow: 0 25px 60px rgba(255, 71, 87, 0.3);\\n }\\n 50% {\\n transform: scale(1.05);\\n box-shadow: 0 30px 70px rgba(255, 71, 87, 0.4);\\n }\\n}\\n\\n.bifa-error-icon svg {\\n width: 60px;\\n height: 60px;\\n stroke: white;\\n stroke-width: 3;\\n}\\n\\n.bifa-error-title {\\n font-family: var(--bifa-font-heading);\\n font-size: 2.2rem;\\n font-weight: 800;\\n color: var(--bifa-deep-navy);\\n margin-bottom: 25px;\\n}\\n\\n.bifa-error-message {\\n font-family: var(--bifa-font-body);\\n font-size: 1.2rem;\\n color: #4a5568;\\n margin-bottom: 50px;\\n max-width: 600px;\\n margin-left: auto;\\n margin-right: auto;\\n line-height: 1.7;\\n}\\n\\n.bifa-retry-btn {\\n display: inline-flex;\\n align-items: center;\\n gap: 12px;\\n background: linear-gradient(135deg, var(--bifa-heritage-gold), #ffd700);\\n color: var(--bifa-deep-navy);\\n padding: 18px 40px;\\n border-radius: 50px;\\n font-family: var(--bifa-font-heading);\\n font-weight: 800;\\n font-size: 1rem;\\n text-decoration: none;\\n cursor: pointer;\\n border: none;\\n text-transform: uppercase;\\n letter-spacing: 1px;\\n transition: var(--bifa-transition);\\n box-shadow: 0 18px 45px rgba(212, 175, 55, 0.3);\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.bifa-retry-btn::before {\\n content: '';\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n width: 0;\\n height: 0;\\n border-radius: 50%;\\n background: rgba(255, 255, 255, 0.3);\\n transform: translate(-50%, -50%);\\n transition: all 0.6s ease;\\n}\\n\\n.bifa-retry-btn:hover {\\n transform: translateY(-3px);\\n box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);\\n}\\n\\n.bifa-retry-btn:hover::before {\\n width: 300px;\\n height: 300px;\\n}\\n\\n.bifa-retry-btn svg {\\n width: 22px;\\n height: 22px;\\n transition: transform 0.3s ease;\\n}\\n\\n.bifa-retry-btn:hover svg {\\n transform: rotate(180deg);\\n}\\n\\n\\\/* ========= ANIMATIONS ========= *\\\/\\n@keyframes fadeIn {\\n from { opacity: 0; }\\n to { opacity: 1; }\\n}\\n\\n@keyframes fadeInDown {\\n from {\\n opacity: 0;\\n transform: translateY(-50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes fadeInUp {\\n from {\\n opacity: 0;\\n transform: translateY(50px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n@keyframes textGlow {\\n 0%, 100% {\\n text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);\\n }\\n 50% {\\n text-shadow: 0 0 25px rgba(212, 175, 55, 0.8), 0 0 35px rgba(212, 175, 55, 0.6);\\n }\\n}\\n\\n\\\/* ========= RESPONSIVE - \\u0411\\u0415\\u0417 \\u041a\\u041e\\u041d\\u0424\\u041b\\u0418\\u041a\\u0422\\u0410 \\u0421 \\u0428\\u0410\\u041f\\u041a\\u041e\\u0419 ========= *\\\/\\n@media (max-width: 1200px) {\\n .bifa-news-grid {\\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\\n gap: 35px;\\n }\\n}\\n\\n@media (max-width: 992px) {\\n .bifa-filter-bar {\\n flex-direction: column;\\n align-items: stretch;\\n gap: 25px;\\n }\\n \\n .bifa-search-container {\\n max-width: none;\\n }\\n \\n .bifa-filter-options {\\n justify-content: center;\\n }\\n \\n .bifa-main-content {\\n padding: 60px 0 40px 0; \\\/* \\u041c\\u0435\\u043d\\u044c\\u0448\\u0438\\u0439 \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f \\u043d\\u0430 \\u043f\\u043b\\u0430\\u043d\\u0448\\u0435\\u0442\\u0430\\u0445 *\\\/\\n }\\n}\\n\\n@media (max-width: 768px) {\\n .bifa-main-content {\\n padding: 40px 0 30px 0; \\\/* \\u0415\\u0449\\u0435 \\u043c\\u0435\\u043d\\u044c\\u0448\\u0438\\u0439 \\u043e\\u0442\\u0441\\u0442\\u0443\\u043f \\u043d\\u0430 \\u043c\\u043e\\u0431\\u0438\\u043b\\u044c\\u043d\\u044b\\u0445 *\\\/\\n }\\n \\n .bifa-page-header {\\n margin-bottom: 50px;\\n }\\n \\n .bifa-news-grid {\\n grid-template-columns: 1fr;\\n gap: 25px;\\n }\\n \\n .bifa-news-content {\\n padding: 25px;\\n }\\n \\n .bifa-pagination {\\n gap: 10px;\\n }\\n \\n .bifa-pagination-btn {\\n width: 45px;\\n height: 45px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .bifa-main-content {\\n padding: 20px 0;\\n }\\n \\n .bifa-page-title {\\n font-size: 2.5rem;\\n }\\n \\n .bifa-page-subtitle {\\n font-size: 1.2rem;\\n letter-spacing: 1px;\\n }\\n \\n .bifa-filter-options {\\n flex-direction: column;\\n align-items: center;\\n }\\n \\n .bifa-filter-btn {\\n width: 100%;\\n max-width: 200px;\\n text-align: center;\\n }\\n \\n .bifa-news-content {\\n padding: 20px;\\n }\\n \\n .bifa-news-footer {\\n flex-direction: column;\\n gap: 15px;\\n align-items: flex-start;\\n }\\n \\n .bifa-news-stats {\\n width: 100%;\\n justify-content: space-between;\\n }\\n}\\n<\\\/style>\\n<\\\/head>\\n<body>\\n\\n<\/p>\n<div class=\"\\\"bifa-page-wrapper\\\"\">\\n \\n <\/p>\n<div class=\"\\\"page-bg-animation\\\"\">\\n \\n <\/p>\n<div class=\"\\\"floating-shape\" shape-page-1\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-shape\" shape-page-2\\\"><\\\/div>\\n <\/p>\n<div class=\"\\\"floating-shape\" shape-page-3\\\"><\\\/div>\\n \\n <\\\/div>\\n\\n \\n\\n \\n <main class=\"\\\"bifa-main-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-container\\\"\">\\n \\n <\/p>\n<div class=\"\\\"bifa-page-header\\\"\">\\n <\/p>\n<h1 class=\"\\\"bifa-page-title\\\"\">News Center<\\\/h1>\\n <\/p>\n<p class=\"\\\"bifa-page-subtitle\\\"\">Latest Stories & Updates<\\\/p>\\n <\/p>\n<p class=\"\\\"bifa-page-description\\\"\">\\n Stay informed with the latest news, updates, and stories from BIFA+. Discover how football unites nations and builds communities across the globe.\\n <\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div class=\"\\\"bifa-filter-bar\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-search-container\\\"\">\\n <input type=\"\\\"text\\\"\" class=\"\\\"bifa-search-input\\\"\" placeholder=\"\\\"Search\" news...\\\" id=\"\\\"bifaSearchInput\\\"\">\\n <button class=\"\\\"bifa-search-btn\\\"\" id=\"\\\"bifaSearchBtn\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <circle cx=\"\\\"11\\\"\" cy=\"\\\"11\\\"\" r=\"\\\"8\\\"\"><\\\/circle>\\n <path d=\"\\\"m21\" 21-4.35-4.35\\\"><\\\/path>\\n <\\\/svg>\\n <\\\/button>\\n <\\\/div>\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaLoadingState\\\"\" class=\"\\\"bifa-loading-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loader\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-loader-ring\\\"\"><\\\/div>\\n <\\\/div>\\n <\/p>\n<p class=\"\\\"loading-text\\\"\">Loading Latest Stories...<\\\/p>\\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaNewsGrid\\\"\" class=\"\\\"bifa-news-grid\\\"\" style=\"\\\"display:\" none;\\\">\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaPagination\\\"\" class=\"\\\"bifa-pagination\\\"\" style=\"\\\"display:\" none;\\\">\\n \\n <\\\/div>\\n\\n \\n <\/p>\n<div id=\"\\\"bifaErrorState\\\"\" class=\"\\\"bifa-error-container\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-error-icon\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M12\" 9v13m12 17h12.01m21 12c21 16.9706 21 12 21c7.02944 3 12c3 7.02944 3c16.9706 12z\\\" stroke =\"\\\"currentColor\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-error-title\\\"\">Unable to Load News<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-error-message\\\"\">We're having trouble fetching the latest stories. Please check your connection and try again.<\\\/p>\\n <button class=\"\\\"bifa-retry-btn\\\"\" onclick=\"\\\"BifaNewsPage.loadNews()\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M1\" 4v10h7m23 20v14h17m20.49 9c19.62 5.33 16.31 2.5 12.23 2.5c7.09 2.7 7.17 3.04 12.5c3.38 17.83 8.09 22 13.5 22c17.83 21.53 19.19 22.68 15.36m12 8v12l15 15\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>Retry<\\\/span>\\n <\\\/button>\\n <\\\/div>\\n <\\\/div>\\n <\\\/main>\\n<\\\/div>\\n\\n<script>\\n\\\/\\\/ BIFA+ Premium News Page Module\\nconst BifaNewsPage = {\\n \\\/\\\/ Configuration\\n config: {\\n apiUrl: 'https:\\\/\\\/bifa.ai\\\/wp-json\\\/wp\\\/v2\\\/bifa_news_events',\\n perPage: 12,\\n currentPage: 1,\\n totalPages: 1,\\n newsParams: '_embed&per_page=50&orderby=date&order=desc&meta_query[relation]=OR&meta_query[0][key]=_bifa_event_date&meta_query[0][compare]=NOT EXISTS&meta_query[1][key]=_bifa_event_date&meta_query[1][value]=&meta_query[1][compare]==',\\n allNews: [],\\n filteredNews: [],\\n currentFilter: 'all',\\n searchQuery: ''\\n },\\n\\n \\\/\\\/ Initialize\\n init() {\\n this.createParticles();\\n this.setupEventListeners();\\n this.loadNews();\\n },\\n\\n \\\/\\\/ Create golden particles\\n createParticles() {\\n const particlesContainer = document.querySelector('.page-bg-animation');\\n const particleCount = 15;\\n\\n for (let i = 0; i < particleCount; i++) {\\n const particle = document.createElement('div');\\n particle.className = 'page-particle';\\n particle.style.left = Math.random() * 100 + '%';\\n particle.style.animationDelay = Math.random() * 20 + 's';\\n particle.style.animationDuration = (20 + Math.random() * 10) + 's';\\n \\n const size = 3 + Math.random() * 3;\\n particle.style.width = size + 'px';\\n particle.style.height = size + 'px';\\n \\n particlesContainer.appendChild(particle);\\n }\\n },\\n\\n \\\/\\\/ Setup event listeners\\n setupEventListeners() {\\n \\\/\\\/ Search functionality\\n const searchInput = document.getElementById('bifaSearchInput');\\n const searchBtn = document.getElementById('bifaSearchBtn');\\n \\n if (searchInput) {\\n searchInput.addEventListener('input', (e) => {\\n this.config.searchQuery = e.target.value.toLowerCase();\\n this.filterAndDisplayNews();\\n });\\n }\\n \\n if (searchBtn) {\\n searchBtn.addEventListener('click', () => {\\n this.filterAndDisplayNews();\\n });\\n }\\n\\n \\\/\\\/ Filter buttons\\n const filterBtns = document.querySelectorAll('.bifa-filter-btn');\\n filterBtns.forEach(btn => {\\n btn.addEventListener('click', (e) => {\\n \\\/\\\/ Remove active class from all buttons\\n filterBtns.forEach(b => b.classList.remove('active'));\\n \\\/\\\/ Add active class to clicked button\\n e.target.classList.add('active');\\n \\n this.config.currentFilter = e.target.dataset.filter;\\n this.config.currentPage = 1;\\n this.filterAndDisplayNews();\\n });\\n });\\n },\\n\\n \\\/\\\/ Load news from API\\n async loadNews() {\\n const loadingState = document.getElementById('bifaLoadingState');\\n const newsGrid = document.getElementById('bifaNewsGrid');\\n const pagination = document.getElementById('bifaPagination');\\n const errorState = document.getElementById('bifaErrorState');\\n\\n try {\\n \\\/\\\/ Show loading\\n loadingState.style.display = 'flex';\\n newsGrid.style.display = 'none';\\n pagination.style.display = 'none';\\n errorState.style.display = 'none';\\n\\n \\\/\\\/ Fetch all news\\n const response = await fetch(`${this.config.apiUrl}?${this.config.newsParams}`);\\n \\n if (!response.ok) {\\n throw new Error('Failed to fetch news');\\n }\\n\\n const allData = await response.json();\\n \\n \\\/\\\/ Filter only news (no event dates)\\n const newsData = allData.filter(item => {\\n const eventDate = item._bifa_event_date || item.meta?._bifa_event_date;\\n return !eventDate || eventDate === '';\\n });\\n\\n if (newsData.length === 0) {\\n throw new Error('No news available');\\n }\\n\\n \\\/\\\/ Store all news\\n this.config.allNews = newsData;\\n this.config.filteredNews = newsData;\\n\\n \\\/\\\/ Hide loading, show content\\n loadingState.style.display = 'none';\\n newsGrid.style.display = 'grid';\\n\\n \\\/\\\/ Display news\\n this.filterAndDisplayNews();\\n\\n } catch (error) {\\n console.error('Error loading news:', error);\\n loadingState.style.display = 'none';\\n errorState.style.display = 'block';\\n }\\n },\\n\\n \\\/\\\/ Filter and display news\\n filterAndDisplayNews() {\\n let filtered = this.config.allNews;\\n\\n \\\/\\\/ Apply category filter\\n if (this.config.currentFilter !== 'all') {\\n filtered = filtered.filter(news => {\\n const badge = this.getBadgeText(news).toLowerCase();\\n const category = news._embedded?.['wp:term']?.[0]?.[0]?.name?.toLowerCase() || '';\\n \\n switch (this.config.currentFilter) {\\n case 'featured':\\n return badge.includes('featured') || badge.includes('\\u0432\\u0430\\u0436\\u043d\\u043e\\u0435');\\n case 'announcements':\\n return badge.includes('announcement') || category.includes('announcement');\\n case 'updates':\\n return badge.includes('update') || category.includes('update');\\n default:\\n return true;\\n }\\n });\\n }\\n\\n \\\/\\\/ Apply search filter\\n if (this.config.searchQuery) {\\n filtered = filtered.filter(news => {\\n const title = news.title.rendered.toLowerCase();\\n const excerpt = this.stripHtml(news.excerpt.rendered).toLowerCase();\\n return title.includes(this.config.searchQuery) || \\n excerpt.includes(this.config.searchQuery);\\n });\\n }\\n\\n this.config.filteredNews = filtered;\\n this.config.totalPages = Math.ceil(filtered.length \\\/ this.config.perPage);\\n \\n this.renderNews();\\n this.renderPagination();\\n },\\n\\n \\\/\\\/ Render news grid\\n renderNews() {\\n const newsGrid = document.getElementById('bifaNewsGrid');\\n if (!newsGrid) return;\\n\\n \\\/\\\/ Calculate start and end indices for current page\\n const startIndex = (this.config.currentPage - 1) * this.config.perPage;\\n const endIndex = startIndex + this.config.perPage;\\n const pageNews = this.config.filteredNews.slice(startIndex, endIndex);\\n\\n \\\/\\\/ Clear existing content\\n newsGrid.innerHTML = '';\\n\\n if (pageNews.length === 0) {\\n newsGrid.innerHTML = `\\n <\/p>\n<div style=\"\\\"grid-column:\" 1 \\>\\n <\/p>\n<h3 style=\"\\\"font-family:\" var(--bifa-font-heading); font-size: 1.5rem; color: var(--bifa-deep-navy); margin-bottom: 10px;\\\">No news found<\\\/h3>\\n <\/p>\n<p style=\"\\\"color:\" var(--bifa-gray);\\\">Try adjusting your search or filter criteria.<\\\/p>\\n <\\\/div>\\n `;\\n return;\\n }\\n\\n \\\/\\\/ Render each news item\\n pageNews.forEach((news, index) => {\\n const card = this.createNewsCard(news, index);\\n newsGrid.appendChild(card);\\n });\\n\\n \\\/\\\/ Scroll to top of grid\\n newsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });\\n },\\n\\n \\\/\\\/ Create news card\\n createNewsCard(news, index) {\\n const card = document.createElement('div');\\n card.className = 'bifa-news-card';\\n card.style.animationDelay = `${index * 0.1}s`;\\n\\n \\\/\\\/ Get data\\n const media = news._embedded?.['wp:featuredmedia']?.[0];\\n const imageUrl = media?.source_url || `\\\/wp-content\\\/themes\\\/yootheme-child\\\/assets\\\/images\\\/news-placeholder-${(index % 3) + 1}.jpg`;\\n const date = new Date(news.date).toLocaleDateString('en-US', {\\n month: 'long',\\n day: 'numeric',\\n year: 'numeric'\\n });\\n const excerpt = this.stripHtml(news.excerpt.rendered).substring(0, 120) + '...';\\n const badge = this.getBadgeText(news);\\n\\n card.innerHTML = `\\n <\/p>\n<div class=\"\\\"bifa-news-image\\\"\" style=\"\\\"background-image:\" url('${imageurl}')\\\">\\n <span class=\"\\\"bifa-news-badge\\\"\">${badge}<\\\/span>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-news-content\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-news-date\\\"\">${date}<\\\/div>\\n <\/p>\n<h3 class=\"\\\"bifa-news-title\\\"\">${news.title.rendered}<\\\/h3>\\n <\/p>\n<p class=\"\\\"bifa-news-excerpt\\\"\">${excerpt}<\\\/p>\\n <\/p>\n<div class=\"\\\"bifa-news-footer\\\"\">\\n <a href=\"\\\"${news.link}\\\"\" class=\"\\\"bifa-news-link\\\"\" target=\"\\\"_blank\\\"\" onclick=\"\\\"event.stopPropagation()\\\"\">\\n <span>Read More<\\\/span>\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M5\" 12h19m19 12l12 5m19 19\\\" stroke =\"\\\"currentColor\\\"\" stroke-width=\"\\\"2\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <\\\/a>\\n <\/p>\n<div class=\"\\\"bifa-news-stats\\\"\">\\n <\/p>\n<div class=\"\\\"bifa-news-stat\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M19\" 14c19 18.4183 15.4183 22 11 22c6.58172 3 14c3 9.58172 6.58172 6 6m19 14v10m19 14h15m19 10l13 4m19 10h15\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>Read<\\\/span>\\n <\\\/div>\\n <\/p>\n<div class=\"\\\"bifa-news-stat\\\"\">\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M16\" 4h18c19.1046 4 20 4.89543 6v18c20 19.1046 18 20h6c4.89543 18v6c4 6 4h8m16 4c16 2.89543 15.1046 2 14 2h10c8.89543 8 4m16 5.10457 6h10c8.89543 4m9 12l11 14l15 10\\\" stroke =\"\\\"currentColor\\\"\" stroke-width =\"\\\"2\\\"\" stroke-linecap =\"\\\"round\\\"\" stroke-linejoin =\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n <span>Verified<\\\/span>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n <\\\/div>\\n `;\\n\\n \\\/\\\/ Add click handler\\n card.addEventListener('click', () => {\\n window.open(news.link, '_blank');\\n });\\n\\n return card;\\n },\\n\\n \\\/\\\/ Render pagination\\n renderPagination() {\\n const pagination = document.getElementById('bifaPagination');\\n if (!pagination || this.config.totalPages <= 1) {\\n pagination.style.display = 'none';\\n return;\\n }\\n\\n pagination.style.display = 'flex';\\n pagination.innerHTML = '';\\n\\n \\\/\\\/ Previous button\\n if (this.config.currentPage > 1) {\\n const prevBtn = document.createElement('a');\\n prevBtn.className = 'bifa-pagination-btn';\\n prevBtn.href = '#';\\n prevBtn.innerHTML = `\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M15\" 18l9 12l15 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n `;\\n prevBtn.addEventListener('click', (e) => {\\n e.preventDefault();\\n this.config.currentPage--;\\n this.renderNews();\\n this.renderPagination();\\n });\\n pagination.appendChild(prevBtn);\\n }\\n\\n \\\/\\\/ Page numbers\\n const startPage = Math.max(1, this.config.currentPage - 2);\\n const endPage = Math.min(this.config.totalPages, this.config.currentPage + 2);\\n\\n for (let i = startPage; i <= endPage; i++) {\\n const pageBtn = document.createElement('a');\\n pageBtn.className = `bifa-pagination-btn ${i === this.config.currentPage ? 'active' : ''}`;\\n pageBtn.href = '#';\\n pageBtn.textContent = i;\\n pageBtn.addEventListener('click', (e) => {\\n e.preventDefault();\\n this.config.currentPage = i;\\n this.renderNews();\\n this.renderPagination();\\n });\\n pagination.appendChild(pageBtn);\\n }\\n\\n \\\/\\\/ Next button\\n if (this.config.currentPage < this.config.totalPages) {\\n const nextBtn = document.createElement('a');\\n nextBtn.className = 'bifa-pagination-btn';\\n nextBtn.href = '#';\\n nextBtn.innerHTML = `\\n <svg viewbox=\"\\\"0\" 0 24 24\\\" fill=\"\\\"none\\\"\">\\n <path d=\"\\\"M9\" 18l15 12l9 6\\\" stroke=\"\\\"currentColor\\\"\" stroke-linecap=\"\\\"round\\\"\" stroke-linejoin=\"\\\"round\\\"\\\/\">\\n <\\\/svg>\\n `;\\n nextBtn.addEventListener('click', (e) => {\\n e.preventDefault();\\n this.config.currentPage++;\\n this.renderNews();\\n this.renderPagination();\\n });\\n pagination.appendChild(nextBtn);\\n }\\n },\\n\\n \\\/\\\/ Get badge text\\n getBadgeText(news) {\\n if (news._bifa_badge_text) {\\n return news._bifa_badge_text;\\n }\\n \\n const category = news._embedded?.['wp:term']?.[0]?.[0];\\n return category?.name || 'News';\\n },\\n\\n \\\/\\\/ Strip HTML\\n stripHtml(html) {\\n const temp = document.createElement('div');\\n temp.innerHTML = html;\\n return temp.textContent || temp.innerText || '';\\n }\\n};\\n\\n\\\/\\\/ Initialize when DOM is ready\\ndocument.addEventListener('DOMContentLoaded', () => {\\n BifaNewsPage.init();\\n});\\n<\\\/script>\\n\\n<\\\/body>\\n<\\\/html>\"}}]}]}]}],\"version\":\"4.5.20\"} --><\/p>","protected":false},"excerpt":{"rendered":"<p>BIFA+ News – Latest Stories & Updates News Center Latest Stories & Updates Stay informed with the latest news, updates, and stories from BIFA+. Discover how football unites nations and builds communities across the globe. Loading Latest Stories… Unable to Load News We’re having trouble fetching the latest stories. Please check your connection and try […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-713","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/pages\/713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/comments?post=713"}],"version-history":[{"count":5,"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/pages\/713\/revisions"}],"predecessor-version":[{"id":740,"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/pages\/713\/revisions\/740"}],"wp:attachment":[{"href":"https:\/\/bifa.ai\/zh\/wp-json\/wp\/v2\/media?parent=713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}