/**
 * editKT — Visual Builder & Atomic Runtime Engine Stylesheet
 * Fully consolidated architecture merging KTDESIGN into editKT.
 * Supports modern single-div flexbox & grid containers, widgets, marketing tools, and design tokens.
 *
 * @package KlikTernakEngine
 * @subpackage EditKT
 * @version 3.7.0
 */

/* ==========================================================================
   1. Global Design Tokens & Base Root (editKT & KTDESIGN Unified)
   ========================================================================== */
:root {
  --editkt-primary: #2d83a3;
  --editkt-primary-hover: #206b85;
  --editkt-secondary: #e8a13a;
  --editkt-accent: #0ea5e9;
  --editkt-success: #10b981;
  --editkt-danger: #ef4444;
  --editkt-text: #203656;
  --editkt-text-muted: #8f9bad;
  --editkt-bg: #ffffff;
  --editkt-surface: #f8fafc;
  --editkt-border: #e2e8f0;
  --editkt-radius-sm: 6px;
  --editkt-radius-md: 12px;
  --editkt-radius-lg: 20px;
  --editkt-radius-full: 9999px;
  --editkt-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --editkt-font-heading: "Poppins", sans-serif;
  --editkt-container-max: 1200px;

  /* Backward Compatibility --ktd-* Tokens */
  --ktd-primary: var(--editkt-primary);
  --ktd-primary-hover: var(--editkt-primary-hover);
  --ktd-secondary: var(--editkt-secondary);
  --ktd-accent: var(--editkt-accent);
  --ktd-success: var(--editkt-success);
  --ktd-danger: var(--editkt-danger);
  --ktd-text: var(--editkt-text);
  --ktd-text-muted: var(--editkt-text-muted);
  --ktd-bg: var(--editkt-bg);
  --ktd-surface: var(--editkt-surface);
  --ktd-border: var(--editkt-border);
  --ktd-radius-sm: var(--editkt-radius-sm);
  --ktd-radius-md: var(--editkt-radius-md);
  --editkt-radius-lg: var(--editkt-radius-lg);
  --ktd-radius-lg: var(--editkt-radius-lg);
  --ktd-radius-full: var(--editkt-radius-full);
  --ktd-font-main: var(--editkt-font-main);
  --ktd-font-heading: var(--editkt-font-heading);
  --ktd-container-max: var(--editkt-container-max);
}

.editkt-root,
.ktdesign-root {
  box-sizing: border-box;
  font-family: var(--editkt-font-main);
  color: var(--editkt-text);
}
.editkt-root *, .editkt-root *::before, .editkt-root *::after,
.ktdesign-root *, .ktdesign-root *::before, .ktdesign-root *::after {
  box-sizing: inherit;
}

/* ==========================================================================
   2. Atomic Flexbox & Grid Containers (Single-Div Architecture)
   ========================================================================== */
.editkt-el--container, .editkt-el--section,
.ktd-el--container, .ktd-el--section {
  display: flex;
  position: relative;
  width: 100%;
}
.editkt-flex-row, .ktd-flex-row { flex-direction: row; }
.editkt-flex-column, .ktd-flex-column { flex-direction: column; }
.editkt-flex-row-reverse, .ktd-flex-row-reverse { flex-direction: row-reverse; }
.editkt-flex-column-reverse, .ktd-flex-column-reverse { flex-direction: column-reverse; }
.editkt-flex-wrap, .ktd-flex-wrap { flex-wrap: wrap; }
.editkt-justify-flex-start, .ktd-justify-flex-start { justify-content: flex-start; }
.editkt-justify-center, .ktd-justify-center { justify-content: center; }
.editkt-justify-flex-end, .ktd-justify-flex-end { justify-content: flex-end; }
.editkt-justify-space-between, .ktd-justify-space-between,
.editkt-justify-between, .ktd-justify-between { justify-content: space-between; }
.editkt-justify-space-around, .ktd-justify-space-around { justify-content: space-around; }
.editkt-align-flex-start, .ktd-align-flex-start { align-items: flex-start; }
.editkt-align-center, .ktd-align-center { align-items: center; }
.editkt-align-flex-end, .ktd-align-flex-end { align-items: flex-end; }
.editkt-align-stretch, .ktd-align-stretch { align-items: stretch; }

