/*

Theme Name: Dizi Tools Pro

Theme URI: https://dizistore.in

Author: Shish Pal

Author URI: https://dizistore.in

Description: A professional, modern, colorful, and ultra-fast WordPress theme for Free Online Tools and utility portals. Features a dynamic tool registry, SaaS-grade tool interfaces, AdSense-ready policy-compliant ad placement system, live instant search, dark mode, rich Schema.org SEO, and extensive Customizer controls.

Version: 1.6.0

Requires at least: 5.8

Tested up to: 6.7

Requires PHP: 7.4

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: dizi-tools-pro

Tags: online-tools, utility-tools, saas, adsense-ready, dark-mode, custom-colors, custom-menu, full-width-template, translation-ready, theme-options



--------------------------------------------------------------

Dizi Tools Pro Theme Stylesheet

Base styles and CSS reset are defined in assets/css/dizi-main.css

--------------------------------------------------------------

*/



/* Core Theme Defaults */

:root {

    --dizi-primary: #4f46e5;

    --dizi-primary-hover: #4338ca;

    --dizi-primary-light: #eef2ff;

    --dizi-secondary: #06b6d4;

    --dizi-secondary-hover: #0891b2;

    --dizi-secondary-light: #ecfeff;

    --dizi-accent: #f59e0b;

    --dizi-accent-hover: #d97706;

    --dizi-accent-light: #fffbeb;

    --dizi-success: #10b981;

    --dizi-danger: #ef4444;

    --dizi-bg: #f8fafc;

    --dizi-card-bg: #ffffff;

    --dizi-text-main: #0f172a;

    --dizi-text: #0f172a;

    --dizi-text-muted: #64748b;

    --dizi-text-secondary: #64748b;

    --dizi-border: #cbd5e1;

    --dizi-card-border: #cbd5e1;

    --dizi-radius: 16px;

    --dizi-radius-sm: 8px;

    --dizi-radius-lg: 24px;

    --dizi-container: 1280px;

    --dizi-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --dizi-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

    --dizi-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    --dizi-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

    --dizi-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --dizi-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



[data-theme="dark"] {

    --dizi-bg: #0b1120;

    --dizi-card-bg: #1e293b;

    --dizi-text-main: #f8fafc;

    --dizi-text: #f8fafc;

    --dizi-text-muted: #94a3b8;

    --dizi-text-secondary: #94a3b8;

    --dizi-border: #334155;

    --dizi-card-border: #334155;

    --dizi-primary-light: rgba(99, 102, 241, 0.15);

    --dizi-secondary-light: rgba(6, 182, 212, 0.15);

    --dizi-accent-light: rgba(245, 158, 11, 0.15);

    --dizi-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

    --dizi-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);

    --dizi-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

}



/* Icon Safety & Newsletter Alignment */

svg.dizi-icon-xs,

.dizi-icon-xs,

.dizi-privacy-icon,

.dizi-newsletter-lock-icon svg,

.dizi-newsletter-privacy svg {

    width: 14px !important;

    height: 14px !important;

    min-width: 14px !important;

    max-width: 14px !important;

    min-height: 14px !important;

    max-height: 14px !important;

    display: inline-block !important;

    vertical-align: middle !important;

    flex-shrink: 0 !important;

}



.dizi-newsletter-privacy {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    margin-top: 18px !important;

    font-size: 0.84rem !important;

    color: rgba(255, 255, 255, 0.9) !important;

    line-height: 1.4 !important;

    text-align: center !important;

}



.dizi-newsletter-lock-icon {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 16px !important;

    height: 16px !important;

    flex-shrink: 0 !important;

}



/* Header Search Button hidden on Home page where Hero Search is active */

body.home .dizi-search-trigger,

.home #diziHeaderSearchBtn,

.dizi-search-hint-kbd,

.dizi-search-kbd {

    display: none !important;

}



/* Ad Placeholders and Empty Slots Hidden */

.dizi-ad-placeholder,

.dizi-ad-dashed-box,

.dizi-side-rails-container:empty,

.dizi-ad-wrapper:empty {

    display: none !important;

}



/* Floating Side Rails (Left & Right 160x600) */

@media (min-width: 1480px) {

    .dizi-side-rail {

        display: block !important;

        position: fixed !important;

        top: 105px !important;

        width: 160px !important;

        height: 600px !important;

        z-index: 40 !important;

    }

    .dizi-side-rail-left {

        left: max(12px, calc(50% - 640px - 180px)) !important;

    }

    .dizi-side-rail-right {

        right: max(12px, calc(50% - 640px - 180px)) !important;

    }

}



