/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family);
  line-height: var(--line-height-headings);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

/* Social media icons - shared base styles */
.ic-email,
.ic-linkedin,
.ic-medium,
.ic-twitter,
.ic-github {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2rem;
  height: 2rem;
}

.ic-email {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.99992 5.33331C2.51992 5.33331 1.33325 6.51998 1.33325 7.99998V24C1.33325 24.7072 1.6142 25.3855 2.1143 25.8856C2.6144 26.3857 3.29267 26.6666 3.99992 26.6666H18.7866C18.7066 26.2266 18.6666 25.7866 18.6666 25.3333C18.6666 23.2116 19.5094 21.1768 21.0097 19.6765C22.51 18.1762 24.5449 17.3333 26.6666 17.3333C27.1199 17.3333 27.5599 17.3733 27.9999 17.4533V7.99998C27.9999 7.29274 27.719 6.61446 27.2189 6.11436C26.7188 5.61426 26.0405 5.33331 25.3333 5.33331H3.99992ZM3.99992 7.99998L14.6666 14.6666L25.3333 7.99998V10.6666L14.6666 17.3333L3.99992 10.6666V7.99998ZM25.3333 20V24H21.3333V26.6666H25.3333V30.6666H27.9999V26.6666H31.9999V24H27.9999V20H25.3333Z' fill='white'/%3E%3C/svg%3E%0A");
}

.ic-linkedin {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.6665 5.56114C2.6665 4.97027 2.90123 4.4036 3.31904 3.98579C3.73685 3.56798 4.30352 3.33325 4.89439 3.33325H27.1029C27.3958 3.33278 27.6858 3.39006 27.9564 3.50182C28.2271 3.61358 28.473 3.77763 28.6802 3.98457C28.8874 4.19152 29.0517 4.43729 29.1638 4.70782C29.2758 4.97835 29.3334 5.26832 29.3332 5.56114V27.7697C29.3336 28.0626 29.2761 28.3526 29.1642 28.6233C29.0523 28.8939 28.8882 29.1399 28.6811 29.347C28.4741 29.5542 28.2283 29.7185 27.9577 29.8305C27.6871 29.9426 27.397 30.0002 27.1042 30H4.89439C4.60172 30 4.31191 29.9423 4.04153 29.8303C3.77116 29.7183 3.5255 29.554 3.31861 29.347C3.11171 29.14 2.94763 28.8943 2.83574 28.6238C2.72385 28.3534 2.66635 28.0636 2.6665 27.7709V5.56114Z' fill='%23242424'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.6665 5.56114C2.6665 4.97027 2.90123 4.4036 3.31904 3.98579C3.73685 3.56798 4.30352 3.33325 4.89439 3.33325H27.1029C27.3958 3.33278 27.6858 3.39006 27.9564 3.50182C28.2271 3.61358 28.473 3.77763 28.6802 3.98457C28.8874 4.19152 29.0517 4.43729 29.1638 4.70782C29.2758 4.97835 29.3334 5.26832 29.3332 5.56114V27.7697C29.3336 28.0626 29.2761 28.3526 29.1642 28.6233C29.0523 28.8939 28.8882 29.1399 28.6811 29.347C28.4741 29.5542 28.2283 29.7185 27.9577 29.8305C27.6871 29.9426 27.397 30.0002 27.1041 30H4.89439C4.60172 30 4.31191 29.9423 4.04153 29.8303C3.77116 29.7183 3.5255 29.554 3.31861 29.347C3.11171 29.14 2.94763 28.8943 2.83574 28.6238C2.72385 28.3534 2.66635 28.0636 2.6665 27.7709V5.56114ZM13.2217 13.5006H16.8326V15.3139C17.3538 14.2715 18.6872 13.3333 20.6908 13.3333C24.532 13.3333 25.4423 15.4097 25.4423 19.2194V26.2764H21.555V20.0872C21.555 17.9175 21.0338 16.6933 19.7102 16.6933C17.8738 16.6933 17.1102 18.0133 17.1102 20.0872V26.2764H13.2217V13.5006ZM6.555 26.1103H10.4435V13.3333H6.555V26.1091V26.1103Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.9999 9.16614C11.0072 9.49908 10.948 9.83013 10.8256 10.1399C10.7033 10.4496 10.5203 10.7318 10.2874 10.9698C10.0546 11.2079 9.77649 11.397 9.46953 11.5262C9.16256 11.6553 8.8329 11.7218 8.49988 11.7218C8.16686 11.7218 7.8372 11.6553 7.53024 11.5262C7.22327 11.397 6.9452 11.2079 6.71232 10.9698C6.47945 10.7318 6.29647 10.4496 6.17413 10.1399C6.05179 9.83013 5.99254 9.49908 5.99987 9.16614C6.01426 8.51263 6.28398 7.89073 6.75125 7.43364C7.21853 6.97654 7.84621 6.72058 8.49988 6.72058C9.15355 6.72058 9.78123 6.97654 10.2485 7.43364C10.7158 7.89073 10.9855 8.51263 10.9999 9.16614V9.16614Z' fill='%23242424'/%3E%3C/svg%3E%0A");
}

