/*
Theme Name: DB Fencing
Theme URI: https://www.dbfencestore.com
Author: DB Metal Fences Co., Ltd
Author URI: https://www.dbfencestore.com
Description: Professional wire mesh fence products factory website. Features Temporary Fence, Corral Panels, Steel Picket Fence, Pool Fence. Premium design with scroll animations, hover effects, counter animations, and responsive layout for mobile, tablet and desktop.
Version: 4.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: db-fencing
Tags: business, fence, wire-mesh, temporary-fence, manufacturing
*/

/* ============================================
   DB Fencing Theme - Complete Styles
   ============================================ */

/* --- Base Layout --- */
.wp-site { display: flex; flex-direction: column; min-height: 100vh; }
main.flex-1 { flex: 1; }

/* --- Banner Premium Effects --- */
.banner-premium { position: relative; }
.banner-premium::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.7), inset 0 0 160px rgba(0,0,0,0.4), inset 0 -50px 80px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2;
}
.banner-img-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.banner-img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; }
.banner-premium:hover .banner-img { transform: scale(1.08); }
.banner-shadow-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.7), inset 0 0 160px rgba(0,0,0,0.4), inset 0 -50px 80px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2;
}
.banner-content { position: relative; z-index: 10; }
.banner-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.5rem 1rem; border-radius: 9999px;
    font-size: 0.75rem; color: white; margin-bottom: 1rem;
    animation: fadeInDown 0.8s ease;
}
.banner-title {
    text-shadow: 0 4px 30px rgba(0,0,0,0.8), 0 2px 12px rgba(0,0,0,0.6), 0 0 40px rgba(0,0,0,0.4);
    animation: fadeInUp 0.8s ease 0.2s both;
    letter-spacing: -0.02em;
}
.banner-subtitle {
    text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 6px rgba(0,0,0,0.5);
    animation: fadeInUp 0.8s ease 0.4s both;
}