/* Header Logo & Navigation Alignment (Close Gap, Push Actions Right) */

.dizi-header-container {

    display: flex !important;

    align-items: center !important;

    gap: 24px !important;

}



@media (max-width: 768px) {

    .dizi-header-container {

        gap: 10px !important;

    }

}



@media (min-width: 1024px) {

    .main-navigation {

        display: flex !important;

        align-items: center !important;

        margin-right: auto !important;

    }

}



/* Header Action Buttons Equal Height (Strict 40px) */

.dizi-header-actions {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin-left: auto !important;

    flex-shrink: 0 !important;

}



.dizi-header-actions .dizi-action-btn,

.dizi-header-actions .dizi-pwa-install-btn,

.dizi-header-actions .dizi-user-pill-btn,

.dizi-header-actions .dizi-btn-signin {

    height: 40px !important;

    min-height: 40px !important;

    max-height: 40px !important;

    box-sizing: border-box !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    line-height: 1 !important;

    margin: 0 !important;

    vertical-align: middle !important;

}



.dizi-header-actions .dizi-action-btn {

    width: 40px !important;

    min-width: 40px !important;

    max-width: 40px !important;

    padding: 0 !important;

    border-radius: 10px !important;

}



/* Mobile Hamburger Button (Strictly Hidden on Desktop) */

.dizi-mobile-menu-btn,

.dizi-header-actions .dizi-mobile-menu-btn {

    height: 40px !important;

    width: 40px !important;

    min-width: 40px !important;

    max-width: 40px !important;

    padding: 9px !important;

    border-radius: 10px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

}



@media (min-width: 1024px) {

    .dizi-mobile-menu-btn,

    .dizi-header-actions .dizi-mobile-menu-btn {

        display: none !important;

    }

}



@media (max-width: 1023px) {

    .dizi-mobile-menu-btn,

    .dizi-header-actions .dizi-mobile-menu-btn {

        display: inline-flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 5px !important;

    }

}



.dizi-header-actions .dizi-pwa-install-btn {

    padding: 0 16px !important;

    border-radius: 9999px !important;

}



.dizi-header-actions .dizi-user-pill-btn {

    padding: 0 14px 0 5px !important;

    border-radius: 9999px !important;

    justify-content: flex-start !important;

}



/* On Mobile Screens (<= 768px): Hide duplicate buttons that now live in the bottom navigation bar */

@media (max-width: 768px) {

    .dizi-header-actions .dizi-fav-header-btn,

    .dizi-header-actions .dizi-pwa-install-btn,

    .dizi-header-actions .dizi-search-trigger,

    .dizi-header-actions .dizi-btn-signin,

    .dizi-header-actions .dizi-user-dropdown-wrap {

        display: none !important;

    }

}



.dizi-header-actions .dizi-user-avatar-wrap {

    width: 30px !important;

    height: 30px !important;

    border-radius: 50% !important;

}



.dizi-header-actions .dizi-btn-signin {

    padding: 0 18px !important;

    border-radius: 9999px !important;

}



/* ==========================================================================

   MOBILE RESPONSIVE ARCHITECTURE (Titles, Buttons, Cards, Grids & Layouts)

   ========================================================================== */



/* Tablet & Mobile Breakpoint (<= 768px) */

@media (max-width: 768px) {

    html, body {

        overflow-x: hidden !important;

    }



    body {

        padding-bottom: 74px !important; /* Clearance for mobile bottom dock */

    }



    .dizi-container {

        padding-left: 18px !important;

        padding-right: 18px !important;

    }



    .dizi-hero-headline {

        font-size: 2.3rem !important;

        line-height: 1.2 !important;

    }



    .dizi-section-title {

        font-size: 1.75rem !important;

        line-height: 1.25 !important;

    }



    .dizi-tool-main-title {

        font-size: 1.75rem !important;

        line-height: 1.25 !important;

    }



    /* Mobile Clean Header: Hide bulky Recently Used strip, Breadcrumbs & Reset Workspace on mobile */

    .dizi-recent-tools-strip,

    .dizi-breadcrumbs-wrapper,

    #diziWorkspaceReset,

    .dizi-saas-reset-btn {

        display: none !important;

    }

}



/* Smartphone Breakpoint (<= 640px) */

