/* ==============================================================
   Urdu News Pro - Elementor Skin Styles
   Compatibility with Elementor Free + Pro
   ============================================================== */

/* ---------- Global ---------- */
.elementor-location-header,
.elementor-location-footer {
    width: 100%;
}

/* ---------- Elementor Pro Theme Builder locations ---------- */
.elementor-template-unp-header-top,
.elementor-template-unp-header-main,
.elementor-template-unp-footer-top,
.elementor-template-unp-footer-bottom,
.elementor-template-unp-before-content,
.elementor-template-unp-after-content,
.elementor-template-unp-sidebar,
.elementor-template-unp-single-header,
.elementor-template-unp-single-footer,
.elementor-template-unp-archive-header,
.elementor-template-unp-home-before-sections,
.elementor-template-unp-home-after-sections {
    width: 100%;
}

/* ---------- Typography ---------- */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor {
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;
}

.elementor-widget-heading h1.elementor-heading-title { font-size: 32px; line-height: 1.4; }
.elementor-widget-heading h2.elementor-heading-title { font-size: 26px; line-height: 1.4; }
.elementor-widget-heading h3.elementor-heading-title { font-size: 22px; line-height: 1.4; }
.elementor-widget-heading h4.elementor-heading-title { font-size: 18px; line-height: 1.5; }
.elementor-widget-heading h5.elementor-heading-title { font-size: 16px; line-height: 1.5; }
.elementor-widget-heading h6.elementor-heading-title { font-size: 14px; line-height: 1.5; }

/* ---------- Container max width ---------- */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}

/* ---------- Buttons ---------- */
.elementor-button {
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;
    background: #b8001f;
    border-radius: 4px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.2s;
}

.elementor-button:hover {
    background: #7a0015;
    transform: translateY(-1px);
}

/* ---------- Divider ---------- */
.elementor-widget-divider {
    --divider-color: #b8001f;
}

/* ---------- Image box ---------- */
.elementor-widget-image-box .elementor-image-box-wrapper {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s, transform 0.3s;
}

.elementor-widget-image-box:hover .elementor-image-box-wrapper {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.elementor-widget-image-box .elementor-image-box-title {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    color: #1a1a1a;
    font-weight: 700;
}

.elementor-widget-image-box .elementor-image-box-description {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    color: #555;
}

/* ---------- Icon box ---------- */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
}

.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
}

.elementor-widget-icon-box .elementor-icon-box-description {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
}

/* ---------- Posts widget ---------- */
.elementor-widget-posts .e-loop-item {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s, transform 0.3s;
}

.elementor-widget-posts .e-loop-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.elementor-widget-posts .e-loop-item .elementor-post__title {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.5;
}

.elementor-widget-posts .e-loop-item:hover .elementor-post__title {
    color: #b8001f;
}

.elementor-widget-posts .e-loop-item .elementor-post__excerpt,
.elementor-widget-posts .e-loop-item .elementor-post__meta-data {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    color: #777;
}

/* ---------- Cards (Pro widget) ---------- */
.elementor-card {
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    background: #fff;
}

.elementor-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.elementor-card .elementor-card__title {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    color: #1a1a1a;
}

/* ---------- Slider (Pro) ---------- */
.elementor-swiper-button {
    background: rgba(184, 0, 31, 0.9);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: background 0.2s;
}

.elementor-swiper-button:hover {
    background: #b8001f;
}

/* ---------- Form (Pro) ---------- */
.elementor-form .elementor-field {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    border-radius: 4px;
}

.elementor-form .elementor-button {
    background: #b8001f;
}

/* ---------- Progress bar ---------- */
.elementor-progress-wrapper .elementor-progress-bar {
    background: #b8001f;
}

/* ---------- Counter ---------- */
.elementor-counter .elementor-counter-number-wrapper {
    color: #b8001f;
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    font-weight: 700;
}

.elementor-counter .elementor-counter-title {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    color: #555;
}

/* ---------- Testimonial (Pro) ---------- */
.elementor-widget-testimonial .elementor-testimonial-wrapper {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.elementor-widget-testimonial .elementor-testimonial-content {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
}

.elementor-widget-testimonial .elementor-testimonial-name {
    font-family: 'Noto Nastaliq Urdu', Tahoma, Arial, sans-serif;
    font-weight: 700;
}

/* ---------- RTL fixes for Elementor ---------- */
html[dir="rtl"] .elementor-icon-list-icon {
    padding-left: 0;
    padding-right: 0;
}

html[dir="rtl"] .elementor-progress-bar {
    text-align: right;
}

html[dir="rtl"] .elementor-counter .elementor-counter-number-prefix,
html[dir="rtl"] .elementor-counter .elementor-counter-number-suffix {
    /* Reset flips for these */
}

html[dir="rtl"] .elementor-widget-heading .elementor-heading-title {
    text-align: right;
}

html[dir="rtl"] .elementor-tabs .elementor-tab-title {
    /* Tabs work in RTL naturally */
}

html[dir="rtl"] .elementor-toggle .elementor-toggle-title {
    text-align: right;
    padding: 15px 50px 15px 15px;
}

html[dir="rtl"] .elementor-toggle .elementor-toggle-icon {
    right: 15px;
    left: auto;
}

html[dir="rtl"] .elementor-accordion .elementor-accordion-item {
    /* Works in RTL naturally */
}

html[dir="rtl"] .elementor-form .elementor-form-fields-wrapper {
    text-align: right;
}

html[dir="rtl"] .elementor-widget-posts .e-loop-item .elementor-post__thumbnail {
    /* Image position maintained */
}

/* ---------- Elementor Theme Builder custom locations wrapper ---------- */
.unp-elementor-location {
    width: 100%;
    clear: both;
}

/* Elementor canvas page — hide theme elements */
.elementor-page-template-elementor_canvas .site-header,
.elementor-page-template-elementor_canvas .main-navigation,
.elementor-page-template-elementor_canvas .site-footer,
.elementor-page-template-elementor_canvas .top-bar,
.elementor-page-template-elementor_canvas .currency-ticker,
.elementor-page-template-elementor_canvas .site-content {
    display: none !important;
}

/* Elementor full-width page */
.elementor-page-template-elementor_theme .site-content {
    max-width: 100%;
    padding: 0;
}

/* ---------- Elementor Header Footer Builder compatibility ---------- */
.elementor-location-header {
    z-index: 999;
}

/* ---------- Ensure sticky nav stays above Elementor headers ---------- */
.main-navigation {
    z-index: 1000;
}

/* ---------- Adjust Elementor content width ---------- */
.elementor-section.elementor-section-stretched {
    left: 0 !important;
    width: 100% !important;
}

/* ---------- Print styles ---------- */
@media print {
    .elementor-widget {
        page-break-inside: avoid;
    }
}