/* Dawah Premium Account Actions V47 */

/* Guest account call-to-action buttons */

body.public-application
.profile27-guest.ac47-guest {
  padding-bottom: 55px;
}

body.public-application
.ac47-guest-description {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
  color: rgba(230, 244, 236, 0.78);
  font-size: 0.82rem;
  line-height: 1.7;
}

body.public-application
.profile27-guest
.ac47-guest-actions {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 255px));
  gap: 13px;
  width: min(535px, 100%);
  margin: 30px auto 0 !important;
}

body.public-application
.profile27-guest
.ac47-account-button {
  display: grid !important;
  grid-template-columns:
    43px
    minmax(0, 1fr)
    34px;
  gap: 12px;
  min-width: 0;
  min-height: 72px !important;
  align-items: center;
  justify-content: initial;
  padding: 12px 13px !important;
  border-radius: 17px !important;
  font: inherit !important;
  text-align: left;
  text-decoration: none !important;
  transform: translateY(0);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body.public-application
.profile27-guest
.ac47-account-button:hover {
  transform: translateY(-3px);
}

body.public-application
.profile27-guest
.ac47-signin-button {
  border:
    1px solid rgba(222, 246, 154, 0.88) !important;
  background:
    linear-gradient(
      135deg,
      #e5f9aa,
      #d4ee8d
    ) !important;
  color: #07382d !important;
  box-shadow:
    0 18px 35px rgba(0, 31, 23, 0.2) !important;
}

body.public-application
.profile27-guest
.ac47-create-button {
  border:
    1px solid rgba(255, 255, 255, 0.25) !important;
  background:
    rgba(255, 255, 255, 0.11) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px);
}

.ac47-button-icon,
.ac47-button-arrow {
  display: grid;
  place-items: center;
}

.ac47-button-icon {
  width: 43px;
  height: 43px;
  border-radius: 13px;
}

.ac47-signin-button
.ac47-button-icon {
  background:
    rgba(6, 61, 49, 0.1);
}

.ac47-create-button
.ac47-button-icon {
  background:
    rgba(255, 255, 255, 0.1);
  color: #def69a;
}

.ac47-button-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.ac47-button-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.public-application
.ac47-button-copy small {
  color: inherit;
  font-size: 0.51rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.1em;
  opacity: 0.67;
}

body.public-application
.ac47-button-copy strong {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.2;
}

.ac47-button-arrow {
  width: 33px;
  height: 33px;
  border-radius: 50%;
}

.ac47-signin-button
.ac47-button-arrow {
  background: #0a4d3d;
  color: #ffffff;
}

.ac47-create-button
.ac47-button-arrow {
  background:
    rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.ac47-button-arrow .ui-icon {
  width: 15px;
  height: 15px;
}

.ac47-guest-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 19px;
}

.ac47-guest-assurance > span {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #def69a;
  box-shadow:
    0 0 0 5px rgba(222, 246, 154, 0.1);
}

body.public-application
.ac47-guest-assurance p {
  margin: 0;
  color: rgba(225, 239, 231, 0.67);
  font-size: 0.62rem;
}

/* Login and registration button refinements */

body.public-application
.login26-submit {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background:
    linear-gradient(
      135deg,
      #075b47,
      #063d31
    ) !important;
  color: #ffffff !important;
  box-shadow:
    0 15px 30px rgba(5, 70, 54, 0.2) !important;
}

body.public-application
.login26-submit:hover {
  background:
    linear-gradient(
      135deg,
      #086b52,
      #064638
    ) !important;
}

body.public-application
.login26-create {
  display: flex !important;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border:
    1px solid #c9dacf !important;
  border-radius: 14px !important;
  background:
    linear-gradient(
      135deg,
      #f4f8f2,
      #edf5e8
    ) !important;
  color: #074436 !important;
  font-weight: 780 !important;
  text-decoration: none !important;
}

body.public-application
.rg46-form button[type="submit"],
body.public-application
.rg46-submit {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background:
    linear-gradient(
      135deg,
      #075b47,
      #063d31
    ) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow:
    0 15px 30px rgba(5, 70, 54, 0.2) !important;
}