@media (max-width: 640px) {

    /* 1. Containers & Spacing */

    .dizi-container {

        padding-left: 14px !important;

        padding-right: 14px !important;

    }



    .dizi-section {

        margin: 32px 0 !important;

    }



    .dizi-section-header {

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 12px !important;

        margin-bottom: 20px !important;

    }



    .dizi-section-header.text-center {

        align-items: center !important;

        text-align: center !important;

        margin-bottom: 24px !important;

    }



    .dizi-section-title-group {

        max-width: 100% !important;

        width: 100% !important;

    }



    /* 2. Responsive Titles & Headings */

    .dizi-hero-headline {

        font-size: clamp(1.72rem, 5.8vw, 2.05rem) !important;

        line-height: 1.22 !important;

        margin-bottom: 12px !important;

        letter-spacing: -0.025em !important;

        word-wrap: break-word !important;

        overflow-wrap: break-word !important;

    }



    .dizi-hero-gradient-text {

        display: inline-block !important;

        margin-top: 4px !important;

    }



    .dizi-hero-subheading {

        font-size: 0.94rem !important;

        line-height: 1.55 !important;

        margin-bottom: 22px !important;

        padding: 0 4px !important;

        max-width: 100% !important;

    }



    .dizi-hero-badge-group {

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: center !important;

        gap: 6px !important;

        margin-bottom: 14px !important;

    }



    .dizi-hero-badge-pill,

    .dizi-hero-badge-subpill {

        font-size: 0.74rem !important;

        padding: 4px 10px !important;

        border-radius: 20px !important;

    }



    .dizi-section-title {

        font-size: 1.42rem !important;

        line-height: 1.25 !important;

        margin-bottom: 6px !important;

        letter-spacing: -0.02em !important;

    }



    .dizi-section-desc {

        font-size: 0.88rem !important;

        line-height: 1.5 !important;

    }



    .dizi-section-badge {

        font-size: 0.74rem !important;

        margin-bottom: 6px !important;

        gap: 5px !important;

    }



    .dizi-tool-main-title {

        font-size: 1.45rem !important;

        line-height: 1.25 !important;

        margin-bottom: 6px !important;

        letter-spacing: -0.02em !important;

    }



    .dizi-tool-short-desc {

        font-size: 0.88rem !important;

        line-height: 1.5 !important;

    }



    .dizi-directory-title {

        font-size: 1.55rem !important;

        line-height: 1.25 !important;

        margin-bottom: 6px !important;

    }



    .dizi-directory-desc {

        font-size: 0.88rem !important;

        line-height: 1.5 !important;

    }



    .dizi-guide-heading {

        font-size: 1.18rem !important;

        gap: 8px !important;

        margin-bottom: 14px !important;

        padding-bottom: 12px !important;

    }



    .dizi-cta-title {

        font-size: 1.55rem !important;

        line-height: 1.25 !important;

        margin-bottom: 10px !important;

    }



    .dizi-cta-desc {

        font-size: 0.9rem !important;

        line-height: 1.5 !important;

        margin-bottom: 20px !important;

    }



    .dizi-footer-brand-title {

        font-size: 1.2rem !important;

    }



    .dizi-footer-heading {

        font-size: 0.98rem !important;

        margin-bottom: 12px !important;

    }



    /* 3. Hero Search & Category Chips */

    .dizi-hero-search-box {

        margin: 0 auto 22px !important;

        width: 100% !important;

    }



    .dizi-hero-search-form {

        padding: 5px 6px 5px 14px !important;

        border-radius: 30px !important;

    }



    .dizi-hero-search-input {

        font-size: 0.92rem !important;

        padding: 8px 0 !important;

    }



    .dizi-hero-search-submit {

        padding: 9px 14px !important;

        font-size: 0.82rem !important;

        border-radius: 24px !important;

        height: 38px !important;

        box-sizing: border-box !important;

    }



    .dizi-hero-search-submit span {

        display: none !important;

    }



    .dizi-hero-shortcuts {

        gap: 6px !important;

        margin-bottom: 24px !important;

    }



    .dizi-shortcuts-label {

        width: 100% !important;

        text-align: center !important;

        font-size: 0.8rem !important;

        margin-bottom: 2px !important;

    }



    .dizi-shortcuts-list {

        gap: 6px !important;

        justify-content: center !important;

    }



    .dizi-shortcut-chip {

        padding: 5px 10px !important;

        font-size: 0.78rem !important;

        border-radius: 16px !important;

        gap: 6px !important;

    }



    .dizi-chip-icon-box {

        width: 20px !important;

        height: 20px !important;

        border-radius: 5px !important;

    }



    .dizi-chip-svg {

        width: 11px !important;

        height: 11px !important;

    }



    /* 4. Hero Stats Cards (2-Column Mobile Grid) */

    .dizi-hero-stats-strip {

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

    }



    .dizi-stat-item {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        padding: 12px 10px !important;

        gap: 8px !important;

        min-width: 0 !important;

        width: 100% !important;

        box-sizing: border-box !important;

        border-radius: 12px !important;

    }



    .dizi-stat-icon-wrap {

        width: 36px !important;

        height: 36px !important;

        border-radius: 10px !important;

        flex-shrink: 0 !important;

    }



    .dizi-stat-icon {

        width: 18px !important;

        height: 18px !important;

    }



    .dizi-stat-info {

        display: flex !important;

        flex-direction: column !important;

        gap: 2px !important;

        min-width: 0 !important;

        width: 100% !important;

        text-align: left !important;

    }



    .dizi-stat-number {

        font-size: 0.92rem !important;

        font-weight: 800 !important;

        line-height: 1.25 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

    }



    .dizi-stat-label {

        font-size: 0.72rem !important;

        line-height: 1.35 !important;

        color: var(--dizi-text-muted) !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

    }



    /* 5. Tool Cards Responsive Enhancement */

    .dizi-tools-grid {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }



    .dizi-tool-card {

        padding: 16px 14px !important;

        border-radius: 14px !important;

    }



    .dizi-card-header {

        margin-bottom: 12px !important;

        gap: 8px !important;

    }



    .dizi-tool-icon-wrapper {

        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        min-height: 44px !important;

        flex-shrink: 0 !important;

        border-radius: 12px !important;

    }



    .dizi-card-icon {

        width: 22px !important;

        height: 22px !important;

    }



    .dizi-tool-category-pill {

        font-size: 0.7rem !important;

        padding: 2px 7px !important;

        margin-bottom: 6px !important;

    }



    .dizi-tool-title {

        font-size: 1.05rem !important;

        line-height: 1.3 !important;

        margin-bottom: 6px !important;

    }



    .dizi-tool-desc {

        font-size: 0.84rem !important;

        line-height: 1.45 !important;

        margin-bottom: 12px !important;

        display: -webkit-box !important;

        -webkit-line-clamp: 2 !important;

        -webkit-box-orient: vertical !important;

        overflow: hidden !important;

    }



    .dizi-card-footer {

        padding-top: 10px !important;

        margin-top: auto !important;

    }



    /* 6. Tap-Friendly Mobile Buttons */

    .dizi-btn-open-tool {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        width: 100% !important;

        padding: 8px 14px !important;

        border-radius: 10px !important;

        background: var(--dizi-primary-light) !important;

        color: var(--dizi-primary) !important;

        font-size: 0.82rem !important;

        font-weight: 700 !important;

        box-sizing: border-box !important;

    }



    [data-theme="dark"] .dizi-btn-open-tool {

        background: rgba(99, 102, 241, 0.16) !important;

        color: #818cf8 !important;

    }



    .dizi-card-fav-btn {

        width: 36px !important;

        height: 36px !important;

        min-width: 36px !important;

        max-width: 36px !important;

        border-radius: 50% !important;

    }



    .dizi-section-cta {

        width: 100% !important;

        margin-left: 0 !important;

    }



    .dizi-section-cta .dizi-btn-text {

        width: 100% !important;

        justify-content: center !important;

        padding: 10px 16px !important;

        font-size: 0.84rem !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;

    }



    /* 7. Category Cards (2-Column Mobile Grid) */

    .dizi-categories-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

    }



    .dizi-category-card {

        padding: 12px 10px !important;

        gap: 10px !important;

        border-radius: 12px !important;

        min-width: 0 !important;

    }



    .dizi-cat-icon-box {

        width: 38px !important;

        height: 38px !important;

        border-radius: 10px !important;

    }



    .dizi-cat-icon {

        width: 18px !important;

        height: 18px !important;

    }



    .dizi-cat-details {

        min-width: 0 !important;

        overflow: hidden !important;

    }



    .dizi-cat-name {

        font-size: 0.86rem !important;

        font-weight: 700 !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

    }



    .dizi-cat-count {

        font-size: 0.72rem !important;

    }



    .dizi-cat-arrow {

        display: none !important;

    }



    /* 8. Why Us Feature Cards */

    .dizi-features-grid {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }



    .dizi-features-grid .dizi-feature-card {

        padding: 18px 16px !important;

        border-radius: 14px !important;

    }



    .dizi-feature-icon-box {

        width: 42px !important;

        height: 42px !important;

        border-radius: 12px !important;

        margin-bottom: 12px !important;

    }



    .dizi-feat-icon {

        width: 20px !important;

        height: 20px !important;

    }



    .dizi-feature-card h3 {

        font-size: 1.05rem !important;

        margin-bottom: 6px !important;

    }



    .dizi-feature-card p {

        font-size: 0.86rem !important;

        line-height: 1.5 !important;

    }



    /* 9. How It Works Step Cards */

    .dizi-steps-grid {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }



    .dizi-step-card {

        padding: 18px 16px !important;

        border-radius: 14px !important;

    }



    .dizi-step-num {

        font-size: 1.6rem !important;

        margin-bottom: 6px !important;

    }



    .dizi-step-card h3 {

        font-size: 1.05rem !important;

        margin-bottom: 6px !important;

    }



    .dizi-step-card p {

        font-size: 0.86rem !important;

        line-height: 1.5 !important;

    }



    /* 10. Blog Post Cards */

    .dizi-blog-grid {

        grid-template-columns: 1fr !important;

        gap: 14px !important;

    }



    .dizi-post-card {

        border-radius: 14px !important;

    }



    .dizi-post-thumb img {

        height: 160px !important;

    }



    .dizi-post-body {

        padding: 16px !important;

    }



    .dizi-post-title {

        font-size: 1.05rem !important;

        margin-bottom: 6px !important;

    }



    .dizi-post-excerpt {

        font-size: 0.85rem !important;

        margin-bottom: 12px !important;

    }



    /* 11. Single Tool Header & Workspace */

    .dizi-tool-header {

        margin: 14px 0 20px !important;

        gap: 14px !important;

    }



    .dizi-tool-header-left {

        gap: 14px !important;

        min-width: 0 !important;

        width: 100% !important;

    }



    .dizi-tool-header-icon {

        width: 48px !important;

        height: 48px !important;

        border-radius: 14px !important;

    }



    .dizi-header-icon-svg {

        width: 24px !important;

        height: 24px !important;

    }



    .dizi-tool-header-right {

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;

        width: 100% !important;

        margin-top: 6px !important;

    }



    .dizi-tool-header-right .dizi-btn-outline {

        width: 100% !important;

        justify-content: center !important;

        height: 40px !important;

        padding: 0 10px !important;

        font-size: 0.8rem !important;

        border-radius: 10px !important;

        box-sizing: border-box !important;

    }



    .dizi-saas-workspace {

        border-radius: 14px !important;

        margin: 14px 0 24px !important;

    }



    .dizi-saas-appbar {

        padding: 10px 14px !important;

        gap: 8px !important;

        flex-wrap: wrap !important;

    }



    .dizi-saas-status-label {

        display: none !important;

    }



    .dizi-saas-appbar-right {

        margin-left: auto !important;

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;

    }



    #diziWorkspaceReset,

    .dizi-saas-reset-btn {

        display: none !important;

    }



    .dizi-saas-action-btn {

        padding: 6px 12px !important;

        font-size: 0.78rem !important;

        border-radius: 999px !important;

        white-space: nowrap !important;

    }



    .dizi-saas-body {

        padding: 16px 14px !important;

        min-height: auto !important;

    }



    .dizi-dropzone {

        padding: 28px 14px !important;

        border-radius: 12px !important;

    }



    .dizi-dropzone-icon {

        width: 42px !important;

        height: 42px !important;

        margin-bottom: 10px !important;

    }



    .dizi-dropzone h3 {

        font-size: 1.05rem !important;

    }



    .dizi-dropzone p {

        font-size: 0.82rem !important;

        margin-bottom: 12px !important;

    }



    .dizi-tool-controls {

        padding: 16px 14px !important;

        gap: 14px !important;

        margin: 16px 0 !important;

        border-radius: 12px !important;

    }



    .dizi-input-field,

    .dizi-select-field {

        padding: 10px 12px !important;

        font-size: 0.9rem !important;

        border-radius: 10px !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }



    .dizi-action-row {

        flex-direction: column !important;

        width: 100% !important;

        gap: 10px !important;

    }



    .dizi-action-row button,

    .dizi-action-row a,

    .dizi-btn-action,

    .dizi-btn-convert,

    .dizi-btn-download,

    .dizi-btn-copy {

        width: 100% !important;

        justify-content: center !important;

        height: 44px !important;

        font-size: 0.92rem !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;

    }



    .dizi-pass-upload-buttons,

    .dizi-bg-upload-buttons {

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        max-width: 320px !important;

        margin-left: auto !important;

        margin-right: auto !important;

        gap: 10px !important;

    }



    .dizi-pass-upload-buttons button,

    .dizi-bg-upload-buttons button {

        width: 100% !important;

        justify-content: center !important;

        padding: 12px 16px !important;

        font-size: 0.92rem !important;

        box-sizing: border-box !important;

    }



    .dizi-calc-result-card {

        padding: 20px 16px !important;

        border-radius: 14px !important;

    }



    .dizi-calc-result-value {

        font-size: clamp(1.75rem, 6vw, 2.3rem) !important;

    }



    .dizi-chained-actions-bar {

        padding: 16px 14px !important;

        border-radius: 12px !important;

    }



    .dizi-chained-pills {

        grid-template-columns: 1fr !important;

        gap: 8px !important;

    }



    .dizi-chain-pill {

        padding: 10px 12px !important;

        border-radius: 10px !important;

        font-size: 0.84rem !important;

    }



    .dizi-tool-rating-box {

        padding: 14px 16px !important;

        border-radius: 12px !important;

    }



    .dizi-rating-inner {

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

        gap: 10px !important;

    }



    .dizi-guide-card {

        padding: 18px 16px !important;

        border-radius: 14px !important;

    }



    .dizi-ordered-step {

        padding: 14px 12px !important;

        border-radius: 10px !important;

    }



    .dizi-faq-question {

        padding: 14px 16px !important;

        font-size: 0.95rem !important;

    }



    .dizi-faq-answer {

        padding: 0 16px 14px !important;

        font-size: 0.88rem !important;

    }



    /* 12. Directory Category Filter Tabs (Multi-line Wrap for Full Mobile Visibility) */

    .dizi-category-filter-pills {

        display: flex !important;

        flex-wrap: wrap !important;

        overflow-x: visible !important;

        gap: 8px !important;

        margin: 0 0 16px 0 !important;

        padding: 0 !important;

        width: 100% !important;

    }



    .dizi-cat-tab-btn {

        display: inline-flex !important;

        align-items: center !important;

        gap: 6px !important;

        padding: 7px 13px !important;

        font-size: 0.82rem !important;

        font-weight: 600 !important;

        border-radius: 20px !important;

        box-sizing: border-box !important;

    }



    .dizi-cat-tab-btn .dizi-tab-count {

        font-size: 0.72rem !important;

        padding: 1px 6px !important;

        border-radius: 10px !important;

    }



    .dizi-filter-actions {

        width: 100% !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 10px !important;

    }



    .dizi-sort-select {

        width: 100% !important;

        padding: 9px 12px !important;

        font-size: 0.88rem !important;

    }



    /* 13. CTA Banner & Newsletter Form */

    .dizi-cta-banner {

        padding: 34px 18px !important;

        border-radius: 18px !important;

    }



    .dizi-newsletter-input-group {

        flex-direction: column !important;

        background: transparent !important;

        box-shadow: none !important;

        padding: 0 !important;

        gap: 10px !important;

    }



    .dizi-newsletter-input-group input {

        background: #ffffff !important;

        border-radius: 22px !important;

        padding: 12px 18px !important;

        width: 100% !important;

        font-size: 0.92rem !important;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;

    }



    .dizi-newsletter-btn {

        width: 100% !important;

        justify-content: center !important;

        height: 44px !important;

        padding: 0 20px !important;

        border-radius: 22px !important;

        font-size: 0.92rem !important;

    }



    /* 14. Footer Responsiveness */

    .site-footer {

        padding: 44px 0 24px !important;

        margin-bottom: 0 !important;

    }



    .dizi-footer-grid {

        gap: 28px !important;

        margin-bottom: 32px !important;

    }



    .dizi-footer-bottom {

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;

        gap: 12px !important;

        padding-top: 20px !important;

    }



    .dizi-back-to-top {

        bottom: 84px !important; /* Positioned above mobile bottom dock */

        right: 14px !important;

        width: 38px !important;

        height: 38px !important;

    }

}



