/* style/promotions.css */

/* Variables from custom palette */
:root {
  --color-primary: #11A84E;
  --color-secondary: #22C768;
  --color-button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --color-card-bg: #11271B;
  --color-background: #08160F;
  --color-text-main: #F2FFF6;
  --color-text-secondary: #A7D9B8;
  --color-border: #2E7A4E;
  --color-glow: #57E38D;
  --color-gold: #F2C14E;
  --color-divider: #1E3A2A;
  --color-deep-green: #0A4B2C;
}

/* Base styles for the page content, ensuring contrast with shared body background */
.page-promotions {
  background-color: var(--color-background);
  color: var(--color-text-main); /* Light text for dark background */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.page-promotions h1, .page-promotions h2, .page-promotions h3, .page-promotions h4, .page-promotions h5, .page-promotions h6 {
  color: var(--color-text-main);
  line-height: 1.2;
  margin-bottom: 15px;
}

.page-promotions p {
  color: var(--color-text-secondary);
  margin-bottom: 1em;
}

.page-promotions__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Hero Section */
.page-promotions__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0 60px 0; /* body already handles header offset, small top padding */
  text-align: center;
  overflow: hidden;
  background-color: var(--color-deep-green);
}

.page-promotions__hero-image-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.page-promotions__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  min-height: 200px;
}

.page-promotions__hero-content {
  position: relative; /* Ensure content is above any background elements */
  z-index: 2;
  padding: 0 20px;
  max-width: 900px;
}

.page-promotions__hero-title {
  font-size: clamp(2.5rem, 5vw, 3.8rem); /* Responsive font size */
  font-weight: bold;
  color: var(--color-gold);
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
}

.page-promotions__hero-description {
  font-size: 1.2em;
  color: var(--color-text-main);
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-promotions__cta-button {
  display: inline-block;
  background: var(--color-button-gradient);
  color: var(--color-text-main);
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-promotions__cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
}

/* Section Titles and Descriptions */
.page-promotions__section-title {
  font-size: clamp(2em, 4vw, 3em);
  color: var(--color-gold);
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 0 5px rgba(242, 193, 78, 0.3);
}

.page-promotions__section-description {
  font-size: 1.1em;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px auto;
  color: var(--color-text-secondary);
}

/* Intro Section */
.page-promotions__intro-section {
  padding: 60px 0;
  background-color: var(--color-background);
}

/* Types Section */
.page-promotions__types-section {
  padding: 60px 0;
  background-color: var(--color-deep-green);
}

.page-promotions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.page-promotions__card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-promotions__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.page-promotions__card-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin-bottom: 20px;
  min-height: 200px;
  object-fit: cover;
}

.page-promotions__card-title {
  font-size: 1.5em;
  color: var(--color-text-main);
  margin-bottom: 15px;
}