/* Forgot, resend, reset and change-password pages */

.ac47-action-shell {
  display: grid;
  grid-template-columns:
    minmax(320px, 0.88fr)
    minmax(420px, 1.12fr);
  width: min(1120px, calc(100% - 32px));
  min-height: 610px;
  overflow: hidden;
  margin: 30px auto 70px;
  border:
    1px solid rgba(7, 69, 54, 0.11);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
    0 32px 75px rgba(3, 55, 43, 0.13);
}

.ac47-action-story {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 31px;
  background:
    radial-gradient(
      circle at 105% -5%,
      rgba(222, 246, 154, 0.28),
      transparent 36%
    ),
    radial-gradient(
      circle at -20% 110%,
      rgba(41, 151, 111, 0.44),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #033b30,
      #075d48
    );
  color: #ffffff;
}

.ac47-action-story::before {
  position: absolute;
  z-index: -1;
  top: 105px;
  right: -115px;
  width: 330px;
  height: 330px;
  border:
    1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  content: "";
}

.ac47-action-story::after {
  position: absolute;
  z-index: -1;
  right: 30px;
  bottom: 150px;
  width: 120px;
  height: 220px;
  border:
    1px solid rgba(222, 246, 154, 0.13);
  border-bottom: 0;
  border-radius: 100px 100px 0 0;
  content: "";
}

.ac47-action-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.67rem;
  font-weight: 720;
  text-decoration: none;
}

.ac47-action-back:hover {
  color: #def69a !important;
}

.ac47-story-content {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: auto 0;
  padding: 55px 0;
}

.ac47-story-mark {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  margin-bottom: 24px;
  border:
    1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: #edf5e7;
  color: #07513f;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  box-shadow:
    0 15px 30px rgba(0, 32, 23, 0.19);
}

body.public-application
.ac47-story-content .eyebrow {
  margin: 0 0 13px;
  color: #def69a;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

body.public-application
.ac47-story-content h1 {
  max-width: 430px;
  margin: 0;
  color: #ffffff;
  font-size:
    clamp(2.3rem, 4.6vw, 4.25rem);
  font-weight: 590;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

body.public-application
.ac47-story-content > p:last-child {
  max-width: 410px;
  margin: 19px 0 0;
  color: rgba(229, 241, 235, 0.75);
  font-size: 0.78rem;
  line-height: 1.7;
}

.ac47-story-message {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    43px
    minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-top: 20px;
  border-top:
    1px solid rgba(255, 255, 255, 0.12);
}

.ac47-story-message-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  background:
    rgba(255, 255, 255, 0.09);
  color: #def69a;
}

.ac47-story-message-icon .ui-icon {
  width: 19px;
  height: 19px;
}

.ac47-story-message > div {
  display: grid;
  gap: 4px;
}

.ac47-story-message strong {
  color: #ffffff;
  font-size: 0.7rem;
}

.ac47-story-message span {
  color: rgba(226, 239, 232, 0.68);
  font-size: 0.6rem;
  line-height: 1.5;
}

.ac47-action-panel {
  display: grid;
  align-items: center;
  padding:
    clamp(28px, 5vw, 68px);
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(222, 246, 154, 0.2),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f7faf6
    );
}

.ac47-action-card {
  width: min(470px, 100%);
  margin: auto;
}

.ac47-action-heading {
  margin-bottom: 27px;
}

.ac47-action-icon {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  margin-bottom: 20px;
  border:
    1px solid #d8e5da;
  border-radius: 14px;
  background: #edf5e7;
  color: #07513f;
}

.ac47-action-icon .ui-icon {
  width: 21px;
  height: 21px;
}