/* Small Smartphone Breakpoint (<= 380px) */

@media (max-width: 380px) {

    .dizi-container {

        padding-left: 10px !important;

        padding-right: 10px !important;

    }



    .dizi-hero-headline {

        font-size: 1.55rem !important;

    }



    .dizi-section-title,

    .dizi-tool-main-title {

        font-size: 1.28rem !important;

    }



    .dizi-hero-stats-strip {

        gap: 8px !important;

    }



    .dizi-stat-item {

        padding: 10px 8px !important;

        gap: 6px !important;

    }



    .dizi-stat-icon-wrap {

        width: 32px !important;

        height: 32px !important;

        border-radius: 8px !important;

    }



    .dizi-stat-icon {

        width: 16px !important;

        height: 16px !important;

    }



    .dizi-stat-number {

        font-size: 0.86rem !important;

    }



    .dizi-stat-label {

        font-size: 0.68rem !important;

    }



    .dizi-categories-grid {

        gap: 8px !important;

    }



    .dizi-category-card {

        padding: 10px 8px !important;

        gap: 8px !important;

    }



    .dizi-cat-icon-box {

        width: 34px !important;

        height: 34px !important;

        border-radius: 8px !important;

    }



    .dizi-cat-icon {

        width: 16px !important;

        height: 16px !important;

    }



    .dizi-cat-name {

        font-size: 0.82rem !important;

    }



    .dizi-tool-header-right {

        grid-template-columns: 1fr !important;

    }

}