.ic-medium {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 16C17 20.6875 13.4125 24.5 9 24.5C4.5875 24.5 1 20.6875 1 16C1 11.3125 4.5875 7.5 9 7.5C13.4125 7.5 17 11.3125 17 16ZM30 8C29.7348 8 29.4804 8.10536 29.2929 8.29289C29.1054 8.48043 29 8.73478 29 9V23C29 23.2652 29.1054 23.5196 29.2929 23.7071C29.4804 23.8946 29.7348 24 30 24C30.2652 24 30.5196 23.8946 30.7071 23.7071C30.8946 23.5196 31 23.2652 31 23V9C31 8.73478 30.8946 8.48043 30.7071 8.29289C30.5196 8.10536 30.2652 8 30 8ZM23 8C22.2875 8 20.95 8.35 19.9625 10.6625C19.3375 12.1 19 14 19 16C19 18 19.3375 19.9 19.9625 21.3375C20.95 23.65 22.2875 24 23 24C23.7125 24 25.05 23.65 26.0375 21.3375C26.6625 19.9 27 18 27 16C27 14 26.6625 12.1 26.0375 10.6625C25.05 8.35 23.7125 8 23 8Z' fill='white'/%3E%3C/svg%3E%0A");
}

.ic-twitter {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.66699 4H5.6973L23.8791 28H20.8488L2.66699 4ZM8.12154 4H11.1518L29.3337 28H26.3034L8.12154 4ZM5.09123 4H11.1518V6.4H5.09123V4ZM20.8488 25.6H26.9094V28H20.8488V25.6ZM23.8791 4H28.1215L7.51548 28H3.27305L23.8791 4Z' fill='white'/%3E%3C/svg%3E%0A");
}

.ic-github {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0018 2C8.01168 2 1.54004 8.47164 1.54004 16.4618C1.54004 22.8611 5.67972 28.2662 11.4283 30.1824C12.1514 30.3089 12.4225 29.8751 12.4225 29.4954C12.4225 29.152 12.4044 28.0131 12.4044 26.8019C8.77092 27.4708 7.83091 25.9161 7.54167 25.1027C7.37898 24.6869 6.67397 23.4034 6.05934 23.06C5.55318 22.7888 4.83009 22.1199 6.04126 22.1019C7.18013 22.0838 7.9936 23.1503 8.26476 23.5842C9.56632 25.7715 11.6452 25.1569 12.4768 24.7773C12.6033 23.8373 12.9829 23.2046 13.3987 22.843C10.1809 22.4815 6.81858 21.2342 6.81858 15.7025C6.81858 14.1298 7.37898 12.8282 8.30092 11.8159C8.1563 11.4544 7.65014 9.97205 8.44553 7.98356C8.44553 7.98356 9.65671 7.60394 12.4225 9.46589C13.5795 9.1405 14.8087 8.9778 16.038 8.9778C17.2672 8.9778 18.4965 9.1405 19.6534 9.46589C22.4192 7.58586 23.6304 7.98356 23.6304 7.98356C24.4258 9.97205 23.9196 11.4544 23.775 11.8159C24.6969 12.8282 25.2573 14.1117 25.2573 15.7025C25.2573 21.2522 21.8769 22.4815 18.6592 22.843C19.1834 23.295 19.6353 24.1627 19.6353 25.5185C19.6353 27.4527 19.6172 29.0074 19.6172 29.4954C19.6172 29.8751 19.8884 30.327 20.6115 30.1824C23.4824 29.2131 25.977 27.368 27.7444 24.9067C29.5117 22.4454 30.4627 19.4919 30.4636 16.4618C30.4636 8.47164 23.9919 2 16.0018 2Z' fill='white'/%3E%3C/svg%3E%0A");
}

