/* =====================================================================
   custom.css — additive styles only (blog, payments, cart badge).
   The original style.css / responsive.css are untouched.
   ===================================================================== */

/* ---------- Full-bleed section bands ----------
   style.css caps every <section> at 1400px, which exposes the dark html
   background as side gutters on wide monitors. Each section already has its
   own centered inner container, so lift the outer cap and let the background
   bands span the full viewport. */
section { max-width: none; }

/* Direct child of the pricing section (outside .pricing-container) — give it
   its own cap so it stays aligned with the pricing cards on wide screens. */
.statutory-notice-box {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Header cart button ---------- */
.header-action { display: flex; align-items: center; gap: 10px; }
.header-cart-btn { position: relative; padding-left: 16px !important; padding-right: 16px !important; }
.header-cart-count {
    position: absolute; top: -6px; right: -6px;
    background: var(--primary-color); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* ---------- Shared page shell for blog ---------- */
.crk-page-container { max-width: 1200px; margin: 0 auto; padding: 60px 4% 90px; }

/* ---------- Blog index ---------- */
.blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 38px; }
.blog-filter-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-filter-pill {
    display: inline-block; padding: 9px 20px; border-radius: 999px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-primary); text-decoration: none; font-size: .86rem; font-weight: 600;
    transition: var(--transition-smooth);
}
.blog-filter-pill:hover { border-color: var(--primary-color); color: #fff; }
.blog-filter-pill.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.blog-search-form { display: flex; gap: 8px; min-width: 260px; }
.blog-search-form input {
    flex: 1; margin: 0; background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-primary); padding: 11px 16px; border-radius: 999px;
}
.blog-search-form input::placeholder { color: var(--text-secondary); }
.blog-search-form button {
    width: auto; margin: 0; padding: 11px 20px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--primary-color); color: #fff; font-weight: 700; transition: var(--transition-smooth);
}
.blog-search-form button:hover { background: var(--primary-hover); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
    display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    transition: var(--transition-smooth);
}
.blog-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.28); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.blog-card-img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #06283a; }
.blog-card-img-fallback {
    display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(135deg, #06283a 0%, #023a51 60%, #0b4a63 100%);
    color: rgba(255,255,255,.25); font-size: 2.4rem;
}
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.blog-card-meta { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--text-secondary); margin-bottom: 12px; }
.blog-card-cat { color: var(--primary-hover); font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }
.blog-card-title { font-size: 1.15rem; line-height: 1.4; margin-bottom: 12px; }
.blog-card-title a { color: var(--text-primary); text-decoration: none; transition: var(--transition-smooth); }
.blog-card-title a:hover { color: var(--primary-hover); }
.blog-card-excerpt { color: var(--text-secondary); font-size: .92rem; line-height: 1.65; flex: 1; margin-bottom: 18px; }
.blog-read-more { color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; }
.blog-read-more i { margin-left: 6px; font-size: .78rem; transition: var(--transition-smooth); color: var(--primary-color); }
.blog-read-more:hover i { margin-left: 11px; }
.blog-empty { text-align: center; color: var(--text-secondary); padding: 80px 0; }

