/* ============================================================
   ZOHO POPUP INTEGRATION — test-only styling
   Keeps Zoho's submission plumbing, removes Zoho presentation.
============================================================ */

/* Hide Zoho presentation duplicated by the CAGO popup */
.zoho-popup-test #imgBlock,
.zoho-popup-test #POPUP_SIGNUP_HEADING,
.zoho-popup-test #SIGNUP_DESCRIPTION,
.zoho-popup-test div[name="SIGNUP_FORM_LABEL"],
.zoho-popup-test #REQUIRED_FIELD_TEXT {
  display: none;
}

/* Zoho's own error box stays in the DOM for its logic,
   but CAGO's #popup-zoho-status is the visible message surface. */
.zoho-popup-test #errorMsgDiv {
  display: none;
}

/* Remove Zoho's unused top spacing */
.zoho-popup-test #SIGNUP_PAGE > br {
  display: none;
}

/* Neutralize Zoho wrapper spacing */
.zoho-popup-test,
.zoho-popup-test #customForm,
.zoho-popup-test #SIGNUP_PAGE,
.zoho-popup-test #signupMainDiv,
.zoho-popup-test #SIGNUP_BODY_ALL,
.zoho-popup-test #SIGNUP_BODY,
.zoho-popup-test #zcampaignOptinForm {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Popup form should use the available dialog width */
.zoho-popup-test .zpt-layout,
.zoho-popup-test .zpt-layout-inner {
  width: 100%;
}

/* The inner wrapper owns the visible vertical form flow */
.zoho-popup-test .zpt-layout-inner {
  display: flex;
  flex-direction: column;
}

/* Prevent generated empty Zoho placeholders from adding gaps */
.zoho-popup-test .zpt-layout-inner > div:empty {
  display: none;
}




/* ============================================================
    POPUP PANEL - DIALOG BOX
   
============================================================ */



/* .popup-panel is now the native <dialog> itself — position: fixed
   plus margin: auto replaces the old .popup-overlay flex-centering
   wrapper, and also gives .popup-close a positioned ancestor for its
   position: absolute placement. The reset in reset.css zeroes the UA
   dialog:modal { margin: auto } rule (author origin beats user-agent
   origin regardless of specificity), so it's redeclared explicitly
   here. */
.popup-panel {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  background-color: var(--color-cream);
  max-width: 600px;
  width: calc(100% - 2 * var(--space-5));
  padding: var(--space-7) var(--space-7) 2.75rem;
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform 400ms ease,
    opacity 400ms ease,
    overlay 400ms ease allow-discrete,
    display 400ms ease allow-discrete;
}

.popup-panel[open] {
  transform: translateY(0);
  opacity: 1;
}

/* Entrance transition — progressive enhancement. Browsers without
   @starting-style / discrete transition support just show the dialog
   instantly at its open-state values (transform: translateY(0),
   opacity: 1), which is an acceptable fallback. */
@starting-style {
  .popup-panel[open] {
    transform: translateY(12px);
    opacity: 0;
  }
}

.popup-panel::backdrop {
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition:
    opacity 400ms ease,
    overlay 400ms ease allow-discrete,
    display 400ms ease allow-discrete;
}

.popup-panel[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .popup-panel[open]::backdrop {
    opacity: 0;
  }
}
/* ============================================================
   CLOSE BUTTON
============================================================ */

.popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-color-accent);
  opacity: 0.7;
  transition: opacity 200ms ease;
  padding: 0;
  
}

.popup-close:hover {
  opacity: 1;
}

.popup-close svg {
  width: 20px;
  height: 20px;
}

.popup-close:focus-visible {
  outline: 1px solid rgba(45, 26, 16, 0.55);
  outline-offset: 2px;
  border-radius: 50%;
}


/*============================================================
   POPUP LOGO
============================================================ */
.popup-logo {
  display: block;
  width: 85px;
}

.popup-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/*============================================================
   POPUP CONTENT - PARENT CONTAINING 
.popup-content
├── headline
├── gap
├── Zoho form
└── success note
============================================================ */
.popup-content {
  display: flex;
  flex-direction: column;
}

.popup-message {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

/*popup headline - workwear got boring you didn't*/
.popup-headline {
  font-family: var(--font-body);
  font-size: 2.125rem;
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--text-color-accent);
}

/* ============================================================
   EMAIL
============================================================ */

.zoho-popup-test .zpt-email-cell {
  width: 100%;
  min-width: 0;
}


.zoho-popup-test .zcinputbox {
  width: 100%;
}


.zoho-popup-test input[name="CONTACT_EMAIL"] {
  display: block;
  box-sizing: border-box;

  width: 100%;

  background: transparent;

  /* !important neutralizes Zoho's inline validation border. */
  border: 1px solid rgba(45, 26, 16, 0.25) !important;

  padding: 0.9rem 1rem;

  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);

  color: var(--color-dark-brown);

  outline: none;

  transition: border-color 200ms ease;
}


.zoho-popup-test input[name="CONTACT_EMAIL"]::placeholder {
  text-transform: uppercase;

  color: rgba(45, 26, 16, 0.63);

  font-size: 0.65rem;
  letter-spacing: 0.18em;
}


.zoho-popup-test input[name="CONTACT_EMAIL"]:focus-visible {
  border-color: rgba(45, 26, 16, 0.55) !important;
}



/* ============================================================
   CAGO STATUS / ERROR
============================================================ */

.zoho-popup-test #popup-zoho-status {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);

  padding: 0;

  background: transparent;
  border-radius: 0;

  font-family: var(--font-body);
  font-size: var(--text-dropdown);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  letter-spacing: 0.01em;

  color: var(--color-error);

  text-align: left;
}


