/*
=========================================================
PAYMENTPROCESSOR.COM
REUSABLE COMPONENTS
=========================================================
*/


/* =====================================================
   SHARED BUTTON SAFEGUARDS
   ===================================================== */

/*
 * These apply to the normal homepage buttons such as:
 * Find a Processor
 * Find My Processor
 * Explore Solutions
 */

body a.pp-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 52px;

  padding: 0 28px;

  border: 1px solid transparent;
  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      var(--pp-gold-light),
      var(--pp-gold)
    );

  color: #101010;

  text-decoration: none;

  font-weight: 700;
  line-height: 1;

  transition:
    filter .2s ease,
    transform .2s ease;
}


body a.pp-button-primary:hover {
  filter: brightness(1.07);

  transform: translateY(-1px);
}


body a.pp-button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 52px;

  padding: 0 28px;

  border: 1px solid var(--pp-gold);
  border-radius: 10px;

  background:
    rgba(0, 0, 0, .12);

  color: var(--pp-white);

  text-decoration: none;

  font-weight: 500;
  line-height: 1;

  transition:
    background .2s ease,
    border-color .2s ease;
}


body a.pp-button-outline:hover {
  background:
    rgba(231, 167, 47, .08);

  border-color:
    var(--pp-gold-light);
}


/* =====================================================
   GUTENBERG GLOBAL HEADER
   ===================================================== */

/*
 * IMPORTANT:
 * This styles the Gutenberg Header template part
 * that you just restored through WordPress revisions.
 */

.pp-site-header {
  position: relative;

  z-index: 1000;

  width:
    min(
      calc(100% - 48px),
      var(--pp-container)
    ) !important;

  min-height: 76px;

  margin:
    0 auto !important;

  padding:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(275px, 1fr)
    auto
    minmax(190px, 1fr);

  align-items:
    center !important;

  column-gap:
    34px;

  background:
    transparent !important;
}


/* =====================================================
   FULL-WIDTH HEADER DIVIDER
   ===================================================== */

.pp-site-header::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 100vw;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    rgba(255, 255, 255, .08);

  pointer-events: none;
}


/* =====================================================
   HEADER LOGO
   ===================================================== */

.pp-site-header .wp-block-site-logo {
  justify-self: start;

  margin: 0 !important;
  padding: 0 !important;
}


.pp-site-header .wp-block-site-logo a {
  display: block;
}


.pp-site-header .wp-block-site-logo img {
  display: block !important;

  width: 280px !important;
  height: auto !important;

  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  /*
   * Small correction for transparent padding
   * inside the exported logo PNG.
   */
  transform:
    translateX(-6px);
}


/* =====================================================
   HEADER NAVIGATION
   ===================================================== */

.pp-site-header .wp-block-navigation {
  justify-self: center;

  margin: 0 !important;
  padding: 0 !important;
}


.pp-site-header
.wp-block-navigation__container {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 34px !important;

  margin: 0 !important;
  padding: 0 !important;
}


.pp-site-header
.wp-block-navigation-item {
  margin: 0 !important;
  padding: 0 !important;
}


.pp-site-header
.wp-block-navigation-item__content {
  padding: 8px 0 !important;

  color:
    rgba(255, 255, 255, .92) !important;

  font-size: 14px;
  font-weight: 400;

  line-height: 1.2;

  white-space: nowrap;

  transition:
    color .2s ease;
}


.pp-site-header
.wp-block-navigation-item__content:hover {
  color:
    var(--pp-gold-light) !important;
}


/* =====================================================
   HEADER CTA — GUTENBERG BUTTON
   ===================================================== */

.pp-site-header .wp-block-buttons {
  justify-self: end;

  margin: 0 !important;
  padding: 0 !important;
}


.pp-site-header .wp-block-button {
  margin: 0 !important;
  padding: 0 !important;
}


/*
 * Reset the OUTER Gutenberg button wrapper.
 * This prevents the yellow box / gray pill problems.
 */
.pp-site-header
.wp-block-button.pp-button-primary {
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: none !important;

  box-shadow: none !important;
}


/*
 * Style only the actual clickable button.
 */
