.elementor-28 .elementor-element.elementor-element-b265ef9{--display:flex;}/* Start custom CSS for html, class: .elementor-element-54e563e */<style>
  .coa-portal-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    perspective: 1600px;
  }

  .coa-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    min-height: 360px;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .coa-card.is-flipped {
    transform: rotateY(180deg);
  }

  .coa-side {
    position: absolute;
    inset: 0;
    padding: 26px 24px 24px;
    border-radius: 26px;
    background: #10121a;
    box-shadow:
      18px 18px 34px rgba(0, 0, 0, 0.7),
      -12px -12px 30px rgba(52, 60, 80, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.02);
    color: #f9fafb;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    pointer-events: none;
  }

  .coa-side--active {
    opacity: 1;
    pointer-events: auto;
  }

  .coa-side--back {
    transform: rotateY(180deg);
  }

  .coa-title {
    margin: 0;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #e5e7eb;
  }

  .coa-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: #9ca3af;
  }

  .coa-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    color: #9ca3af;
  }

  .coa-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: none;
    outline: none;
    background: #0b0d13;
    color: #f9fafb;
    box-shadow:
      inset 3px 3px 5px rgba(0, 0, 0, 0.85),
      inset -3px -3px 6px rgba(75, 85, 99, 0.45);
    font-size: 0.95rem;
  }

  .coa-input::placeholder {
    color: #4b5563;
  }

  .coa-input:focus {
    box-shadow:
      inset 4px 4px 7px rgba(0, 0, 0, 0.9),
      inset -4px -4px 7px rgba(129, 140, 248, 0.6),
      0 0 0 1px rgba(129, 140, 248, 0.4);
  }

  .coa-btn {
    margin-top: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    gap: 8px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #f9fafb;
    box-shadow:
      0 14px 25px rgba(79, 70, 229, 0.45),
      0 0 0 1px rgba(129, 140, 248, 0.45);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
  }

  .coa-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
      0 18px 32px rgba(79, 70, 229, 0.6),
      0 0 0 1px rgba(129, 140, 248, 0.7);
  }

  .coa-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
      0 8px 16px rgba(79, 70, 229, 0.45),
      0 0 0 1px rgba(129, 140, 248, 0.7);
  }

  .coa-btn:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(55, 65, 81, 0.8);
  }

  .coa-btn-secondary {
    margin-top: 10px;
    background: #0f172a;
    box-shadow:
      0 12px 22px rgba(0, 0, 0, 0.8),
      0 0 0 1px rgba(55, 65, 81, 0.9);
  }

  .coa-status {
    margin-top: 10px;
    font-size: 0.85rem;
    min-height: 1.2em;
  }

  .coa-status--ok {
    color: #6ee7b7;
  }

  .coa-status--error {
    color: #fca5a5;
  }

  .coa-result {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.9);
    box-shadow:
      inset 0 0 0 1px rgba(55, 65, 81, 0.9),
      0 8px 18px rgba(0, 0, 0, 0.65);
  }

  .coa-result-heading {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #a7f3d0;
  }

  .coa-result-body {
    margin: 0;
    font-size: 0.85rem;
    color: #d1d5db;
  }

  .coa-link-btn {
    margin-top: auto;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: #9ca3af;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .coa-link-btn:hover {
    color: #e5e7eb;
  }

  @media (max-width: 600px) {
    .coa-card {
      max-width: 100%;
    }
  }
</style>