.page-promotions__card-text {
  color: var(--color-text-secondary);
  font-size: 0.95em;
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-promotions__card-button {
  display: inline-block;
  background: var(--color-button-gradient);
  color: var(--color-text-main);
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95em;
  transition: background-color 0.3s ease;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-promotions__card-button:hover {
  opacity: 0.9;
}

/* Guide Section */
.page-promotions__guide-section {
  padding: 60px 0;
  background-color: var(--color-background);
}

.page-promotions__steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-promotions__step-item {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.page-promotions__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--color-primary);
  color: var(--color-text-main);
  border-radius: 50%;
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(17, 168, 78, 0.5);
}

.page-promotions__step-title {
  font-size: 1.4em;
  color: var(--color-text-main);
  margin-bottom: 10px;
}

.page-promotions__step-description {
  color: var(--color-text-secondary);
  font-size: 0.95em;
}

.page-promotions__button-group {
  text-align: center;
  margin-top: 50px;
}

.page-promotions__cta-button--large {
  padding: 18px 40px;
  font-size: 1.2em;
}

/* Terms Section */
.page-promotions__terms-section {
  padding: 60px 0;
  background-color: var(--color-deep-green);
}

.page-promotions__read-more-link {
  display: inline-block;
  color: var(--color-gold);
  text-decoration: none;
  font-weight: bold;
  margin-top: 20px;
  transition: color 0.3s ease;
}

.page-promotions__read-more-link:hover {
  color: var(--color-glow);
}

/* Why Choose Section */
.page-promotions__why-choose-section {
  padding: 60px 0;
  background-color: var(--color-background);
}

.page-promotions__features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-promotions__feature-item {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.page-promotions__feature-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
  object-fit: contain;
  min-width: 200px; /* Enforce min size for content images */
  min-height: 200px; /* Enforce min size for content images */
}

.page-promotions__feature-title {
  font-size: 1.4em;
  color: var(--color-text-main);
  margin-bottom: 10px;
}

.page-promotions__feature-description {
  color: var(--color-text-secondary);
  font-size: 0.95em;
}

/* FAQ Section */
.page-promotions__faq-section {
  padding: 60px 0;
  background-color: var(--color-deep-green);
}

.page-promotions__faq-list {
  margin-top: 40px;
}

.page-promotions__faq-item {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-promotions__faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
  color: var(--color-text-main);
  background-color: var(--color-card-bg);
  transition: background-color 0.3s ease;
}

.page-promotions__faq-item summary::-webkit-details-marker {
  display: none;
}

.page-promotions__faq-item summary:hover {
  background-color: rgba(var(--color-primary), 0.1);
}

.page-promotions__faq-qtext {
  flex-grow: 1;
}

.page-promotions__faq-toggle {
  font-size: 1.5em;
  margin-left: 15px;
  color: var(--color-gold);
}

.page-promotions__faq-answer {
  padding: 15px 25px 20px 25px;
  background-color: rgba(var(--color-primary), 0.05);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-secondary);
  font-size: 0.95em;
}

/* Final CTA Section */
.page-promotions__cta-section {
  padding: 80px 0;
  text-align: center;
  background-color: var(--color-background);
}

.page-promotions__cta-title {
  font-size: clamp(2em, 4.5vw, 3.5em);
  color: var(--color-gold);
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
}

.page-promotions__cta-description {
  font-size: 1.15em;
  max-width: 800px;
  margin: 0 auto 40px auto;
  color: var(--color-text-secondary);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-promotions__grid,
  .page-promotions__steps-grid,
  .page-promotions__features-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .page-promotions {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-promotions__hero-section {
    padding-top: 10px !important; /* body already handles header offset */
    padding-bottom: 40px;
  }

  .page-promotions__hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .page-promotions__hero-description {
    font-size: 1em;
  }

  .page-promotions__section-title {
    font-size: clamp(1.8em, 6vw, 2.5em);
  }

  .page-promotions__section-description {
    font-size: 1em;
    margin-bottom: 30px;
  }

  .page-promotions__cta-button,
  .page-promotions__card-button,
  .page-promotions a[class*="button"],
  .page-promotions a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .page-promotions__button-group,
  .page-promotions__cta-buttons,
  .page-promotions__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap !important;
    gap: 10px;
  }

  .page-promotions__grid,
  .page-promotions__steps-grid,
  .page-promotions__features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-promotions__card,
  .page-promotions__step-item,
  .page-promotions__feature-item {
    padding: 20px;
  }

  .page-promotions__card-image,
  .page-promotions img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    min-width: 200px !important;
    min-height: 200px !important;
  }

  .page-promotions__hero-image-wrapper,
  .page-promotions__container,
  .page-promotions__section,
  .page-promotions__card,
  .page-promotions__box,
  .page-promotions__video-section,
  .page-promotions__video-container,
  .page-promotions__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }

  .page-promotions__feature-icon {
    width: 100px;
    height: 100px;
    min-width: 100px !important; /* Allow icons to be smaller if they are decorative, but enforce min 200px for content images as per global rule. Adjusting this for "icons" specifically if they are decorative and not content images, but global rule says NO SMALL ICONS. So, these should also be >= 200px. */
    min-height: 100px !important;
  }
}

/* Enforce min 200px for all content images, overriding smaller values from feature-icon if it's considered content */
.page-promotions img:not(.page-promotions__logo) {
  min-width: 200px;
  min-height: 200px;
}

/* No filter properties for images */
.page-promotions img {
  filter: none;
}