/* page.css — Styles for dynamic pages */

/* ── Hero ── */
.hero-iptv { padding: 40px 15px; display: flex; justify-content: center; }
.hero-card {
    width: 100%; max-width: 960px; min-height: 320px;
    border-radius: 28px;
    background: linear-gradient(135deg, #2563eb 0%, #6366f1 45%, #9333ea 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-align: center; position: relative; overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,.18);
    transition: all .4s ease;
}
.hero-card::before {
    content: ""; position: absolute; width: 160%; height: 160%;
    background: radial-gradient(circle at center, rgba(255,255,255,.15), transparent 60%);
    animation: rotateGlow 20s linear infinite;
}
@keyframes rotateGlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.hero-content { position: relative; z-index: 2; padding: 40px 30px; }
.hero-icon { font-size: 56px; margin-bottom: 16px; animation: floatIcon 3s ease-in-out infinite; }
@keyframes floatIcon { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hero-title { font-size: 36px; font-weight: 700; margin-bottom: 14px; letter-spacing: 1px; }
.hero-description { font-size: 16px; line-height: 1.7; opacity: .95; max-width: 720px; margin: 0 auto; }
.hero-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0,0,0,.25); }

/* ── Page Content ── */
.dynamic-page-content { padding: 70px 0 50px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 60vh; }
.page-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.page-breadcrumb { background: rgba(255,255,255,.9); padding: 12px 20px; border-radius: 10px; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(0,0,0,.07); }
.page-breadcrumb .breadcrumb { display: flex; gap: 8px; align-items: center; list-style: none; padding: 0; margin: 0; }
.page-breadcrumb .breadcrumb-item::before { content: "›"; margin-right: 8px; color: #999; }
.page-breadcrumb .breadcrumb-item:first-child::before { display: none; }

.page-body { background: #fff; padding: 50px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.09); margin-bottom: 40px; }
.page-body h1,.page-body h2,.page-body h3,.page-body h4 { color: #1a237e; margin-top: 28px; margin-bottom: 16px; }
.page-body h1 { font-size: 2.4rem; border-bottom: 3px solid #1a237e; padding-bottom: 12px; }
.page-body h2 { font-size: 1.9rem; border-bottom: 2px solid #283593; padding-bottom: 8px; }
.page-body h3 { font-size: 1.4rem; color: #283593; }
.page-body p  { line-height: 1.85; margin-bottom: 18px; font-size: 1.05rem; }
.page-body ul,.page-body ol { margin-left: 28px; margin-bottom: 22px; }
.page-body li { margin-bottom: 8px; line-height: 1.65; }
.page-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 18px 0; box-shadow: 0 5px 15px rgba(0,0,0,.1); }
.page-body .alert { border-radius: 10px; padding: 18px; margin: 22px 0; }
.page-body table { width: 100%; border-collapse: collapse; margin: 22px 0; display: block; overflow-x: auto; }
.page-body table th,.page-body table td { padding: 11px 14px; border: 1px solid #ddd; text-align: left; }
.page-body table th { background: #f0f4ff; color: #1a237e; font-weight: 600; }

/* ── Contact Buttons ── */
.page-contact-buttons { display: flex; justify-content: center; gap: 18px; margin: 36px 0; flex-wrap: wrap; }
.page-contact-btn { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 10px; text-decoration: none !important; font-weight: bold; font-size: 1.05rem; transition: all .3s ease; }
.page-whatsapp-btn { background: #25D366; color: white; }
.page-contact-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,.2); color: white; }
.back-to-home { display: inline-block; margin-top: 28px; padding: 11px 24px; background: #1a237e; color: white; border-radius: 30px; text-decoration: none; font-weight: bold; transition: all .3s; }
.back-to-home:hover { background: #283593; transform: translateY(-3px); color: white; }

/* ── Blog Section ── */
.blog-section { background: #f8f9fa; padding: 70px 0; }
.blog-title { color: #1a237e; text-align: center; margin-bottom: 45px; font-size: 2.3rem; }
.blog-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 28px; margin-bottom: 45px; }
.blog-post-card { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 5px 18px rgba(0,0,0,.09); transition: all .3s ease; height: 100%; }
.blog-post-card:hover { transform: translateY(-8px); box-shadow: 0 15px 28px rgba(0,0,0,.14); }
.blog-post-content { padding: 24px; }
.blog-post-title { color: #1a237e; font-size: 1.3rem; margin-bottom: 12px; line-height: 1.45; }
.blog-post-excerpt { color: #666; font-size: .97rem; line-height: 1.6; margin-bottom: 18px; }
.blog-post-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid #eee; }
.blog-post-date { color: #888; font-size: .88rem; }
.blog-post-link { color: #25D366; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.blog-post-link:hover { color: #1a237e; }
.no-posts-message { text-align: center; padding: 55px; background: white; border-radius: 14px; box-shadow: 0 5px 18px rgba(0,0,0,.09); }
.no-posts-icon { font-size: 3rem; color: #ccc; margin-bottom: 18px; }
.no-posts-text { color: #666; font-size: 1.05rem; }

/* ── CTA Section ── */
.cta-section { background: linear-gradient(135deg, #1a237e 0%, #283593 100%); padding: 55px 30px; text-align: center; border-radius: 14px; margin-top: 38px; }
.cta-title { color: white; font-size: 2.1rem; margin-bottom: 18px; }
.cta-description { color: rgba(255,255,255,.9); font-size: 1.1rem; margin-bottom: 28px; max-width: 660px; margin-left: auto; margin-right: auto; }
.cta-button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: #25D366; color: white; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 1.05rem; transition: all .3s ease; }
.cta-button:hover { background: #1da851; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.2); color: white; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .hero-card { min-height: auto; padding: 35px 18px; border-radius: 18px; }
    .hero-title { font-size: 24px; }
    .hero-description { font-size: 14px; }
    .dynamic-page-content { padding: 50px 0 28px; }
    .page-body { padding: 22px; }
    .page-body h1 { font-size: 1.8rem; }
    .page-body h2 { font-size: 1.4rem; }
    .page-contact-buttons { flex-direction: column; align-items: center; }
    .page-contact-btn { width: 100%; max-width: 280px; justify-content: center; }
    .blog-posts-grid { grid-template-columns: 1fr; gap: 18px; }
    .blog-title { font-size: 1.8rem; }
    .cta-title { font-size: 1.6rem; }
}
@media (max-width: 600px) {
    .page-body table thead { display: none; }
    .page-body table tbody tr { display: block; margin-bottom: 1.2em; border: 1px solid #ddd; border-radius: 8px; padding: 10px; }
    .page-body table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border: none; border-bottom: 1px solid #eee; }
    .page-body table tbody td:before { content: attr(data-label); font-weight: bold; margin-right: 12px; flex: 1; }
    .page-body table tbody td:last-child { border-bottom: none; }
}