.PetrolettesDonationsGroupSingle {

   &.PetrolettesDonationsGroupSingle--global {
      margin-bottom: var(--PADD--MD);

      .\@frame {
         margin-bottom: calc(var(--PADD--XL) * 1.25);
         padding: var(--PADD--MD);
         box-shadow: 0 4px 12px var(--BOX-SHADOW-COLOR);
      }

      .\@campaign {
         gap: var(--PADD);

         & > ._title {
            font-size: 28px;
            line-height: 1.15;
         }

         & > ._description {
            font-size: 16px;
            line-height: 1.4;
            text-align: center;
            max-width: 42rem;
         }

         & > ._progress {
            height: 14px;
         }

         & > ._footer {
            margin-top: var(--PADD);
            padding-bottom: calc(var(--PADD) * 0.65);
            font-size: 13px;
         }
      }

      .\@progress-info {
         & > ._amount {
            font-size: 24px;
         }

         & > ._description {
            font-size: 15px;
         }
      }

      .\@donate > ._action {
         padding: 0.5rem 1.25rem;
         font-size: 15px;
      }

      .\@donate-options {
         min-width: 300px;
         padding: var(--PADD--MD);
         gap: var(--PADD);

         & > ._options > ._option {
            padding: 0.4rem 0.7rem;
            font-size: 14px;
         }

         & > .ps-input {
            font-size: 15px;
         }

         & > .ps-btn--success {
            padding: 0.45rem 1rem;
            font-size: 14px;
         }
      }
   }

   &.donating {

      .\@campaign {
         opacity: 0.33;
      }
   }

   .\@frame {
      position: relative;
      margin-bottom: calc(var(--PADD--XL) * 2);
      padding-bottom: 0;
      box-shadow: 0 10px 20px var(--BOX-SHADOW-COLOR);

      & > .\@donate {
         position: absolute;
         left: 50%;
         top: 100%;
         translate: -50% -50%;
      }
   }

   .\@campaign {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--PADD);
      transition: opacity 0.3s ease;

      & > ._title {
         margin: 0;
         font-size: 50px;
      }

      & > ._description {
         margin: 0;
         font-size: 20px;
         white-space: pre-line;
      }

      & > ._progress {
         width: 100%;
         accent-color: black;
      }

      & > ._progress-info {
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
      }

      & > ._footer {
         margin-top: calc(var(--PADD--XL) * 2);
         /* padding: var(--PADD--SM); */
         padding-bottom: var(--PADD);
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 15px;
         color: var(--COLOR--TEXT--LIGHTEN);
         /* border-top: 1px solid var(--DIVIDER--LIGHT) */
         pointer-events: none;
      }
   }

   .\@progress-info {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      &:last-child {
         justify-content: flex-end;
         text-align: right;
      }

      & > ._amount {
         font-size: 30px;
         color: black;
      }

      & > ._description {
         font-size: 20px;
      }
   }

   /* .\@donate {
      
   } */

   .\@donate-options {
      position: absolute;
      padding: var(--PADD--MD);
      left: 50%;
      top: 0;
      translate: -50% calc(-100% - var(--PADD--MD));
      min-width: 325px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--PADD);
      border-radius: var(--BORDER-RADIUS--MD);
      box-shadow: var(--BOX-SHADOW--HARD);
      color: var(--COLOR--TEXT);
      background-color: var(--PS-COLOR--APP);

      &::after {
         content: '';
         position: absolute;
         left: 50%;
         top: 100%;
         translate: -50% -1px;
         width: 0;
         height: 0;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
         border-top: 10px solid var(--PS-COLOR--APP);
         filter: drop-shadow(0 2px 1px var(--BOX-SHADOW-COLOR));
      }

      &.loading {
         &::before {
            content: url(/wp-content/plugins/petrolettes/assets/ajax-loader.gif);
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
         }

         & * {
            opacity: 0;
         }
      }

      & > ._options {

         & > ._option {
            white-space: nowrap;

            &.ps-btn--active {
               color: white;
               background-color: black;
            }
         }
      }

      & > ._donation-preview {
         text-align: center;
      }

   }

}

@media all and (max-width: 640px) {

.PetrolettesDonationsGroupSingle {

   .\@campaign {

      & > ._title {
         font-size: 30px;
      }

      & > ._description {
         font-size: 16px;
         text-align: center;
      }

      & > ._footer {
         font-size: 14px;
      }      
   }

   &.PetrolettesDonationsGroupSingle--global {
      .\@campaign {
         & > ._title {
            font-size: 22px;
         }

         & > ._description {
            font-size: 15px;
         }

         & > ._footer {
            font-size: 12px;
         }
      }

      .\@progress-info {
         & > ._amount {
            font-size: 21px;
         }

         & > ._description {
            font-size: 13px;
         }
      }
   }

}

}

@media all and (max-width: 480px) {

.PetrolettesDonationsGroupSingle {

   .\@campaign {

      & > ._footer {
         font-size: 10px;
      }      
   }

   .\@progress-info {

      & > ._amount {
         font-size: 25px;
      }

      & > ._description {
         font-size: 18px;
      }
   }

   .\@donate > ._action {
      padding: 0.3rem 0.6rem;
   }

   &.PetrolettesDonationsGroupSingle--global {
      .\@progress-info {
         & > ._amount {
            font-size: 19px;
         }

         & > ._description {
            font-size: 12px;
         }
      }

      .\@donate > ._action {
         padding: 0.4rem 0.85rem;
         font-size: 14px;
      }

      .\@donate-options {
         min-width: min(300px, calc(100vw - 2rem));
      }
   }

}

}