body.public-application
.ac47-action-heading .eyebrow {
  margin: 0 0 8px;
  color: #668177;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}

body.public-application
.ac47-action-heading h2 {
  margin: 0;
  color: #073d32;
  font-size:
    clamp(2rem, 3.7vw, 3rem);
  font-weight: 620;
  line-height: 1.03;
  letter-spacing: -0.055em;
}

body.public-application
.ac47-action-heading > p:last-child {
  max-width: 430px;
  margin: 12px 0 0;
  color: #65786f;
  font-size: 0.75rem;
  line-height: 1.65;
}

.ac47-action-form {
  display: grid;
  gap: 17px;
}

.ac47-field {
  display: grid;
  gap: 8px;
}

body.public-application
.ac47-field > span {
  color: #173f35;
  font-size: 0.68rem;
  font-weight: 760;
}

body.public-application
.ac47-field input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border:
    1px solid #cadbd0;
  border-radius: 14px;
  outline: 0;
  background: #ffffff;
  color: #123d32;
  font: inherit;
  font-size: 0.76rem;
  box-shadow:
    inset 0 1px 2px rgba(4, 53, 42, 0.025);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

body.public-application
.ac47-field input:focus {
  border-color: #12815f;
  box-shadow:
    0 0 0 4px rgba(18, 129, 95, 0.1);
}

body.public-application
.ac47-field small {
  color: #76877f;
  font-size: 0.59rem;
  line-height: 1.45;
}

body.public-application
.ac47-submit {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    36px;
  gap: 12px;
  min-height: 57px !important;
  align-items: center;
  margin-top: 4px;
  padding: 9px 10px 9px 18px !important;
  border: 0 !important;
  border-radius: 15px !important;
  cursor: pointer;
  background:
    linear-gradient(
      135deg,
      #087055,
      #064537
    ) !important;
  color: #ffffff !important;
  font: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-align: left;
  box-shadow:
    0 17px 32px rgba(6, 75, 57, 0.2) !important;
  transition:
    transform 170ms ease,
    box-shadow 170ms ease;
}

body.public-application
.ac47-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 38px rgba(6, 75, 57, 0.25) !important;
}

.ac47-submit-arrow {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background:
    rgba(255, 255, 255, 0.12);
}

.ac47-submit-arrow .ui-icon {
  width: 16px;
  height: 16px;
}

.ac47-security-note {
  display: grid;
  grid-template-columns:
    8px
    minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 19px;
  padding: 14px;
  border:
    1px solid #dde8de;
  border-radius: 13px;
  background: #f5f8f3;
}

.ac47-security-note > span {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #56a77e;
  box-shadow:
    0 0 0 4px rgba(86, 167, 126, 0.1);
}

body.public-application
.ac47-security-note p {
  margin: 0;
  color: #667970;
  font-size: 0.59rem;
  line-height: 1.55;
}

.ac47-related-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

body.public-application
.ac47-related-links a {
  color: #0a654e;
  font-size: 0.62rem;
  font-weight: 720;
  text-decoration: none;
}

body.public-application
.ac47-related-links a:hover {
  text-decoration: underline;
}

@media (max-width: 820px) {
  .ac47-action-shell {
    grid-template-columns: 1fr;
  }

  .ac47-action-story {
    min-height: 410px;
  }

  .ac47-story-content {
    padding: 55px 0 40px;
  }

  .ac47-action-panel {
    min-height: 480px;
  }
}

@media (max-width: 620px) {
  body.public-application
  .profile27-guest.ac47-guest {
    padding:
      34px 18px
      40px;
  }

  body.public-application
  .profile27-guest
  .ac47-guest-actions {
    grid-template-columns: 1fr;
  }

  body.public-application
  .profile27-guest
  .ac47-account-button {
    width: 100%;
    min-height: 69px !important;
  }

  .ac47-action-shell {
    width: calc(100% - 20px);
    min-height: 0;
    margin: 11px auto 105px;
    border-radius: 22px;
  }

  .ac47-action-story {
    min-height: 385px;
    padding: 23px;
  }

  body.public-application
  .ac47-story-content h1 {
    font-size: 2.65rem;
  }

  .ac47-action-panel {
    min-height: 0;
    padding: 37px 20px 42px;
  }

  body.public-application
  .ac47-action-heading h2 {
    font-size: 2.2rem;
  }

  .ac47-related-links {
    display: grid;
  }
}