/* ==============================
   Landing Page Studio – Frontend Styles
   ============================== */
.lps-editor-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 25px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.1);
  font-family: "Inter", sans-serif;
}

.lps-section { margin: 25px 0; }

.lps-editable {
  border: 1px dashed transparent;
  padding: 6px;
  transition: border-color 0.3s, background 0.3s;
}
.lps-editable:focus,
.lps-editable:hover {
  outline: none;
  border-color: #4b9dfc;
  background: #f0f8ff;
}

.lps-upload { margin-top: 8px; }

.lps-preview img,
.lps-preview video,
.lps-preview audio {
  display: block;
  margin-top: 10px;
  max-width: 100%;
  border-radius: 8px;
}

.lps-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 25px;
}
#lps-title {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
#lps-status {
  margin-top: 15px;
  font-weight: 600;
  color: #2d7c2d;
}
/* ==============================
   Template Chooser
   ============================== */
.lps-template-selector {
  margin: 20px auto 30px;
  padding: 10px 15px;
  background: #f9fafb;
  border: 1px solid #ddd;
  border-radius: 10px;
  text-align: center;
  max-width: 400px;
}
.lps-template-selector label {
  font-weight: 600;
  margin-right: 8px;
}
.lps-template-selector select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 15px;
}
/* =====================================
   Elementor variable override inside Landing Page Studio
   ===================================== */

/* 1. Reset Elementor's global color variable only inside LPS editor */
.lps-editor-container {
  --e-global-color-secondary: #0073aa !important; /* WordPress blue */
  --e-global-color-primary: #0073aa !important;
  --e-global-color-text: #ffffff !important;
}

/* 2. Force button look */
.lps-editor-container #lps-save-draft,
.lps-editor-container #lps-publish,
.lps-editor-container .elementor-button,
.lps-editor-container button {
  background: var(--e-global-color-secondary) !important;
  color: var(--e-global-color-text) !important;
  border: none !important;
  padding: 10px 22px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

/* 3. Hover effect */
.lps-editor-container #lps-save-draft:hover,
.lps-editor-container #lps-publish:hover,
.lps-editor-container .elementor-button:hover {
  background: #005a87 !important;
  color: #fff !important;
}