/* =========================================
   FONT IMPORTS
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Montserrat:wght@200;300;400;500;600;700&display=swap');

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v8/LDIoaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_0.woff2) format('woff2');
}

@font-face {
  font-family: "Montserrat";
  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
}

/* =========================================
   GLOBAL
========================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #fbf5eb;
  color: black;
  line-height: 1.8;
}

/* =========================================
   CONTAINER (fixed width + padding)
========================================= */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 40px 60px;  
}

/* =========================================
   SPECIFIC PRIVACY POLICY SECTIONS
========================================= */

/* Title */
.pp-title h1 {
  font-family: "Plus Jakarta Sans";
  color: #355358;
  font-size: 28px;
  text-align: center; 
  font-weight: 400;
  margin-bottom: 30px;
  margin-top: -10px;
}

/* Introduction */
.pp-intro p {
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  margin-bottom: 25px;
}

/* Personal Data Section */
.pp-personal-data {
  padding-left: 0; /* Whole content section: left aligned */
}

.pp-personal-data h2 .highlight {
  font-family: "Plus Jakarta Sans";
  font-size: 15px;
  color: #355358;       
  font-weight: 700;     
}

.pp-personal-data h2 {
  font-family: "Montserrat";
  font-size: 15px;
  color: #355358;
  font-weight: 700;
  margin-bottom: 5px;
}

.pp-personal-data p {
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  line-height: 1.8;
  font-weight: 400;
  margin: 0 0 10px 0; /* Reduce gap between p and ul with 10px bottom spacing */
}

.pp-personal-data ul {
  list-style: disc;
  list-style-position: outside;
  padding-left: 20px; /* Bullets and content: left aligned */
  margin: 0 0 10px 0;  /* 10px bottom spacing */
  line-height: 1.8;
}

.pp-personal-data ul li {
  margin: 0 0 8px 0;   /* Reduced gap between list items */
  padding-left: 0;
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  line-height: 1.8;
  font-weight: 400;
}


/* Usage Section */
.pp-usage h2 .highlight {
  font-family: "Plus Jakarta Sans";
  font-size: 15px;
  color: #355358;
  font-weight: 700;
  margin-top: 25px;
}

.pp-usage h2 {
  font-family: "Montserrat";
  font-size: 15px;
  color: #355358;
  font-weight: 600;
  margin-top: 25px;
}

.pp-usage p {
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  line-height: 1.8;
  font-weight: 400;
  margin: 0 0 10px 0; /* Reduce gap between p and ul with 10px bottom spacing */
}

.pp-usage ul {
  list-style: disc;
  list-style-position: outside;
  padding-left: 20px; /* Bullets and content: left aligned */
  margin: 0 0 10px 0;  /* 10px bottom spacing */
  line-height: 1.8;
}

.pp-usage ul li {
  margin: 0 0 8px 0;   /* Reduced gap between list items */
  padding-left: 0;
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  line-height: 1.8;
  font-weight: 400;
}

/* Cookies Section */
.pp-cookies h2 {
  font-family: "Montserrat";
  font-size: 22px;
  color: black;
  margin-top: 30px;
}

.pp-cookies p {
  font-size: 15px;
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  line-height: 1.8;
  font-weight: 400;
  margin: 0 0 20px 0; /* Reduce gap between p and ul with 10px bottom spacing */
}

/* Performance Cookies Section */
.pp-performance-cookies h2 {
  font-family: "Montserrat";
  font-size: 15px;
  color: #355358;
  font-weight: 600;
  margin-bottom: 0px;
}

.pp-performance-cookies p {
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  font-weight: 400;
  line-height: 1.8;
  margin-top: 0px;
}

.pp-performance-cookies a {
  color: #07a59d;       /* Change link color */
  text-decoration: none; /* Add underline or remove with 'none' */
  font-weight: 400;     /* Optional: make it bold */
  transition: all 0.5s ease; /* Optional: hover animation */
  display: inline-block;          /* Make transform work */
}