.blog-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.blog-pagination a, .blog-pagination span {
    min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-primary); text-decoration: none; font-weight: 600; transition: var(--transition-smooth);
}
.blog-pagination a:hover { border-color: var(--primary-color); }
.blog-pagination .is-current { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* ---------- Single post ---------- */
.post-shell { max-width: 860px; margin: 0 auto; padding: 60px 4% 90px; }
.post-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: var(--text-secondary); font-size: .86rem; margin-bottom: 28px; }
.post-meta-row i { color: var(--primary-hover); margin-right: 6px; }
.post-featured-img { width: 100%; border-radius: 16px; margin-bottom: 34px; }
.post-content { color: #d9e2e7; font-size: 1.02rem; line-height: 1.85; }
.post-content h2 { font-size: 1.5rem; margin: 38px 0 16px; color: #fff; }
.post-content h3 { font-size: 1.22rem; margin: 30px 0 14px; color: #fff; }
.post-content p { margin-bottom: 18px; }
.post-content a { color: var(--primary-hover); }
.post-content ul, .post-content ol { margin: 0 0 20px 24px; }
.post-content li { margin-bottom: 10px; }
.post-content img { max-width: 100%; border-radius: 12px; margin: 18px 0; }
.post-content blockquote {
    margin: 26px 0; padding: 18px 24px; border-left: 3px solid var(--primary-color);
    background: var(--glass-bg); border-radius: 0 12px 12px 0; color: #eef4f7; font-style: italic;
}
.post-content pre, .post-content code { background: rgba(0,0,0,.35); border-radius: 6px; padding: 2px 7px; font-size: .9em; }
.post-content pre { padding: 16px; overflow-x: auto; }
.post-content table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.post-content th, .post-content td { border: 1px solid var(--glass-border); padding: 10px 12px; text-align: left; }

.post-tags-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--glass-border); }
.post-tag-chip {
    padding: 7px 16px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border);
    color: var(--text-secondary); font-size: .8rem; font-weight: 600; text-decoration: none; transition: var(--transition-smooth);
}
.post-tag-chip:hover { color: #fff; border-color: var(--primary-color); }

.post-cta-box {
    margin-top: 48px; padding: 34px; border-radius: 16px; text-align: center;
    background: linear-gradient(135deg, rgba(236,48,42,.14), rgba(245,183,22,.1));
    border: 1px solid var(--glass-border);
}
.post-cta-box h3 { margin-bottom: 10px; }
.post-cta-box p { color: var(--text-secondary); margin-bottom: 20px; }

.related-posts { max-width: 1200px; margin: 0 auto; padding: 0 4% 90px; }
.related-posts h2 { font-size: 1.5rem; margin-bottom: 26px; }

/* ---------- Checkout payment methods ---------- */
.payment-methods { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.payment-method {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
    background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px;
    cursor: pointer; transition: var(--transition-smooth);
}
.payment-method:hover { border-color: rgba(255,255,255,.3); }
.payment-method.is-selected { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
.payment-method input[type="radio"] { width: auto; margin: 4px 0 0; accent-color: var(--primary-color); }
.payment-method-info { flex: 1; }
.payment-method-title { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.payment-method-title i { color: var(--primary-hover); }
.payment-method-desc { color: var(--text-secondary); font-size: .85rem; margin-top: 4px; }
.payment-panel { display: none; margin: 14px 0; }
.payment-panel.is-open { display: block; }
.bank-instructions-box {
    background: var(--glass-bg); border: 1px dashed var(--glass-border); border-radius: 12px;
    padding: 16px 18px; color: var(--text-secondary); font-size: .9rem; line-height: 1.7;
}
#paypal-button-container { margin: 16px 0; }
#card-errors { color: #ff6b6b; font-size: .85rem; margin: 8px 0 0; min-height: 18px; }
.order-summary-lines p { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; border-bottom: 1px solid var(--glass-border); margin: 0; }
.order-summary-lines .total-line { font-size: 1.15rem; font-weight: 800; border-bottom: none; padding-top: 14px; }
.summary-discount { color: #4ade80; }

/* ---------- Order confirmation ---------- */
.order-confirm-shell { max-width: 760px; margin: 0 auto; padding: 60px 4% 90px; text-align: left; }
.order-confirm-card {
    background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px;
    padding: 40px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.order-confirm-icon { font-size: 3rem; color: #4ade80; text-align: center; margin-bottom: 14px; }
.order-confirm-card h1 { text-align: center; font-size: 1.7rem; margin-bottom: 8px; }
.order-confirm-sub { text-align: center; color: var(--text-secondary); margin-bottom: 30px; }
.order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-bottom: 26px; font-size: .95rem; }
.order-detail-grid dt { color: var(--text-secondary); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 10px; }
.order-detail-grid dd { margin: 2px 0 0; font-weight: 600; }
.order-items-table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; }
.order-items-table th { text-align: left; color: var(--text-secondary); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.order-items-table td { padding: 11px 0; border-bottom: 1px solid var(--glass-border); }
.order-items-table td:last-child, .order-items-table th:last-child { text-align: right; }
.order-note-box { background: rgba(245,183,22,.08); border: 1px solid rgba(245,183,22,.3); border-radius: 12px; padding: 16px 18px; color: #f3e3b5; font-size: .9rem; margin-top: 22px; line-height: 1.7; }

/* ---------- Cart line items ---------- */
.cart-product-name { text-align: left !important; font-weight: 600; }
.cart-remove-link { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.cart-remove-link:hover { color: var(--primary-hover); }
.cart-empty-box { text-align: center; padding: 60px 0; color: var(--text-secondary); }
.cart-empty-box i { font-size: 2.6rem; margin-bottom: 16px; display: block; color: rgba(255,255,255,.2); }
.cart-empty-box a { color: var(--primary-hover); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-toolbar { flex-direction: column; align-items: stretch; }
    .order-detail-grid { grid-template-columns: 1fr; }
    .header-cart-btn { display: none !important; } /* mirrors the phone pill's mobile behaviour */
}