/*
Styles scoped to Popups from the Popup Maker Plugin with Content Only theme (.pum.pum-theme-content-only).
Only loaded when that popup theme is active — see minimum_enqueue_scripts() in functions.php.

If you don't see a specific style here, it is applied directly to the row or widget and can
be edited in the SiteOrigin page editor.
---------------------------------------------------------------------------------------------------- */

.pum.pum-theme-content-only {
   .pum-container {
      background-color: #fff;
      border-radius: 15px;
      padding: 20px 70px 20px 20px;
      min-height: 566px;
      max-width: min(90vw, 945px);
      align-items: center;

      @media (max-width: 780px) {
         max-width: min(80vw, 360px);
         padding: 56px 20px 20px;
      }

      .panel-grid {
         align-items: center!important;
         .so-panel {
            margin-bottom: 15px!important;
         }
      }
      .pum-close{
         top: 20px;
         right: 20px;
         font-size: 24px;
         color: var(--medium-grey);
         &:hover {
            color: var(--light-blue);
         }
      }

      .subtitle-badge p {
         @media (max-width:780px) {
            margin: 0 auto;
         }

      }

      h2 {
         color: var(--navy);
         font-size: clamp(20px, 14.67px + 1.481vw, 36px);
         font-weight: 700;
         line-height: 1.3;
      }
      .widget_sow-headline p {
         color: var(--dark-navy);
         font-size: 22px;
         font-size: clamp(18px, 16.67px + 0.370vw, 22px);
         font-weight: 400;
         line-height: 1.5;
      }
      .sowb-button {
         min-width: 200px;
         width: min(420px, 100%);
         padding-block: 15px;
         font-size: 16px;
         border-radius: 0;
         border: none;
         background-color: var(--light-blue);
         &:hover {
            background-color: var(--navy);
         }
      }
      .sow-buttons-grid .so-widget-sow-button:nth-of-type(even) {
         a {
            background-color: var(--navy);
            &:hover {
               background-color: var(--dark-navy);
            }
         }
      }
      .sow-image-container{
         @media (max-width:780px) {
            height: 350px;
            overflow: clip;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         img {
            width: 100%;
         }
      }
   }
}

/* Adding this to the .pum-container with !important caused the popup
   to flicker on close. Scoped to just when popup is active fixes the flicker. */
.pum.pum-theme-content-only.pum-active .pum-container {
   display: flex !important;
}