/**
 * Mediaspot NC Nails - Newsletter Widget Styles
 * Styles default form and seamlessly injects pill theme into Elementor Form templates.
 *
 * @package Mediaspot_NCNails
 */

:root {
  --nc-ink: #181818;
  --nc-white: #ffffff;
  --nc-rose: #e2adb2;
  --nc-rose-dark: #b86b73;
  --nc-soft: #f7f6f4;
  --nc-gray: #7c7a77;
  --nc-accent: #e5ded5;
  --nc-radius: 16px;
  --nc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mediaspot-ncnails-newsletter-scope {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

.mediaspot-ncnails-newsletter-scope .news {
  padding: 0 0 100px;
  position: relative;
}

.mediaspot-ncnails-newsletter-scope .wrap {
  width: min(1320px, 92%);
  margin: 0 auto;
}

.mediaspot-ncnails-newsletter-scope .news-box {
  background: var(--nc-rose);
  border-radius: 28px;
  padding: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.mediaspot-ncnails-newsletter-scope .news-box.has-circle::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -140px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 60px solid rgba(255, 255, 255, .28);
  pointer-events: none;
  z-index: 1;
}

.mediaspot-ncnails-newsletter-scope .news-box h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--nc-ink);
  margin: 0;
  position: relative;
  z-index: 2;
}

.mediaspot-ncnails-newsletter-scope .news-box h2 em {
  font-style: italic;
  font-weight: 700;
}

.mediaspot-ncnails-newsletter-scope .news-box p {
  margin-top: 14px;
  color: rgba(24, 24, 24, .72);
  max-width: 42ch;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.mediaspot-ncnails-newsletter-scope .news-form-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ============ DEFAULT FORM ============ */
.mediaspot-ncnails-newsletter-scope .news-form {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  align-items: center;
}

.mediaspot-ncnails-newsletter-scope .news-form input {
  flex: 1;
  min-width: 220px;
  border: none;
  outline: none;
  background: var(--nc-white);
  border-radius: 99px;
  padding: 18px 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--nc-ink);
  box-sizing: border-box;
}

.mediaspot-ncnails-newsletter-scope .news-form input::placeholder {
  color: var(--nc-gray);
  opacity: 0.85;
}

.mediaspot-ncnails-newsletter-scope .news-form .btn-dark,
.mediaspot-ncnails-newsletter-scope .news-box .btn-dark {
  background: var(--nc-ink);
  color: var(--nc-white);
  border-radius: 99px;
  padding: 18px 34px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all .3s var(--nc-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.mediaspot-ncnails-newsletter-scope .news-form .btn-dark:hover,
.mediaspot-ncnails-newsletter-scope .news-box .btn-dark:hover {
  background: var(--nc-ink);
  color: var(--nc-rose);
  transform: translateY(-2px);
}

.mediaspot-ncnails-newsletter-scope .news-note {
  width: 100%;
  font-size: 12px;
  color: rgba(24, 24, 24, .6);
  font-weight: 600;
  margin-top: 10px;
  display: block;
}

/* ============ ELEMENTOR FORM TEMPLATE INHERITANCE ============ */
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap {
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Strip extra container paddings from Elementor template */
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-section,
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-container,
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-column,
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-widget-wrap {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Inline flex alignment for Elementor Form fields */
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-form-fields-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Hide labels if they take space, keeping clean newsletter pill design */
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-field-label {
  display: none !important;
}

/* Input field group */
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-field-group:not(.elementor-field-type-submit) {
  flex: 1 1 220px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Submit button group */
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-field-type-submit {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Text & Email input styling */
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-field-textual,
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap input[type="email"],
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap input[type="text"] {
  border: none !important;
  outline: none !important;
  background: var(--nc-white) !important;
  border-radius: 99px !important;
  padding: 18px 26px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--nc-ink) !important;
  height: auto !important;
  min-height: 52px !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap input::placeholder {
  color: var(--nc-gray) !important;
  opacity: 0.85 !important;
}

/* Elementor Submit Button styling */
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-button,
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap button[type="submit"] {
  background: var(--nc-ink) !important;
  color: var(--nc-white) !important;
  border-radius: 99px !important;
  padding: 18px 34px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .3s var(--nc-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  min-height: 52px !important;
  height: auto !important;
}

.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-button:hover,
.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap button[type="submit"]:hover {
  background: var(--nc-ink) !important;
  color: var(--nc-rose) !important;
  transform: translateY(-2px) !important;
}

.mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-message {
  width: 100% !important;
  margin-top: 12px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ============ RESPONSIVE BREAKPOINTS ============ */
@media (max-width: 900px) {
  .mediaspot-ncnails-newsletter-scope .news-box {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 620px) {
  .mediaspot-ncnails-newsletter-scope .news {
    padding: 0 0 60px;
  }

  .mediaspot-ncnails-newsletter-scope .news-box {
    padding: 32px 24px;
    border-radius: 20px;
  }

  .mediaspot-ncnails-newsletter-scope .news-form,
  .mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-form-fields-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mediaspot-ncnails-newsletter-scope .news-form input,
  .mediaspot-ncnails-newsletter-scope .news-form button,
  .mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-field-group,
  .mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-field-type-submit,
  .mediaspot-ncnails-newsletter-scope .nc-template-form-wrap .elementor-button {
    width: 100% !important;
    min-width: 100% !important;
  }
}