:root {
  /* Colors */
  --color-primary: #242424;
  --color-secondary: #4048af;
  --color-text: #242424;
  --color-text-light: #3a3a3a;
  --color-text-muted: #7f7f7f;
  --color-text-dark: #333;
  --color-white: #fff;
  --color-background: #f8f8f8;
  --color-background-light: #f0f0f0;
  --color-border: #e0e0e0;
  --color-border-light: #e9e9e9;
  --color-muted: #a7a7a7;

  /* Typography */
  --font-family: "Inter", sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-headings: 1.2;
  --line-height-body: 1.3;
  --line-height-relaxed: 1.6;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.25rem;
  --spacing-2xl: 1.5rem;
  --spacing-3xl: 2rem;
  --spacing-4xl: 2.5rem;
  --spacing-5xl: 3.75rem;
  --spacing-6xl: 4rem;
  --spacing-7xl: 5rem;
  --spacing-8xl: 6.25rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease;
}

html {
  font-size: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  color: #242424;
  line-height: 1.3;
  font-family: "Inter", sans-serif;
  background-image: url("../images/bg.svg");
  background-repeat: repeat;
}

body.no-background {
  background-image: none;
}

a,
a:visited,
a:hover {
  text-decoration: none;
}

.flex {
  display: flex;
}

.flex-jc-sb {
  justify-content: space-between;
}

.flex-jc-c {
  justify-content: center;
}

.flex-ai-c {
  align-items: center;
}

.flex-ai-b {
  align-items: baseline;
}

.flex-ai-fe {
  align-items: flex-end;
}

.flex-fd-c {
  flex-direction: column;
}

.gap-04 {
  gap: 0.25rem;
}

.gap-08 {
  gap: 0.5rem;
}

.gap-12 {
  gap: 0.75rem;
}

.gap-16 {
  gap: 1rem;
}

.gap-20 {
  gap: 1.25rem;
}

.gap-24 {
  gap: 1.5rem;
}

.btn-primary {
  display: inline-block;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1rem;
  font-size: 1rem;
  background-color: #242424;
  color: #fff;
  border: 0;
  border-radius: 6px;
  width: 320px;
  padding: 1rem 0;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #4048af;
  transition: 0.2s ease-in-out;
}

.btn-secondary {
  display: inline-block;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1rem;
  font-size: 1rem;
  background-color: #fff;
  color: #242424;
  border: 1px solid #242424;
  border-radius: 6px;
  width: 320px;
  padding: 1rem 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #4048af;
  transition: 0.2s ease-in-out;
  color: #fff;
  border-color: #fff;
}

@media (max-width: 63.9375em) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 64em) {
  .hide-desktop {
    display: none !important;
  }
}

.section-line {
  border-top: 1px solid #e9e9e9 !important;
}

footer {
  background-color: #242424;
  background-image: url("../images/bg-footer.svg");
  background-repeat: repeat;
  height: 100%;
}

