/* Global Variables */
:root {
  /* Colors */
  --primary-color: #5c2d91;
  --dark-primary: #330a58;
  --highlight-color: #f1e68f;
  --text-color: #333;
  --white: #fff;
  
  /* Spacing */
  --standard-margin: 1rem;
  --content-padding: 8%;
  
  /* UI Elements */
  --border-radius: 0.6rem;
  --button-padding: 0.5rem 1rem;
  
  /* Typography */
  --standard-font-size: 1.2rem;
  --standard-line-height: 1.4;
  --description-font-size: 1rem;
  --description-line-height: 1;
  --light-font-weight: 300;
  --regular-font-weight: 400;
  --bold-font-weight: 500;
  --bold-title-font-weight: 600;
  --body-font: 'Open Sans', sans-serif;
  --title-font: 'GuardianSans', sans-serif;
}

/* Base paywall styling */
#paperview_paywall {
  line-height: var(--standard-line-height);
  font-family: var(--body-font);
  color: var(--text-color);
}

/* Header styling */
#paperview_paywall .header.publication-header .name {
  height: 0.625rem;
  display: none;
}

#paperview_paywall .header.publication-header .page-title {
  font-family: var(--title-font);
  font-size: 1.5rem;
  margin: var(--standard-margin) var(--content-padding);
  font-weight: var(--bold-title-font-weight);
}

#paperview_paywall .header.publication-header .page-teaser {
  font-size: var(--standard-font-size);
  margin: -0.5rem var(--content-padding) 1.5rem;
  font-weight: var(--regular-font-weight);
}

/* Content areas */
#paperview_paywall .page-content {
  margin: 0.5rem 0;
}

#paperview_paywall #app_page_container .page-content .text {
  font-family: var(--body-font);
  font-size: var(--standard-font-size);
  margin-top: 1rem;
  font-weight: 200;
}

/* Purchase section */
#paperview_paywall #app_page_container.page__acquire_article .page-content .perform-purchase,
#paperview_paywall #app_page_container.page__acquire_article .page-content .article-price {
  font-size: var(--standard-font-size);
  margin: 1rem 0;
}

#paperview_paywall #app_page_container.page__acquire_article .page-content .your-balance {
  font-size: 0.9rem;
}

/* User actions and alternatives */
#paperview_paywall .alternative-actions > * {
  display: inline-block;
  font-weight: var(--regular-font-weight);
  font-size: var(--standard-font-size);
}

#paperview_paywall .user-actions {
  margin-top: 1.5rem;
  font-size: 1rem;
}

/* Button styling */
#paperview_paywall .btn, 
.purchase {
  font-family: var(--body-font);
  position: relative;
  width: 12rem;
  font-weight: var(--light-font-weight);
  border: 0;
  color: var(--white);
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  padding: var(--button-padding);
}

.purchase {
  width: 11.25rem;
}

/* Subscription sections */
#paperview_paywall #app_page_container.page__subscribe_publication .page-content .subscriptions-list .subscription.highlight {
  background-color: var(--dark-primary);
  color: var(--white);
  font-size: var(--standard-font-size);
  padding: 0.9rem;
  width: 13.2rem;
}

#paperview_paywall .subscriptions-list .subscription .perform-subscription > span {
  font-family: var(--body-font);
  border-radius: var(--border-radius);
  padding: var(--button-padding);
  font-weight: var(--light-font-weight);
}

/* Subscription sections */
#paperview_paywall .subscriptions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#paperview_paywall .subscriptions-list .subscription {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 13.2rem;
  font-size: var(--standard-font-size);
  padding: 0.9rem;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  background-color: var(--white);
  height: 100%;
  gap: 0.2rem !important;
}


#paperview_paywall .subscriptions-list .subscription.highlight {
  background-color: var(--dark-primary);
  color: var(--white);
}

#paperview_paywall .subscriptions-list .subscription .name {
  font-family: var(--title-font);
  font-weight: var(--bold-title-font-weight);
  margin-bottom: 0.5rem;
}

#paperview_paywall .subscriptions-list .subscription .description {
  margin: 0.5rem 0;
  flex-grow: 1; /* This makes the description expand to fill available space */
  font-size: var(--description-font-size);
}

#paperview_paywall .subscriptions-list .subscription .perform-subscription {
  margin-top: auto; /* This pushes the button to the bottom */
  text-align: center;
}

#paperview_paywall .subscriptions-list .subscription.highlight span.subscribe {
  background-color: transparent !important;
  color: var(--white) !important;
  border-color: var(--white) !important;
}

#paperview_paywall .header.publication-header .logo img {
  width: 120px !important;
  height: 120px !important;
}

#paperview_paywall #app_page_container.page__perform_acquisition__subscribe_publication .page-content .subscriptions-list-container {
  max-height: none;
  overflow: visible;
}