/* Grid Container */
.editkt-el--grid, .editkt-grid,
.ktd-el--grid, .ktd-grid {
  display: grid;
  gap: 20px;
  width: 100%;
}
.editkt-grid-cols-1, .ktd-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.editkt-grid-cols-2, .ktd-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.editkt-grid-cols-3, .ktd-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editkt-grid-cols-4, .ktd-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.editkt-grid-cols-5, .ktd-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.editkt-grid-cols-6, .ktd-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .editkt-grid-cols-3, .editkt-grid-cols-4, .editkt-grid-cols-5, .editkt-grid-cols-6,
  .ktd-grid-cols-3, .ktd-grid-cols-4, .ktd-grid-cols-5, .ktd-grid-cols-6,
  .editkt-grid-tab-2, .ktd-grid-tab-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .editkt-grid-cols-2, .editkt-grid-cols-3, .editkt-grid-cols-4, .editkt-grid-cols-5, .editkt-grid-cols-6,
  .ktd-grid-cols-2, .ktd-grid-cols-3, .ktd-grid-cols-4, .ktd-grid-cols-5, .ktd-grid-cols-6,
  .editkt-grid-mob-1, .ktd-grid-mob-1 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   3. Interactive Widget Library
   ========================================================================== */
/* Heading */
.editkt-heading, .ktd-heading {
  margin: 0 0 12px;
  font-family: var(--editkt-font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--editkt-text);
}
.editkt-heading a, .ktd-heading a { color: inherit; text-decoration: none; }
.editkt-heading a:hover, .ktd-heading a:hover { color: var(--editkt-primary); }

/* Text Editor */
.editkt-text-editor, .ktd-text-editor { line-height: 1.7; color: var(--editkt-text); }
.editkt-text-editor p, .ktd-text-editor p { margin: 0 0 14px; }

/* Button */
.editkt-button, .ktd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--editkt-radius-md);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .25s ease;
}
.editkt-btn-solid, .ktd-btn-solid {
  background: var(--editkt-primary);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(45, 131, 163, 0.25);
}
.editkt-btn-solid:hover, .ktd-btn-solid:hover {
  background: var(--editkt-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 131, 163, 0.35);
}
.editkt-btn-outline, .ktd-btn-outline {
  background: transparent;
  color: var(--editkt-primary) !important;
  border-color: var(--editkt-primary);
}
.editkt-btn-outline:hover, .ktd-btn-outline:hover {
  background: var(--editkt-primary);
  color: #ffffff !important;
}

/* Video Wrap */
.editkt-video-wrap, .ktd-video-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--editkt-radius-md);
}
.editkt-video-16-9, .ktd-video-16-9 { aspect-ratio: 16 / 9; }
.editkt-video-4-3, .ktd-video-4-3 { aspect-ratio: 4 / 3; }
.editkt-video-1-1, .ktd-video-1-1 { aspect-ratio: 1 / 1; }
.editkt-video-wrap iframe, .editkt-video-wrap video,
.ktd-video-wrap iframe, .ktd-video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Image */
.editkt-image, .ktd-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--editkt-radius-md);
  object-fit: cover;
}

/* Icon Box */
.editkt-icon-box, .ktd-icon-box {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: var(--editkt-surface);
  border: 1px solid var(--editkt-border);
  border-radius: var(--editkt-radius-md);
  transition: transform .25s ease, box-shadow .25s ease;
}
.editkt-icon-box:hover, .ktd-icon-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.editkt-icon-box--top, .ktd-icon-box--top { flex-direction: column; text-align: center; }
.editkt-icon-box__icon, .ktd-icon-box__icon {
  font-size: 32px;
  color: var(--editkt-primary);
}
.editkt-icon-box__body h4, .ktd-icon-box__body h4 { margin: 0 0 8px; font-size: 18px; }
.editkt-icon-box__body p, .ktd-icon-box__body p { margin: 0; color: var(--editkt-text-muted); font-size: 14px; line-height: 1.6; }

/* Progress Bar */
.editkt-progress, .ktd-progress { width: 100%; margin: 12px 0; }
.editkt-progress__head, .ktd-progress__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
}
.editkt-progress__track, .ktd-progress__track {
  width: 100%;
  height: 10px;
  background: var(--editkt-border);
  border-radius: var(--editkt-radius-full);
  overflow: hidden;
}
.editkt-progress__bar, .ktd-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--editkt-primary), var(--editkt-accent));
  border-radius: var(--editkt-radius-full);
  transition: width 1s ease-in-out;
}