.zoho-popup-test #popup-zoho-status[hidden] {
  display: none;
}


/* js/zoho-signup-bridge.js adds .is-success after observing a real
   Zoho success response. */
.zoho-popup-test #popup-zoho-status.is-success {
  color: var(--color-popup-success);
}

/* zoho-signup-bridge.js adds .is-pending while CAGO waits on Zoho's
   response — neutral/main text color, deliberately distinct from both
   the base error red above and .is-success. Same selector specificity
   as .is-success above so it reliably overrides the base rule's
   --color-error. */
.zoho-popup-test #popup-zoho-status.is-pending {
  color: var(--text-color-primary);
}


/* ============================================================
   CONSENT
============================================================ */

.zoho-popup-test .zpt-consent-cell {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;

  gap: var(--space-3);

  min-height: var(--space-7);

  margin-top: var(--space-2);
  margin-bottom: var(--space-5);

  padding-block: var(--space-2);

  /* Zoho applies an inline red border when invalid. CAGO uses
     #popup-zoho-status instead. */
  border: none !important;
}


.zoho-popup-test
  .zpt-consent-cell
  input[name="PRIVACY_POLICY"] {
  appearance: none;
  -webkit-appearance: none;

  width: 1.25rem;
  height: 1.25rem;

  margin: 0.125rem 0 0;

  border: 1px solid rgba(45, 26, 16, 0.25);
  border-radius: 0;

  background-color: transparent;

  cursor: pointer;
  position: relative;
}


.zoho-popup-test
  .zpt-consent-cell
  input[name="PRIVACY_POLICY"]:checked {
  background-color: var(--color-red);
  border-color: var(--color-red);
}


.zoho-popup-test
  .zpt-consent-cell
  input[name="PRIVACY_POLICY"]:checked::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 45%;

  width: 5px;
  height: 10px;

  border: solid var(--color-cream);
  border-width: 0 2px 2px 0;

  transform: translate(-50%, -50%) rotate(45deg);
}


.zoho-popup-test
  .zpt-consent-cell
  input[name="PRIVACY_POLICY"]:focus-visible {
  outline: 1px solid rgba(45, 26, 16, 0.55);
  outline-offset: 2px;
}


.zoho-popup-test .zpt-consent-cell > label {
  font-family: var(--font-body);
  font-size: var(--text-label-tight);
  font-weight: var(--weight-regular);

  color: var(--text-color-secondary);

  line-height: 1.4;
  text-align: left;
}


.zoho-popup-test .zpt-consent-cell a {
  font-family: inherit;
  font-size: inherit;

  color: inherit;

  text-decoration: underline;
  white-space: nowrap;
}

/* ============================================================
   SUBMIT
============================================================ */

.zoho-popup-test .zpt-submit-cell {
  width: 100%;
}


.zoho-popup-test .zpt-submit-cell input#zcWebOptin {
  display: block;
  box-sizing: border-box;

  width: 100%;

  background: var(--color-red);
  border: none;

  padding: var(--space-4);

  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: var(--weight-regular);

  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: var(--text-color-inverse);

  cursor: pointer;

  transition: opacity 200ms ease;
}


.zoho-popup-test .zpt-submit-cell input#zcWebOptin:hover {
  opacity: 0.88;
}


.zoho-popup-test
  .zpt-submit-cell
  input#zcWebOptin:focus-visible {
  outline: 1px solid rgba(45, 26, 16, 0.55);
  outline-offset: 2px;
}


/* ============================================================
   ZOHO SUCCESS SOURCE
============================================================ */

/*
   js/zoho-signup-bridge.js first reads the real Zoho success box,
   then applies this class after copying the result into
   #popup-zoho-status.

   Keep visibility:hidden rather than display:none because the
   bridge continues observing Zoho's reused success element.
*/
.zoho-popup-test .cago-success-source-hidden {
  visibility: hidden !important;
}

.popup-panel.is-success .zoho-popup-test {
  display: none;
}

/* --color-popup-success was already reserved in tokens.css for
   exactly this: the headline's recolor on successful signup. */
.popup-headline.is-success {
  color: var(--color-popup-success);
}

.popup-success-note {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--text-color-secondary);
}

.popup-panel.is-success .popup-message {
  gap: var(--space-3);
}

.popup-panel.is-success .popup-content{
   margin-bottom: var(--space-7);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 768px) {
  .popup-panel {
    padding: 2.25rem 1.5rem 2rem;
  }
}

@media (max-width: 480px) {
 
  /* 1rem (16px) — iOS Safari automatically zooms the viewport on
     focus for any input under 16px font-size. This override
     prevents that zoom on mobile, while desktop keeps its
     original smaller size. */
  .zoho-popup-test input[name="CONTACT_EMAIL"] {
    font-size: 1rem;
  }
 
  .popup-content {
    margin-top: var(--space-5);
    gap: var(--space-5);
  }

  .popup-panel.is-success .popup-content{
   margin-bottom: var(--space-7);
}
  
 
  .popup-headline,.popup-headline.is-success{
    font-size: var(--text-heading-section-max);
  }
  


  .popup-logo{
    width:var(--space-8);
  }

 .popup-panel {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
}

@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  /* 1rem (16px) — iOS Safari zooms on focus for inputs under 16px.
     Landscape orientation on phones exceeds the 480px portrait
     breakpoint, so this needs its own override using the same
     landscape safety-net pattern used elsewhere in this codebase. */
 .zoho-popup-test input[name="CONTACT_EMAIL"] {
    font-size: 1rem;
  }

  .popup-panel {
    max-height: calc(100% - 2rem);
    overflow-y: auto;
    margin-block: 1rem;
  }
}