/* --- Sidebar Navigation --- */
.sidebar-header-glow { position: relative; overflow: hidden; }
.sidebar-nav-list { display: flex; flex-direction: column; }
.sidebar-nav-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6;
    transition: all 0.3s ease; position: relative; overflow: hidden;
    text-decoration: none; color: #374151;
}
.sidebar-nav-item::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(249,115,22,0.08), transparent);
    transform: translateX(-100%); transition: transform 0.4s ease;
}
.sidebar-nav-item:hover::before,
.sidebar-nav-item.active::before { transform: translateX(0); }
.sidebar-nav-item:hover,
.sidebar-nav-item.active { background: linear-gradient(90deg, rgba(249,115,22,0.05), transparent); }
.sidebar-nav-item.active { border-left: 3px solid #f97316; }
.sidebar-nav-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: #f3f4f6; display: flex; align-items: center; justify-content: center;
    color: #6b7280; flex-shrink: 0; transition: all 0.3s ease;
}
.sidebar-nav-item:hover .sidebar-nav-icon,
.sidebar-nav-item.active .sidebar-nav-icon {
    background: linear-gradient(135deg, #f97316, #ea580c); color: white;
    transform: scale(1.1);
}
.sidebar-nav-thumb {
    width: 36px; height: 36px; border-radius: 8px;
    overflow: hidden; flex-shrink: 0;
    border: 2px solid transparent; transition: border-color 0.3s ease;
}
.sidebar-nav-item:hover .sidebar-nav-thumb,
.sidebar-nav-item.active .sidebar-nav-thumb { border-color: #f97316; }
.sidebar-nav-label { flex: 1; font-weight: 600; font-size: 0.85rem; }
.sidebar-nav-count {
    background: #f3f4f6; color: #6b7280; font-size: 0.7rem;
    font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 9999px;
    transition: all 0.3s ease;
}
.sidebar-nav-item:hover .sidebar-nav-count,
.sidebar-nav-item.active .sidebar-nav-count {
    background: #f97316; color: white;
}
.sidebar-nav-arrow {
    opacity: 0; transform: translateX(-8px);
    transition: all 0.3s ease; color: #f97316;
}
.sidebar-nav-item:hover .sidebar-nav-arrow { opacity: 1; transform: translateX(0); }

/* --- Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); }
    50% { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
}
.animate-breathe { animation: breathe 3s ease-in-out infinite; }

/* Scroll Reveal */
.reveal, .reveal-left, .reveal-right {
    opacity: 0; transition: all 0.7s ease;
}
.reveal { transform: translateY(30px); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal.revealed, .reveal-left.revealed, .reveal-right.revealed {
    opacity: 1; transform: translate(0);
}
.stagger-1 { transition-delay: 0.15s; }
.stagger-2 { transition-delay: 0.3s; }
.stagger-3 { transition-delay: 0.45s; }
.stagger-4 { transition-delay: 0.6s; }

/* Hover Effects */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.hover-btn { transition: transform 0.2s ease; }
.hover-btn:hover { transform: scale(1.03); }
.hover-btn:active { transform: scale(0.98); }
.hover-icon svg { transition: color 0.3s ease, transform 0.3s ease; }
.hover-icon:hover svg { color: #f97316; transform: scale(1.15); }

/* --- Product Detail Figure (in description content) --- */
.product-detail-figure { margin: 0 0 1.5rem 0; }
.product-detail-figure img {
    width: 100%; max-width: 600px; height: auto;
    border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: block; margin: 0 auto;
}

/* --- Product Cards --- */
.product-card-img-wrap { position: relative; background: #f9fafb; }
.product-card-img { transition: transform 0.4s ease; }
.product-card-img-default { transform: scale(1); }
.product-grid-item { transition: all 0.3s ease; }
.product-model-tag {
    font-size: 0.65rem; color: #9ca3af; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
}

/* --- Mobile CTA Bar --- */
.mobile-cta-bar {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: white; padding: 0.75rem 1rem; z-index: 50;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1); border-top: 1px solid #e5e7eb;
}
@media (max-width: 767px) {
    .mobile-cta-bar { display: block; }
    body { padding-bottom: 70px; }
}

/* --- Product Detail Content (Premium) --- */
.db-product-detail {
    line-height: 1.85; color: #374151;
    animation: fadeInUp 0.8s ease;
}
.db-product-detail h2 {
    font-size: 1.5rem; font-weight: 800; color: #111827;
    margin: 2rem 0 1rem; padding-bottom: 0.6rem;
    border-bottom: 3px solid #f97316;
    display: flex; align-items: center; gap: 0.5rem;
}
.db-product-detail h2::before {
    content: ''; display: inline-block; width: 4px; height: 1.2em;
    background: linear-gradient(180deg, #f97316, #ea580c);
    border-radius: 2px; flex-shrink: 0;
}
.db-product-detail h3 {
    font-size: 1.25rem; font-weight: 700; color: #1f2937;
    margin: 1.5rem 0 0.75rem; padding-left: 0.75rem;
    border-left: 3px solid #f97316;
}
.db-product-detail h4 {
    font-size: 1.1rem; font-weight: 600; color: #374151;
    margin: 1.25rem 0 0.5rem;
}
.db-product-detail p { margin-bottom: 1rem; }
.db-product-detail ul, .db-product-detail ol {
    margin: 0.75rem 0; padding-left: 1.5rem;
}
.db-product-detail li {
    margin-bottom: 0.5rem; padding-left: 0.25rem;
    transition: transform 0.2s ease;
}
.db-product-detail li:hover { transform: translateX(4px); }
.db-product-detail li strong { color: #ea580c; }
.db-product-detail table {
    width: 100%; border-collapse: collapse; margin: 1.25rem 0;
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.db-product-detail th {
    background: linear-gradient(135deg, #1f2937, #374151);
    color: white; padding: 0.85rem 1rem; text-align: left;
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
}
.db-product-detail td {
    padding: 0.7rem 1rem; border-bottom: 1px solid #f3f4f6;
    font-size: 0.85rem;
}
.db-product-detail tr:nth-child(even) td { background: #f9fafb; }
.db-product-detail tr:hover td { background: #fff7ed; }
.db-product-detail img {
    max-width: 100%; width: 100%; height: auto;
    border-radius: 12px; margin: 1.5rem 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.db-product-detail img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.db-product-detail figure {
    margin: 1.5rem 0; text-align: center;
}
.db-product-detail figure img {
    max-width: 500px; margin: 0 auto;
}

/* --- Source Site Images --- */
.db-product-detail .db-source-img,
.db-product-detail img[src*="dbfencestore.com"] {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 12px;
    margin: 1.5rem auto;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.db-product-detail .db-source-img:hover,
.db-product-detail img[src*="dbfencestore.com"]:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* --- Product Gallery (auto-downloaded images) --- */
.db-product-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f3f4f6;
}
.db-product-gallery-item {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.db-product-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.db-product-gallery-item .db-product-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.db-product-gallery-item:hover .db-product-img {
    transform: scale(1.05);
}
@media (max-width: 640px) {
    .db-product-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* --- Accordion Cards (Collapsible) - Premium --- */
.db-accordion-cards {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.db-accordion-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.db-accordion-card:hover {
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.12);
    border-color: #fed7aa;
    transform: translateY(-2px);
}
.db-accordion-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, #fafafa, #f5f5f5);
    transition: all 0.3s ease;
}
.db-accordion-header:hover {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
}
.db-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}
.db-accordion-title {
    flex: 1;
    font-weight: 700;
    font-size: 1.05rem;
    color: #111827;
    letter-spacing: -0.01em;
}
.db-accordion-arrow {
    color: #9ca3af;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.db-accordion-open .db-accordion-arrow {
    transform: rotate(180deg);
    color: #f97316;
}
.db-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    padding: 0 1.5rem;
    background: #fff;
}
.db-accordion-open .db-accordion-body {
    max-height: 800px;
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid #f3f4f6;
}
.db-accordion-body ul {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}
.db-accordion-body li {
    margin-bottom: 0.6rem;
    line-height: 1.7;
    position: relative;
}
.db-accordion-body li::marker {
    color: #f97316;
}
.db-accordion-body li strong {
    color: #ea580c;
    font-weight: 700;
}
.db-accordion-body p {
    margin-bottom: 0.75rem;
    color: #4b5563;
    line-height: 1.7;
}

/* --- Elementor Content Area --- */
.db-elementor-content { line-height: 1.8; color: #374151; }
.db-elementor-content h2 { font-size: 1.75rem; font-weight: 800; margin: 2rem 0 1rem; color: #111827; }
.db-elementor-content h3 { font-size: 1.35rem; font-weight: 700; margin: 1.5rem 0 0.75rem; color: #1f2937; }
.db-elementor-content p { margin-bottom: 1rem; }
.db-elementor-content img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; }
.db-elementor-content a { color: #f97316; text-decoration: underline; }

/* --- Timeline --- */
.timeline-line { position: relative; }
.timeline-line::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    left: 50%; width: 2px; background: #e5e7eb;
    transform: translateX(-50%);
}
.timeline-line.animated::before {
    background: linear-gradient(to bottom, #f97316, #ea580c);
    transition: background 2s ease;
}
@media (max-width: 767px) {
    .timeline-line::before { left: 20px; }
}

/* --- Category Filter Tabs --- */
.cat-filter-tabs {
    display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}
.cat-filter-tab {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 1.25rem; border-radius: 9999px;
    background: #f3f4f6; color: #374151; font-weight: 600;
    font-size: 0.85rem; transition: all 0.3s ease;
    text-decoration: none; border: 1px solid transparent;
}
.cat-filter-tab:hover {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white; border-color: #f97316;
    box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}
.cat-filter-tab.active {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white; border-color: #f97316;
    box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}
.cat-count {
    background: rgba(255,255,255,0.2); padding: 0.1rem 0.4rem;
    border-radius: 9999px; font-size: 0.7rem;
}

/* --- Blog Card --- */
.blog-card { transition: all 0.5s ease; }
.blog-card:hover { transform: translateY(-4px); }

/* --- Team Photo --- */
.team-photo { transition: transform 0.5s ease; }
.team-photo:hover { transform: scale(1.02); }

/* --- Back to Top Button --- */
.back-to-top { opacity: 0; pointer-events: none; transform: translateY(20px); transition: all 0.4s ease; }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* --- WhatsApp Pulse Ring --- */
.pulse-ring::before {
    content: ''; position: absolute; inset: -4px;
    border-radius: 50%; border: 2px solid rgba(37,211,102,0.5);
    animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* --- Pagination --- */
.page-numbers { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0; }
.page-numbers li a,
.page-numbers li span {
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
    font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease;
    text-decoration: none;
}
.page-numbers li a {
    border: 1px solid #e5e7eb; color: #4b5563;
}
.page-numbers li a:hover {
    border-color: #f97316; color: #f97316;
}
.page-numbers li span.current {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white; border: none; box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}

/* --- Responsive adjustments --- */
@media (max-width: 1024px) {
    .sidebar-nav-item { padding: 0.6rem 0.75rem; }
    .sidebar-nav-thumb { width: 28px; height: 28px; }
    .sidebar-nav-icon { width: 28px; height: 28px; }
}