/* ==================================
   UXD Widgets Frontend Styles
   ================================== */

/* Elementor Panel Fixes */
.elementor-panel {
    max-height: 100vh !important;
    overflow-y: auto !important;
}

.elementor-panel-content-wrapper {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
}

#elementor-panel-elements-wrapper {
    padding-bottom: 100px !important;
}

.elementor-control-type-section {
    position: relative;
    z-index: 1;
}

/* Hero Section Widget */
.uxdwfe-hero-section-widget {
    position: relative;
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    overflow: hidden;
}

/* Minimal UXD Widgets CSS
    NOTE: Most widget styling has been removed to rely on Elementor controls/defaults.
    Kept only minimal styles required for the video popup modal to function.
*/

/* Video popup modal */
.uxdwfe-video-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.uxdwfe-video-modal{max-width:90%;max-height:90%;width:960px;background:transparent;border-radius:6px;overflow:hidden;position:relative}
.uxdwfe-video-modal-content{position:relative;padding-top:56.25%;height:0}
.uxdwfe-video-modal-content iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.uxdwfe-video-modal-close{position:absolute;top:-12px;right:-12px;background:#fff;border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:18px;line-height:36px;text-align:center}

/* Keep the play button minimally styled so it's usable if Elementor hasn't added styles */
.uxdwfe-video-play-button{display:inline-flex;align-items:center;justify-content:center;padding:12px;border-radius:50%;background:transparent;border:1px solid transparent}

/* End of minimal CSS */
.uxdwfe-hero-subtitle {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 15px 0;
    opacity: 0.9;
}

.uxdwfe-hero-title {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.uxdwfe-hero-description {
    font-size: 20px;
    margin: 0 0 30px 0;
    opacity: 0.9;
}

/* Hero Button Wrapper */
.uxdwfe-hero-button-wrapper {
    margin-top: 30px;
}

.uxdwfe-hero-button-wrapper.uxdwfe-hero-button-align-left {
    text-align: left;
}

.uxdwfe-hero-button-wrapper.uxdwfe-hero-button-align-center {
    text-align: center;
}

.uxdwfe-hero-button-wrapper.uxdwfe-hero-button-align-right {
    text-align: right;
}

.uxdwfe-hero-button-wrapper.uxdwfe-hero-button-align-full {
    text-align: left;
}

/* Hero Button Base */
.uxdwfe-hero-button {
    display: inline-block;
    padding: 15px 40px;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.uxdwfe-hero-button:hover {
    background: #764ba2;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Hero Button Sizes */
.uxdwfe-hero-button.uxdwfe-hero-button-sm {
    padding: 12px 30px;
    font-size: 14px;
}

.uxdwfe-hero-button.uxdwfe-hero-button-md {
    padding: 15px 40px;
    font-size: 16px;
}

.uxdwfe-hero-button.uxdwfe-hero-button-lg {
    padding: 18px 50px;
    font-size: 18px;
}

/* Full Width Button */
.uxdwfe-hero-button-align-full .uxdwfe-hero-button {
    width: 100%;
}

/* Pricing Table Widget */
.uxdwfe-pricing-table-widget {
    position: relative;
    text-align: center;
    padding: 50px 40px;
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.uxdwfe-pricing-table-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.uxdwfe-pricing-table-widget:hover::before {
    transform: scaleX(1);
}

.uxdwfe-pricing-table-widget:hover {
    border-color: #667eea;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.15);
    transform: translateY(-8px);
}

.uxdwfe-pricing-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    font-size: 36px;
    color: white;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.uxdwfe-pricing-icon i,
.uxdwfe-pricing-icon svg {
    width: 36px;
    height: 36px;
}

.uxdwfe-pricing-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.uxdwfe-pricing-plan-name {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #1f2937;
    letter-spacing: -0.5px;
}

.uxdwfe-pricing-description {
    font-size: 14px;
    color: #646970;
    margin-bottom: 20px;
}

.uxdwfe-pricing-price-wrapper {
    margin: 25px 0;
    padding: 20px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}

.uxdwfe-pricing-currency {
    font-size: 28px;
    font-weight: 700;
    color: #667eea;
    vertical-align: super;
    margin-right: 4px;
}

.uxdwfe-pricing-price {
    font-size: 64px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.uxdwfe-pricing-features {
    list-style: none;
    padding: 0;
    margin: 35px 0;
    text-align: left;
}

.uxdwfe-pricing-features li {
    padding: 16px 0;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.uxdwfe-pricing-features li:hover {
    padding-left: 8px;
    color: #1f2937;
}

.uxdwfe-pricing-features li:last-child {
    border-bottom: none;
}

.uxdwfe-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}

.uxdwfe-pricing-button {
    display: inline-block;
    width: 100%;
    padding: 18px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.uxdwfe-pricing-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.uxdwfe-pricing-button:hover::before {
    left: 100%;
}

.uxdwfe-pricing-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

/* Team Members Widget */
.uxdwfe-team-members-widget {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.uxdwfe-team-members-widget h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* CTA Box Widget */
.uxdwfe-cta-box-widget {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 60px 40px;
    border-radius: 12px;
    text-align: center;
}

/* CTA Split Layouts */
.uxdwfe-cta-box-widget.uxdwfe-cta-layout-split-left,
.uxdwfe-cta-box-widget.uxdwfe-cta-layout-split-right {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
}

.uxdwfe-cta-box-widget.uxdwfe-cta-layout-split-left .uxdwfe-cta-content,
.uxdwfe-cta-box-widget.uxdwfe-cta-layout-split-right .uxdwfe-cta-content {
    flex: 1;
}

.uxdwfe-cta-box-widget.uxdwfe-cta-layout-split-left .uxdwfe-cta-button-wrapper,
.uxdwfe-cta-box-widget.uxdwfe-cta-layout-split-right .uxdwfe-cta-button-wrapper {
    flex-shrink: 0;
}

/* Responsive for Split Layouts */
@media (max-width: 768px) {
    .uxdwfe-cta-box-widget.uxdwfe-cta-layout-split-left,
    .uxdwfe-cta-box-widget.uxdwfe-cta-layout-split-right {
        flex-direction: column;
        text-align: center;
    }
}

.uxdwfe-cta-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: white;
}

.uxdwfe-cta-description {
    font-size: 18px;
    margin: 0 0 30px 0;
    opacity: 0.95;
}

/* CTA Button Wrapper */
.uxdwfe-cta-button-wrapper {
    margin-top: 30px;
}

.uxdwfe-cta-button-wrapper.uxdwfe-cta-button-align-left {
    text-align: left;
}

.uxdwfe-cta-button-wrapper.uxdwfe-cta-button-align-center {
    text-align: center;
}

.uxdwfe-cta-button-wrapper.uxdwfe-cta-button-align-right {
    text-align: right;
}

.uxdwfe-cta-button-wrapper.uxdwfe-cta-button-align-full {
    text-align: left;
}

/* CTA Button Base */
.uxdwfe-cta-button {
    display: inline-block;
    padding: 15px 35px;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.uxdwfe-cta-button:hover {
    background: #764ba2;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* CTA Button Sizes */
.uxdwfe-cta-button.uxdwfe-cta-button-sm {
    padding: 10px 25px;
    font-size: 14px;
}

.uxdwfe-cta-button.uxdwfe-cta-button-md {
    padding: 15px 35px;
    font-size: 16px;
}

.uxdwfe-cta-button.uxdwfe-cta-button-lg {
    padding: 18px 45px;
    font-size: 18px;
}

/* Full Width Button */
.uxdwfe-cta-button-align-full .uxdwfe-cta-button {
    width: 100%;
}

/* Services Grid Widget */
.uxdwfe-services-grid-widget h2 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #667eea;
}

/* Timeline Widget — styles moved to assets/css/timeline.css */

/* FAQ Accordion Widget */


.uxdwfe-faq-accordion-widget:hover {
    border-color: #667eea;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
}

.uxdwfe-faq-accordion-widget h2 {
    font-size: 18px;
    margin: 0;
}

/* Contact Form Widget */
.uxdwfe-contact-form-widget {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

.uxdwfe-contact-form-widget h2 {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
}

.uxdwfe-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.uxdwfe-form-group {
    margin-bottom: 0;
}

.uxdwfe-field-width-100 {
    flex: 0 0 100%;
}

.uxdwfe-field-width-50 {
    flex: 0 0 calc(50% - 10px);
}

.uxdwfe-field-width-33 {
    flex: 0 0 calc(33.333% - 14px);
}

.uxdwfe-field-width-25 {
    flex: 0 0 calc(25% - 15px);
}

.uxdwfe-form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.uxdwfe-required {
    color: #dc3232;
}

.uxdwfe-form-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uxdwfe-form-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.uxdwfe-file-info {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 12px;
}

.uxdwfe-math-captcha label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.uxdwfe-form-messages {
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    display: none;
}

.uxdwfe-form-messages.success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.uxdwfe-form-messages.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
    .uxdwfe-field-width-50,
    .uxdwfe-field-width-33,
    .uxdwfe-field-width-25 {
        flex: 0 0 100%;
    }
}

/* Progress Bars Widget */
.uxdwfe-progress-bars-widget {
    padding: 20px 0;
}

.uxdwfe-progress-bars-widget h2 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #1d2327;
}

/* Blog Posts Widget */
.uxdwfe-blog-posts-widget {
    display: grid;
    gap: 30px;
    width: 100%;
}

/* Column Layouts */
.uxdwfe-blog-posts-columns-1 {
    grid-template-columns: 1fr;
}

.uxdwfe-blog-posts-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.uxdwfe-blog-posts-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.uxdwfe-blog-posts-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive */
@media (max-width: 1024px) {
    .uxdwfe-blog-posts-columns-3,
    .uxdwfe-blog-posts-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .uxdwfe-blog-posts-columns-2,
    .uxdwfe-blog-posts-columns-3,
    .uxdwfe-blog-posts-columns-4 {
        grid-template-columns: 1fr;
    }
}

/* Blog Post Item */
.uxdwfe-blog-post-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.uxdwfe-blog-post-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

/* Post Thumbnail */
.uxdwfe-post-thumbnail {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.uxdwfe-post-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.uxdwfe-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.uxdwfe-blog-post-item:hover .uxdwfe-post-thumbnail img {
    transform: scale(1.1);
}

/* Post Content */
.uxdwfe-post-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.uxdwfe-blog-post-item h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.uxdwfe-blog-post-item h2 a {
    text-decoration: none;
    color: #1d2327;
    transition: color 0.3s ease;
}

.uxdwfe-blog-post-item h2 a:hover {
    color: #667eea;
}

/* Post Meta */
.uxdwfe-post-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #8c8f94;
}

.uxdwfe-post-date,
.uxdwfe-post-author {
    display: flex;
    align-items: center;
}

.uxdwfe-post-author::before {
    content: '•';
    margin-right: 8px;
}

/* Post Excerpt */
.uxdwfe-blog-post-excerpt {
    color: #646970;
    font-size: 15px;
    line-height: 1.6;
    flex-grow: 1;
}

/* Read More Button */
.uxdwfe-blog-read-more {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.uxdwfe-blog-read-more:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: #fff;
}

/* Image Hover Effects */
.uxdwfe-image-hover-none .uxdwfe-post-thumbnail img {
    transform: none !important;
}

.uxdwfe-image-hover-zoom-out .uxdwfe-post-thumbnail img {
    transform: scale(1.1);
}

.uxdwfe-blog-post-item:hover .uxdwfe-image-hover-zoom-out img {
    transform: scale(1);
}

.uxdwfe-image-hover-grayscale .uxdwfe-post-thumbnail img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.uxdwfe-blog-post-item:hover .uxdwfe-image-hover-grayscale img {
    filter: grayscale(0%);
}

/* Image Aspect Ratios */
.uxdwfe-aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.uxdwfe-aspect-16-10 {
    aspect-ratio: 16 / 10;
}

.uxdwfe-aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.uxdwfe-aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.uxdwfe-aspect-auto {
    aspect-ratio: auto;
}

/* Blog Pagination */
.uxdwfe-blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.uxdwfe-blog-pagination a,
.uxdwfe-blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 8px 12px;
    background: #fff;
    color: #1d2327;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
}

.uxdwfe-blog-pagination a:hover,
.uxdwfe-blog-pagination .current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    border-color: #667eea;
}

.uxdwfe-blog-pagination .current {
    cursor: default;
}

.uxdwfe-blog-pagination .dots {
    background: transparent;
    box-shadow: none;
    border: none;
    cursor: default;
    pointer-events: none;
}

.uxdwfe-blog-pagination .dots:hover {
    transform: none;
    background: transparent;
}

/* Pagination Navigation (Prev/Next only) */
.uxdwfe-pagination-nav {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.uxdwfe-pagination-prev,
.uxdwfe-pagination-next {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.uxdwfe-pagination-prev:hover,
.uxdwfe-pagination-next:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    color: #fff;
}

/* Feature Box Widget */
.uxdwfe-feature-box-widget {
    text-align: center;
    padding: 40px 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.uxdwfe-feature-box-widget:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

.uxdwfe-feature-box-widget h2 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #667eea;
}

/* Flip Box Styles */
.uxdwfe-flip-box {
    perspective: 1000px;
    min-height: 300px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.uxdwfe-flip-box:hover {
    transform: none;
}

.uxdwfe-flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.uxdwfe-flip-box:hover .uxdwfe-flip-box-inner {
    transform: rotateY(180deg);
}

.uxdwfe-flip-box.uxdwfe-flip-vertical:hover .uxdwfe-flip-box-inner {
    transform: rotateX(180deg);
}

.uxdwfe-flip-box-front,
.uxdwfe-flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 300px;
    backface-visibility: hidden;
    padding: 40px 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.uxdwfe-flip-box-front {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.uxdwfe-flip-box-front .uxdwfe-feature-title,
.uxdwfe-flip-box-front .uxdwfe-feature-description {
    color: #fff;
}

.uxdwfe-flip-box-back {
    background: #fff;
    color: #333;
    transform: rotateY(180deg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.uxdwfe-flip-box.uxdwfe-flip-vertical .uxdwfe-flip-box-back {
    transform: rotateX(180deg);
}

.uxdwfe-flip-box-button {
    display: inline-block;
    padding: 12px 30px;
    margin-top: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.uxdwfe-flip-box-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    color: #fff;
}

/* Video Popup Widget */
.uxdwfe-video-popup-widget {
    position: relative;
    padding: 60px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    text-align: center;
    color: white;
}

.uxdwfe-video-popup-widget h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: white;
}

.uxdwfe-video-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999;
}

.uxdwfe-video-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
}

.uxdwfe-video-modal-close {
    position: absolute;
    top: -50px;
    right: -10px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    width: 45px;
    height: 45px;
    transition: all 0.3s ease;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uxdwfe-video-modal-close:hover {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 0.3);
}

.uxdwfe-video-modal-content {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.uxdwfe-video-modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Social Icons Widget */
.uxdwfe-social-icons-widget {
    text-align: center;
    padding: 30px;
}

.uxdwfe-social-icons-widget h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Countdown Timer Widget */
.uxdwfe-countdown-timer-widget h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #667eea;
}

/* Tabs Widget */
.uxdwfe-tabs-widget {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.uxdwfe-tabs-widget h2 {
    font-size: 22px;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .uxdwfe-hero-section-widget h2 {
        font-size: 32px;
    }
    
    .uxdwfe-hero-section-widget p {
        font-size: 16px;
    }
    
    .uxdwfe-cta-box-widget h2 {
        font-size: 28px;
    }
}

/* Hero Button Styles */
.uxdwfe-hero-button {
    display: inline-block;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.uxdwfe-hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.uxdwfe-pricing-button-old {
    display: inline-block;
    width: 100%;
    padding: 15px 30px;
    background: #667eea;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.uxdwfe-pricing-button:hover {
    background: #764ba2;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Enhanced CTA Styles */
.uxdwfe-cta-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: white;
}

.uxdwfe-cta-description {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.95;
}

.uxdwfe-cta-button {
    display: inline-block;
    padding: 15px 40px;
    background: white;
    color: #667eea;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.uxdwfe-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Enhanced Team Member Styles */
.uxdwfe-team-members-widget {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.uxdwfe-team-members-widget:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

.uxdwfe-team-image {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    overflow: hidden;
    border: 5px solid #f0f0f1;
    transition: all 0.3s ease;
}

.uxdwfe-team-image.uxdwfe-team-image-circle {
    border-radius: 50%;
}

.uxdwfe-team-image.uxdwfe-team-image-circle img {
    border-radius: 50%;
}

.uxdwfe-team-image.uxdwfe-team-image-square {
    border-radius: 8px;
}

.uxdwfe-team-image.uxdwfe-team-image-square img {
    border-radius: 8px;
}

.uxdwfe-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.uxdwfe-team-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #1d2327;
}

.uxdwfe-team-position {
    font-size: 14px;
    color: #667eea;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.uxdwfe-team-bio {
    font-size: 14px;
    color: #646970;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Team Social Links */
.uxdwfe-team-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.uxdwfe-team-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f0f0f1;
    color: #333333;
    border-radius: 50%;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.uxdwfe-team-social a:hover {
    background: #667eea;
    color: white;
    transform: translateY(-3px);
}

.uxdwfe-team-social a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ===================================
   Services Grid Styles
   =================================== */
.uxdwfe-services-container {
    display: grid;
    gap: 25px;
}

.uxdwfe-services-container.uxdwfe-columns-1 { grid-template-columns: 1fr; }
.uxdwfe-services-container.uxdwfe-columns-2 { grid-template-columns: repeat(2, 1fr); }
.uxdwfe-services-container.uxdwfe-columns-3 { grid-template-columns: repeat(3, 1fr); }
.uxdwfe-services-container.uxdwfe-columns-4 { grid-template-columns: repeat(4, 1fr); }

.uxdwfe-service-item {
    padding: 40px 30px;
    background: white;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #f0f0f1;
}

.uxdwfe-service-item:hover {
    border-color: #667eea;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.uxdwfe-service-icon {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 20px;
}

.uxdwfe-service-icon i,
.uxdwfe-service-icon svg {
    width: 48px;
    height: 48px;
}

.uxdwfe-service-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #1d2327;
}

.uxdwfe-service-description {
    font-size: 14px;
    line-height: 1.6;
    color: #646970;
    margin: 0;
}

.uxdwfe-service-button {
    display: inline-block;
    padding: 12px 28px;
    background: #667eea;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.uxdwfe-service-button:hover {
    background: #764ba2;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Service Hover Transforms */
.uxdwfe-hover-translateY .uxdwfe-service-item:hover {
    transform: translateY(-5px);
}

.uxdwfe-hover-scale .uxdwfe-service-item:hover {
    transform: scale(1.05);
}

/* ===================================
   Stats Counter Styles
   =================================== */
.uxdwfe-stats-counter-widget {
    text-align: center;
    padding: 40px;
    background-color: #fff;
    color: white;
    border-radius: 12px;
}

/* Icon Position Top (Default) */
.uxdwfe-stats-counter-widget.uxdwfe-icon-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon Position Left */
.uxdwfe-stats-counter-widget.uxdwfe-icon-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
}

/* Icon Position Right */
.uxdwfe-stats-counter-widget.uxdwfe-icon-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.uxdwfe-stat-icon {
    font-size: 56px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.uxdwfe-stat-icon i,
.uxdwfe-stat-icon svg {
    width: 56px;
    height: 56px;
}

.uxdwfe-stat-content {
    display: flex;
    flex-direction: column;
}

.uxdwfe-stat-number {
    display: block;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

.uxdwfe-stat-prefix,
.uxdwfe-stat-suffix {
    font-size: 0.7em;
    opacity: 0.9;
}

.uxdwfe-stat-title {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin: 0;
}

/* ===================================
   Contact Form Styles
   =================================== */
.uxdwfe-contact-form-widget {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

.uxdwfe-form-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: #1d2327;
}

.uxdwfe-form-description {
    text-align: center;
    margin-bottom: 30px;
    color: #646970;
    font-size: 15px;
    line-height: 1.6;
}

.uxdwfe-form-group {
    margin-bottom: 20px;
}

.uxdwfe-form-input,
.uxdwfe-form-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #f0f0f1;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.uxdwfe-form-input:focus,
.uxdwfe-form-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.uxdwfe-form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Button Wrapper */
.uxdwfe-form-button-wrapper {
    margin-top: 20px;
}

.uxdwfe-form-button-wrapper.uxdwfe-button-align-left {
    text-align: left;
}

.uxdwfe-form-button-wrapper.uxdwfe-button-align-center {
    text-align: center;
}

.uxdwfe-form-button-wrapper.uxdwfe-button-align-right {
    text-align: right;
}

.uxdwfe-form-button-wrapper.uxdwfe-button-align-full {
    text-align: left;
}

/* Button Base */
.uxdwfe-form-button {
    padding: 15px 30px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.uxdwfe-form-button:hover {
    background: #764ba2;
    transform: translateY(-2px);
}

/* Button Sizes */
.uxdwfe-form-button.uxdwfe-button-sm {
    padding: 10px 24px;
    font-size: 14px;
}

.uxdwfe-form-button.uxdwfe-button-md {
    padding: 15px 30px;
    font-size: 16px;
}

.uxdwfe-form-button.uxdwfe-button-lg {
    padding: 18px 40px;
    font-size: 18px;
}

/* Full Width Button */
.uxdwfe-button-align-full .uxdwfe-form-button {
    width: 100%;
}

/* ===================================
   Portfolio Grid Styles
   =================================== */
.uxdwfe-portfolio-grid-container {
    display: grid;
    gap: 30px;
}

.uxdwfe-portfolio-grid-container.uxdwfe-columns-2 { grid-template-columns: repeat(2, 1fr); }
.uxdwfe-portfolio-grid-container.uxdwfe-columns-3 { grid-template-columns: repeat(3, 1fr); }
.uxdwfe-portfolio-grid-container.uxdwfe-columns-4 { grid-template-columns: repeat(4, 1fr); }

.uxdwfe-portfolio-grid-widget {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.uxdwfe-portfolio-grid-widget a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.uxdwfe-portfolio-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.uxdwfe-portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.uxdwfe-portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 30px;
    text-align: center;
}

.uxdwfe-portfolio-content {
    position: relative;
    z-index: 2;
}

.uxdwfe-portfolio-title {
    color: white;
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 700;
}

.uxdwfe-portfolio-category {
    font-size: 14px;
    opacity: 0.9;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.uxdwfe-portfolio-description {
    font-size: 14px;
    line-height: 1.6;
    margin: 15px 0 0 0;
    opacity: 0.95;
}

/* Style 1 - Classic Overlay */
.uxdwfe-portfolio-grid-container.uxdwfe-style-1 .uxdwfe-portfolio-image img {
    transition: transform 0.4s ease;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-1 .uxdwfe-portfolio-grid-widget:hover .uxdwfe-portfolio-image img {
    transform: scale(1.1);
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-1 .uxdwfe-portfolio-overlay {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-1 .uxdwfe-portfolio-grid-widget:hover .uxdwfe-portfolio-overlay {
    opacity: 1;
}

/* Style 2 - Slide Up */
.uxdwfe-portfolio-grid-container.uxdwfe-style-2 .uxdwfe-portfolio-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: 30px;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-2 .uxdwfe-portfolio-content {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-2 .uxdwfe-portfolio-grid-widget:hover .uxdwfe-portfolio-content {
    transform: translateY(0);
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-2 .uxdwfe-portfolio-description {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-2 .uxdwfe-portfolio-grid-widget:hover .uxdwfe-portfolio-description {
    opacity: 0.95;
    transform: translateY(0);
}

/* Style 3 - Zoom In */
.uxdwfe-portfolio-grid-container.uxdwfe-style-3 .uxdwfe-portfolio-overlay {
    background: rgba(30, 30, 30, 0.95);
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-3 .uxdwfe-portfolio-content {
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-3 .uxdwfe-portfolio-grid-widget:hover .uxdwfe-portfolio-content {
    transform: scale(1);
    opacity: 1;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-3 .uxdwfe-portfolio-overlay::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-3 .uxdwfe-portfolio-grid-widget:hover .uxdwfe-portfolio-overlay::before {
    opacity: 1;
}

/* Style 4 - Split Content */
.uxdwfe-portfolio-grid-container.uxdwfe-style-4 .uxdwfe-portfolio-grid-widget {
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-4 .uxdwfe-portfolio-grid-widget:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-4 .uxdwfe-portfolio-image {
    aspect-ratio: 16/9;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-4 .uxdwfe-portfolio-overlay {
    position: static;
    background: white;
    padding: 25px;
    text-align: left;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-4 .uxdwfe-portfolio-title {
    color: #333;
    font-size: 20px;
    margin-bottom: 8px;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-4 .uxdwfe-portfolio-category {
    color: #667eea;
    opacity: 1;
    font-weight: 600;
    margin-bottom: 12px;
}

.uxdwfe-portfolio-grid-container.uxdwfe-style-4 .uxdwfe-portfolio-description {
    color: #666;
    opacity: 1;
    line-height: 1.7;
}

/* ===================================
   Feature Box Styles
   =================================== */
.uxdwfe-feature-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.uxdwfe-feature-icon i,
.uxdwfe-feature-icon svg {
    width: 56px;
    height: 56px;
}

.uxdwfe-feature-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.uxdwfe-feature-description {
    font-size: 15px;
    line-height: 1.6;
    color: #646970;
    margin: 0;
}

/* ===================================
   Social Icons Styles - Full
   =================================== */

.uxdwfe-social-icons-widget {
    width: 100%;
}

.uxdwfe-social-title {
    text-align: center;
    margin-bottom: 25px;
    font-size: 28px;
    font-weight: 600;
    color: #333333;
}

.uxdwfe-social-icons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Social Icon Base */
.uxdwfe-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
    padding: 10px;
    margin: 0 15px;
}

.uxdwfe-social-icon:hover {
    background: #0073aa;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Hover Effects */
.uxdwfe-hover-scale:hover {
    transform: scale(1.2) !important;
}

.uxdwfe-hover-translate:hover {
    transform: translateY(-8px) !important;
}

.uxdwfe-hover-rotate:hover {
    transform: rotate(15deg) !important;
}

/* Icon SVG/Font Awesome Support */
.uxdwfe-social-icon i {
    font-size: inherit;
}

.uxdwfe-social-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Focus State for Accessibility */
.uxdwfe-social-icon:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Social Icons Container Responsive */
@media (max-width: 768px) {
    .uxdwfe-social-icon {
        padding: 8px;
        margin: 0 10px;
        font-size: 20px;
    }

    .uxdwfe-social-icons-wrapper {
        gap: 10px;
    }

    .uxdwfe-social-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .uxdwfe-social-icon {
        padding: 6px;
        margin: 0 8px;
        font-size: 18px;
    }

    .uxdwfe-social-icons-wrapper {
        gap: 8px;
    }

    .uxdwfe-social-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
}

/* ===================================
   Blog Posts Styles
   =================================== */
.uxdwfe-blog-post-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f0f1;
}

.uxdwfe-blog-post-item:last-child {
    border-bottom: none;
}

.uxdwfe-post-thumbnail {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.uxdwfe-post-thumbnail img {
    width: 100%;
    height: auto;
}

.uxdwfe-blog-post-item h2 a {
    color: #1d2327;
    text-decoration: none;
    transition: color 0.3s ease;
}

.uxdwfe-blog-post-item h2 a:hover {
    color: #667eea;
}

.uxdwfe-post-meta {
    font-size: 14px;
    color: #646970;
    margin-bottom: 10px;
}

/* ===================================
   Video Popup Styles
   =================================== */
.uxdwfe-video-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: white;
    color: #667eea;
    border-radius: 50%;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.uxdwfe-video-play-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(0,0,0,0.3);
}

/* ===================================
   Countdown Timer Styles
   =================================== */
.uxdwfe-countdown-display {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.uxdwfe-countdown-item {
    text-align: center;
}

.uxdwfe-countdown-number {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: #667eea;
    line-height: 1;
    margin-bottom: 10px;
}

.uxdwfe-countdown-label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #646970;
}

/* Flip Card Style */
.uxdwfe-countdown-flip .uxdwfe-countdown-item {
    perspective: 1000px;
}

.uxdwfe-flip-card {
    position: relative;
    width: 80px;
    height: 90px;
    margin: 0 auto 10px;
    transform-style: preserve-3d;
}

.uxdwfe-flip-card-top,
.uxdwfe-flip-card-bottom {
    position: absolute;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    border-radius: 8px;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    z-index: 1;
}

.uxdwfe-flip-card-top {
    top: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    align-items: center;
    padding-bottom: 4px;
    transform-origin: 50% 100%;
    clip-path: inset(0 0 0 0);
}

.uxdwfe-flip-card-bottom {
    bottom: 0;
    align-items: center;
    padding-top: 4px;
    transform-origin: 50% 0%;
    z-index: 0;
}

.uxdwfe-flip-animating .uxdwfe-flip-card-top {
    animation: flipTop 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    z-index: 2;
}

.uxdwfe-flip-animating .uxdwfe-flip-card-bottom {
    animation: flipBottom 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    z-index: 1;
}

@keyframes flipTop {
    0% {
        transform: rotateX(0deg);
        visibility: visible;
    }
    50% {
        transform: rotateX(-90deg);
        visibility: visible;
    }
    50.01% {
        visibility: hidden;
    }
    100% {
        transform: rotateX(-180deg);
        visibility: hidden;
    }
}

@keyframes flipBottom {
    0% {
        transform: rotateX(180deg);
        visibility: hidden;
    }
    50% {
        transform: rotateX(90deg);
        visibility: hidden;
    }
    50.01% {
        visibility: visible;
    }
    100% {
        transform: rotateX(0deg);
        visibility: visible;
    }
}

/* Circle Style */
.uxdwfe-countdown-circle .uxdwfe-countdown-item {
    position: relative;
}

.uxdwfe-circle-countdown {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
}

.uxdwfe-circle-countdown svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.uxdwfe-circle-countdown .uxdwfe-circle-bg {
    fill: none;
    stroke: #f0f0f1;
    stroke-width: 8;
}

.uxdwfe-circle-countdown .uxdwfe-circle-progress {
    fill: none;
    stroke: #667eea;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.uxdwfe-circle-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 700;
    color: #667eea;
}

/* Expiry Message */
.uxdwfe-countdown-expired {
    padding: 30px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #667eea;
}

/* ===================================
   Tabs Styles
   =================================== */
.uxdwfe-tabs-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f1;
}

.uxdwfe-tab-button {
    padding: 15px 30px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: 600;
    color: #646970;
    cursor: pointer;
    transition: all 0.3s ease;
}

.uxdwfe-tab-button.active,
.uxdwfe-tab-button:hover {
    color: #667eea;
    border-bottom-color: #667eea;
}

.uxdwfe-tab-pane {
    display: none;
    padding: 20px;
    background: white;
    border-radius: 8px;
}

.uxdwfe-tab-pane.active {
    display: block;
}

/* Tab Alignment - Horizontal */
.uxdwfe-tabs-widget.layout-horizontal.align-left .uxdwfe-tabs-nav {
    justify-content: flex-start;
}

.uxdwfe-tabs-widget.layout-horizontal.align-center .uxdwfe-tabs-nav {
    justify-content: center;
}

.uxdwfe-tabs-widget.layout-horizontal.align-right .uxdwfe-tabs-nav {
    justify-content: flex-end;
}

.uxdwfe-tabs-widget.layout-horizontal.align-justify .uxdwfe-tabs-nav {
    justify-content: space-between;
}

.uxdwfe-tabs-widget.layout-horizontal.align-justify .uxdwfe-tab-button {
    flex: 1;
}

/* Tab Layout - Vertical */
.uxdwfe-tabs-widget.layout-vertical {
    display: flex;
    gap: 20px;
}

.uxdwfe-tabs-widget.layout-vertical .uxdwfe-tabs-nav {
    flex-direction: column;
    border-bottom: none;
    border-right: 2px solid #f0f0f1;
    margin-bottom: 0;
    margin-right: 20px;
    min-width: 200px;
}

.uxdwfe-tabs-widget.layout-vertical .uxdwfe-tab-button {
    border-bottom: none;
    border-right: 3px solid transparent;
    text-align: left;
}

.uxdwfe-tabs-widget.layout-vertical .uxdwfe-tab-button.active,
.uxdwfe-tabs-widget.layout-vertical .uxdwfe-tab-button:hover {
    border-bottom-color: transparent;
    border-right-color: #667eea;
}

.uxdwfe-tabs-widget.layout-vertical .uxdwfe-tabs-content {
    flex: 1;
}

/* ===================================
   Thumbnail Carousel Widget Styles
   =================================== */
.uxdwfe-thumbnail-carousel-widget {
    display: flex;
    gap: 20px;
    width: 100%;
}

/* Thumbnail positions */
.uxdwfe-thumbnail-carousel-widget.uxdwfe-thumbnails-right {
    flex-direction: row;
}

.uxdwfe-thumbnail-carousel-widget.uxdwfe-thumbnails-left {
    flex-direction: row-reverse;
}

.uxdwfe-thumbnail-carousel-widget.uxdwfe-thumbnails-bottom {
    flex-direction: column;
}

/* Main Carousel */
.uxdwfe-thumbnail-carousel-widget .uxdwfe-main-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    height: 500px; /* Default height */
}

/* For left/right layouts, allow flex to work */
.uxdwfe-thumbnails-right .uxdwfe-main-carousel,
.uxdwfe-thumbnails-left .uxdwfe-main-carousel {
    flex: 1;
}

/* For bottom layout, ensure fixed height and full width */
.uxdwfe-thumbnails-bottom .uxdwfe-main-carousel {
    width: 100%;
    flex: none; /* Don't use flex for bottom layout */
}

.uxdwfe-thumbnail-carousel-widget .uxdwfe-main-carousel .swiper {
    width: 100%;
    height: 100%;
}

.uxdwfe-thumbnail-carousel-widget .uxdwfe-main-carousel .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    height: 100%;
}

.uxdwfe-thumbnail-carousel-widget .uxdwfe-main-carousel .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Swiper Navigation Buttons */
.uxdwfe-thumbnail-carousel-widget .swiper-button-next,
.uxdwfe-thumbnail-carousel-widget .swiper-button-prev {
    color: #fff;
    background: rgba(102, 126, 234, 0.8);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.uxdwfe-thumbnail-carousel-widget .swiper-button-next:hover,
.uxdwfe-thumbnail-carousel-widget .swiper-button-prev:hover {
    background: rgba(102, 126, 234, 1);
    transform: scale(1.1);
}

.uxdwfe-thumbnail-carousel-widget .swiper-button-next::after,
.uxdwfe-thumbnail-carousel-widget .swiper-button-prev::after {
    font-size: 20px;
}

/* Swiper Pagination */
.uxdwfe-thumbnail-carousel-widget .swiper-pagination {
    bottom: 20px;
}

.uxdwfe-thumbnail-carousel-widget .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
    width: 10px;
    height: 10px;
}

.uxdwfe-thumbnail-carousel-widget .swiper-pagination-bullet-active {
    background: #667eea;
    opacity: 1;
}

/* Thumbnail Panel */
.uxdwfe-thumbnail-carousel-widget .uxdwfe-thumbnail-panel {
    flex-shrink: 0;
}

.uxdwfe-thumbnails-right .uxdwfe-thumbnail-panel,
.uxdwfe-thumbnails-left .uxdwfe-thumbnail-panel {
    flex: 0 0 20%;
}

.uxdwfe-thumbnails-bottom .uxdwfe-thumbnail-panel {
    width: 100%;
}

/* Main Carousel Width */
.uxdwfe-thumbnails-right .uxdwfe-main-carousel,
.uxdwfe-thumbnails-left .uxdwfe-main-carousel {
    flex: 0 0 75%;
}

/* Thumbnail Grid */
.uxdwfe-thumbnail-grid {
    display: grid;
    gap: 10px;
}

.uxdwfe-thumbnails-right .uxdwfe-thumbnail-grid,
.uxdwfe-thumbnails-left .uxdwfe-thumbnail-grid {
    grid-template-columns: 1fr;
    height: 100%;
    overflow-y: auto;
}

.uxdwfe-thumbnails-bottom .uxdwfe-thumbnail-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Thumbnail Column Layouts - All Positions */
.uxdwfe-thumbnail-grid[data-columns="1"] {
    grid-template-columns: repeat(1, 1fr);
}

.uxdwfe-thumbnail-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.uxdwfe-thumbnail-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.uxdwfe-thumbnail-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.uxdwfe-thumbnail-grid[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.uxdwfe-thumbnail-grid[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
}

/* Override for Left/Right positions when columns > 1 - make them wrap */
.uxdwfe-thumbnails-right .uxdwfe-thumbnail-grid[data-columns="2"],
.uxdwfe-thumbnails-left .uxdwfe-thumbnail-grid[data-columns="2"],
.uxdwfe-thumbnails-right .uxdwfe-thumbnail-grid[data-columns="3"],
.uxdwfe-thumbnails-left .uxdwfe-thumbnail-grid[data-columns="3"],
.uxdwfe-thumbnails-right .uxdwfe-thumbnail-grid[data-columns="4"],
.uxdwfe-thumbnails-left .uxdwfe-thumbnail-grid[data-columns="4"],
.uxdwfe-thumbnails-right .uxdwfe-thumbnail-grid[data-columns="5"],
.uxdwfe-thumbnails-left .uxdwfe-thumbnail-grid[data-columns="5"],
.uxdwfe-thumbnails-right .uxdwfe-thumbnail-grid[data-columns="6"],
.uxdwfe-thumbnails-left .uxdwfe-thumbnail-grid[data-columns="6"] {
    grid-auto-flow: row;
    height: auto;
    max-height: 100%;
    overflow-y: auto;
}

/* Thumbnail Items */
.uxdwfe-thumbnail-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.uxdwfe-thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.uxdwfe-thumbnail-item:hover img {
    transform: scale(1.1);
}

.uxdwfe-thumbnail-item.active {
    border-color: #667eea;
}

/* Responsive for Thumbnail Carousel */
@media (max-width: 768px) {
    .uxdwfe-thumbnail-carousel-widget.uxdwfe-thumbnails-right,
    .uxdwfe-thumbnail-carousel-widget.uxdwfe-thumbnails-left {
        flex-direction: column;
    }

    .uxdwfe-thumbnails-right .uxdwfe-thumbnail-panel,
    .uxdwfe-thumbnails-left .uxdwfe-thumbnail-panel {
        width: 100%;
    }

    .uxdwfe-thumbnails-right .uxdwfe-thumbnail-grid,
    .uxdwfe-thumbnails-left .uxdwfe-thumbnail-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        height: auto;
        overflow-y: visible;
    }
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 768px) {
    .uxdwfe-services-container.uxdwfe-columns-3,
    .uxdwfe-services-container.uxdwfe-columns-4 {
        grid-template-columns: 1fr;
    }

    .uxdwfe-portfolio-grid-container.uxdwfe-columns-3,
    .uxdwfe-portfolio-grid-container.uxdwfe-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .uxdwfe-tabs-nav {
        flex-direction: column;
    }
}

/* ===================================
   Testimonials Widget Styles
   =================================== */

/* Common Testimonial Item Styles */
.uxdwfe-testimonial-item {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.uxdwfe-testimonial-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.uxdwfe-testimonial-content {
    flex: 1;
    margin-bottom: 20px;
}

.uxdwfe-testimonial-rating {
    display: flex;
    gap: 3px;
    margin-bottom: 15px;
}

.uxdwfe-star {
    color: #ffc107;
    font-size: 20px;
}

.uxdwfe-testimonial-text {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin: 0;
    font-style: italic;
}

.uxdwfe-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.uxdwfe-author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.uxdwfe-author-info {
    flex: 1;
}

.uxdwfe-author-name {
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 5px 0;
}

.uxdwfe-author-position {
    font-size: 14px;
    color: #646970;
    margin: 0;
}

/* Grid Mode */
.uxdwfe-testimonials-grid {
    display: grid;
    gap: 30px;
}

.uxdwfe-testimonials-widget.uxdwfe-columns-1 .uxdwfe-testimonials-grid {
    grid-template-columns: 1fr;
}

.uxdwfe-testimonials-widget.uxdwfe-columns-2 .uxdwfe-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
}

.uxdwfe-testimonials-widget.uxdwfe-columns-3 .uxdwfe-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
}

.uxdwfe-testimonials-widget.uxdwfe-columns-4 .uxdwfe-testimonials-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* List Mode */
.uxdwfe-testimonials-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.uxdwfe-testimonials-list .uxdwfe-testimonial-item {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Carousel Mode */
.uxdwfe-testimonials-carousel {
    position: relative;
    padding: 0 50px;
}

.uxdwfe-testimonials-carousel .swiper {
    overflow: hidden;
    padding: 10px;
}

.uxdwfe-testimonials-carousel .swiper-slide {
    height: auto;
}

.uxdwfe-testimonials-carousel .swiper-button-prev,
.uxdwfe-testimonials-carousel .swiper-button-next {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 2px solid #667eea;
    border-radius: 50%;
    color: #667eea;
    transition: all 0.3s ease;
}

.uxdwfe-testimonials-carousel .swiper-button-prev:after,
.uxdwfe-testimonials-carousel .swiper-button-next:after {
    font-size: 18px;
    font-weight: bold;
}

.uxdwfe-testimonials-carousel .swiper-button-prev:hover,
.uxdwfe-testimonials-carousel .swiper-button-next:hover {
    background: #667eea;
    color: #ffffff;
    transform: scale(1.1);
}

.uxdwfe-testimonials-carousel .swiper-button-prev {
    left: 0;
}

.uxdwfe-testimonials-carousel .swiper-button-next {
    right: 0;
}

.uxdwfe-testimonials-carousel .swiper-pagination {
    position: relative;
    margin-top: 30px;
}

.uxdwfe-testimonials-carousel .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #dcdcde;
    opacity: 1;
    transition: all 0.3s ease;
}

.uxdwfe-testimonials-carousel .swiper-pagination-bullet-active {
    background: #667eea;
    width: 30px;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 1024px) {
    .uxdwfe-testimonials-widget.uxdwfe-columns-4 .uxdwfe-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .uxdwfe-testimonials-widget.uxdwfe-columns-3 .uxdwfe-testimonials-grid,
    .uxdwfe-testimonials-widget.uxdwfe-columns-4 .uxdwfe-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .uxdwfe-testimonials-widget.uxdwfe-columns-2 .uxdwfe-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .uxdwfe-testimonials-carousel {
        padding: 0 40px;
    }

    .uxdwfe-testimonials-carousel .swiper-button-prev,
    .uxdwfe-testimonials-carousel .swiper-button-next {
        width: 35px;
        height: 35px;
    }

    .uxdwfe-testimonials-carousel .swiper-button-prev:after,
    .uxdwfe-testimonials-carousel .swiper-button-next:after {
        font-size: 16px;
    }
}

/* ===================================
   Timeline Styles — moved to assets/css/timeline.css
   =================================== */

/* ===================================
   FAQ Accordion Styles
   =================================== */
.uxdwfe-faq-accordion-container {
    max-width: 100%;
}

.uxdwfe-faq-item {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.uxdwfe-faq-question {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    background: #f8f9fa;
    color: #1d2327;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #dcdcde;
    border-radius: 8px;
}

.uxdwfe-faq-question:hover {
    background: #f0f0f1;
}

.uxdwfe-faq-item.active .uxdwfe-faq-question {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.uxdwfe-faq-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    margin-right: 15px;
    color: #667eea;
    transition: transform 0.3s ease;
    min-width: 20px;
}

.uxdwfe-faq-item.active .uxdwfe-faq-toggle-icon {
    color: white;
}

.uxdwfe-faq-question-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    font-size: 20px;
    color: #667eea;
}

.uxdwfe-faq-item.active .uxdwfe-faq-question-icon {
    color: white;
}

.uxdwfe-faq-question-text {
    flex: 1;
}

.uxdwfe-faq-answer {
    padding: 20px 25px;
    background: white;
    color: #646970;
    font-size: 15px;
    line-height: 1.7;
    border: 1px solid #dcdcde;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.uxdwfe-faq-answer p {
    margin: 0;
}

/* Icon Styles */
.uxdwfe-icon-chevron .uxdwfe-faq-toggle-icon {
    transition: transform 0.3s ease;
}

.uxdwfe-icon-chevron .uxdwfe-faq-item.active .uxdwfe-faq-toggle-icon {
    transform: rotate(180deg);
}

.uxdwfe-icon-arrow .uxdwfe-faq-toggle-icon {
    transition: transform 0.3s ease;
}

.uxdwfe-icon-arrow .uxdwfe-faq-item.active .uxdwfe-faq-toggle-icon {
    transform: rotate(90deg);
}

/* Boxed Style */
.uxdwfe-style-boxed .uxdwfe-faq-item {
    background: white;
    border: 1px solid #dcdcde;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.uxdwfe-style-boxed .uxdwfe-faq-question {
    border: none;
    border-radius: 0;
}

.uxdwfe-style-boxed .uxdwfe-faq-answer {
    border: none;
    border-top: 1px solid #dcdcde;
    border-radius: 0;
}

/* Minimal Style */
.uxdwfe-style-minimal .uxdwfe-faq-question {
    background: transparent;
    border: none;
    border-bottom: 2px solid #dcdcde;
    border-radius: 0;
    padding: 15px 0;
}

.uxdwfe-style-minimal .uxdwfe-faq-item.active .uxdwfe-faq-question {
    background: transparent;
    border-bottom-color: #667eea;
    color: #667eea;
}

.uxdwfe-style-minimal .uxdwfe-faq-answer {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 15px 0 15px 35px;
}

.uxdwfe-style-minimal .uxdwfe-faq-toggle-icon {
    color: #667eea;
}

.uxdwfe-style-minimal .uxdwfe-faq-item.active .uxdwfe-faq-toggle-icon {
    color: #667eea;
}

/* Responsive */
@media (max-width: 768px) {
    .uxdwfe-faq-question {
        padding: 15px 20px;
        font-size: 16px;
    }

    .uxdwfe-faq-answer {
        padding: 15px 20px;
        font-size: 14px;
    }

    .uxdwfe-faq-toggle-icon {
        font-size: 18px;
        margin-right: 10px;
    }
}


/* ===================================
   Progress Bars Styles
   =================================== */
.uxdwfe-progress-bars-widget {
    width: 100%;
}

.uxdwfe-progress-item {
    margin-bottom: 25px;
}

.uxdwfe-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.uxdwfe-progress-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uxdwfe-progress-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    margin: 0;
}

.uxdwfe-progress-icon {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    color: #667eea;
}

.uxdwfe-progress-percentage {
    font-size: 16px;
    font-weight: 700;
    color: #667eea;
}

.uxdwfe-progress-bar-bg {
    width: 100%;
    height: 12px;
    background: #f0f0f1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.uxdwfe-progress-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    transition: width 1.5s ease-in-out;
    position: relative;
}

/* Rounded Style */
.uxdwfe-bar-rounded .uxdwfe-progress-bar-bg,
.uxdwfe-bar-rounded .uxdwfe-progress-bar-fill {
    border-radius: 50px;
}

/* Striped Style */
.uxdwfe-bar-striped .uxdwfe-progress-bar-fill {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% { background-position: 0 0; }
    100% { background-position: 20px 0; }
}

/* ===================================
   Before/After Slider Styles
   =================================== */
.uxdwfe-before-after-slider {
    position: relative;
    overflow: hidden;
    user-select: none;
    max-width: 100%;
}

.uxdwfe-ba-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.uxdwfe-ba-before {
    position: relative;
    width: 100%;
}

.uxdwfe-ba-before img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.uxdwfe-ba-after {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    bottom: 0;
}

/* Horizontal orientation */
[data-orientation="horizontal"] .uxdwfe-ba-after {
    width: 50%;
}

[data-orientation="horizontal"] .uxdwfe-ba-after img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: right center;
}

/* Vertical orientation */
[data-orientation="vertical"] .uxdwfe-ba-after {
    width: 100%;
    height: 50%;
    bottom: 0;
    top: auto;
}

[data-orientation="vertical"] .uxdwfe-ba-after img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.uxdwfe-ba-after img {
    display: block;
    pointer-events: none;
}

.uxdwfe-ba-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #ffffff;
    cursor: ew-resize;
    z-index: 10;
}

[data-orientation="vertical"] .uxdwfe-ba-divider {
    width: 100%;
    height: 3px;
    cursor: ns-resize;
}

.uxdwfe-ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.uxdwfe-ba-handle::before,
.uxdwfe-ba-handle::after {
    content: '';
    position: absolute;
    border: solid #667eea;
    border-width: 0 3px 3px 0;
    padding: 5px;
}

.uxdwfe-ba-handle::before {
    left: 12px;
    transform: rotate(135deg);
}

.uxdwfe-ba-handle::after {
    right: 12px;
    transform: rotate(-45deg);
}

[data-orientation="vertical"] .uxdwfe-ba-handle::before {
    left: 50%;
    top: 10px;
    transform: translateX(-50%) rotate(-135deg);
}

[data-orientation="vertical"] .uxdwfe-ba-handle::after {
    left: 50%;
    bottom: 10px;
    top: auto;
    right: auto;
    transform: translateX(-50%) rotate(45deg);
}

.uxdwfe-ba-label {
    position: absolute;
    top: 20px;
    padding: 8px 15px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    z-index: 5;
}

.uxdwfe-ba-label-before {
    left: 20px;
}

.uxdwfe-ba-label-after {
    right: 20px;
}

.uxdwfe-ba-dragging {
    cursor: ew-resize;
}

[data-orientation="vertical"].uxdwfe-ba-dragging {
    cursor: ns-resize;
}

/* ===================================
   Animated Heading Styles
   =================================== */
.uxdwfe-animated-heading {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.uxdwfe-animated-text-wrapper {
    display: inline-block;
    position: relative;
}

.uxdwfe-animated-text {
    display: none;
}

.uxdwfe-animated-text.active {
    display: inline-block;
}

/* Typing Animation */
[data-animation="typing"] .uxdwfe-animated-text.active::after {
    content: '|';
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Fade Animation */
[data-animation="fade"] .uxdwfe-animated-text {
    animation: fadeOut 0.5s;
}

[data-animation="fade"] .uxdwfe-animated-text.active {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Slide Animation */
[data-animation="slide"] .uxdwfe-animated-text {
    animation: slideOut 0.5s;
}

[data-animation="slide"] .uxdwfe-animated-text.active {
    animation: slideIn 0.5s;
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(20px); opacity: 0; }
}

/* Zoom Animation */
[data-animation="zoom"] .uxdwfe-animated-text {
    animation: zoomOut 0.5s;
}

[data-animation="zoom"] .uxdwfe-animated-text.active {
    animation: zoomIn 0.5s;
}

@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes zoomOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.5); opacity: 0; }
}

/* Rotate Animation */
[data-animation="rotate"] .uxdwfe-animated-text {
    animation: rotateOut 0.5s;
}

[data-animation="rotate"] .uxdwfe-animated-text.active {
    animation: rotateIn 0.5s;
}

@keyframes rotateIn {
    from { transform: rotateX(90deg); opacity: 0; }
    to { transform: rotateX(0); opacity: 1; }
}

@keyframes rotateOut {
    from { transform: rotateX(0); opacity: 1; }
    to { transform: rotateX(-90deg); opacity: 0; }
}

/* ===================================
   Image Hotspots Styles
   =================================== */
.uxdwfe-image-hotspots-widget {
    position: relative;
}

.uxdwfe-hotspots-image {
    position: relative;
    display: inline-block;
}

.uxdwfe-hotspots-image img {
    display: block;
    width: 100%;
    height: auto;
}

.uxdwfe-hotspot-item {
    position: absolute;
    z-index: 10;
}

.uxdwfe-hotspot-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.uxdwfe-hotspot-marker i,
.uxdwfe-hotspot-marker svg {
    font-size: 16px;
    color: #667eea;
}

.uxdwfe-hotspot-marker:hover {
    transform: scale(1.1);
}

/* Pulse Animation */
[data-animation="pulse"] .uxdwfe-hotspot-marker::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: inherit;
    border: inherit;
    animation: hotspotPulse 2s infinite;
    z-index: -1;
}

@keyframes hotspotPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Wave Animation */
[data-animation="wave"] .uxdwfe-hotspot-marker::before,
[data-animation="wave"] .uxdwfe-hotspot-marker::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #667eea;
    animation: hotspotWave 3s infinite;
    z-index: -1;
}

[data-animation="wave"] .uxdwfe-hotspot-marker::after {
    animation-delay: 1.5s;
}

@keyframes hotspotWave {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.uxdwfe-hotspot-tooltip {
    position: absolute;
    width: 250px;
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 15px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.uxdwfe-hotspot-tooltip::before {
    content: '';
    position: absolute;
    border: 8px solid transparent;
}

/* Tooltip Positions */
.uxdwfe-tooltip-top {
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
}

.uxdwfe-tooltip-top::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(0, 0, 0, 0.9);
}

.uxdwfe-tooltip-bottom {
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
}

.uxdwfe-tooltip-bottom::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(0, 0, 0, 0.9);
}

.uxdwfe-tooltip-left {
    right: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
}

.uxdwfe-tooltip-left::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: rgba(0, 0, 0, 0.9);
}

.uxdwfe-tooltip-right {
    left: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
}

.uxdwfe-tooltip-right::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: rgba(0, 0, 0, 0.9);
}

[data-trigger="hover"] .uxdwfe-hotspot-item:hover .uxdwfe-hotspot-tooltip,
[data-trigger="click"] .uxdwfe-hotspot-item.active .uxdwfe-hotspot-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ===================================
   Social Share Styles
   =================================== */
.uxdwfe-social-share-widget {
    display: flex;
    flex-direction: column;
}

.uxdwfe-share-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.uxdwfe-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.uxdwfe-social-share-stacked .uxdwfe-share-buttons {
    flex-direction: column;
    align-items: flex-start;
}

.uxdwfe-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 18px;
}

.uxdwfe-share-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.uxdwfe-share-rounded .uxdwfe-share-button {
    border-radius: 8px;
}

.uxdwfe-share-circle .uxdwfe-share-button {
    border-radius: 50%;
}

.uxdwfe-share-button .uxdwfe-share-label {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* ===================================
   Logo Carousel Styles
   =================================== */
.uxdwfe-logo-carousel-widget {
    position: relative;
}

.uxdwfe-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.3s ease;
}

.uxdwfe-logo-item img {
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease;
}

.uxdwfe-logos-grayscale .uxdwfe-logo-item img {
    filter: grayscale(100%);
}

.uxdwfe-logos-grayscale .uxdwfe-logo-item:hover img {
    filter: grayscale(0%);
}

.uxdwfe-logo-item a {
    display: block;
}

/* ===================================
   Google Maps Styles
   =================================== */
.uxdwfe-google-map {
    width: 100%;
    height: 500px;
    border-radius: 8px;
    overflow: hidden;
}

.uxdwfe-maps-notice {
    padding: 20px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    text-align: center;
}

.uxdwfe-map-info-window h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.uxdwfe-map-info-window p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* ===================================
   Instagram Feed Styles
   =================================== */
.uxdwfe-instagram-notice {
    padding: 20px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    text-align: center;
}

.uxdwfe-instagram-grid {
    display: grid;
    gap: 0;
}

.uxdwfe-columns-1 .uxdwfe-instagram-grid { grid-template-columns: repeat(1, 1fr); }
.uxdwfe-columns-2 .uxdwfe-instagram-grid { grid-template-columns: repeat(2, 1fr); }
.uxdwfe-columns-3 .uxdwfe-instagram-grid { grid-template-columns: repeat(3, 1fr); }
.uxdwfe-columns-4 .uxdwfe-instagram-grid { grid-template-columns: repeat(4, 1fr); }
.uxdwfe-columns-5 .uxdwfe-instagram-grid { grid-template-columns: repeat(5, 1fr); }
.uxdwfe-columns-6 .uxdwfe-instagram-grid { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
    .uxdwfe-columns-tablet-1 .uxdwfe-instagram-grid { grid-template-columns: repeat(1, 1fr); }
    .uxdwfe-columns-tablet-2 .uxdwfe-instagram-grid { grid-template-columns: repeat(2, 1fr); }
    .uxdwfe-columns-tablet-3 .uxdwfe-instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .uxdwfe-columns-mobile-1 .uxdwfe-instagram-grid { grid-template-columns: repeat(1, 1fr); }
    .uxdwfe-columns-mobile-2 .uxdwfe-instagram-grid { grid-template-columns: repeat(2, 1fr); }
}

.uxdwfe-instagram-item {
    padding: 10px;
}

.uxdwfe-instagram-post {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1/1;
}

.uxdwfe-instagram-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.uxdwfe-instagram-post:hover .uxdwfe-instagram-image {
    transform: scale(1.05);
}

.uxdwfe-instagram-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.uxdwfe-instagram-post:hover .uxdwfe-instagram-overlay {
    opacity: 1;
}

.uxdwfe-instagram-caption {
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
}

.uxdwfe-instagram-stats {
    display: flex;
    gap: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.uxdwfe-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.uxdwfe-stat-item i {
    font-size: 16px;
}

.uxdwfe-instagram-link {
    display: block;
    text-decoration: none;
}

/* Masonry Grid */
.uxdwfe-masonry-grid {
    grid-auto-flow: dense;
}

.uxdwfe-masonry-grid .uxdwfe-instagram-item:nth-child(3n+1) .uxdwfe-instagram-post {
    aspect-ratio: 1/1.2;
}

/* Carousel specific styles */
.uxdwfe-instagram-carousel .swiper-slide {
    height: auto;
}

/* ===================================
   Circle & Semi-Circle Progress Bars
   =================================== */
.uxdwfe-layout-circle .uxdwfe-progress-item,
.uxdwfe-layout-semi-circle .uxdwfe-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.uxdwfe-progress-circle-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
}

.uxdwfe-layout-semi-circle .uxdwfe-progress-circle-container {
    height: 100px;
    overflow: hidden;
}

.uxdwfe-progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.uxdwfe-layout-semi-circle .uxdwfe-progress-svg {
    transform: rotate(-180deg);
}

.uxdwfe-progress-circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.uxdwfe-layout-semi-circle .uxdwfe-progress-circle-content {
    top: 80%;
}

.uxdwfe-layout-circle .uxdwfe-progress-percentage,
.uxdwfe-layout-semi-circle .uxdwfe-progress-percentage {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.uxdwfe-layout-circle .uxdwfe-progress-item,
.uxdwfe-layout-semi-circle .uxdwfe-progress-item {
    flex: 1;
    min-width: 200px;
}

.uxdwfe-layout-circle,
.uxdwfe-layout-semi-circle {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

/* ===================================
   Button Widget Styles
   =================================== */
.uxdwfe-button-wrapper {
    display: inline-block;
}

/* Wrapper for block/justified buttons */
.uxdwfe-button-wrapper:has(.uxdwfe-button-block) {
    display: block;
    width: 100%;
}

.uxdwfe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}

.uxdwfe-button-block {
    display: flex !important;
    width: 100% !important;
}

/* Fallback for browsers that don't support :has() */
.uxdwfe-button-wrapper .uxdwfe-button-block {
    width: 100%;
}

/* Button Icon Styles */
.uxdwfe-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
}

.uxdwfe-button-icon i,
.uxdwfe-button-icon svg {
    display: block;
    line-height: 1;
}

.uxdwfe-button-icon-left {
    margin-right: 10px;
}

.uxdwfe-button-icon-right {
    margin-left: 10px;
}

/* Button Sizes */
.uxdwfe-button-xs {
    padding: 8px 16px;
    font-size: 12px;
}

.uxdwfe-button-sm {
    padding: 10px 20px;
    font-size: 14px;
}

.uxdwfe-button-md {
    padding: 12px 28px;
    font-size: 16px;
}

.uxdwfe-button-lg {
    padding: 16px 36px;
    font-size: 18px;
}

.uxdwfe-button-xl {
    padding: 20px 44px;
    font-size: 20px;
}

/* Hover Animations */
.uxdwfe-button-animation-grow:hover {
    transform: scale(1.1);
}

.uxdwfe-button-animation-shrink:hover {
    transform: scale(0.9);
}

.uxdwfe-button-animation-pulse:hover {
    animation: pulse 0.6s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.uxdwfe-button-animation-push:hover {
    transform: translateY(-5px);
}

.uxdwfe-button-animation-pop:hover {
    transform: scale(1.15);
}

.uxdwfe-button-animation-bounce:hover {
    animation: bounce 0.6s;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.uxdwfe-button-animation-rotate:hover {
    transform: rotate(4deg);
}

.uxdwfe-button-animation-grow-rotate:hover {
    transform: scale(1.1) rotate(4deg);
}

.uxdwfe-button-animation-float:hover {
    transform: translateY(-8px);
}

.uxdwfe-button-animation-sink:hover {
    transform: translateY(8px);
}

.uxdwfe-button-animation-wobble:hover {
    animation: wobble 0.6s;
}

@keyframes wobble {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-5deg); }
    75% { transform: translateX(5px) rotate(5deg); }
}

.uxdwfe-button-animation-skew:hover {
    transform: skewX(-10deg);
}

.uxdwfe-button-animation-buzz:hover {
    animation: buzz 0.15s linear infinite;
}

@keyframes buzz {
    50% { transform: translateX(3px) rotate(2deg); }
    100% { transform: translateX(-3px) rotate(-2deg); }
}

/* ===================================
   Dual Button Widget Styles
   =================================== */
.uxdwfe-dual-button-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.uxdwfe-dual-button-primary,
.uxdwfe-dual-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    border: 2px solid transparent;
}

.uxdwfe-dual-button-secondary {
    border-color: #667eea;
}

/* Dual Button Icon Styles */
.uxdwfe-dual-button-primary .uxdwfe-button-icon,
.uxdwfe-dual-button-secondary .uxdwfe-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
}

.uxdwfe-dual-button-primary .uxdwfe-button-icon i,
.uxdwfe-dual-button-primary .uxdwfe-button-icon svg,
.uxdwfe-dual-button-secondary .uxdwfe-button-icon i,
.uxdwfe-dual-button-secondary .uxdwfe-button-icon svg {
    display: block;
    line-height: 1;
}

.uxdwfe-dual-button-primary .uxdwfe-button-icon-left,
.uxdwfe-dual-button-secondary .uxdwfe-button-icon-left {
    margin-right: 8px;
}

.uxdwfe-dual-button-primary .uxdwfe-button-icon-right,
.uxdwfe-dual-button-secondary .uxdwfe-button-icon-right {
    margin-left: 8px;
}

.uxdwfe-dual-button-middle {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

/* ===================================
   Gallery Widget Styles
   =================================== */
.uxdwfe-gallery-widget {
    width: 100%;
}

/* Grid Layout */
.uxdwfe-gallery-widget.uxdwfe-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* Masonry Layout */
.uxdwfe-gallery-widget.uxdwfe-gallery-masonry {
    column-count: 3;
    column-gap: 15px;
}

.uxdwfe-gallery-widget.uxdwfe-gallery-masonry .uxdwfe-gallery-item {
    break-inside: avoid;
    margin-bottom: 15px;
    display: inline-block;
    width: 100%;
}

/* Justified Layout */
.uxdwfe-gallery-widget.uxdwfe-gallery-justified {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
}

.uxdwfe-gallery-widget.uxdwfe-gallery-justified .uxdwfe-gallery-item {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 400px;
}

/* Gallery Item */
.uxdwfe-gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: block;
    width:100%;
}

.uxdwfe-gallery-item > a {
    position: relative;
    display: block;
    overflow: hidden;
}

.uxdwfe-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Overlay */
.uxdwfe-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(102, 126, 234, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.uxdwfe-gallery-item:hover .uxdwfe-gallery-overlay,
.uxdwfe-gallery-item > a:hover .uxdwfe-gallery-overlay {
    opacity: 1;
}

.uxdwfe-gallery-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #ffffff;
    margin-bottom: 10px;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.uxdwfe-gallery-icon i,
.uxdwfe-gallery-icon svg {
    pointer-events: none;
}

.uxdwfe-gallery-item:hover .uxdwfe-gallery-icon,
.uxdwfe-gallery-item > a:hover .uxdwfe-gallery-icon {
    transform: scale(1.1);
}

/* Caption */
.uxdwfe-gallery-caption {
    padding: 10px 15px;
    text-align: center;
    font-size: 14px;
}

.uxdwfe-gallery-caption-below {
    background-color: #f5f5f5;
    color: #1d2327;
    padding: 10px;
}

/* Hover Effects */
.uxdwfe-gallery-item.uxdwfe-hover-zoom:hover img,
.uxdwfe-gallery-item.uxdwfe-hover-zoom > a:hover img {
    transform: scale(1.2);
}

.uxdwfe-gallery-item.uxdwfe-hover-zoom-out:hover img,
.uxdwfe-gallery-item.uxdwfe-hover-zoom-out > a:hover img {
    transform: scale(0.85);
}

.uxdwfe-gallery-item.uxdwfe-hover-slide:hover img,
.uxdwfe-gallery-item.uxdwfe-hover-slide > a:hover img {
    transform: translateX(10px);
}

.uxdwfe-gallery-item.uxdwfe-hover-rotate:hover img,
.uxdwfe-gallery-item.uxdwfe-hover-rotate > a:hover img {
    transform: rotate(5deg) scale(1.1);
}

.uxdwfe-gallery-item.uxdwfe-hover-grayscale img {
    filter: grayscale(0);
    transition: filter 0.4s ease;
}

.uxdwfe-gallery-item.uxdwfe-hover-grayscale:hover img,
.uxdwfe-gallery-item.uxdwfe-hover-grayscale > a:hover img {
    filter: grayscale(100%);
}

.uxdwfe-gallery-item.uxdwfe-hover-blur img {
    filter: blur(0);
    transition: filter 0.4s ease;
}

.uxdwfe-gallery-item.uxdwfe-hover-blur:hover img,
.uxdwfe-gallery-item.uxdwfe-hover-blur > a:hover img {
    filter: blur(3px);
}

/* Keep Elementor lightbox controls above sticky headers/nav */
.dialog-widget.dialog-lightbox-widget,
.elementor-lightbox {
    z-index: 1000002 !important;
}

.dialog-lightbox-close-button,
.dialog-lightbox-arrow,
.dialog-lightbox-zoom-button,
.dialog-lightbox-item .dialog-lightbox-image {
    z-index: 1000003 !important;
}

/* Frontend fallback arrows (in case icon font is missing/overridden) */
.dialog-lightbox-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
}

.dialog-lightbox-arrow i {
    display: none !important;
}

.dialog-lightbox-arrow::before {
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.dialog-lightbox-arrow.dialog-lightbox-arrow-prev::before {
    transform: rotate(-135deg);
}

.dialog-lightbox-arrow.dialog-lightbox-arrow-next::before {
    transform: rotate(45deg);
}

/* ==========================================
   Sticky Menu Widget - Essential Styles
   ========================================== */
.uxdwfe-sticky-menu-wrapper {
    position: relative;
    width: 100%;
}

.uxdwfe-sticky-menu {
    position: relative;
    width: 100%;
    z-index: 999;
    transition: all 0.3s ease;
}

.uxdwfe-sticky-menu.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    animation: slideDown 0.3s ease;
}

.uxdwfe-sticky-menu.uxdwfe-hidden {
    transform: translateY(-100%);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.uxdwfe-sticky-menu-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

.uxdwfe-sticky-menu-logo {
    flex-shrink: 0;
}

.uxdwfe-sticky-menu-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.uxdwfe-sticky-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    flex-wrap: wrap;
}

.uxdwfe-menu-horizontal .uxdwfe-sticky-menu-list {
    flex-direction: row;
}

.uxdwfe-menu-vertical .uxdwfe-sticky-menu-list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.uxdwfe-sticky-menu-item {
    list-style: none;
}

.uxdwfe-sticky-menu-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.uxdwfe-menu-icon {
    display: inline-flex;
    align-items: center;
}

.uxdwfe-menu-text {
    display: inline-block;
}

.uxdwfe-icon-left {
    margin-right: 8px;
}

.uxdwfe-icon-right {
    margin-left: 8px;
}

/* Mobile Toggle */
.uxdwfe-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    flex-shrink: 0;
    color: #333333; /* fallback — overridden by Elementor control */
    touch-action: manipulation; /* removes 300ms tap delay on mobile */
}

.uxdwfe-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.uxdwfe-mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.uxdwfe-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.uxdwfe-mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Responsive */
@media (max-width: 768px) {
    .uxdwfe-mobile-toggle {
        display: flex;
    }
    
    .uxdwfe-sticky-menu-list {
        display: none;
        width: 100%;
        flex-direction: column;
        margin-top: 15px;
    }
    
    .uxdwfe-sticky-menu-list.active {
        display: flex;
    }
    
    .uxdwfe-sticky-menu-item {
        width: 100%;
    }
    
    .uxdwfe-sticky-menu-item a {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==========================================
   Offcanvas Menu Widget - Essential Styles
   ========================================== */
.uxdwfe-offcanvas-widget {
    position: relative;
}

.uxdwfe-offcanvas-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.3s ease;
}

.uxdwfe-hamburger {
    display: flex;
    flex-direction: column;
}

.uxdwfe-hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 3px 0;
    transition: all 0.3s ease;
}

.uxdwfe-offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.uxdwfe-offcanvas-overlay.uxdwfe-active {
    opacity: 1;
    visibility: visible;
}

.uxdwfe-offcanvas-panel {
    position: fixed;
    z-index: 9999;
    overflow-y: auto;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Panel Positions */
.uxdwfe-offcanvas-left {
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
}

.uxdwfe-offcanvas-right {
    top: 0;
    right: 0;
    height: 100%;
    transform: translateX(100%);
}

.uxdwfe-offcanvas-top {
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-100%);
}

.uxdwfe-offcanvas-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
}

/* Active States */
.uxdwfe-offcanvas-panel.uxdwfe-active.uxdwfe-offcanvas-left,
.uxdwfe-offcanvas-panel.uxdwfe-active.uxdwfe-offcanvas-right {
    transform: translateX(0);
}

.uxdwfe-offcanvas-panel.uxdwfe-active.uxdwfe-offcanvas-top,
.uxdwfe-offcanvas-panel.uxdwfe-active.uxdwfe-offcanvas-bottom {
    transform: translateY(0);
}

/* Animation Types */
.uxdwfe-animation-fade.uxdwfe-offcanvas-panel {
    opacity: 0;
}

.uxdwfe-animation-fade.uxdwfe-offcanvas-panel.uxdwfe-active {
    opacity: 1;
}

/* Prevent body scroll when open */
body.uxdwfe-offcanvas-body-open {
    overflow: hidden;
}

/* Offcanvas Header */
.uxdwfe-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.uxdwfe-offcanvas-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.uxdwfe-offcanvas-header-title {
    margin: 0;
    flex: 1;
}

.uxdwfe-offcanvas-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: all 0.3s ease;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

/* Offcanvas Content */
.uxdwfe-offcanvas-content {
    flex: 1;
    overflow-y: auto;
}

.uxdwfe-offcanvas-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uxdwfe-offcanvas-menu-item {
    list-style: none;
}

.uxdwfe-offcanvas-menu-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.uxdwfe-menu-badge {
    margin-left: auto;
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #667eea;
    color: #fff;
}

/* Offcanvas Footer */
.uxdwfe-offcanvas-footer {
    margin-top: auto;
}

.uxdwfe-offcanvas-social {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.uxdwfe-offcanvas-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.uxdwfe-offcanvas-footer-text {
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================
   Dropdown/Submenu Styles - Sticky Menu
   ========================================== */
.uxdwfe-sticky-menu-list .menu-item-has-children {
    position: relative;
}

/* Bridge pseudo-element prevents gap between nav item and dropdown */
.uxdwfe-sticky-menu-list .menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
    display: block;
}

.uxdwfe-sticky-menu-list .sub-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 9999;
    pointer-events: none;
}

.uxdwfe-sticky-menu-list .menu-item-has-children:hover > .sub-menu,
.uxdwfe-sticky-menu-list .menu-item-has-children.uxdwfe-dropdown-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Dropdown Animations */
.uxdwfe-dropdown-fade .uxdwfe-sticky-menu-list .sub-menu {
    transform: translateY(8px);
}
.uxdwfe-dropdown-fade .uxdwfe-sticky-menu-list .menu-item-has-children:hover > .sub-menu,
.uxdwfe-dropdown-fade .uxdwfe-sticky-menu-list .menu-item-has-children.uxdwfe-dropdown-open > .sub-menu {
    transform: translateY(0);
}

.uxdwfe-dropdown-slide .uxdwfe-sticky-menu-list .sub-menu {
    transform: translateY(-12px);
}
.uxdwfe-dropdown-slide .uxdwfe-sticky-menu-list .menu-item-has-children:hover > .sub-menu,
.uxdwfe-dropdown-slide .uxdwfe-sticky-menu-list .menu-item-has-children.uxdwfe-dropdown-open > .sub-menu {
    transform: translateY(0);
}

.uxdwfe-dropdown-zoom .uxdwfe-sticky-menu-list .sub-menu {
    transform: scale(0.92);
    transform-origin: top center;
}
.uxdwfe-dropdown-zoom .uxdwfe-sticky-menu-list .menu-item-has-children:hover > .sub-menu,
.uxdwfe-dropdown-zoom .uxdwfe-sticky-menu-list .menu-item-has-children.uxdwfe-dropdown-open > .sub-menu {
    transform: scale(1);
}

.uxdwfe-dropdown-flip .uxdwfe-sticky-menu-list .sub-menu {
    transform: rotateX(-15deg);
    transform-origin: top center;
    perspective: 600px;
}
.uxdwfe-dropdown-flip .uxdwfe-sticky-menu-list .menu-item-has-children:hover > .sub-menu,
.uxdwfe-dropdown-flip .uxdwfe-sticky-menu-list .menu-item-has-children.uxdwfe-dropdown-open > .sub-menu {
    transform: rotateX(0);
}

.uxdwfe-dropdown-bounce .uxdwfe-sticky-menu-list .sub-menu {
    transform: translateY(10px);
    animation: none;
}
.uxdwfe-dropdown-bounce .uxdwfe-sticky-menu-list .menu-item-has-children:hover > .sub-menu,
.uxdwfe-dropdown-bounce .uxdwfe-sticky-menu-list .menu-item-has-children.uxdwfe-dropdown-open > .sub-menu {
    transform: translateY(0);
    animation: uxdDropBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes uxdDropBounce {
    0%   { transform: translateY(10px); opacity: 0; }
    60%  { transform: translateY(-4px); }
    100% { transform: translateY(0);   opacity: 1; }
}

/* Dropdown Indicator */
.uxdwfe-dropdown-indicator {
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
    touch-action: manipulation;
    cursor: pointer;
}

.menu-item-has-children:hover > a .uxdwfe-dropdown-indicator {
    transform: rotate(180deg);
}

/* Mobile Dropdown Indicator */
@media (max-width: 768px) {
    .uxdwfe-sticky-menu-list .uxdwfe-dropdown-indicator {
        cursor: pointer;
        padding: 5px;
    }

    .uxdwfe-sticky-menu-list .menu-item-has-children.active > a .uxdwfe-dropdown-indicator {
        transform: rotate(180deg);
    }
}

/* Submenu Items */
.uxdwfe-sticky-menu-list .sub-menu li {
    width: 100%;
}

.uxdwfe-sticky-menu-list .sub-menu a {
    display: block;
    width: 100%;
    white-space: nowrap;
}

/* Second Level Submenu */
.uxdwfe-sticky-menu-list .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

/* Mobile Submenu */
@media (max-width: 768px) {
    .uxdwfe-sticky-menu-list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        display: none;
        width: 100%;
        padding-left: 20px;
        transform: none !important;
        transition: none !important;
    }

    .uxdwfe-sticky-menu-list .menu-item-has-children.active > .sub-menu {
        display: block;
        pointer-events: auto;
    }

    /* Disable the bridge pseudo-element on mobile */
    .uxdwfe-sticky-menu-list .menu-item-has-children::after {
        display: none;
    }

    .uxdwfe-dropdown-indicator {
        margin-left: auto;
        padding: 8px;
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================
   Offcanvas Submenu Styles
   ========================================== */
.uxdwfe-offcanvas-menu-list .sub-menu {
    list-style: none;
    margin: 0;
    padding-left: 20px;
    display: none;
}

.uxdwfe-offcanvas-menu-list .menu-item-has-children.active > .sub-menu {
    display: block;
}

.uxdwfe-offcanvas-menu-list .uxdwfe-dropdown-indicator {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
    padding: 5px;
}

.uxdwfe-offcanvas-menu-list .menu-item-has-children.active > a .uxdwfe-dropdown-indicator {
    transform: rotate(180deg);
}

/* Additional Offcanvas Menu Fixes */
.uxdwfe-offcanvas-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uxdwfe-offcanvas-menu-list .uxdwfe-offcanvas-menu-item,
.uxdwfe-offcanvas-menu-list li {
    list-style: none;
    margin: 0;
}

.uxdwfe-offcanvas-menu-list a {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
}

.uxdwfe-offcanvas-menu-list .uxdwfe-menu-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    flex-shrink: 0;
}

.uxdwfe-offcanvas-menu-list .uxdwfe-menu-text {
    flex: 1;
}

.uxdwfe-offcanvas-menu-list .menu-item-has-children > a::after {
    flex-shrink: 0;
}

.uxdwfe-offcanvas-menu-list .sub-menu {
    padding: 0 0 0 20px;
}

.uxdwfe-offcanvas-menu-list .sub-menu a {
    font-size: 0.95em;
}

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

/* ============================================
   WooCommerce Mini Cart Widget Styles - MODERN DESIGN
   ============================================ */

.uxdwfe-mini-cart-wrapper {
    position: relative;
}

.uxdwfe-mini-cart-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* Styles controlled via Elementor */
}

/* Icon position variations */
.uxdwfe-mini-cart-trigger.icon-position-left {
    flex-direction: row;
}

.uxdwfe-mini-cart-trigger.icon-position-right {
    flex-direction: row-reverse;
}

.uxdwfe-mini-cart-trigger.icon-position-top {
    flex-direction: column;
}

.uxdwfe-mini-cart-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.uxdwfe-mini-cart-icon {
    line-height: 1;
    /* Size and color controlled via Elementor */
}

.uxdwfe-mini-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Background, color, typography controlled via Elementor */
}

/* ── Mini Cart Panel ───────────────────────────────────────────────────────
   The panel is teleported to <body> by JS to escape parent stacking contexts
   (Elementor sticky/transformed headers). All positioning is therefore
   applied to body-level elements.
   ───────────────────────────────────────────────────────────────────────── */

/* Base panel — used for both modes once teleported to body */
.uxdwfe-mini-cart-panel {
    position: fixed;          /* fixed so it works from body in both modes */
    width: 380px;
    max-height: 600px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999999;          /* above Elementor sticky header (9999) and any overlays */
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Dropdown: JS sets top/right via getBoundingClientRect — no extra CSS needed */

/* Slide Toggle: slide in from the right */
.uxdwfe-mini-cart-panel.panel-slide-toggle {
    top: 0;
    right: -100%;
    left: auto;
    width: 450px;
    max-width: 90vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    transform: none;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0s,
                visibility 0s;
    opacity: 1;
    visibility: visible;
}

.uxdwfe-mini-cart-panel.panel-slide-toggle.open {
    right: 0;
}

/* Dropdown open state */
.uxdwfe-mini-cart-panel:not(.panel-slide-toggle).open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Overlay ───────────────────────────────────────────────────────────── */
.uxdwfe-mini-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999998;          /* just below panel */
}

.uxdwfe-mini-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.uxdwfe-mini-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e9ecef;
}

.uxdwfe-mini-cart-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.uxdwfe-mini-cart-header .uxdwfe-mini-cart-close {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.uxdwfe-mini-cart-header .uxdwfe-mini-cart-close:hover {
    background: rgb(220, 3, 3);
    color: #fff;
    transform: rotate(90deg);
}

.uxdwfe-mini-cart-content {
    padding: 24px 28px;
    overflow-y: auto;
    max-height: calc(600px - 100px);
}

.cart-style-slide_toggle .uxdwfe-mini-cart-content {
    max-height: calc(100vh - 100px);
}

/* Custom Scrollbar */
.uxdwfe-mini-cart-content::-webkit-scrollbar {
    width: 6px;
}

.uxdwfe-mini-cart-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.uxdwfe-mini-cart-content::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.uxdwfe-mini-cart-content::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* Enhanced WooCommerce Mini Cart Items */
.uxdwfe-mini-cart-content .woocommerce-mini-cart {
    margin: 0;
    padding: 0;
    list-style: none;
}
.uxdwfe-mini-cart-content .woocommerce-mini-cart-item {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 10px;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item:last-child{
    border-bottom: none;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item img {
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart__buttons .button {
    border-radius: 10px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart__buttons .checkout {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart__buttons .checkout:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

body.uxdwfe-cart-open {
    overflow: hidden;
}

/* ============================================
   WooCommerce Sticky Cart Widget Styles - MODERN DESIGN
   ============================================ */

.uxdwfe-sticky-cart-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

.uxdwfe-sticky-cart-wrapper.slide-position-left {
    left: 30px;
    right: auto;
}

.uxdwfe-sticky-cart-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    border: none;
    /* Size, background, color, border-radius, box-shadow controlled via Elementor */
}

/* Icon position variations */
.uxdwfe-sticky-cart-trigger.icon-position-left {
    flex-direction: row;
}

.uxdwfe-sticky-cart-trigger.icon-position-right {
    flex-direction: row-reverse;
}

.uxdwfe-sticky-cart-trigger.icon-position-top {
    flex-direction: column;
}

.uxdwfe-sticky-cart-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.uxdwfe-sticky-cart-icon {
    line-height: 1;
    /* Size and color controlled via Elementor */
}

.uxdwfe-sticky-cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    border-radius: 14px;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    animation: bounce 0.5s ease;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.uxdwfe-sticky-cart-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 450px;
    max-width: 90vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    overflow: hidden;
}

.uxdwfe-sticky-cart-wrapper.slide-position-left .uxdwfe-sticky-cart-panel {
    left: -100%;
    right: auto;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.15);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.uxdwfe-sticky-cart-panel.open {
    right: 0;
}

.uxdwfe-sticky-cart-wrapper.slide-position-left .uxdwfe-sticky-cart-panel.open {
    left: 0;
}

.uxdwfe-sticky-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9998;
}

.uxdwfe-sticky-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.uxdwfe-sticky-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.uxdwfe-sticky-cart-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.uxdwfe-sticky-cart-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
}

.uxdwfe-sticky-cart-close {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.uxdwfe-sticky-cart-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.uxdwfe-sticky-cart-content {
    padding: 28px;
    overflow-y: auto;
    height: calc(100vh - 96px);
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100px);
}

/* Custom Scrollbar for Sticky Cart */
.uxdwfe-sticky-cart-content::-webkit-scrollbar {
    width: 6px;
}

.uxdwfe-sticky-cart-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.uxdwfe-sticky-cart-content::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.uxdwfe-sticky-cart-content::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* Enhanced WooCommerce Sticky Cart Items */
.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item {
    padding: 18px !important;
    margin-bottom: 16px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f0f0f0 !important;
    display: flex !important;
    gap: 16px !important;
    transition: all 0.3s ease !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item img {
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 2px solid #f0f0f0 !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__buttons .button {
    border-radius: 12px !important;
    padding: 16px 28px !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__buttons .checkout {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__buttons .checkout:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5) !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__buttons .button:not(.checkout) {
    background: #ffffff !important;
    color: #667eea !important;
    border: 2px solid #667eea !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
    background: #667eea !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

body.uxdwfe-sticky-cart-open {
    overflow: hidden;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .uxdwfe-mini-cart-panel,
    .uxdwfe-sticky-cart-panel {
        width: 100%;
        max-width: 100%;
    }

    .uxdwfe-sticky-cart-wrapper {
        bottom: 20px;
        right: 20px;
    }

    .uxdwfe-sticky-cart-wrapper.slide-position-left {
        left: 20px;
    }

    .uxdwfe-mini-cart-header,
    .uxdwfe-sticky-cart-header {
        padding: 20px;
    }

    .uxdwfe-mini-cart-content,
    .uxdwfe-sticky-cart-content {
        padding: 20px;
    }

    /* Cart items responsive */
    .uxdwfe-mini-cart-content .woocommerce-mini-cart-item img {
        width: 50px !important;
        height: 50px !important;
    }

    .uxdwfe-sticky-cart-content .woocommerce-mini-cart-item img {
        width: 60px !important;
        height: 60px !important;
    }

    .uxdwfe-mini-cart-panel {
        max-width: 100vw !important;
    }

    /* Dropdown: center horizontally on small screens */
    .uxdwfe-mini-cart-panel:not(.panel-slide-toggle) {
        left: 5vw !important;
        right: 5vw !important;
        width: 90vw !important;
        max-width: 380px !important;
    }

    /* Slide toggle: full width on mobile */
    .uxdwfe-mini-cart-panel.panel-slide-toggle {
        width: 100% !important;
        max-width: 100% !important;
    }

    .uxdwfe-sticky-cart-panel {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* ============================================
   WooCommerce Cart Items Enhancement
   ============================================ */

/* Mini Cart Items Fixes */
.uxdwfe-mini-cart-content .woocommerce-mini-cart-item {
    position: relative ;
    align-items: center;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item a:not(.remove) {
    display: flex !important;
    gap: 12px !important;
    flex: 1 !important;
    text-decoration: none !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item .remove {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 107, 107, 0.1) !important;
    border-radius: 50% !important;
    color: #ff6b6b !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item .remove:hover {
    background: #ff6b6b !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item .quantity {
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 6px !important;
    font-weight: 600 !important;
    display: block !important;
    line-height: 1.4 !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart__total {
    padding: 16px 0 !important;
    border-top: 2px solid #f0f0f0 !important;
    margin-top: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart__total strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart__total .amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #667eea !important;
}

/* Sticky Cart Items Fixes */
.uxdwfe-sticky-cart-content .woocommerce-mini-cart{
    margin: 0;
    padding: 0;
    list-style: none;
}
.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item {
    position: relative;
    align-items: center;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item a:not(.remove) {
    display: flex !important;
    gap: 16px !important;
    flex: 1 !important;
    text-decoration: none !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item .remove {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 107, 107, 0.1) !important;
    border-radius: 50% !important;
    color: #ff6b6b !important;
    font-size: 20px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item .remove:hover {
    background: #ff6b6b !important;
    color: #ffffff !important;
    transform: rotate(90deg) scale(1.1) !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item .quantity {
    font-size: 14px !important;
    color: #666 !important;
    margin-top: 8px !important;
    font-weight: 600 !important;
    display: block !important;
    line-height: 1.4 !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__total {
    padding: 20px 0 !important;
    border-top: 2px solid #f0f0f0 !important;
    margin-top: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__total strong {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.uxdwfe-sticky-cart-content .woocommerce-mini-cart__total .amount {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #667eea !important;
}

/* Empty Cart Message */
.uxdwfe-mini-cart-content .woocommerce-mini-cart__empty-message,
.uxdwfe-sticky-cart-content .woocommerce-mini-cart__empty-message {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #999 !important;
    font-size: 15px !important;
}

/* Product Name in Cart */
.uxdwfe-mini-cart-content .woocommerce-mini-cart-item a:not(.remove) > *:not(img),
.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item a:not(.remove) > *:not(img) {
    flex: 1 !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item a:not(.remove)::after,
.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item a:not(.remove)::after {
    content: none !important;
}

/* Product Title Styling */
.uxdwfe-mini-cart-content .woocommerce-mini-cart-item .product-name,
.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item .product-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
}

/* Variation Details */
.uxdwfe-mini-cart-content .woocommerce-mini-cart-item .variation,
.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item .variation {
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 4px !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item .variation dt,
.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item .variation dt {
    display: inline !important;
    font-weight: 600 !important;
}

.uxdwfe-mini-cart-content .woocommerce-mini-cart-item .variation dd,
.uxdwfe-sticky-cart-content .woocommerce-mini-cart-item .variation dd {
    display: inline !important;
    margin: 0 !important;
}

/* Loading State */
.uxdwfe-mini-cart-content.loading,
.uxdwfe-sticky-cart-content.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* ===================================
   Image Tabs Widget (Expandable Panels)
   =================================== */
.uxdwfe-image-tabs-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.uxdwfe-image-tabs-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease;
}

.uxdwfe-image-tab {
    position: relative;
    flex: 1;
    min-width: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.uxdwfe-image-tab.active {
    flex: 3;
}

.uxdwfe-image-tab-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.5s ease;
}

.uxdwfe-image-tab.active .uxdwfe-image-tab-overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

.uxdwfe-image-tab-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.uxdwfe-image-tab-icon {
    margin-bottom: 15px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.uxdwfe-image-tab-icon i,
.uxdwfe-image-tab-icon svg {
    display: block;
    color: #ffffff;
    fill: #ffffff;
}

.uxdwfe-image-tab-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    transition: transform 0.3s ease;
    white-space: nowrap;
}

.uxdwfe-image-tab:not(.active) .uxdwfe-image-tab-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
}

.uxdwfe-image-tab:not(.active) .uxdwfe-image-tab-content {
    justify-content: center;
    align-items: center;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

.uxdwfe-image-tab-details {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    max-height: 0;
    overflow: hidden;
}

.uxdwfe-image-tab.active .uxdwfe-image-tab-details {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
}

.uxdwfe-image-tab-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.uxdwfe-image-tab-button {
    display: inline-block;
    padding: 10px 24px;
    background-color: #667eea;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.uxdwfe-image-tab-button:hover {
    background-color: #5a6fd6;
    transform: translateY(-2px);
}

/* Navigation Arrows */
.uxdwfe-image-tabs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.uxdwfe-image-tabs-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.uxdwfe-image-tabs-prev {
    left: 15px;
}

.uxdwfe-image-tabs-next {
    right: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .uxdwfe-image-tabs-wrapper {
        flex-direction: column;
    }

    .uxdwfe-image-tab {
        min-height: 120px;
    }

    .uxdwfe-image-tab.active {
        flex: 4;
    }

    .uxdwfe-image-tab:not(.active) .uxdwfe-image-tab-title {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .uxdwfe-image-tab:not(.active) .uxdwfe-image-tab-content {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        top: auto;
        bottom: 0;
        transform: none;
        padding: 15px;
    }

    .uxdwfe-image-tab:not(.active) .uxdwfe-image-tab-icon {
        margin-bottom: 0;
        margin-right: 10px;
    }

    .uxdwfe-image-tab-content {
        padding: 20px;
    }

    .uxdwfe-image-tabs-nav {
        display: none;
    }
}

/* ===================================
   Table of Contents Widget
   =================================== */
.uxdwfe-toc-widget {
    background-color: #f9f9f9;
    border-radius: 8px;
}

.uxdwfe-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
}

.uxdwfe-toc-show-separator .uxdwfe-toc-header {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}

.uxdwfe-toc-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

.uxdwfe-toc-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #666666;
    transition: transform 0.3s ease;
}

.uxdwfe-toc-collapsed .uxdwfe-toc-toggle {
    transform: rotate(-90deg);
}

.uxdwfe-toc-body {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.uxdwfe-toc-collapsed .uxdwfe-toc-body {
    max-height: 0 !important;
    opacity: 0;
}

.uxdwfe-toc-nav {
    margin: 0;
}

.uxdwfe-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uxdwfe-toc-numbered .uxdwfe-toc-list {
    counter-reset: toc-counter;
}

.uxdwfe-toc-numbered .uxdwfe-toc-item {
    counter-increment: toc-counter;
}

.uxdwfe-toc-numbered .uxdwfe-toc-link::before {
    content: counter(toc-counter) ". ";
    margin-right: 5px;
    color: inherit;
    opacity: 0.7;
}

.uxdwfe-toc-item {
    margin-bottom: 5px;
}

.uxdwfe-toc-link {
    display: block;
    padding: 8px 12px;
    color: #333333;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
}

.uxdwfe-toc-link:hover {
    color: #667eea;
    background-color: rgba(102, 126, 234, 0.05);
}

.uxdwfe-toc-link.active {
    color: #667eea;
    background-color: rgba(102, 126, 234, 0.1);
    font-weight: 500;
}

/* Active Marker */
.uxdwfe-toc-show-marker .uxdwfe-toc-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: #667eea;
    border-radius: 2px;
}

.uxdwfe-toc-show-marker.uxdwfe-toc-numbered .uxdwfe-toc-link.active::before {
    content: '';
}

.uxdwfe-toc-show-marker.uxdwfe-toc-numbered .uxdwfe-toc-link::after {
    content: counter(toc-counter) ". ";
    position: static;
    margin-right: 5px;
    color: inherit;
    opacity: 0.7;
}

/* Hierarchical Styling */
.uxdwfe-toc-hierarchical .uxdwfe-toc-list .uxdwfe-toc-list {
    padding-left: 20px;
    margin-top: 5px;
}

.uxdwfe-toc-hierarchical .uxdwfe-toc-list .uxdwfe-toc-list .uxdwfe-toc-link {
    font-size: 14px;
    padding: 6px 10px;
}

.uxdwfe-toc-hierarchical .uxdwfe-toc-list .uxdwfe-toc-list .uxdwfe-toc-list .uxdwfe-toc-link {
    font-size: 13px;
    padding: 5px 8px;
}

/* Loading State */
.uxdwfe-toc-loading {
    color: #999;
    font-style: italic;
    padding: 10px 0;
}

/* Empty State */
.uxdwfe-toc-empty {
    text-align: center;
    padding: 20px;
    color: #999;
}

.uxdwfe-toc-empty p {
    margin: 0;
}

/* Hide widget when not enough headings */
.uxdwfe-toc-widget.uxdwfe-toc-hidden {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .uxdwfe-toc-widget {
        padding: 15px;
    }

    .uxdwfe-toc-title {
        font-size: 16px;
    }

    .uxdwfe-toc-link {
        font-size: 14px;
        padding: 6px 10px;
    }
}

/* ============================================================
   UXD Process Steps Widget
   ============================================================ */

.uxdwfe-process-steps-widget {
    width: 100%;
}

/* Inner flex row */
.uxdwfe-process-steps-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/* Horizontal layout */
.uxdwfe-process-steps-layout-horizontal .uxdwfe-process-steps-inner {
    flex-direction: row;
    align-items: flex-start;
}

.uxdwfe-process-steps-layout-horizontal .uxdwfe-process-step {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

/* Column count overrides */
.uxdwfe-process-steps-layout-horizontal.uxdwfe-process-cols-2 .uxdwfe-process-step { flex-basis: calc(50% - 15px); }
.uxdwfe-process-steps-layout-horizontal.uxdwfe-process-cols-3 .uxdwfe-process-step { flex-basis: calc(33.333% - 20px); }
.uxdwfe-process-steps-layout-horizontal.uxdwfe-process-cols-4 .uxdwfe-process-step { flex-basis: calc(25% - 23px); }

/* Vertical layout */
.uxdwfe-process-steps-layout-vertical .uxdwfe-process-steps-inner {
    flex-direction: column;
    gap: 0;
}

.uxdwfe-process-steps-layout-vertical .uxdwfe-process-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Zigzag layout */
.uxdwfe-process-steps-layout-zigzag .uxdwfe-process-steps-inner {
    flex-direction: column;
    gap: 0;
}

.uxdwfe-process-steps-layout-zigzag .uxdwfe-process-step:nth-child(odd) {
    flex-direction: row;
}

.uxdwfe-process-steps-layout-zigzag .uxdwfe-process-step:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
}

/* Step number */
.uxdwfe-process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #667eea;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
}

/* Square variant */
.uxdwfe-process-num-square .uxdwfe-process-num {
    border-radius: 8px;
}

/* Number-only: no background */
.uxdwfe-process-num-number-only .uxdwfe-process-num {
    background: none;
    color: #667eea;
    width: auto;
    height: auto;
}

/* Icon inside circle */
.uxdwfe-process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}

/* Connector line (horizontal: pseudo-element on step, hides on last) */
.uxdwfe-process-steps-layout-horizontal .uxdwfe-process-connector {
    position: absolute;
    top: 28px; /* half of default circle size */
    left: calc(50% + 34px);
    right: calc(-50% + 34px);
    height: 0;
    border-top: 2px solid #d1d5db;
    z-index: 0;
}

/* Dashed connector */
.uxdwfe-process-conn-dashed .uxdwfe-process-connector {
    border-top-style: dashed;
}

/* Arrow connector: add arrow at end */
.uxdwfe-process-conn-arrow .uxdwfe-process-connector::after {
    content: '';
    position: absolute;
    right: -6px;
    top: -6px;
    border: 6px solid transparent;
    border-left-color: #d1d5db;
}

/* Hide connector on last step */
.uxdwfe-process-step:last-child .uxdwfe-process-connector {
    display: none;
}

/* Vertical connector */
.uxdwfe-process-steps-layout-vertical .uxdwfe-process-connector {
    position: absolute;
    top: 56px;
    left: 27px;
    width: 0;
    height: calc(100% + 30px);
    border-left: 2px solid #d1d5db;
}

.uxdwfe-process-step {
    position: relative;
}

/* Titles */
.uxdwfe-process-step-title {
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 10px;
}

.uxdwfe-process-step-desc {
    font-size: 15px;
    color: #646970;
    margin: 0;
}

/* Responsive */
@media (max-width: 767px) {
    .uxdwfe-process-steps-layout-horizontal .uxdwfe-process-steps-inner {
        flex-direction: column;
    }
    .uxdwfe-process-steps-layout-horizontal .uxdwfe-process-connector {
        display: none;
    }
}

/* ============================================================
   UXD Inner Hero Widget
   ============================================================ */

.uxdwfe-inner-hero-widget {
    padding: 40px 0 30px;
}

.uxdwfe-inner-hero-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.7);
}

.uxdwfe-inner-hero-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.uxdwfe-inner-hero-breadcrumb a:hover {
    opacity: 1;
    color: #ffffff;
}

.uxdwfe-inner-hero-bc-sep {
    opacity: 0.6;
    margin: 0 2px;
}

.uxdwfe-inner-hero-bc-current {
    opacity: 0.8;
}

.uxdwfe-inner-hero-title {
    margin: 0 0 16px;
    color: #ffffff;
}

.uxdwfe-inner-hero-subtitle {
    margin: 0 0 24px;
    color: rgba(255,255,255,0.85);
}

.uxdwfe-inner-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.uxdwfe-inner-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background-color: #ffffff;
    color: #1d2327;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}

/* ============================================================
   UXD Hero Section — Media Column (B1 enhancement)
   ============================================================ */

.uxdwfe-hero-has-media.uxdwfe-hero-section-widget {
    display: flex;
    align-items: center;
    gap: 40px;
}

.uxdwfe-hero-content-col {
    flex: 1 1 auto;
    min-width: 0;
}

.uxdwfe-hero-media-col {
    flex-shrink: 0;
}

.uxdwfe-hero-media-col img,
.uxdwfe-hero-media-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.uxdwfe-hero-media-video {
    display: block;
    max-width: 100%;
}

@media (max-width: 767px) {
    .uxdwfe-hero-has-media.uxdwfe-hero-section-widget {
        flex-direction: column;
    }
    .uxdwfe-hero-media-col {
        width: 100% !important;
        flex-basis: auto !important;
    }
    .uxdwfe-hero-content-col {
        width: 100% !important;
        flex-basis: auto !important;
    }
}

/* ============================================================
   UXD Services Grid — Tags (B2 enhancement)
   ============================================================ */

.uxdwfe-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.uxdwfe-service-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background-color: rgba(102,126,234,0.1);
    color: #667eea;
    line-height: 1.5;
}

/* ============================================================
   UXD Stats Counter — Grid Mode (B3 enhancement)
   ============================================================ */

.uxdwfe-stats-grid {
    display: grid;
    gap: 30px;
}

.uxdwfe-stats-grid-columns-2 { grid-template-columns: repeat(2, 1fr); }
.uxdwfe-stats-grid-columns-3 { grid-template-columns: repeat(3, 1fr); }
.uxdwfe-stats-grid-columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
    .uxdwfe-stats-grid-columns-3,
    .uxdwfe-stats-grid-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .uxdwfe-stats-grid-columns-2,
    .uxdwfe-stats-grid-columns-3,
    .uxdwfe-stats-grid-columns-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
/* ============================================================
   UXD Info Box Widget (formerly Feature Box)
   ============================================================ */

/* ── Base — default service-card look ─────────────────────── */
.uxdwfe-info-box-widget {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #f0f0f1;
    border-radius: 12px;
    padding: 36px 28px;
    text-align: center;
    transition: transform 0.35s ease,
                box-shadow 0.35s ease,
                border-color 0.35s ease,
                background-color 0.35s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Default hover (service-card style) */
.uxdwfe-info-box-widget:hover {
    box-shadow: 0 10px 32px rgba(102,126,234,0.14);
}

/* Inner flex */
.uxdwfe-info-box-inner {
    display: flex;
    gap: 20px;
}

.uxdwfe-info-box-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Typography defaults ────────────────────────────────────*/
.uxdwfe-feature-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #1d2327;
    transition: color 0.3s ease;
}

.uxdwfe-feature-description {
    font-size: 15px;
    line-height: 1.65;
    color: #646970;
    margin: 0;
    transition: color 0.3s ease;
}

.uxdwfe-feature-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ── Layout: top (default, stack vertically) ─────────────── */
.uxdwfe-info-layout-top {
    flex-direction: column;
    align-items: center;
}

/* ── Layout: left / right (row) ─────────────────────────────*/
.uxdwfe-info-layout-left {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
}

.uxdwfe-info-layout-right {
    flex-direction: row-reverse;
    align-items: flex-start;
    text-align: left;
}

/* ── Layout: bottom ─────────────────────────────────────────*/
.uxdwfe-info-layout-bottom {
    flex-direction: column-reverse;
    align-items: center;
}

/* ── Media wrapper ──────────────────────────────────────────*/
.uxdwfe-info-box-media {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.uxdwfe-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: #667eea;
    margin-bottom: 20px;
    transition: color 0.35s ease, transform 0.35s ease;
}

/* When layout is left/right, remove bottom margin on icon — gap handles spacing */
.uxdwfe-info-layout-left  .uxdwfe-feature-icon,
.uxdwfe-info-layout-right .uxdwfe-feature-icon {
    margin-bottom: 0;
}

.uxdwfe-feature-icon i,
.uxdwfe-feature-icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

.uxdwfe-info-box-image {
    display: block;
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Icon wrapper shapes ─────────────────────────────────── */
.uxdwfe-icon-wrapper-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.uxdwfe-icon-wrapper-square {
    width: 80px;
    height: 80px;
    border-radius: 12px;
}

/* When using a wrapper shape, icon needs no extra margin */
.uxdwfe-icon-wrapper .uxdwfe-feature-icon {
    margin-bottom: 0;
    font-size: inherit;
}

/* ── Button ─────────────────────────────────────────────────*/
.uxdwfe-feature-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: #667eea;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    margin-top: 16px;
}

.uxdwfe-feature-button:hover {
    transform: translateY(-2px);
}

.uxdwfe-button-icon {
    display: inline-flex;
    align-items: center;
}

/* ============================================================
   Hover Animations
   All use --uxd-anim-color CSS variable (default #667eea)
   ============================================================ */

/* Shared: pseudo-element base for all border sweeps / fills */
.uxdwfe-info-anim-border-bottom-lift::before,
.uxdwfe-info-anim-border-top-lift::before,
.uxdwfe-info-anim-border-left-lift::before,
.uxdwfe-info-anim-border-right-lift::before,
.uxdwfe-info-anim-fill-up::before,
.uxdwfe-info-anim-fill-down::before,
.uxdwfe-info-anim-corner-lines::before,
.uxdwfe-info-anim-corner-lines::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.38s ease;
}

/* ── Lift Up ────────────────────────────────────────────── */
.uxdwfe-info-anim-lift:hover {
    transform: translateY(-7px);
}

/* ── Shadow + Lift ──────────────────────────────────────── */
.uxdwfe-info-anim-shadow-lift:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.14) !important;
}

/* ── Border Bottom Sweep + Lift ─────────────────────────── */
.uxdwfe-info-anim-border-bottom-lift {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-border-bottom-lift::before {
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--uxd-anim-color);
    transform: scaleX(0);
    transform-origin: left;
}
.uxdwfe-info-anim-border-bottom-lift:hover::before {
    transform: scaleX(1);
}
.uxdwfe-info-anim-border-bottom-lift:hover {
    transform: translateY(-6px);
    border-color: var(--uxd-anim-color);
    box-shadow: 0 12px 32px rgba(102,126,234,0.16);
}

/* ── Border Top Sweep + Lift ────────────────────────────── */
.uxdwfe-info-anim-border-top-lift {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-border-top-lift::before {
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--uxd-anim-color);
    transform: scaleX(0);
    transform-origin: left;
}
.uxdwfe-info-anim-border-top-lift:hover::before {
    transform: scaleX(1);
}
.uxdwfe-info-anim-border-top-lift:hover {
    transform: translateY(-6px);
    border-color: var(--uxd-anim-color);
    box-shadow: 0 12px 32px rgba(102,126,234,0.16);
}

/* ── Border Left Sweep + Lift ───────────────────────────── */
.uxdwfe-info-anim-border-left-lift {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-border-left-lift::before {
    left: 0; top: 0;
    width: 3px; height: 100%;
    background: var(--uxd-anim-color);
    transform: scaleY(0);
    transform-origin: top;
}
.uxdwfe-info-anim-border-left-lift:hover::before {
    transform: scaleY(1);
}
.uxdwfe-info-anim-border-left-lift:hover {
    transform: translateY(-6px);
    border-color: var(--uxd-anim-color);
    box-shadow: 0 12px 32px rgba(102,126,234,0.16);
}

/* ── Border Right Sweep + Lift ──────────────────────────── */
.uxdwfe-info-anim-border-right-lift {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-border-right-lift::before {
    right: 0; top: 0;
    width: 3px; height: 100%;
    background: var(--uxd-anim-color);
    transform: scaleY(0);
    transform-origin: top;
}
.uxdwfe-info-anim-border-right-lift:hover::before {
    transform: scaleY(1);
}
.uxdwfe-info-anim-border-right-lift:hover {
    transform: translateY(-6px);
    border-color: var(--uxd-anim-color);
    box-shadow: 0 12px 32px rgba(102,126,234,0.16);
}

/* ── Border Color Change ────────────────────────────────── */
.uxdwfe-info-anim-border-color {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-border-color:hover {
    border-color: var(--uxd-anim-color) !important;
    transform: translateY(-4px);
}

/* ── Corner Accent Lines ───────────────────────────────── */
/*  Two L-shapes appear in top-left + bottom-right on hover */
.uxdwfe-info-anim-corner-lines {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-corner-lines::before {
    top: -1px; left: -1px;
    width: 30px; height: 30px;
    border-top: 3px solid var(--uxd-anim-color);
    border-left: 3px solid var(--uxd-anim-color);
    border-radius: inherit;
    transform: scale(0);
    transform-origin: top left;
}
.uxdwfe-info-anim-corner-lines::after {
    bottom: -1px; right: -1px;
    width: 30px; height: 30px;
    border-bottom: 3px solid var(--uxd-anim-color);
    border-right: 3px solid var(--uxd-anim-color);
    border-radius: inherit;
    transform: scale(0);
    transform-origin: bottom right;
}
.uxdwfe-info-anim-corner-lines:hover::before,
.uxdwfe-info-anim-corner-lines:hover::after {
    transform: scale(1);
}
.uxdwfe-info-anim-corner-lines:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(102,126,234,0.14);
}

/* ── Fill Up (bg sweeps from bottom) ───────────────────── */
.uxdwfe-info-anim-fill-up {
    --uxd-anim-color: #667eea;
    z-index: 0;
}
.uxdwfe-info-anim-fill-up::before {
    bottom: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--uxd-anim-color);
    transform: scaleY(0);
    transform-origin: bottom;
    z-index: -1;
}
.uxdwfe-info-anim-fill-up:hover::before {
    transform: scaleY(1);
}
.uxdwfe-info-anim-fill-up:hover {
    border-color: var(--uxd-anim-color);
    transform: translateY(-5px);
}
.uxdwfe-info-anim-fill-up .uxdwfe-info-box-inner,
.uxdwfe-info-anim-fill-up .uxdwfe-feature-title,
.uxdwfe-info-anim-fill-up .uxdwfe-feature-description,
.uxdwfe-info-anim-fill-up .uxdwfe-feature-icon {
    position: relative;
    z-index: 1;
    transition: color 0.38s ease;
}

/* ── Fill Down (bg sweeps from top) ────────────────────── */
.uxdwfe-info-anim-fill-down {
    --uxd-anim-color: #667eea;
    z-index: 0;
}
.uxdwfe-info-anim-fill-down::before {
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--uxd-anim-color);
    transform: scaleY(0);
    transform-origin: top;
    z-index: -1;
}
.uxdwfe-info-anim-fill-down:hover::before {
    transform: scaleY(1);
}
.uxdwfe-info-anim-fill-down:hover {
    border-color: var(--uxd-anim-color);
    transform: translateY(-5px);
}
.uxdwfe-info-anim-fill-down .uxdwfe-info-box-inner,
.uxdwfe-info-anim-fill-down .uxdwfe-feature-title,
.uxdwfe-info-anim-fill-down .uxdwfe-feature-description,
.uxdwfe-info-anim-fill-down .uxdwfe-feature-icon {
    position: relative;
    z-index: 1;
    transition: color 0.38s ease;
}

/* ── Border Glow ────────────────────────────────────────── */
.uxdwfe-info-anim-border-glow {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-border-glow:hover {
    border-color: var(--uxd-anim-color) !important;
    box-shadow: 0 0 0 3px var(--uxd-anim-color),
                0 10px 30px rgba(102,126,234,0.18) !important;
    transform: translateY(-4px);
}

/* ── Inner Glow (inset shadow) ──────────────────────────── */
.uxdwfe-info-anim-inner-glow {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-inner-glow:hover {
    box-shadow: inset 0 0 0 3px var(--uxd-anim-color),
                0 10px 30px rgba(102,126,234,0.14) !important;
    transform: translateY(-4px);
}

/* ── Scale Up ───────────────────────────────────────────── */
.uxdwfe-info-anim-scale:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}

/* ── Scale + Border Color ───────────────────────────────── */
.uxdwfe-info-anim-scale-border {
    --uxd-anim-color: #667eea;
}
.uxdwfe-info-anim-scale-border:hover {
    transform: scale(1.04);
    border-color: var(--uxd-anim-color) !important;
    box-shadow: 0 12px 36px rgba(102,126,234,0.16);
}

/* ── Icon Spin ───────────────────────────────────────────── */
.uxdwfe-info-anim-icon-spin .uxdwfe-feature-icon {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.uxdwfe-info-anim-icon-spin:hover .uxdwfe-feature-icon {
    transform: rotate(360deg);
}
.uxdwfe-info-anim-icon-spin:hover {
    transform: translateY(-4px);
}

/* ── Icon Bounce ─────────────────────────────────────────── */
@keyframes uxdwfe-icon-bounce {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-10px); }
    55%       { transform: translateY(-3px); }
    75%       { transform: translateY(-7px); }
}
.uxdwfe-info-anim-icon-bounce:hover .uxdwfe-feature-icon {
    animation: uxdwfe-icon-bounce 0.65s ease;
}
.uxdwfe-info-anim-icon-bounce:hover {
    transform: translateY(-4px);
}

/* ── Icon Grow + Lift ────────────────────────────────────── */
.uxdwfe-info-anim-icon-grow:hover .uxdwfe-feature-icon {
    transform: scale(1.3);
}
.uxdwfe-info-anim-icon-grow:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(102,126,234,0.14);
}

/* ── Float (gentle loop) ─────────────────────────────────── */
@keyframes uxdwfe-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.uxdwfe-info-anim-float:hover {
    animation: uxdwfe-float 2.2s ease-in-out infinite;
}

/* ── Tilt (subtle 3D perspective tilt) ──────────────────── */
.uxdwfe-info-anim-tilt {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.uxdwfe-info-anim-tilt:hover {
    transform: perspective(600px) rotateY(-4deg) rotateX(3deg) translateY(-4px);
    box-shadow: 6px 14px 40px rgba(0,0,0,0.12);
}

/* ── Responsive ────────────────────────────────────────────*/
@media (max-width: 767px) {
    .uxdwfe-info-layout-left,
    .uxdwfe-info-layout-right {
        flex-direction: column;
        text-align: center;
    }
    .uxdwfe-info-layout-right {
        flex-direction: column;
    }
    /* Disable transform animations on touch devices */
    .uxdwfe-info-anim-tilt:hover {
        transform: translateY(-4px);
    }
}

/* ============================================================
   UXD Simple List Widget
   ============================================================ */

.uxdwfe-simple-list-widget {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Horizontal layout */
.uxdwfe-sl-layout-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

/* List item */
.uxdwfe-sl-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    position: relative;
    cursor: default;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, padding 0.3s ease;
}

/* Icon position: right */
.uxdwfe-sl-icon-right .uxdwfe-sl-item {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.uxdwfe-sl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #667eea;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1;
}

.uxdwfe-sl-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: fill 0.3s ease, transform 0.3s ease;
}

.uxdwfe-sl-text {
    flex: 1;
    color: #444444;
    transition: color 0.3s ease;
}

.uxdwfe-sl-text a {
    transition: color 0.3s ease;
}

/* ─── Animation: slide-right ─────────────────────────────── */
.uxdwfe-sl-anim-slide-right .uxdwfe-sl-item {
    transform: translateX(0);
    transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.uxdwfe-sl-anim-slide-right .uxdwfe-sl-item:hover {
    transform: translateX(6px);
}

/* ─── Animation: slide-left ──────────────────────────────── */
.uxdwfe-sl-anim-slide-left .uxdwfe-sl-item {
    transform: translateX(0);
    transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.uxdwfe-sl-anim-slide-left .uxdwfe-sl-item:hover {
    transform: translateX(-6px);
}

/* ─── Animation: underline-sweep ─────────────────────────── */
.uxdwfe-sl-anim-underline-sweep .uxdwfe-sl-text {
    position: relative;
    display: inline;
}
.uxdwfe-sl-anim-underline-sweep .uxdwfe-sl-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}
.uxdwfe-sl-anim-underline-sweep .uxdwfe-sl-item:hover .uxdwfe-sl-text::after {
    transform: scaleX(1);
}

/* ─── Animation: highlight ───────────────────────────────── */
.uxdwfe-sl-anim-highlight .uxdwfe-sl-item {
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.uxdwfe-sl-anim-highlight .uxdwfe-sl-item:hover {
    background-color: #f0f2ff;
}

/* ─── Animation: icon-bounce ─────────────────────────────── */
.uxdwfe-sl-anim-icon-bounce .uxdwfe-sl-item:hover .uxdwfe-sl-icon {
    animation: uxdwfe-sl-bounce 0.5s ease;
}
@keyframes uxdwfe-sl-bounce {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-5px); }
    60%       { transform: translateY(2px); }
}

/* ─── Animation: icon-spin ───────────────────────────────── */
.uxdwfe-sl-anim-icon-spin .uxdwfe-sl-icon {
    transition: transform 0.4s ease;
}
.uxdwfe-sl-anim-icon-spin .uxdwfe-sl-item:hover .uxdwfe-sl-icon {
    transform: rotate(360deg);
}

/* ─── Animation: icon-arrow ──────────────────────────────── */
.uxdwfe-sl-anim-icon-arrow .uxdwfe-sl-icon {
    transition: transform 0.3s ease;
}
.uxdwfe-sl-anim-icon-arrow .uxdwfe-sl-item:hover .uxdwfe-sl-icon {
    transform: translateX(4px);
}

/* ─── Animation: indent ──────────────────────────────────── */
.uxdwfe-sl-anim-indent .uxdwfe-sl-item {
    transition: padding-left 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.uxdwfe-sl-anim-indent .uxdwfe-sl-item:hover {
    padding-left: 14px;
}

/* ─── Animation: scale-up ────────────────────────────────── */
.uxdwfe-sl-anim-scale-up .uxdwfe-sl-item {
    transition: transform 0.3s ease;
    transform-origin: left center;
}
.uxdwfe-sl-anim-scale-up .uxdwfe-sl-item:hover {
    transform: scale(1.03);
}

/* ─── Animation: fade-bright ─────────────────────────────── */
.uxdwfe-sl-anim-fade-bright .uxdwfe-sl-item {
    opacity: 0.75;
    transition: opacity 0.3s ease;
}
.uxdwfe-sl-anim-fade-bright .uxdwfe-sl-item:hover {
    opacity: 1;
}


/* ============================================================
   Shared Continuous Animation Keyframes
   ============================================================ */

/* Float variants — driven by --uxd-float-distance (default 12px) */
@keyframes uxdwfe-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(calc(-1 * var(--uxd-float-distance, 12px))); }
}
@keyframes uxdwfe-float-slow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(calc(-1 * var(--uxd-float-distance, 12px))); }
}
@keyframes uxdwfe-float-fast {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(calc(-1 * var(--uxd-float-distance, 12px))); }
}

/* Pulse scale */
@keyframes uxdwfe-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

/* Bounce */
@keyframes uxdwfe-bounce-cont {
    0%, 100% { transform: translateY(0); animation-timing-function: ease-in; }
    40%       { transform: translateY(-18px); animation-timing-function: ease-out; }
    60%       { transform: translateY(-9px); }
}

/* Swing / rotate */
@keyframes uxdwfe-swing {
    0%, 100% { transform: rotate(0deg); }
    25%       { transform: rotate(3deg); }
    75%       { transform: rotate(-3deg); }
}

/* Glow pulse */
@keyframes uxdwfe-glow {
    0%, 100% { filter: drop-shadow(0 0 0px rgba(102,126,234,0)); }
    50%       { filter: drop-shadow(0 0 16px rgba(102,126,234,0.5)); }
}

/* Spin (very slow) */
@keyframes uxdwfe-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Shake */
@keyframes uxdwfe-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Zoom pulse */
@keyframes uxdwfe-zoom-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}

/* ============================================================
   UXD Image Stats Widget
   ============================================================ */

.uxdwfe-image-stats-wrapper {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-height: 480px;
    padding: 40px 60px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.uxdwfe-is-main-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
}

/* Stat Box */
.uxdwfe-is-stat-box {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
    padding: 14px 18px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 10;
    box-sizing: border-box;
    white-space: nowrap;
}

.uxdwfe-is-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #667eea;
    color: #fff;
}
.uxdwfe-is-icon-wrap i   { font-size: 18px; color: inherit; }
.uxdwfe-is-icon-wrap svg { width: 18px; height: 18px; fill: currentColor; }

.uxdwfe-is-box-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.uxdwfe-is-value {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.2;
}

.uxdwfe-is-label {
    font-size: 12px;
    color: #888888;
    line-height: 1.3;
}

/* ── Stat box animations ─────────────────────────────────── */
.uxdwfe-is-anim-float {
    animation: uxdwfe-float var(--uxd-float-duration, 3s) ease-in-out infinite;
}
.uxdwfe-is-anim-float-slow {
    animation: uxdwfe-float-slow calc(var(--uxd-float-duration, 3s) * 1.6) ease-in-out infinite;
}
.uxdwfe-is-anim-float-fast {
    animation: uxdwfe-float-fast calc(var(--uxd-float-duration, 3s) * 0.65) ease-in-out infinite;
}
.uxdwfe-is-anim-pulse {
    animation: uxdwfe-pulse var(--uxd-float-duration, 3s) ease-in-out infinite;
}
.uxdwfe-is-anim-bounce {
    animation: uxdwfe-bounce-cont 1.4s infinite;
}
.uxdwfe-is-anim-swing {
    animation: uxdwfe-swing 3s ease-in-out infinite;
}
.uxdwfe-is-anim-glow {
    animation: uxdwfe-glow 2.5s ease-in-out infinite;
}

/* ============================================================
   UXD Layered Images Widget
   ============================================================ */

.uxdwfe-layered-images-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.uxdwfe-li-image {
    display: block;
    height: auto;
    max-width: 100%;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.uxdwfe-li-absolute {
    position: absolute;
}

/* ── Per-image animation classes ─────────────────────────── */
.uxdwfe-li-anim-float {
    animation: uxdwfe-float 4s ease-in-out infinite;
}
.uxdwfe-li-anim-float-slow {
    animation: uxdwfe-float-slow 6s ease-in-out infinite;
}
.uxdwfe-li-anim-float-fast {
    animation: uxdwfe-float-fast 2.5s ease-in-out infinite;
}
.uxdwfe-li-anim-pulse {
    animation: uxdwfe-pulse 3s ease-in-out infinite;
}
.uxdwfe-li-anim-bounce {
    animation: uxdwfe-bounce-cont 1.6s infinite;
}
.uxdwfe-li-anim-swing {
    animation: uxdwfe-swing 4s ease-in-out infinite;
    transform-origin: top center;
}
.uxdwfe-li-anim-glow {
    animation: uxdwfe-glow 3s ease-in-out infinite;
}
.uxdwfe-li-anim-spin-slow {
    animation: uxdwfe-spin-slow 20s linear infinite;
}
.uxdwfe-li-anim-shake {
    animation: uxdwfe-shake 2s ease-in-out infinite;
}
.uxdwfe-li-anim-zoom-pulse {
    animation: uxdwfe-zoom-pulse 3s ease-in-out infinite;
}



/* ==========================================================================
   UXD Nav Menu Widget
   ========================================================================== */

/* ── Wrapper & Bar ─────────────────────────────────────────────────────────── */
.uxdwfe-nav-wrapper {
    position: relative;
    width: 100%;
}

.uxdwfe-nav-bar {
    position: relative;
    width: 100%;
    z-index: 1000;
    transition: padding 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.uxdwfe-nav-bar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    animation: uxdNavSlideDown 0.3s ease;
}

.uxdwfe-nav-bar.is-shrink {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.uxdwfe-nav-bar.uxdwfe-nav-hidden {
    transform: translateY(-100%);
}

@keyframes uxdNavSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ── Inner containers ─────────────────────────────────────────────────────── */
.uxdwfe-nav-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

/* Inline layout: logo | center (menu) | right (socials+btns) | toggle */
.uxdwfe-nav-layout-inline .uxdwfe-nav-logo { flex-shrink: 0; }

.uxdwfe-nav-layout-inline .uxdwfe-nav-center { flex: 1; display: flex; }
.uxdwfe-nav-layout-inline .uxdwfe-menu-align-left          .uxdwfe-nav-list { margin-right: auto; }
.uxdwfe-nav-layout-inline .uxdwfe-menu-align-center         .uxdwfe-nav-list { margin: 0 auto; }
.uxdwfe-nav-layout-inline .uxdwfe-menu-align-right          .uxdwfe-nav-list { margin-left: auto; }
.uxdwfe-nav-layout-inline .uxdwfe-menu-align-space-between  .uxdwfe-nav-list { width: 100%; justify-content: space-between; }

.uxdwfe-nav-layout-inline .uxdwfe-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
    order: 3;
}

/* Logo-top layout */
.uxdwfe-nav-layout-logo-top .uxdwfe-nav-inner {
    flex-direction: column;
    gap: 8px;
}

.uxdwfe-nav-logo-row { width: 100%; }

.uxdwfe-nav-bottom-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.uxdwfe-nav-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.uxdwfe-nav-logo img { display: block; max-width: 100%; height: auto; }
.uxdwfe-nav-logo-text { font-size: 1.4rem; font-weight: 700; }

/* ── Nav List ─────────────────────────────────────────────────────────────── */
.uxdwfe-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    position: relative;
}

.uxdwfe-nav-item { position: relative; list-style: none; }

.uxdwfe-nav-item > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.uxdwfe-mega-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 0.7em;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.has-mega-menu.uxdwfe-mega-open > a .uxdwfe-mega-indicator,
.has-mega-menu:hover > a .uxdwfe-mega-indicator { transform: rotate(180deg); }

/* ── Menu Item Hover Animations ───────────────────────────────────────────── */
/* underline-slide */
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item > a { position: relative; }
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--uxd-nm-accent, currentColor);
    transition: width 0.25s ease, left 0.25s ease;
}
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item > a:hover::after { width: 100%; left: 0; }
.uxdwfe-item-hover-underline-slide .uxdwfe-nav-item.active > a::after { width: 100%; left: 0; }

/* underline-fill */
.uxdwfe-item-hover-underline-fill .uxdwfe-nav-item > a { position: relative; overflow: hidden; }
.uxdwfe-item-hover-underline-fill .uxdwfe-nav-item > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--uxd-nm-accent, currentColor);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
}
.uxdwfe-item-hover-underline-fill .uxdwfe-nav-item > a:hover::after { transform: scaleX(1); transform-origin: left; }

/* background-fill */
.uxdwfe-item-hover-background-fill .uxdwfe-nav-item > a { position: relative; overflow: hidden; }
.uxdwfe-item-hover-background-fill .uxdwfe-nav-item > a::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--uxd-nm-accent, rgba(102,126,234,0.12));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
    z-index: -1;
}
.uxdwfe-item-hover-background-fill .uxdwfe-nav-item > a:hover::before { transform: scaleX(1); transform-origin: left; }

/* highlight */
.uxdwfe-item-hover-highlight .uxdwfe-nav-item > a:hover {
    text-shadow: 0 0 12px var(--uxd-nm-accent, rgba(102,126,234,0.6));
}

/* shift-right */
.uxdwfe-item-hover-shift-right .uxdwfe-nav-item > a { transition: transform 0.2s ease, color 0.2s ease; }
.uxdwfe-item-hover-shift-right .uxdwfe-nav-item > a:hover { transform: translateX(4px); }

/* scale-up */
.uxdwfe-item-hover-scale-up .uxdwfe-nav-item > a { transition: transform 0.2s ease, color 0.2s ease; }
.uxdwfe-item-hover-scale-up .uxdwfe-nav-item > a:hover { transform: scale(1.07); }

/* fade-dim */
.uxdwfe-item-hover-fade-dim .uxdwfe-nav-list:hover .uxdwfe-nav-item > a { opacity: 0.45; }
.uxdwfe-item-hover-fade-dim .uxdwfe-nav-list:hover .uxdwfe-nav-item:hover > a { opacity: 1; }

/* bold */
.uxdwfe-item-hover-bold .uxdwfe-nav-item > a:hover { font-weight: 700; }

/* ── Mega Menu Panel ──────────────────────────────────────────────────────── */

.uxdwfe-nav-bar { overflow: visible; position: relative; }

/* Panel lives inside the <li>, positioned relative to the nav bar */
.uxdwfe-mega-panel {
    display: none;
    position: absolute;
    top: 100%;
    z-index: 1100;
    min-width: 480px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

.uxdwfe-mega-panel-inner { width: 100%; }

/* Animation keyframes */
@keyframes uxdMegaFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes uxdMegaSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uxdMegaZoom  { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.uxdwfe-drop-fade  .uxdwfe-mega-panel { animation: uxdMegaFade  0.18s ease; }
.uxdwfe-drop-slide .uxdwfe-mega-panel { animation: uxdMegaSlide 0.2s  ease; }
.uxdwfe-drop-zoom  .uxdwfe-mega-panel { animation: uxdMegaZoom  0.18s ease; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.uxdwfe-nav-buttons {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.uxdwfe-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    overflow: hidden;
    position: relative;
}

/* Styles */
.uxdwfe-btn-style-filled  { background: var(--uxd-nm-accent, #667eea); color: #fff; border-color: var(--uxd-nm-accent, #667eea); }
.uxdwfe-btn-style-outline { background: transparent; color: var(--uxd-nm-accent, #667eea); border-color: var(--uxd-nm-accent, #667eea); }
.uxdwfe-btn-style-ghost   { background: transparent; color: inherit; border-color: transparent; }
.uxdwfe-btn-style-text    { background: transparent; color: var(--uxd-nm-accent, #667eea); border-color: transparent; padding-left: 0 !important; padding-right: 0 !important; }

/* Button hover animations */
.uxdwfe-btn-anim-grow:hover  { transform: scale(1.05); }
.uxdwfe-btn-anim-lift:hover  { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }

.uxdwfe-btn-anim-fill-in { overflow: hidden; }
.uxdwfe-btn-anim-fill-in::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.18);
    transform: translateX(-100%);
    transition: transform 0.28s ease;
}
.uxdwfe-btn-anim-fill-in:hover::before { transform: translateX(0); }

.uxdwfe-btn-anim-shimmer::after {
    content: ''; position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transition: left 0.4s ease;
}
.uxdwfe-btn-anim-shimmer:hover::after { left: 130%; }

.uxdwfe-btn-anim-pulse:hover  { animation: uxdBtnPulse 0.4s ease; }
@keyframes uxdBtnPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

.uxdwfe-btn-anim-shake:hover  { animation: uxdBtnShake 0.4s ease; }
@keyframes uxdBtnShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-4px)} 40%,80%{transform:translateX(4px)} }

.uxdwfe-btn-anim-bounce:hover { animation: uxdBtnBounce 0.4s ease; }
@keyframes uxdBtnBounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} 70%{transform:translateY(-2px)} }

/* ── Social Icons ─────────────────────────────────────────────────────────── */
.uxdwfe-nav-socials {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.uxdwfe-nav-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.uxdwfe-nav-social-link.uxdwfe-btn-anim-grow:hover   { transform: scale(1.18); }
.uxdwfe-nav-social-link.uxdwfe-btn-anim-lift:hover   { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.uxdwfe-nav-social-link.uxdwfe-btn-anim-spin:hover   { transform: rotate(360deg); transition-duration: 0.4s; }
.uxdwfe-nav-social-link.uxdwfe-btn-anim-bounce:hover { animation: uxdBtnBounce 0.4s ease; }
.uxdwfe-nav-social-link.uxdwfe-btn-anim-pulse:hover  { animation: uxdBtnPulse 0.4s ease; }

/* ── Mobile Toggle (nav-menu widget) ──────────────────────────────────────── */
/* NOTE: base .uxdwfe-mobile-toggle rules are shared — these override for nav-menu context */
.uxdwfe-nav-wrapper .uxdwfe-mobile-toggle {
    color: #333333; /* fallback — overridden by Elementor control */
    touch-action: manipulation;
}

.uxdwfe-nav-wrapper .uxdwfe-mobile-toggle.active span:nth-child(1) { transform: rotate(45deg)  translate(6px, 6px); }
.uxdwfe-nav-wrapper .uxdwfe-mobile-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.uxdwfe-nav-wrapper .uxdwfe-mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* ── Mobile Drawer ────────────────────────────────────────────────────────── */


.uxdwfe-nav-mobile-drawer.active { display: block; }

.uxdwfe-nav-list-mobile {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: flex !important;
}

.uxdwfe-nav-list-mobile .uxdwfe-nav-item { width: 100%; }

.uxdwfe-nav-list-mobile .uxdwfe-nav-item > a {
    width: 100%;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}


.uxdwfe-nav-mobile-extra {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uxdwfe-nav-btn-mobile { justify-content: center; }

.uxdwfe-nav-mobile-socials {
    padding: 12px 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* ── Responsive Breakpoints ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .uxdwfe-mobile-toggle { display: flex; }

    .uxdwfe-nav-layout-inline .uxdwfe-nav-center,
    .uxdwfe-nav-layout-inline .uxdwfe-nav-right { display: none; }

    .uxdwfe-nav-layout-logo-top .uxdwfe-nav-bottom-row { display: none; }
}

/* ── Breadcrumb Widget ────────────────────────────────────────────────── */
.uxdwfe-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.uxdwfe-breadcrumb li {
    display: flex;
    align-items: center;
    list-style: none;
    font-size: 0.875rem;
}

.uxdwfe-breadcrumb a {
    text-decoration: none;
    transition: color 0.2s;
}

.uxdwfe-breadcrumb a:hover {
    text-decoration: underline;
}

.uxdwfe-breadcrumb .current {
    opacity: 0.75;
}

/* Separator icon */
.uxdwfe-breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    opacity: 0.45;
    user-select: none;
    font-size: 0.65em;
    line-height: 1;
}

.uxdwfe-breadcrumb-sep i {
    font-size: inherit;
    line-height: 1;
}

.uxdwfe-breadcrumb-sep svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: block;
}