/*
Theme Name: Mokko (Child Theme)
Theme URI: http://madsparrow.us/
Author: Mad Sparrow
Author URI: https://themeforest.net/user/madsparrow
Description: Mokko Creative Agency and Portfolio Theme – The theme is built to take advantage of the Full Site Editing features introduced in WordPress and Elementor plugin, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Tags: one-column, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, page transition
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mokko
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Template: mokko
*/

/* Add your own modification from here
-------------------------------------------------------------- */
/* Overlay */
.nl-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.nl-modal.is-open { display: block; }
.nl-backdrop { position: absolute; inset: 0; background: rgba(17,17,17,.55); }

/* Tarjeta global */
.nl-card{
  position: relative;
  max-width: 880px;
  margin: 6vh auto;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  display: grid;
  grid-template-columns: 42% 58%;
}

.nl-input-group{
	padding-top: 20px;
}

input[type=submit].wpcf7-submit{
	background-color: #000 !important;
	color: #fff;
}

@media (max-width: 820px){
  .nl-card{ grid-template-columns: 100%; border-radius: 20px; }
}

/* Panel izquierdo (imagen) */
.nl-card-left{
  background: #f3f3f3 center/cover no-repeat;
  background-image: var(--nl-left-img);
  min-height: 360px;
}
@media (max-width: 820px){
  .nl-card-left{ display: none; }
}

/* Panel derecho (contenido) */
.nl-card-right{
  position: relative;
  padding: 36px 34px 28px;
}
.nl-close{
  position: absolute; right: 16px; top: 14px;
  width: 40px; height: 40px; border: 0; background: transparent;
  font-size: 28px; line-height: 1; color: #222; cursor: pointer;
}
.nl-close:hover{ color: #000; }

.nl-title{ margin: 6px 0 10px; font-weight: 800; font-size: 32px; letter-spacing: .2px; }
.nl-subtitle{ margin: 0 0 18px; color: #444; line-height: 1.5; }

/* Input pill + botón circular */
.nl-input-group{ position: relative; }
.wpcf7-form .nl-input{
  width: 100%;
  padding: 16px 64px 16px 18px; /* espacio para el botón a la derecha */
  border: 0;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10), 0 1px 0 rgba(0,0,0,.06) inset;
  font-size: 16px;
}
.wpcf7-form .nl-input:focus{ outline: none; box-shadow: 0 0 0 3px rgba(224,32,32,.18), 0 10px 24px rgba(0,0,0,.10); }

/* Botón de enviar como círculo con icono */
.wpcf7-form .nl-send{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  cursor: pointer;
  text-indent: -9999px; /* ocultar texto " " */
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 55%),
    linear-gradient(135deg, #6a11cb, #2575fc); /* puedes poner #e02020 a #c31818 si prefieres ROJO marca */
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
/* Icono de avión (SVG enmascarado sobre el botón) */
.wpcf7-form .nl-send::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width: 20px; height: 20px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>') center/contain no-repeat;
  background: #fff;
}
.wpcf7-form .nl-send:hover{ filter: brightness(1.05); }

/* Aceptación y legal */
.nl-terms{ margin-top: 10px; font-size: 13px; color: #555; }
.nl-legal{ margin-top: 12px; font-size: 13px; color: #777; }
.nl-privacy{ color: #666; text-decoration: underline; }

/* Ajustes CF7 */
.wpcf7 form .wpcf7-response-output{ margin: 12px 0 0; border-radius: 12px; }

/* === Fade del popup === */
#nl-popup { /* el overlay */
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
#nl-popup.is-open {
  opacity: 1;
  visibility: visible;
}

/* Backdrop con fade */
#nl-popup .nl-backdrop {
  opacity: 0;
  transition: opacity .28s ease;
}
#nl-popup.is-open .nl-backdrop { opacity: 1; }

/* Tarjeta con fade + ligera elevación */
#nl-popup .nl-card {
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .3s ease, transform .3s ease;
  will-change: opacity, transform;
}
#nl-popup.is-open .nl-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* === Botón negro con hover gris (sólo dentro del popup) === */
#nl-popup .nl-form .nl-btn,
#nl-popup .nl-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  background: #111;          /* negro */
  color: #fff;
  border: 0;
  border-radius: 999px;      /* píldora */
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background-color .2s ease, filter .2s ease, transform .02s;
}
#nl-popup .nl-form .nl-btn:hover,
#nl-popup .nl-form .wpcf7-submit:hover {
  background: #2e2e2e;       /* gris oscuro en hover */
}
#nl-popup .nl-form .nl-btn:active,
#nl-popup .nl-form .wpcf7-submit:active {
  transform: translateY(1px);
}