.pp-performance-cookies a:hover {
  transform: scale(0.9);       /* Optional: slightly enlarge the link */
  text-decoration: none;
}

/* Privacy Notice Changes Section */
.pp-changes h2 {
  font-family: "Montserrat";
  font-size: 22px;
  margin-top: 30px;
  color: black;
}
.pp-changes p {
  font-size: 15px;
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  line-height: 1.8;
  font-weight: 400;
  margin: 0 0 20px 0; /* Reduce gap between p and ul with 10px bottom spacing */
}

/* Opt-Out Section Paragraphs */
.pp-optout p {
  font-family: "Plus Jakarta Sans";
  font-size: 15px;
  color: #355358;
  font-weight: 400;
  margin: 0 0 5px 0; /* Top 0, bottom 5px for tighter spacing */
  line-height: 1.6;  /* Optional: tighter line spacing */
}

/* Highlighted text inside paragraph */
.pp-optout p .highlight {
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  font-weight: 400;
  margin: 0;           /* Remove any default margin */
}

/* Links inside Opt-Out Section */
.pp-optout a {
  color: #07a59d;          
  text-decoration: none; 
  font-weight: 400;
  transition: all 0.3s ease; 
  display: inline-block;
  margin: 0 0 5px 0; /* Top 0, bottom 5px for tighter spacing */
}

.pp-optout a:hover {
  transform: scale(0.9);
}

/* Strong headings inside paragraphs */
.pp-updates p strong {
  font-family: "Plus Jakarta Sans";
  font-size: 15px;
  color: #355358;  
}

/* Paragraph text */
.pp-updates p {
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  font-weight: 400;  
  margin: 0 0 0 0;   /* No top or bottom spacing to move closer to strong */
  line-height: 1.8;  /* Adjust readability */
}

/* Unified spacing between sections */
.pp-optout,
.pp-updates {
  margin-bottom: 20px; /* Standardized gap between sections, customizable */
}


/* Questions Section */
.pp-questions p strong {
  font-family: "Plus Jakarta Sans";
  font-size: 15px;
  color: #355358;  
}

.pp-questions p {
  font-family: "Montserrat";
  font-size: 15px;
  color: black;
  font-weight: 400;  
  margin: 0 0 0 0;   /* No top or bottom spacing to move closer to strong */
  line-height: 1.8;  /* Adjust readability */
}


.pp-close-btn .close-btn {
  background: #dbaf3b;
  border: 1px solid #dbaf3b;
  color: #ffffff;
  font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 450;
  font-size: 14px;
  padding: 12px 33px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: max-content;
  line-height: 1.2;
  display: flex;                   
  align-items: center;             
  justify-content: center;         
  margin-left: 0;        
  margin-top: 80px;
  width: fit-content;              
  text-align: center;             
}

/* Hover effect */
.pp-close-btn .close-btn:hover {
    background: #042b2f;
    border-color: #042b2f;;
}

/* Focus effect */
.pp-close-btn .close-btn:focus {
  outline: 2px solid rgba(219, 175, 59, 0.5);
  outline-offset: 2px;
}

/* =========================================
   COMPREHENSIVE RESPONSIVE DESIGN
   Ensure consistent display across all devices
========================================= */

/* Tablet screens (768px or less) */
@media (max-width: 768px) {
  .container {
    padding: 0px 30px 50px;
  }
  
  .pp-title h1 {
    font-size: 26px;
    margin-top: -10px;
    margin-bottom: 25px;
  }
  
  .pp-close-btn .close-btn {
    font-size: 13px;
    padding: 13px 28px;
    margin-top: 70px;
  }
  
  .pp-cookies h2,
  .pp-changes h2 {
    font-size: 20px;
  }
}