/* ==========================================================================

   DIZI PRO LOCK SCREEN & MONETIZATION STYLES

   ========================================================================== */

.dizi-pro-lock-card {

    position: relative;

    max-width: 760px;

    margin: 40px auto;

    padding: 48px 36px;

    border-radius: 24px;

    background: linear-gradient(145deg, #ffffff 0%, #fdf8f0 100%);

    border: 1.5px solid rgba(245, 158, 11, 0.28);

    box-shadow: 0 20px 50px -12px rgba(245, 158, 11, 0.18), 0 4px 20px rgba(0, 0, 0, 0.04);

    text-align: center;

    overflow: hidden;

    backdrop-filter: blur(12px);

    transition: all 0.3s ease;

}



[data-theme="dark"] .dizi-pro-lock-card {

    background: linear-gradient(145deg, #181d28 0%, #1e1b16 100%);

    border-color: rgba(245, 158, 11, 0.35);

    box-shadow: 0 20px 50px -12px rgba(245, 158, 11, 0.25), 0 4px 20px rgba(0, 0, 0, 0.3);

}



.dizi-pro-lock-glow {

    position: absolute;

    top: -60px;

    left: 50%;

    transform: translateX(-50%);

    width: 320px;

    height: 180px;

    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0) 70%);

    pointer-events: none;

    border-radius: 50%;

    filter: blur(24px);

}



