/**
 * Elementor Pro Compatibility Styles
 * Extends theme styles for Elementor widgets
 *
 * @package SkySportsIPTV
 */

/* =============================================
   ELEMENTOR GLOBAL COLOUR VARIABLES
   These map to our CSS custom properties so
   Elementor global colours match the theme.
   ============================================= */
:root {
  --e-global-color-primary:    #0033A0;
  --e-global-color-secondary:  #1A1A2E;
  --e-global-color-accent:     #FF0000;
  --e-global-color-text:       #1A1A2E;
  --e-global-color-secondary-text: #6C757D;
  --e-global-color-white:      #FFFFFF;
  --e-global-color-light:      #F8F9FA;
}

/* =============================================
   ELEMENTOR SECTION OVERRIDES
   Ensure Elementor sections match theme layout
   ============================================= */
.elementor-section {
  width: 100%;
}

.elementor-section .elementor-container {
  max-width: 1280px;
}

/* =============================================
   ELEMENTOR BUTTON STYLES
   Map Elementor button variants to theme styles
   ============================================= */
.elementor-button.elementor-button-primary,
.elementor-widget-button .elementor-button {
  background: var(--sky-blue);
  color: white;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-weight: 700;
  transition: all 0.2s ease;
  border: none;
}

.elementor-button.elementor-button-primary:hover,
.elementor-widget-button .elementor-button:hover {
  background: var(--sky-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 51, 160, 0.4);
}

/* WhatsApp CTA button in Elementor */
.elementor-button.elementor-button-whatsapp {
  background: #22C55E;
  color: white;
  border-radius: 9999px;
}
.elementor-button.elementor-button-whatsapp:hover {
  background: #16A34A;
}

/* =============================================
   ELEMENTOR HEADING WIDGET
   ============================================= */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-sans);
}

.elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--sky-dark);
}

.elementor-widget-heading h2.elementor-heading-title span {
  color: var(--sky-blue);
}

/* =============================================
   ELEMENTOR IMAGE WIDGET
   ============================================= */
.elementor-widget-image img {
  border-radius: var(--radius);
}

/* =============================================
   ELEMENTOR PRICE LIST / PRICING TABLE
   ============================================= */
.elementor-price-table {
  border-radius: 1.25rem;
  overflow: hidden;
}

.elementor-price-table__header {
  background: var(--sky-blue);
}

/* =============================================
   ELEMENTOR TOGGLE / ACCORDION (FAQ)
   ============================================= */
.elementor-tab-title {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--sky-dark);
}

.elementor-tab-content {
  font-family: var(--font-sans);
  color: var(--sky-gray);
  line-height: 1.7;
}

/* =============================================
   ELEMENTOR TESTIMONIAL WIDGET
   ============================================= */
.elementor-testimonial-wrapper {
  background: var(--sky-light);
  border-radius: 1rem;
  border: 1px solid rgba(0, 51, 160, 0.08);
}

/* =============================================
   ELEMENTOR CAROUSEL / SLIDES
   ============================================= */
.elementor-slides-wrapper .swiper-slide {
  border-radius: 0.75rem;
  overflow: hidden;
}

/* =============================================
   ELEMENTOR ICON BOX (used for features)
   ============================================= */
.elementor-icon-box-wrapper {
  padding: 2rem;
  border: 1px solid rgba(0, 51, 160, 0.1);
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.elementor-icon-box-wrapper:hover {
  border-color: rgba(0, 51, 160, 0.3);
  box-shadow: 0 8px 30px rgba(0, 51, 160, 0.12);
  transform: translateY(-4px);
}

.elementor-icon {
  color: var(--sky-blue);
}

.elementor-icon-box-title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--sky-dark);
}

/* =============================================
   ELEMENTOR COUNTER WIDGET (Statistics)
   ============================================= */
.elementor-counter-number-wrapper {
  color: white;
}

.elementor-counter-title {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-sans);
}

/* =============================================
   ELEMENTOR POPUP COMPATIBILITY
   ============================================= */
.elementor-popup-modal .dialog-widget-content {
  border-radius: 1rem;
  overflow: hidden;
}

/* =============================================
   ELEMENTOR PRO THEME BUILDER — Header
   These styles apply when using Elementor's
   custom header (replaces theme header.php)
   ============================================= */
.elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

/* =============================================
   ELEMENTOR LOOP / POSTS WIDGET
   ============================================= */
.elementor-posts .elementor-post__card {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(0, 51, 160, 0.1);
  transition: all 0.3s;
}

.elementor-posts .elementor-post__card:hover {
  box-shadow: 0 8px 25px rgba(0, 51, 160, 0.1);
  transform: translateY(-4px);
}

/* =============================================
   ELEMENTOR FORM WIDGET
   ============================================= */
.elementor-form .elementor-field-group .elementor-field {
  border: 1px solid rgba(0, 51, 160, 0.2);
  border-radius: 0.5rem;
  font-family: var(--font-sans);
  transition: border-color 0.2s;
}

.elementor-form .elementor-field-group .elementor-field:focus {
  border-color: var(--sky-blue);
  outline: 2px solid rgba(0, 51, 160, 0.2);
}

.elementor-form .elementor-button {
  background: var(--sky-blue);
  border-radius: 9999px;
  font-weight: 700;
}

/* =============================================
   RESPONSIVE — Elementor mobile fixes
   ============================================= */
@media (max-width: 767px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100%;
    padding: 0 1.5rem;
  }
}

@media (max-width: 1024px) {
  .elementor-section .elementor-container {
    padding: 0 1.5rem;
  }
}