/* ========================================
   SVG Icon System — mzlat-theme
   ======================================== */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    line-height: 1;
    color: inherit;
}

.icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Size modifiers */
.icon-xs  { width: 0.75em;  height: 0.75em; }
.icon-sm  { width: 0.875em; height: 0.875em; }
.icon-md  { width: 1em;     height: 1em; }
.icon-lg  { width: 1.25em;  height: 1.25em; }
.icon-xl  { width: 1.5em;   height: 1.5em; }
.icon-2x  { width: 2em;     height: 2em; }
.icon-3x  { width: 3em;     height: 3em; }

/* ---- Navigation ---- */
.navbar-toggle .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.mobile-home-link a .icon,
.dropdown-arrow-desktop .icon {
    width: 0.85em;
    height: 0.85em;
}

.dropdown-toggle-btn .icon {
    width: 0.75rem;
    height: 0.75rem;
}

.breadcrumbs--bar a .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.breadcrumbs .separator .icon,
.breadcrumbs--hero .separator .icon {
    width: 0.65em;
    height: 0.65em;
    opacity: 0.7;
}

/* ---- Carousel & sliders ---- */
.carousel-control .icon {
    width: 1.35rem;
    height: 1.35rem;
    color: #fff;
}

.testimonial-nav .icon {
    width: 1.15rem;
    height: 1.15rem;
    color: #fff;
}

.pillar-nav .icon {
    width: 1rem;
    height: 1rem;
}

/* ---- Buttons & CTA ---- */
.button .icon,
.btn-cta .icon,
.btn-submit .icon {
    width: 1.1em;
    height: 1.1em;
}

.btn-cta-primary .icon {
    color: var(--primary-color);
}

.btn-cta-secondary .icon {
    color: #fff;
}

.btn-cta-secondary:hover .icon {
    color: var(--accent-color);
}

/* ---- Blog cards ---- */
.blog-one-footer .icon {
    width: 0.95em;
    height: 0.95em;
    color: #999;
}

.blog-one-footer a .icon {
    color: inherit;
}

/* ---- Contact section ---- */
.contact-icon > .icon {
    width: 1.35rem;
    height: 1.35rem;
    color: #fff;
}

/* ---- Footer ---- */
.footer-social a {
    color: #fff;
}

.footer-social a .icon {
    width: 1rem;
    height: 1rem;
}

.footer-links li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.footer-links li > .icon {
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.2em;
    color: var(--accent-color);
    opacity: 0.85;
    flex-shrink: 0;
}

.footer-links li a .icon {
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.15em;
    opacity: 0.65;
    flex-shrink: 0;
}

.footer-links li a:hover .icon {
    opacity: 1;
    color: var(--accent-color);
}

.footer-info-item > .icon {
    width: 1.15rem;
    height: 1.15rem;
    color: #fff;
}

/* Social brand colors on hover */
.footer-social a.social-facebook:hover    { background: #1877f2; color: #fff; }
.footer-social a.social-instagram:hover   { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.footer-social a.social-twitter:hover,
.footer-social a.social-x-twitter:hover   { background: #0f1419; color: #fff; }
.footer-social a.social-youtube:hover     { background: #ff0000; color: #fff; }
.footer-social a.social-linkedin-in:hover { background: #0a66c2; color: #fff; }
.footer-social a.social-whatsapp:hover    { background: #25d366; color: #fff; }
.footer-social a.social-tiktok:hover      { background: #010101; color: #fff; }
.footer-social a.social-telegram:hover    { background: #0088cc; color: #fff; }

/* ---- Floating & scroll ---- */
.float-btn .icon {
    width: 1.65rem;
    height: 1.65rem;
    color: #fff;
}

.scroll-top-btn .icon {
    width: 1.15rem;
    height: 1.15rem;
    color: #fff;
}

/* ---- Category page ---- */
.subcat-arrow .icon,
.blog-icon .icon {
    width: 0.85rem;
    height: 0.85rem;
    color: #fff;
}

.category-description-box h2 .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--primary-color);
}

/* ---- Article / post ---- */
.section-title-inner .icon,
.widget-title .icon,
.article-tags h4 .icon,
.article-share h4 .icon {
    width: 1.05em;
    height: 1.05em;
    color: var(--accent-color);
    flex-shrink: 0;
}

.article-date .icon,
.article-author .icon {
    width: 1em;
    height: 1em;
    color: var(--accent-color);
}

.sidebar-card-date .icon {
    width: 0.85em;
    height: 0.85em;
}

.sidebar-card-arrow .icon {
    width: 1rem;
    height: 1rem;
    color: var(--primary-color);
}

.sidebar-card:hover .sidebar-card-arrow .icon {
    color: #fff;
}

.page-toc-header .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--accent-color);
}

.tag-item .icon {
    width: 0.85em;
    height: 0.85em;
}

/* ---- Gallery ---- */
.gallery-section-title .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--accent-color);
}