.main-logo {
  display: block;
  padding-top: 6.25rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-title {
  font-size: 2.5rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: #242424;
  margin-top: 3.75rem;
  text-align: center;
  margin-left: 22%;
  margin-right: 22%;
}

.hero-body {
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #3a3a3a;
  margin-top: 1rem;
  text-align: center;
  margin-left: 30%;
  margin-right: 30%;
}

.footer-title {
  font-size: 2.5rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: #fff;
  margin-top: 3.75rem;
  text-align: center;
  margin-left: 22%;
  margin-right: 22%;
  padding: 5rem 0 0;
}

.footer-body {
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #fff;
  margin-top: 1rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.btn-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 3.75rem;
}

.ic-connect {
  margin-top: 2.5rem;
}

.ic-connect a {
  padding-right: 1.5rem;
}

.ic-connect a:last-child {
  padding-right: 0;
}

.copyright {
  font-size: 0.75rem;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #a7a7a7;
  text-align: center;
  margin: 0 auto;
  padding: 5rem 0 1rem;
}

@media (max-width: 63.9375em) {
  .hero-title {
    font-size: 1.75rem;
    margin-left: 6%;
    margin-right: 6%;
  }

  .hero-body {
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 2rem;
  }

  .btn-container {
    margin-top: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .footer-title {
    font-size: 1.75rem;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-body {
    margin-left: 10%;
    margin-right: 10%;
  }

  .copyright {
    text-align: center;
    margin: 0 1rem;
  }
}

@media (max-width: 20em) {
  .main-logo {
    padding-top: 4rem;
  }

  .hero-title {
    margin-top: 2rem;
  }

  .btn-container .btn-primary,
  .btn-container .btn-secondary {
    width: 248px;
  }

  .ic-connect a {
    padding-right: 1rem;
  }
}

/*# sourceMappingURL=style.css.map */

/* Additional styles for the help center */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.breadcrumb {
  padding: 1rem 0;
  margin-top: 2rem;
}

.breadcrumb a {
  color: #4048af;
  font-weight: 400;
}

.breadcrumb span {
  color: #3a3a3a;
  margin: 0 0.5rem;
}

.help-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  text-align: left;
}

.help-subtitle {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 4rem 0 1rem;
}

.help-content {
  line-height: 1.6;
  color: #3a3a3a;
}

.feature-card {
  background-color: #fcfcfc;
  border-radius: 16px;
  /* padding: 1.5rem; */
  margin-bottom: 1.5rem;
}

.feature-card p {
  margin: 0.5rem 0 0;
  padding: 0 1.5rem;
}

.feature-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0 1.5rem;
}

.feature-title-support {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-white);
}

.key-features-title {
  font-size: 1.25rem;
}

.feature-list {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 1rem;
}

.feature-list li {
  margin-bottom: 0.5rem;
}

.help-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5rem 0;
}

.cta-container {
  background-color: #333;
  color: white;
  border-radius: 16px;
  padding: 4rem 2rem;
  margin: 4rem 0 2rem;
  text-align: center;
}

.cta-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--color-white);
}

.cta-button {
  display: inline-block;
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-lg);
  transition: var(--transition-fast);
  text-decoration: none;
}

.cta-button:hover {
  background-color: var(--color-primary);
}

/* FAQ accordion styles */
.faq-item {
  margin-bottom: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
}

.faq-question {
  font-weight: 600;
  padding: 0.75rem 1.5rem 0.75rem 1rem;
  background-color: #f8f8f8;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  z-index: 1;
  /* Reset button styles */
  border: none;
  width: 100%;
  text-align: left;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}

.faq-question:hover {
  background-color: #f0f0f0;
}

.faq-question::after {
  content: "+";
  font-size: 1.5rem;
  margin-left: 1rem;
  color: #333;
  transition: transform 0.3s ease;
}

.faq-question.active::after {
  content: "−";
}

.faq-answer {
  background-color: white;
  line-height: 1.6;
  padding: 0 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.active {
  max-height: 300px;
  padding: 0.75rem 1.5rem 0.75rem 1rem;
}

.support-content {
  margin: 0;
}

.support-card {
  display: flex;
  background-color: #333;
  color: white;
  border-radius: 16px;
  padding: 2rem 2rem 0rem;
  margin: 4rem 0 0;
}

.support-button {
  background-color: #4048af;
  margin-right: 1rem;
  width: 170px;
  text-align: center;
}

.support-button:hover {
  background-color: #242424;
}

.support-secondary {
  width: 170px;
  text-align: center;
}

.support-secondary:hover {
  background-color: #242424;
  border: none;
}

.img-support {
  height: 300px;
  padding-left: 4rem;
}

/* Navigation styles */
.nav-container {
  background-color: white;
  border-bottom: 1px solid rgb(224, 224, 224);
  position: sticky;
  top: 0;
  padding: 12px 0;
}

.nav-content {
  display: flex;
  z-index: 1000;
}

.nav-logo {
  height: 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: #fff;
  font-weight: 500;
}

.nav-links a:hover {
  color: #4048af;
  transition: 0.2s ease-in-out;
}

.key-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 2rem;
}

.key-features .feature-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.logo-plugin img {
  height: 128px;
  margin: 0 3rem 0 0;
}

.hero-section {
  display: flex;
  align-items: center;
  padding: 4rem 0 0;
}

.frameOrganizer {
  width: 100%;
  margin: 0;
  text-align: left;
}