/* Testimonial */
.editkt-testimonial, .ktd-testimonial {
  padding: 28px;
  background: var(--editkt-surface);
  border: 1px solid var(--editkt-border);
  border-radius: var(--editkt-radius-md);
}
.editkt-testimonial__stars, .ktd-testimonial__stars { color: #f59e0b; margin-bottom: 12px; font-size: 14px; }
.editkt-testimonial__quote, .ktd-testimonial__quote {
  margin: 0 0 18px;
  font-style: italic;
  line-height: 1.6;
}
.editkt-testimonial__author, .ktd-testimonial__author { display: flex; align-items: center; gap: 14px; }
.editkt-testimonial__avatar, .ktd-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.editkt-testimonial__info strong, .ktd-testimonial__info strong { display: block; font-size: 15px; }
.editkt-testimonial__info span, .ktd-testimonial__info span { font-size: 13px; color: var(--editkt-text-muted); }

/* Price Table Pro */
.editkt-price-card, .ktd-price-card {
  position: relative;
  padding: 32px 24px;
  background: #ffffff;
  border: 1px solid var(--editkt-border);
  border-radius: var(--editkt-radius-lg);
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.editkt-price-card.is-featured, .ktd-price-card.is-featured {
  border-color: var(--editkt-primary);
  box-shadow: 0 12px 30px rgba(45, 131, 163, 0.15);
}
.editkt-price-badge, .ktd-price-badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--editkt-primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 14px;
  border-radius: var(--editkt-radius-full);
}
.editkt-price-title, .ktd-price-title { margin: 0 0 12px; font-size: 20px; }
.editkt-price-amount, .ktd-price-amount { margin: 18px 0; }
.editkt-price-amount strong, .ktd-price-amount strong { font-size: 36px; color: var(--editkt-text); }
.editkt-price-amount small, .ktd-price-amount small { font-size: 14px; color: var(--editkt-text-muted); margin-left: 4px; }
.editkt-price-features, .ktd-price-features {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  text-align: left;
}
.editkt-price-features li, .ktd-price-features li {
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--editkt-border);
}

/* Flip Box Pro (3D Flip) */
.editkt-flip-box, .ktd-flip-box {
  perspective: 1000px;
  width: 100%;
  min-height: 280px;
}
.editkt-flip-inner, .ktd-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.editkt-flip-box:hover .editkt-flip-inner,
.ktd-flip-box:hover .ktd-flip-inner {
  transform: rotateY(180deg);
}
.editkt-flip-front, .editkt-flip-back,
.ktd-flip-front, .ktd-flip-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  border-radius: var(--editkt-radius-md);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.editkt-flip-front, .ktd-flip-front {
  background: var(--editkt-surface);
  border: 1px solid var(--editkt-border);
}
.editkt-flip-front i, .ktd-flip-front i { font-size: 40px; color: var(--editkt-primary); margin-bottom: 14px; }
.editkt-flip-back, .ktd-flip-back {
  background: var(--editkt-primary);
  color: #ffffff;
  transform: rotateY(180deg);
}
.editkt-flip-back h4, .ktd-flip-back h4 { color: #ffffff; margin-top: 0; }
.editkt-flip-back p, .ktd-flip-back p { color: rgba(255, 255, 255, 0.85); font-size: 14px; }

/* Countdown Timer */
.editkt-countdown, .ktd-countdown {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 16px 0;
}
.editkt-countdown-item, .ktd-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 65px;
  padding: 10px;
  background: var(--editkt-surface);
  border: 1px solid var(--editkt-border);
  border-radius: var(--editkt-radius-md);
}
.editkt-cd-val, .ktd-cd-val { font-size: 24px; font-weight: 800; color: var(--editkt-primary); line-height: 1; }
.editkt-cd-lbl, .ktd-cd-lbl { font-size: 11px; text-transform: uppercase; color: var(--editkt-text-muted); margin-top: 4px; }