.dizi-pro-lock-inner {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.dizi-pro-crown-badge {

    width: 76px;

    height: 76px;

    border-radius: 50%;

    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);

    border: 3px solid #f59e0b;

    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    margin-bottom: 20px;

    animation: diziCrownFloat 3.5s ease-in-out infinite;

}



[data-theme="dark"] .dizi-pro-crown-badge {

    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);

    border-color: #fbbf24;

}



@keyframes diziCrownFloat {

    0%, 100% {

        transform: translateY(0) scale(1);

    }

    50% {

        transform: translateY(-6px) scale(1.04);

    }

}



.dizi-pro-pill-label {

    display: inline-block;

    padding: 5px 16px;

    border-radius: 30px;

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    color: #ffffff;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);

    margin-bottom: 14px;

}



.dizi-pro-lock-title {

    font-size: 1.85rem;

    font-weight: 800;

    color: var(--dizi-text-main, #0f172a);

    margin: 0 0 12px 0;

    line-height: 1.25;

}



[data-theme="dark"] .dizi-pro-lock-title {

    color: #f8fafc;

}



.dizi-pro-lock-desc {

    max-width: 580px;

    margin: 0 auto 28px;

    font-size: 0.98rem;

    color: var(--dizi-text-muted, #64748b);

    line-height: 1.6;

}



[data-theme="dark"] .dizi-pro-lock-desc {

    color: #94a3b8;

}



.dizi-pro-benefits-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px 20px;

    max-width: 620px;

    margin: 0 auto 34px;

    text-align: left;

}



.dizi-pro-benefit-item {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 0.88rem;

    font-weight: 600;

    color: var(--dizi-text-main, #1e293b);

    background: rgba(255, 255, 255, 0.7);

    padding: 10px 14px;

    border-radius: 12px;

    border: 1px solid rgba(226, 232, 240, 0.8);

    transition: transform 0.2s ease;

}



[data-theme="dark"] .dizi-pro-benefit-item {

    background: rgba(30, 41, 59, 0.6);

    border-color: rgba(51, 65, 85, 0.8);

    color: #e2e8f0;

}



.dizi-pro-benefit-item:hover {

    transform: translateY(-1px);

}



.dizi-benefit-check {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: #10b981;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    flex-shrink: 0;

}



.dizi-pro-lock-actions {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

    width: 100%;

}



.dizi-btn-upgrade-pro {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px 36px;

    border-radius: 14px;

    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);

    color: #ffffff !important;

    font-size: 1.05rem;

    font-weight: 800;

    text-decoration: none;

    box-shadow: 0 10px 25px -4px rgba(234, 88, 12, 0.45);

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    letter-spacing: 0.01em;

}



.dizi-btn-upgrade-pro:hover {

    transform: translateY(-3px) scale(1.02);

    box-shadow: 0 16px 32px -4px rgba(234, 88, 12, 0.55);

    color: #ffffff !important;

}



.dizi-pro-login-prompt {

    font-size: 0.86rem;

    color: var(--dizi-text-muted, #64748b);

    display: flex;

    align-items: center;

    gap: 6px;

}



[data-theme="dark"] .dizi-pro-login-prompt {

    color: #94a3b8;

}



.dizi-pro-login-link {

    color: #f59e0b;

    font-weight: 700;

    text-decoration: none;

    transition: color 0.15s ease;

}



.dizi-pro-login-link:hover {

    color: #ea580c;

    text-decoration: underline;

}



@media (max-width: 640px) {

    .dizi-pro-lock-card {

        padding: 32px 18px;

        margin: 24px 10px;

        border-radius: 18px;

    }



    .dizi-pro-lock-title {

        font-size: 1.4rem;

    }



    .dizi-pro-benefits-grid {

        grid-template-columns: 1fr;

        gap: 10px;

    }



    .dizi-btn-upgrade-pro {

        width: 100%;

        padding: 14px 20px;

        font-size: 0.95rem;

    }

}



/* Tool Card Header & Icon Flex Safety */

.dizi-tool-card .dizi-card-header {

    display: flex !important;

    align-items: flex-start !important;

    justify-content: space-between !important;

    gap: 12px !important;

}



.dizi-tool-card .dizi-tool-icon-wrapper {

    width: 52px !important;

    height: 52px !important;

    min-width: 52px !important;

    min-height: 52px !important;

    flex-shrink: 0 !important;

}



.dizi-tool-card .dizi-card-top-right {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 6px !important;

    flex: 1 !important;

    min-width: 0 !important;

}



.dizi-tool-card .dizi-card-badges {

    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    flex-wrap: wrap !important;

    justify-content: flex-end !important;

}



.dizi-tool-card .dizi-badge {

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.dizi-tool-card .dizi-badge-pro {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;

    color: #ffffff !important;

    font-weight: 800 !important;

    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;

    letter-spacing: 0.02em !important;

}



.dizi-tool-card .dizi-card-fav-btn {

    flex-shrink: 0 !important;

}



/* ==========================================================================
   Mobile Header Action Button Visibility Controls (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .dizi-mob-hide,
    .dizi-header-actions .dizi-mob-hide,
    .dizi-header-actions.dizi-mobile-actions-disabled > .dizi-header-search-wrap,
    .dizi-header-actions.dizi-mobile-actions-disabled > .dizi-cart-header-btn,
    .dizi-header-actions.dizi-mobile-actions-disabled > .dizi-fav-header-btn,
    .dizi-header-actions.dizi-mobile-actions-disabled > .dizi-darkmode-toggle {
        display: none !important;
    }
}

/* ==========================================================================
   Remove Default Browser Up/Down Number Spinners from Quantity Inputs
   ========================================================================== */
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button,
form.cart .quantity input.qty::-webkit-outer-spin-button,
form.cart .quantity input.qty::-webkit-inner-spin-button,
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

.woocommerce .quantity input.qty,
form.cart .quantity input.qty,
.quantity input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}