/* ==========================================================================
   CRIMSON GRADIENT  -  premium skin for PR Urgent News
   --------------------------------------------------------------------------
   Loaded after style.css, so everything here is an override. Deep red
   gradients, glossy cards and a bold masthead. Fully responsive.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Redefining these also restyles the inline pricing cards on
       pricing.php / submit.php, which read them as custom properties. */
    --news-red:   #b3122b;
    --news-black: #1a0d12;

    --crimson-900: #5c0715;
    --crimson-700: #8f0f22;
    --crimson-600: #b3122b;
    --crimson-500: #d81c39;
    --crimson-400: #f0435c;

    --ink:      #1b1218;
    --ink-soft: #5d515a;
    --paper:    #ffffff;
    --wash:     #fdf7f8;
    --line:     #f0dde1;

    --grad-brand: linear-gradient(135deg, #5c0715 0%, #b3122b 45%, #e0304c 100%);
    --grad-soft:  linear-gradient(135deg, #fff5f6 0%, #ffe9ec 100%);
    --grad-dark:  linear-gradient(160deg, #2a0a12 0%, #4a0b18 60%, #6d0d1e 100%);

    --shadow-sm: 0 2px 10px rgba(92, 7, 21, .07);
    --shadow-md: 0 10px 30px rgba(92, 7, 21, .12);
    --shadow-lg: 0 22px 50px rgba(92, 7, 21, .18);

    --radius:    14px;
    --radius-sm: 10px;
}

body {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(1100px 520px at 12% -8%, #ffe7ea 0%, rgba(255, 231, 234, 0) 60%),
        radial-gradient(900px 460px at 92% 4%, #ffeef0 0%, rgba(255, 238, 240, 0) 55%),
        var(--wash);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--crimson-500); color: #fff; }

a { text-decoration: none; }

/* ---------------------------------------------------------------- header */
.site-header {
    background: var(--grad-brand);
    padding: 16px 0;
    border-bottom: none;
    box-shadow: 0 10px 34px rgba(92, 7, 21, .28);
    position: relative;
}

/* The 25px red bar underneath becomes a thin metallic seam. */
.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff8fa1, #ffd7dd, #ff8fa1);
    opacity: .85;
}

.logo img { filter: brightness(0) invert(1); }

.navbar-nav .nav-link,
.nav-link {
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
    letter-spacing: .1px;
    border-radius: 999px;
    transition: background .18s ease, color .18s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.navbar-toggler { color: #fff; }
.navbar-toggler-icon { filter: brightness(0) invert(1); }

.dropdown-menu {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--crimson-600);
    border-radius: var(--radius-sm);
    padding: 8px;
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    color: var(--ink);
    border-radius: 8px;
    font-weight: 500;
    padding: 9px 14px;
}

.dropdown-item:hover {
    background: var(--grad-soft);
    color: var(--crimson-700);
}

.nav-auth .btn.btn-danger {
    background: #fff;
    color: var(--crimson-700);
    border: none;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.nav-auth .btn.btn-danger:hover {
    background: #fff0f2;
    color: var(--crimson-900);
}

/* ------------------------------------------------------------- headings */
.section-title,
.category-title {
    background: var(--grad-brand);
    color: #fff;
    border-left: none;
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------- heroes */
.hero-box,
.text-hero {
    background: transparent;
    border-bottom: 1px solid var(--line);
}

.hero-kicker,
.hero-category {
    display: inline-block;
    background: var(--grad-soft);
    color: var(--crimson-700);
    border: 1px solid #ffd4da;
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .6px;
}

.hero-title {
    color: var(--ink);
    font-weight: 900;
    letter-spacing: -.8px;
}

/* One gradient accent word, so the masthead reads as branded not plain. */
.hero-title span,
.hero-title em {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
}

.hero-subtitle,
.hero-description { color: var(--ink-soft); }

.hero-image img,
.text-hero img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.hero-btn,
.hero-cta,
.btn-danger {
    background: var(--grad-brand);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(179, 18, 43, .34);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.hero-btn:hover,
.hero-cta:hover,
.btn-danger:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(179, 18, 43, .42);
    color: #fff;
}

.btn-primary {
    background: var(--grad-brand);
    border: none;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(179, 18, 43, .3);
}

.btn-primary:hover { filter: brightness(1.06); }

.btn-outline-primary {
    border-color: var(--crimson-600);
    color: var(--crimson-700);
    border-radius: 999px;
    font-weight: 700;
}

.btn-outline-primary:hover {
    background: var(--crimson-600);
    border-color: var(--crimson-600);
    color: #fff;
}

/* ----------------------------------------------------------------- cards */
.featured-news,
.category-section,
.single-post { background: transparent; }

.category-section.alt-bg { background: rgba(255, 255, 255, .55); }

.news-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: var(--radius);
    padding: 0 0 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
}

/* The old 4px top rule becomes a full-width gradient cap. */
.news-card::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--grad-brand);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.news-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.news-card .date,
.news-card h4,
.news-card p { padding-inline: 18px; }

.news-card h4 { margin-top: 10px; font-weight: 800; font-size: 19px; line-height: 1.35; }
.news-card p  { color: var(--ink-soft); font-size: 14.5px; }

.widget a,
.news-card a { color: var(--ink) !important; }

.news-card a:hover { color: var(--crimson-600) !important; }

.date { color: var(--ink-soft); font-weight: 500; }

/* ------------------------------------------------------------- sponsored */
.sponsored-news {
    background: var(--grad-dark);
    color: #fff;
    border-radius: var(--radius);
    margin: 26px 0;
    padding: 42px 0;
}

.sponsored-news .section-title {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
}

.sponsored-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    padding: 0 0 16px;
    overflow: hidden;
    height: 100%;
    backdrop-filter: blur(4px);
    transition: transform .2s ease, background .2s ease;
}

.sponsored-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .12);
}

.sponsored-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.sponsored-card .date,
.sponsored-card h4,
.sponsored-card p { padding-inline: 16px; }

.sponsored-card h4 { margin-top: 10px; font-weight: 700; font-size: 18px; }
.sponsored-card .date { color: #ffc9d1; }
.sponsored-card a { color: #fff !important; }
.sponsored-card a:hover { color: #ffd7dd !important; }

/* --------------------------------------------------------------- pricing */
.pricing-section {
    background: var(--grad-dark);
    border-radius: var(--radius);
    margin: 26px 0;
}

.section-subtitle { color: rgba(255, 255, 255, .78); }

.pricing-box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding-top: 38px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.pricing-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--grad-brand);
}

.pricing-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.pricing-box.popular {
    border: 1px solid #ffc2cb;
    box-shadow: 0 24px 55px rgba(179, 18, 43, .26);
}

.badge-popular {
    background: var(--grad-brand);
    box-shadow: 0 6px 16px rgba(179, 18, 43, .38);
    font-size: 13px;
    letter-spacing: .4px;
    padding: 6px 16px;
}

.plan-name { color: var(--ink); font-weight: 900; }
.plan-desc { color: var(--ink-soft); font-weight: 600; }

.price {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}

.duration { color: var(--ink-soft); -webkit-text-fill-color: var(--ink-soft); }
.features li { color: var(--ink-soft); }

/* Inline pricing cards (pricing.php / submit.php) */
.pr-card { border-radius: var(--radius); border: none; }
.pr-black { background: var(--grad-dark) !important; }
.pr-red   { background: var(--grad-brand) !important; }
.pr-btn, .pr-btn-white { border-radius: 999px; }
.pr-btn-white { color: var(--crimson-700); }

/* ----------------------------------------------------------- single post */
.post-category {
    display: inline-block;
    background: var(--grad-soft);
    color: var(--crimson-700);
    border: 1px solid #ffd4da;
    padding: 5px 14px;
    border-radius: 999px;
}

.post-title {
    font-weight: 900;
    letter-spacing: -1.2px;
    color: var(--ink);
}

.single-post article,
.single-post .col-12 {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px;
    box-shadow: var(--shadow-sm);
}

.single-post p { color: #322a30; }

.post-hero,
.single-post img.img-fluid {
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

blockquote {
    border-left: 4px solid var(--crimson-500);
    background: var(--grad-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 16px 20px;
}

.share-btn {
    border: 1.5px solid #ffc2cb;
    color: var(--crimson-700);
    background: #fff;
}

.share-btn:hover {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
}

/* --------------------------------------------------------------- sidebar */
.sidebar-widget {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    padding-top: 24px;
}

.sidebar-widget::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--grad-brand);
}

.sidebar-widget.bg-dark,
.sponsored-widget {
    background: var(--grad-dark) !important;
    color: #fff;
}

.widget-title { font-weight: 800; }
.sidebar-news img { border-radius: 8px; }
.sidebar-news a { color: var(--ink); }
.sidebar-news a:hover { color: var(--crimson-600); }

/* ---------------------------------------------------------------- footer */
.footer-widgets {
    background: var(--grad-dark);
    border-bottom: none;
    border-top: 4px solid var(--crimson-500);
}

.site-footer {
    background: #21070e;
    border-top: none;
    color: #d8b9c0;
}

.footer-widget h4 {
    color: #fff;
    position: relative;
    padding-bottom: 10px;
}

.footer-widget h4::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--crimson-400), #ffd7dd);
}

.footer-widget p,
.footer-widget ul li a { color: #d8b9c0; }
.footer-widget ul li a:hover { color: #fff; }
footer a { color: #f3d7dc; }

.social-icon {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
}

.social-icon:hover { background: var(--grad-brand); border-color: transparent; }

/* ------------------------------------------------- forms / account pages */
.bg-black { background: var(--grad-dark) !important; }
.bg-light { background: var(--grad-soft) !important; }

.form-container,
.register-card,
.card {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

.pkg-card {
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
}

.pkg-card:hover  { border-color: #ffb3bf; }
.pkg-card.active { border-color: var(--crimson-600); background: var(--grad-soft); }

.credit-chip {
    background: var(--grad-soft);
    color: var(--crimson-700);
    border: 1px solid #ffd4da;
}

.step-rail div.on   { background: var(--grad-brand); }
.step-rail div.done { background: #17603a; }

.table-light th { background: var(--grad-soft); color: var(--crimson-900); }

.alert-success { border-left: 4px solid #17603a; }
.alert-danger  { border-left: 4px solid var(--crimson-600); }

.form-control:focus,
.form-select:focus {
    border-color: #f3a5b1;
    box-shadow: 0 0 0 .2rem rgba(216, 28, 57, .18);
}

/* ================================================================ mobile */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(0, 0, 0, .28);
        border-radius: var(--radius-sm);
        padding: 12px;
        backdrop-filter: blur(6px);
    }

    .navbar-nav .nav-link { border-bottom: 1px solid rgba(255, 255, 255, .14); }
    .dropdown-menu { background: rgba(255, 255, 255, .97); }
}

@media (max-width: 768px) {
    .sponsored-news,
    .pricing-section { border-radius: 0; margin-inline: -12px; }

    .single-post article,
    .single-post .col-12 { padding: 20px; border-radius: var(--radius-sm); }

    .section-title,
    .category-title { width: 100%; text-align: center; }

    .news-card h4 { font-size: 17px; }

    .hero-title { letter-spacing: -.4px; }
}

@media (max-width: 480px) {
    .news-card img,
    .sponsored-card img { aspect-ratio: 16 / 10; }

    .pricing-box { padding-inline: 18px; }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .news-card,
    .sponsored-card,
    .pricing-box,
    .hero-btn,
    .hero-cta,
    .btn-danger { transition: none; }

    .news-card:hover,
    .sponsored-card:hover,
    .pricing-box:hover,
    .btn-danger:hover { transform: none; }
}

/* ------------------------------------------------------ release body ---- */
.post-summary {
    font-size: 19.5px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--grad-soft);
    border: 1px solid #ffd4da;
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    margin: 26px 0;
}
.post-body p { font-size: 17px; line-height: 1.8; color: #322a30; margin-bottom: 20px; }
.post-body a { color: var(--crimson-600); }
.post-body a:hover { color: var(--crimson-900); }
.post-body img { border-radius: var(--radius-sm); margin: 8px 0; }
.post-body li { margin-bottom: 7px; line-height: 1.7; }
.post-body h2, .post-body h3, .post-body h4 { margin-top: 30px; font-weight: 800; }
.post-body td, .post-body th { border-color: var(--line); }
@media (max-width: 768px) {
    .post-summary { font-size: 17px; padding: 14px 16px; margin: 18px 0; }
    .post-body p  { font-size: 16.5px; margin-bottom: 17px; }
}