<script>
  (function () {
    const ajaxUrl = "<?php echo esc_url( admin_url('admin-ajax.php') ); ?>";

    const card = document.getElementById("coa-card");
    const frontSide = document.getElementById("coa-front");
    const backSide = document.getElementById("coa-back");

    const serialForm = document.getElementById("coa-serial-form");
    const serialInput = document.getElementById("coa-serial-input");
    const serialSubmit = document.getElementById("coa-serial-submit");
    const serialStatus = document.getElementById("coa-serial-status");
    const verifyResult = document.getElementById("coa-verify-result");
    const resultText = document.getElementById("coa-result-text");
    const ownerBtn = document.getElementById("coa-owner-button");

    const emailForm = document.getElementById("coa-email-form");
    const emailInput = document.getElementById("coa-email-input");
    const emailHiddenSerial = document.getElementById("coa-serial-hidden");
    const emailSubmit = document.getElementById("coa-email-submit");
    const emailStatus = document.getElementById("coa-email-status");
    const backToSerial = document.getElementById("coa-back-to-serial");

    let lastVerified = null; // { serial, title, status }

    function setFrontActive() {
      frontSide.classList.add("coa-side--active");
      backSide.classList.remove("coa-side--active");
      card.classList.remove("is-flipped");
    }

    function setBackActive() {
      frontSide.classList.remove("coa-side--active");
      backSide.classList.add("coa-side--active");
      card.classList.add("is-flipped");

      // Focus email after flip animation
      setTimeout(() => {
        if (emailInput) {
          emailInput.focus();
        }
      }, 350);
    }

    function setStatus(el, msg, ok) {
      if (!el) return;
      el.textContent = msg || "";
      el.classList.remove("coa-status--ok", "coa-status--error");
      if (!msg) return;
      el.classList.add(ok ? "coa-status--ok" : "coa-status--error");
    }

    // --- SERIAL VERIFY ---

    if (serialForm) {
      serialForm.addEventListener("submit", function (e) {
        e.preventDefault();

        const serial = (serialInput.value || "").trim();
        if (!serial) {
          setStatus(serialStatus, "Please enter a serial number.", false);
          return;
        }

        setStatus(serialStatus, "Checking certificate…", true);
        verifyResult.hidden = true;
        serialSubmit.disabled = true;

        const url =
          ajaxUrl +
          "?action=et_api&op=verify&serial=" +
          encodeURIComponent(serial);

        fetch(url, { method: "GET" })
          .then((r) => r.json())
          .then((data) => {
            serialSubmit.disabled = false;

            if (!data || !data.ok) {
              setStatus(
                serialStatus,
                data && data.message
                  ? data.message
                  : "Certificate not found.",
                false
              );
              lastVerified = null;
              verifyResult.hidden = true;
              return;
            }

            const d = data.data || {};
            lastVerified = {
              serial: d.serial || serial,
              title: d.title || "Untitled work",
              status: d.status || "registered",
            };

            setStatus(serialStatus, "Certificate verified.", true);
            resultText.textContent =
              (d.title ? d.title + " — " : "") +
              "Serial " +
              d.serial +
              " is valid and " +
              (d.status || "registered") +
              ".";
            verifyResult.hidden = false;
          })
          .catch((err) => {
            console.error("Verify error", err);
            serialSubmit.disabled = false;
            setStatus(
              serialStatus,
              "There was a problem verifying this serial. Please try again.",
              false
            );
            verifyResult.hidden = true;
          });
      });
    }

    // --- OWNER BUTTON: FLIP TO EMAIL ---

    if (ownerBtn) {
      ownerBtn.addEventListener("click", function () {
        if (!lastVerified || !lastVerified.serial) {
          setStatus(
            serialStatus,
            "Please verify a certificate first.",
            false
          );
          return;
        }

        // Put serial into hidden field on back
        emailHiddenSerial.value = lastVerified.serial;

        // Clear previous email + status
        emailInput.value = "";
        setStatus(emailStatus, "", true);

        setBackActive();
      });
    }

    // --- EMAIL SUBMIT ---

    if (emailForm) {
      emailForm.addEventListener("submit", function (e) {
        e.preventDefault();

        const serial = (emailHiddenSerial.value || "").trim();
        const email = (emailInput.value || "").trim();

        if (!serial) {
          setStatus(
            emailStatus,
            "Missing serial. Please go back and verify again.",
            false
          );
          return;
        }
        if (!email) {
          setStatus(emailStatus, "Please enter your email address.", false);
          return;
        }

        emailSubmit.disabled = true;
        setStatus(emailStatus, "Sending confirmation email…", true);

        // 🔧 Back-end handler you will implement in PHP below: action=coa_owner_email_verify
        const formData = new FormData();
        formData.append("action", "coa_owner_email_verify");
        formData.append("serial", serial);
        formData.append("owner_email", email);

        fetch(ajaxUrl, {
          method: "POST",
          body: formData,
        })
          .then((r) => r.json())
          .then((data) => {
            emailSubmit.disabled = false;
            if (!data || !data.ok) {
              setStatus(
                emailStatus,
                data && data.message
                  ? data.message
                  : "Could not send confirmation email.",
                false
              );
              return;
            }
            setStatus(
              emailStatus,
              "Done! Check your email to confirm registration.",
              true
            );
          })
          .catch((err) => {
            console.error("Email verify error", err);
            emailSubmit.disabled = false;
            setStatus(
              emailStatus,
              "There was a problem sending the email. Please try again.",
              false
            );
          });
      });
    }

    // --- SWITCH BACK TO FRONT ---

    if (backToSerial) {
      backToSerial.addEventListener("click", function () {
        setFrontActive();
      });
    }

    // Make sure initial state is correct
    setFrontActive();
  })();
</script>/* End custom CSS */