/* Call To Action (CTA) */
.editkt-cta-box, .ktd-cta-box {
  padding: 48px 32px;
  background: linear-gradient(135deg, var(--editkt-primary), #1e5a70);
  color: #ffffff;
  border-radius: var(--editkt-radius-lg);
  text-align: center;
}
.editkt-cta-box h2, .ktd-cta-box h2 { color: #ffffff; margin: 0 0 10px; }
.editkt-cta-box p, .ktd-cta-box p { color: rgba(255, 255, 255, 0.9); margin: 0 0 24px; font-size: 16px; }

/* Animated Headline */
.editkt-animated-headline, .ktd-animated-headline {
  font-size: 28px;
  font-weight: 700;
  margin: 16px 0;
}
.editkt-words-rotator, .ktd-words-rotator {
  display: inline-block;
  color: var(--editkt-primary);
  position: relative;
}

/* Share Buttons */
.editkt-share-buttons, .ktd-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.editkt-share-btn, .ktd-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--editkt-radius-sm);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  transition: opacity .2s ease;
}
.editkt-share-btn:hover, .ktd-share-btn:hover { opacity: 0.88; }
.share-wa { background: #25D366; }
.share-tg { background: #0088cc; }
.share-fb { background: #1877F2; }
.share-copy { background: #475569; }

/* Loop Builder Cards */
.editkt-loop-card, .ktd-loop-card {
  background: #ffffff;
  border: 1px solid var(--editkt-border);
  border-radius: var(--editkt-radius-md);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.editkt-loop-card:hover, .ktd-loop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.editkt-loop-media, .ktd-loop-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.editkt-loop-media img, .ktd-loop-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.editkt-loop-card:hover .editkt-loop-media img,
.ktd-loop-card:hover .ktd-loop-media img {
  transform: scale(1.05);
}
.editkt-loop-body, .ktd-loop-body { padding: 18px; }
.editkt-loop-body time, .ktd-loop-body time { font-size: 12px; color: var(--editkt-text-muted); }
.editkt-loop-body h4, .ktd-loop-body h4 { margin: 6px 0 10px; font-size: 17px; line-height: 1.4; }
.editkt-loop-body h4 a, .ktd-loop-body h4 a { color: var(--editkt-text); text-decoration: none; }
.editkt-loop-body h4 a:hover, .ktd-loop-body h4 a:hover { color: var(--editkt-primary); }
.editkt-loop-body p, .ktd-loop-body p { margin: 0 0 14px; font-size: 13.5px; color: var(--editkt-text-muted); line-height: 1.55; }
.editkt-loop-readmore, .ktd-loop-readmore { font-weight: 600; font-size: 13px; color: var(--editkt-primary); text-decoration: none; }

/* Popup Builder Modal */
.editkt-popup-wrapper, .ktd-popup-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editkt-popup-overlay, .ktd-popup-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
}
.editkt-popup-modal, .ktd-popup-modal {
  position: relative;
  width: 90%;
  max-width: 550px;
  background: #ffffff;
  border-radius: var(--editkt-radius-lg);
  padding: 32px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  z-index: 2;
  animation: editktPopupIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes editktPopupIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.editkt-popup-close, .ktd-popup-close {
  position: absolute;
  top: 14px; right: 14px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--editkt-text-muted);
  cursor: pointer;
}
.editkt-popup-close:hover, .ktd-popup-close:hover { color: var(--editkt-text); }

/* Form Builder Card */
.editkt-form-card, .ktd-form-card {
  padding: 28px;
  background: var(--editkt-surface);
  border: 1px solid var(--editkt-border);
  border-radius: var(--editkt-radius-md);
}
.editkt-form-card h3, .ktd-form-card h3 { margin: 0 0 20px; font-size: 20px; }
.editkt-form-group, .ktd-form-group { margin-bottom: 16px; }
.editkt-form-group label, .ktd-form-group label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.editkt-form-group .form-control, .ktd-form-group .form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--editkt-border);
  border-radius: var(--editkt-radius-sm);
  font-size: 14px;
  background: #ffffff;
  outline: none;
  transition: border-color .2s ease;
}
.editkt-form-group .form-control:focus, .ktd-form-group .form-control:focus {
  border-color: var(--editkt-primary);
  box-shadow: 0 0 0 3px rgba(45, 131, 163, 0.15);
}
.editkt-form-alert, .ktd-form-alert {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--editkt-radius-sm);
  font-size: 14px;
}
.editkt-form-alert.is-success, .ktd-form-alert.is-success { background: #d1fae5; color: #065f46; }
.editkt-form-alert.is-error, .ktd-form-alert.is-error { background: #fee2e2; color: #991b1b; }