.img-card {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.plugin-name {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.plugin-version {
  color: #7f7f7f;
}

@media (max-width: 63.9375em) {
  .container {
    padding: 0 1rem;
  }

  .help-title {
    font-size: 2rem;
  }

  .help-subtitle {
    font-size: 1.5rem;
  }

  .feature-title {
    font-size: 1.25rem;
  }

  .nav-links {
    display: none;
  }

  .key-features {
    grid-template-columns: 1fr;
  }

  .cta-button {
    width: 100%;
    text-align: center;
  }

  .cta-button:hover {
    background-color: #4048af;
  }

  .faq-question {
    padding: 0.75rem 1rem 0.75rem 1rem;
  }

  .hero-section {
    flex-direction: column;
    align-items: normal;
    gap: 1rem;
  }

  .logo-plugin img {
    height: 80px;
  }

  .support-card {
    flex-direction: column;
  }

  .img-support {
    height: auto;
    padding: 2rem 0 0;
    padding-left: 0;
    width: 100%;
  }

  .support-secondary {
    width: 100%;
  }

  .support-card {
    padding: 2rem 1.5rem 0;
  }

  .faq-answer.active {
    max-height: 500px;
  }

  .img-card {
    object-fit: cover;
    height: auto;
  }
}

/* Success Payment Page Styles */
.success-payment-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.success-payment-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.success-payment-page .container {
  background: white;
  padding: 48px 32px 32px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  text-align: center;
  max-width: 500px;
  width: 100%;
}

.success-payment-page .success-icon {
  width: 80px;
  height: 80px;
  background: #4caf50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 40px;
  color: white;
}

.success-payment-page .success-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
}

.success-payment-page .success-subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 32px;
  line-height: 1.5;
}

.success-payment-page .payment-details {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 32px;
  text-align: left;
}

.success-payment-page .payment-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.success-payment-page .payment-detail:last-child {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 16px;
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
}

.success-payment-page .payment-detail-label {
  color: #6c757d;
}

.success-payment-page .payment-detail-value {
  color: #2c3e50;
  font-weight: 500;
}

.success-payment-page .credits-highlight {
  color: #2c3e50;
  font-weight: 700;
}

.success-payment-page .action-buttons {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.success-payment-page .btn {
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.success-payment-page .btn-primary {
  background: #1a1a1a;
  color: white;
}

.success-payment-page .btn-primary:hover {
  background: #313131;
}

.success-payment-page .btn-secondary {
  background: #ffffff;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
}

.success-payment-page .btn-secondary:hover {
  background: #f5f5f5;
  color: #1a1a1a;
}

.success-payment-page .footer-note {
  margin-top: 24px;
  font-size: 12px;
  color: #95a5a6;
  line-height: 1.4;
}

.success-payment-page .footer-note a {
  color: #95a5a6;
}

.success-payment-page .footer-note a:hover {
  text-decoration: underline;
}

.success-payment-page .license-key-container {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: center;
}

.success-payment-page .license-key-header {
  margin-bottom: 16px;
}

.success-payment-page .warning-badge {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
}

.success-payment-page .license-key-display {
  margin-bottom: 16px;
}

.success-payment-page .license-instructions {
  text-align: left;
  background: white;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

@media (max-width: 640px) {
  .success-payment-page .container {
    padding: 32px 20px;
  }

  .success-payment-page .success-title {
    font-size: 24px;
  }

  .success-payment-page .action-buttons {
    flex-direction: column;
  }

  .success-payment-page .license-key-container {
    padding: 16px;
  }
}

.license-key-section-hidden {
  display: none;
}

.license-key-section-visible {
  display: block;
}

.license-key-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #2c3e50;
  text-align: left;
}

.license-key-input {
  width: 100%;
  padding: 16px;
  font-family: monospace;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background: #f8f9fa;
  border: 2px solid #e6e6e6;
  border-radius: 8px;
  color: #2c3e50;
  letter-spacing: 2px;
  cursor: pointer;
}

.copy-button {
  margin-top: 8px;
  width: 100%;
  padding: 12px;
  background: #1a1a1a;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.copy-button:hover {
  background: #313131;
}

.copy-button-success {
  background: #313131;
}

.license-instructions-text {
  font-size: 14px;
  color: #6c757d;
  line-height: 1.5;
}

.license-error-container {
  background: #ffe6e6;
  border: 1px solid #ff4444;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.license-error-message {
  color: #cc0000;
  margin: 0;
}

.license-error-order-id {
  color: #666;
  font-size: 12px;
  margin: 8px 0 0;
}