/* Large mobile phones (576px and below) */
@media (max-width: 576px) {
  .container {
    padding: 0px 25px 40px;
  }
  
  .pp-title h1 {
    font-size: 24px;
    margin-top: -10px;
    margin-bottom: 20px;
  }
  
  .pp-close-btn .close-btn {
    font-size: 12px;
    padding: 12px 24px;
    margin-top: 60px;
  }
  
  .pp-personal-data p,
  .pp-usage p,
  .pp-cookies p,
  .pp-changes p,
  .pp-performance-cookies p,
  .pp-optout p,
  .pp-updates p,
  .pp-questions p,
  .pp-personal-data ul li,
  .pp-usage ul li {
    font-size: 14px;
  }
  
  .pp-personal-data h2,
  .pp-usage h2,
  .pp-performance-cookies h2,
  .pp-personal-data h2 .highlight,
  .pp-usage h2 .highlight,
  .pp-optout p,
  .pp-updates p strong,
  .pp-questions p strong {
    font-size: 14px;
  }
  
  .pp-cookies h2,
  .pp-changes h2 {
    font-size: 18px;
  }
}

/* Small mobile phones (480px and below) */
@media (max-width: 480px) {
  .container {
    padding: 0px 20px 35px;
  }
  
  .pp-title h1 {
    font-size: 22px;
    margin-top: -10px;
    margin-bottom: 18px;
  }
  
  .pp-close-btn .close-btn {
    font-size: 12px;
    padding: 11px 22px;
    margin-top: 50px;
  }
  
  .pp-personal-data ul,
  .pp-usage ul {
    padding-left: 18px;
  }
}

/* Extra small mobile phones (360px and below) */
@media (max-width: 360px) {
  .container {
    padding: 0px 15px 30px;
  }
  
  .pp-title h1 {
    font-size: 20px;
    margin-top: -10px;
    margin-bottom: 15px;
  }
  
  .pp-close-btn .close-btn {
    font-size: 11px;
    padding: 10px 20px;
    margin-top: 40px;
  }
  
  .pp-personal-data p,
  .pp-usage p,
  .pp-cookies p,
  .pp-changes p,
  .pp-performance-cookies p,
  .pp-optout p,
  .pp-updates p,
  .pp-questions p,
  .pp-personal-data ul li,
  .pp-usage ul li {
    font-size: 13px;
  }
  
  .pp-personal-data h2,
  .pp-usage h2,
  .pp-performance-cookies h2,
  .pp-personal-data h2 .highlight,
  .pp-usage h2 .highlight,
  .pp-optout p,
  .pp-updates p strong,
  .pp-questions p strong {
    font-size: 13px;
  }
  
  .pp-cookies h2,
  .pp-changes h2 {
    font-size: 16px;
  }
  
  .pp-personal-data ul,
  .pp-usage ul {
    padding-left: 16px;
  }
}


@media (max-height: 500px) and (orientation: landscape) {
  .container {
    padding: 0px 25px 30px;
  }
  
  .pp-title h1 {
    margin-top: -10px;
    margin-bottom: 15px;
    font-size: 24px; 
  }
  
  .pp-close-btn .close-btn {
    margin-top: 30px; 
    padding: 10px 25px; 
    font-size: 13px;
  }
  

  .pp-personal-data,
  .pp-usage,
  .pp-cookies,
  .pp-changes,
  .pp-performance-cookies,
  .pp-optout,
  .pp-updates,
  .pp-questions {
    margin-bottom: 15px;
  }
}


@media (min-width: 1024px) and (orientation: landscape) {
  .pp-close-btn .close-btn {
    margin-top: 60px;
    padding: 14px 36px;
    font-size: 15px;
  }
}

/* High DPI screen optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .pp-close-btn .close-btn {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Minimal animation support */
@media (prefers-reduced-motion: reduce) {
  .pp-close-btn .close-btn,
  .pp-performance-cookies a,
  .pp-optout a {
    transition: none;
  }
  
  .pp-close-btn .close-btn:hover,
  .pp-performance-cookies a:hover,
  .pp-optout a:hover {
    transform: none;
  }
}