/* =============================================================
   Ask About Product – Style
   ============================================================= */

:root {
  --aap-accent:       #2563eb;   /* nadpisywane przez PHP inline */
  --aap-accent-dark:  color-mix(in srgb, var(--aap-accent) 80%, #000);
  --aap-radius:       8px;
  --aap-shadow:       0 20px 60px rgba(0,0,0,.22);
  --aap-overlay:      rgba(0,0,0,.55);
  --aap-transition:   .22s cubic-bezier(.4,0,.2,1);
  --aap-z:            99990;
}

/* ---- Przycisk -------------------------------------------- */
.aap-trigger-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              .45em;
  padding:          .65em 1.3em;
  background:       var(--aap-accent);
  color:            #fff;
  border:           none;
  border-radius:    var(--aap-radius);
  font-size:        1rem;
  font-weight:      600;
  line-height:      1.2;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background var(--aap-transition), transform var(--aap-transition), box-shadow var(--aap-transition);
  box-shadow:       0 2px 8px rgba(0,0,0,.15);
  letter-spacing:   .01em;
}
.aap-trigger-btn:hover,
.aap-trigger-btn:focus-visible {
  background:   var(--aap-accent-dark);
  transform:    translateY(-1px);
  box-shadow:   0 4px 14px rgba(0,0,0,.22);
  outline:      none;
}
.aap-trigger-btn:active {
  transform: translateY(0);
}
.aap-btn-icon {
  font-style: normal;
  font-size:  1.1em;
}

/* ---- Modal overlay --------------------------------------- */
.aap-modal {
  position:   fixed;
  inset:      0;
  z-index:    var(--aap-z);
  display:    flex;
  align-items:  center;
  justify-content: center;
  padding:    1rem;
}
.aap-modal[hidden] {
  display: none !important;
}
.aap-modal-overlay {
  position:   absolute;
  inset:      0;
  background: var(--aap-overlay);
  cursor:     pointer;
  animation:  aapFadeIn var(--aap-transition) both;
}

/* ---- Modal okno ------------------------------------------ */
.aap-modal-content {
  position:         relative;
  z-index:          1;
  background:       #fff;
  border-radius:    calc(var(--aap-radius) * 1.5);
  box-shadow:       var(--aap-shadow);
  width:            100%;
  max-width:        520px;
  max-height:       90vh;
  overflow-y:       auto;
  animation:        aapSlideIn var(--aap-transition) both;
  overscroll-behavior: contain;
}

/* ---- Nagłówek -------------------------------------------- */
.aap-modal-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              1rem;
  padding:          1.1rem 1.4rem .9rem;
  background:       var(--aap-accent);
  color:            #fff;
  border-radius:    calc(var(--aap-radius) * 1.5) calc(var(--aap-radius) * 1.5) 0 0;
}
.aap-modal-title {
  margin:       0;
  font-size:    1.1rem;
  font-weight:  700;
  line-height:  1.3;
  color:        #fff;
}
.aap-modal-title span {
  font-style: italic;
  opacity:    .9;
}

/* ---- Przycisk zamknij ------------------------------------ */
.aap-modal-close {
  flex-shrink:  0;
  background:   rgba(255,255,255,.18);
  border:       none;
  color:        #fff;
  width:        32px;
  height:       32px;
  border-radius: 50%;
  font-size:    1rem;
  line-height:  1;
  cursor:       pointer;
  transition:   background var(--aap-transition);
  display:      flex;
  align-items:  center;
  justify-content: center;
  padding:      0;
}
.aap-modal-close:hover,
.aap-modal-close:focus-visible {
  background:  rgba(255,255,255,.35);
  outline:     none;
}

/* ---- Treść ----------------------------------------------- */
.aap-modal-body {
  padding: 1.4rem 1.6rem 1.6rem;
}

/* ---- Integracja z CF7 ------------------------------------ */
.aap-modal-body .wpcf7 {
  margin: 0;
}
.aap-modal-body .wpcf7-form p {
  margin-bottom: .75rem;
}
.aap-modal-body .wpcf7-form label {
  display:      block;
  font-size:    .875rem;
  font-weight:  600;
  margin-bottom: .3rem;
  color:        #374151;
}
.aap-modal-body .wpcf7-form input[type="text"],
.aap-modal-body .wpcf7-form input[type="email"],
.aap-modal-body .wpcf7-form input[type="tel"],
.aap-modal-body .wpcf7-form textarea,
.aap-modal-body .wpcf7-form select {
  width:        100%;
  padding:      .55em .8em;
  border:       1.5px solid #d1d5db;
  border-radius: var(--aap-radius);
  font-size:    .95rem;
  color:        #111827;
  background:   #f9fafb;
  transition:   border-color var(--aap-transition), box-shadow var(--aap-transition);
  box-sizing:   border-box;
}
.aap-modal-body .wpcf7-form input:focus,
.aap-modal-body .wpcf7-form textarea:focus,
.aap-modal-body .wpcf7-form select:focus {
  border-color: var(--aap-accent);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--aap-accent) 20%, transparent);
  outline:      none;
  background:   #fff;
}
.aap-modal-body .wpcf7-form textarea {
  resize:       vertical;
  min-height:   100px;
}
.aap-modal-body .wpcf7-form input[type="submit"] {
  width:        auto;
  padding:      .65em 1.6em;
  background:   var(--aap-accent);
  color:        #fff;
  border:       none;
  border-radius: var(--aap-radius);
  font-size:    .95rem;
  font-weight:  700;
  cursor:       pointer;
  transition:   background var(--aap-transition);
}
.aap-modal-body .wpcf7-form input[type="submit"]:hover {
  background: var(--aap-accent-dark);
}
.aap-modal-body .wpcf7-not-valid-tip {
  color:        #dc2626;
  font-size:    .8rem;
  margin-top:   .2rem;
}
.aap-modal-body .wpcf7-response-output {
  margin:       .8rem 0 0;
  padding:      .7em 1em;
  border-radius: var(--aap-radius);
  font-size:    .9rem;
}
/* CF7 response states */
.aap-modal-body .wpcf7-mail-sent-ok {
  background: #f0fdf4;
  border-color: #16a34a;
  color: #15803d;
}
.aap-modal-body .wpcf7-mail-sent-ng,
.aap-modal-body .wpcf7-validation-errors,
.aap-modal-body .wpcf7-spam-blocked {
  background: #fef2f2;
  border-color: #dc2626;
  color: #991b1b;
}

/* ---- Animacje -------------------------------------------- */
@keyframes aapFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes aapSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ---- Dostępność: focus-visible outline ------------------- */
.aap-trigger-btn:focus-visible,
.aap-modal-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---- Responsywność --------------------------------------- */
@media (max-width: 480px) {
  .aap-modal-content {
    max-height: 95vh;
  }
  .aap-modal-body {
    padding: 1rem 1rem 1.2rem;
  }
}