.pp-site-header
.wp-block-button.pp-button-primary
.wp-block-button__link {
  min-width: 164px;

  min-height: 46px;

  padding:
    0 22px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid rgba(231, 167, 47, .66) !important;

  border-radius:
    7px !important;

  background:
    rgba(3, 5, 7, .70) !important;

  color:
    var(--pp-gold-light) !important;

  box-shadow:
    none !important;

  text-decoration:
    none !important;

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.pp-site-header
.wp-block-button.pp-button-primary
.wp-block-button__link:hover {
  background:
    rgba(231, 167, 47, .08) !important;

  border-color:
    var(--pp-gold-light) !important;

  transform:
    translateY(-1px);
}


/* =====================================================
   REUSABLE SECTIONS
   ===================================================== */

.pp-section {
  padding:
    100px 0;
}


.pp-section-header {
  max-width:
    720px;

  margin-bottom:
    55px;
}


.pp-section-header.center {
  margin-left:
    auto;

  margin-right:
    auto;

  text-align:
    center;
}


/* =====================================================
   REUSABLE CARDS
   ===================================================== */

.pp-card {
  border:
    1px solid var(--pp-border);

  border-radius:
    var(--pp-radius);

  background:
    var(--pp-surface);

  box-shadow:
    var(--pp-shadow);

  transition:
    border-color .2s ease,
    transform .2s ease;
}


.pp-card:hover {
  border-color:
    rgba(255, 196, 81, .42);
}


/* =====================================================
   COMPARISON TABLE FOUNDATION
   ===================================================== */

.pp-table-wrapper {
  overflow-x: auto;

  border:
    1px solid var(--pp-border);

  border-radius:
    var(--pp-radius);
}


.pp-table {
  width: 100%;

  border-collapse:
    collapse;
}


.pp-table th {
  padding: 18px;

  background:
    rgba(231, 167, 47, .10);

  color:
    var(--pp-white);

  text-align: left;
}


.pp-table td {
  padding: 18px;

  color:
    var(--pp-muted);

  border-top:
    1px solid rgba(255, 255, 255, .08);
}


/* =====================================================
   FORMS
   ===================================================== */

.pp-input {
  width: 100%;
  height: 54px;

  padding:
    0 18px;

  border:
    1px solid rgba(255, 255, 255, .20);

  border-radius:
    10px;

  background:
    rgba(0, 0, 0, .35);

  color:
    var(--pp-white);
}


.pp-input:focus {
  outline: none;

  border-color:
    var(--pp-gold);
}


/* =====================================================
   GLOBAL FOOTER
   ===================================================== */

body .pp-site-footer {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  color:
    var(--pp-muted) !important;

  background:
    linear-gradient(
      180deg,
      #020407 0%,
      #030608 100%
    ) !important;

  border-top:
    1px solid rgba(231, 167, 47, .18) !important;
}


/* =====================================================
   FOOTER GRID
   ===================================================== */

body .pp-site-footer .pp-footer-inner {
  width:
    min(
      calc(100% - 48px),
      var(--pp-container)
    ) !important;

  max-width:
    var(--pp-container) !important;

  margin:
    0 auto !important;

  padding:
    58px 0 46px !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(300px, 1.8fr)
    minmax(125px, .65fr)
    minmax(145px, .7fr)
    minmax(240px, 1.1fr) !important;

  gap:
    50px !important;

  align-items:
    start !important;
}


/* =====================================================
   FOOTER BRAND
   ===================================================== */

body .pp-site-footer .pp-footer-brand {
  width:
    auto !important;

  max-width:
    390px !important;
}


body .pp-site-footer .pp-footer-logo {
  display:
    inline-block !important;

  width:
    auto !important;

  margin:
    0 0 22px !important;

  padding:
    0 !important;
}


body .pp-site-footer .pp-footer-logo img {
  display:
    block !important;

  width:
    300px !important;

  height:
    auto !important;

  max-width:
    300px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


body .pp-site-footer .pp-footer-brand p {
  max-width:
    360px !important;

  margin:
    0 !important;

  color:
    #8e969f !important;

  font-size:
    14px !important;

  line-height:
    1.65 !important;
}


/* =====================================================
   FOOTER COLUMNS
   ===================================================== */

body .pp-site-footer .pp-footer-column {
  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  gap:
    11px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


body .pp-site-footer .pp-footer-column h3 {
  margin:
    2px 0 9px !important;

  padding:
    0 !important;

  color:
    var(--pp-white) !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;
}


body
.pp-site-footer
.pp-footer-column
> a:not(.pp-footer-button) {
  display:
    block !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #9ca3ac !important;

  font-size:
    14px !important;

  line-height:
    1.4 !important;
}


body
.pp-site-footer
.pp-footer-column
> a:not(.pp-footer-button):hover {
  color:
    var(--pp-gold-light) !important;
}


/* =====================================================
   FOOTER ACTION
   ===================================================== */

body .pp-site-footer .pp-footer-action p {
  max-width:
    270px !important;

  margin:
    0 0 6px !important;

  color:
    #8e969f !important;

  font-size:
    13px !important;

  line-height:
    1.6 !important;
}


body .pp-site-footer .pp-footer-button {
  min-height:
    44px !important;

  margin-top:
    6px !important;

  padding:
    0 18px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid rgba(231, 167, 47, .55) !important;

  border-radius:
    8px !important;

  color:
    var(--pp-gold-light) !important;

  background:
    rgba(231, 167, 47, .035) !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  text-decoration:
    none !important;
}


/* =====================================================
   FOOTER DISCLOSURE
   ===================================================== */

body .pp-site-footer .pp-footer-disclosure {
  width:
    min(
      calc(100% - 48px),
      var(--pp-container)
    ) !important;

  margin:
    0 auto !important;

  padding:
    23px 0 !important;

  border-top:
    1px solid rgba(255, 255, 255, .07) !important;

  border-bottom:
    1px solid rgba(255, 255, 255, .07) !important;
}


body .pp-site-footer .pp-footer-disclosure p {
  max-width:
    1120px !important;

  margin:
    0 !important;

  color:
    #707882 !important;

  font-size:
    11px !important;

  line-height:
    1.65 !important;
}


/* =====================================================
   FOOTER BOTTOM
   ===================================================== */

body .pp-site-footer .pp-footer-bottom {
  width:
    min(
      calc(100% - 48px),
      var(--pp-container)
    ) !important;

  margin:
    0 auto !important;

  padding:
    22px 0 28px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    30px !important;

  color:
    #777f88 !important;

  font-size:
    12px !important;
}


body
.pp-site-footer
.pp-footer-bottom
span:last-child {
  color:
    rgba(231, 167, 47, .75) !important;

  letter-spacing:
    .05em !important;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1100px) {

  .pp-site-header {
    grid-template-columns:
      minmax(230px, 1fr)
      auto;

    column-gap:
      24px;
  }


  .pp-site-header
  .wp-block-site-logo img {
    width:
      255px !important;

    transform:
      translateX(-4px);
  }


  /*
   * Let Gutenberg handle its own responsive menu.
   */
  .pp-site-header
  .wp-block-buttons {
    display:
      none !important;
  }


  body .pp-site-footer .pp-footer-inner {
    grid-template-columns:
      1.4fr 1fr 1fr !important;

    gap:
      42px !important;
  }


  body .pp-site-footer .pp-footer-action {
    grid-column:
      1 / -1 !important;
  }

}


/* =====================================================
   SMALL TABLET
   ===================================================== */

@media (max-width: 820px) {

  .pp-site-header {
    width:
      calc(100% - 40px) !important;

    min-height:
      72px;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    column-gap:
      12px;
  }


  .pp-site-header
  .wp-block-site-logo img {
    width:
      min(260px, 68vw) !important;
  }


  body .pp-site-footer .pp-footer-inner {
    width:
      calc(100% - 40px) !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      38px 30px !important;
  }


  body .pp-site-footer .pp-footer-brand,
  body .pp-site-footer .pp-footer-action {
    grid-column:
      1 / -1 !important;
  }


  body .pp-site-footer .pp-footer-disclosure,
  body .pp-site-footer .pp-footer-bottom {
    width:
      calc(100% - 40px) !important;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

  .pp-site-header {
    width:
      calc(100% - 32px) !important;

    min-height:
      70px;
  }


  .pp-site-header
  .wp-block-site-logo img {
    width:
      min(245px, 67vw) !important;
  }


  body .pp-site-footer .pp-footer-inner {
    width:
      calc(100% - 32px) !important;

    padding:
      46px 0 36px !important;

    grid-template-columns:
      1fr !important;

    gap:
      34px !important;
  }


  body .pp-site-footer .pp-footer-brand,
  body .pp-site-footer .pp-footer-action {
    grid-column:
      auto !important;
  }


  body .pp-site-footer .pp-footer-logo img {
    width:
      min(285px, 78vw) !important;

    max-width:
      min(285px, 78vw) !important;
  }


  body .pp-site-footer .pp-footer-disclosure {
    width:
      calc(100% - 32px) !important;
  }


  body .pp-site-footer .pp-footer-bottom {
    width:
      calc(100% - 32px) !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    gap:
      7px !important;
  }

}