/* =====================================


   Pagina Pachete – layout boxed


   ===================================== */





.cc-packs-page {


  background: var(--cc-color-bg-page, #f9fbff);


  padding: 3.5rem 0 4rem;


}





.cc-packs-page-inner {


  max-width: 1120px;


  margin: 0 auto;


  padding: 0 1.25rem;


}





/* Fix overlap cu headerul sticky (setezi ID-ul corect al paginii) */


@media (min-width: 782px) {


  body.page-id-123 .site-main {


    padding-top: 110px;


  }


}





@media (max-width: 781.98px) {


  body.page-id-123 .site-main {


    padding-top: 86px;


  }


}





/* ---------- HERO ---------- */





.cc-packs-hero {


  position: relative;


  margin-bottom: 2.8rem;


  padding: 2.6rem 2.2rem 3rem;


  /*border-radius: 1.75rem;*/


  background:


    radial-gradient(circle at top left, rgba(35, 211, 211, 0.16), transparent 55%),


    radial-gradient(circle at bottom right, rgba(46, 82, 79, 0.16), transparent 55%),


    #f5fbff;


  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);


}





@media (max-width: 768px) {


  .cc-packs-hero {


    padding: 2rem 1.4rem 2.4rem;


    margin-bottom: 2.2rem;


    /*border-radius: 1.5rem;*/


  }


}





.cc-packs-hero::before {


  content: "";


  position: absolute;


  inset: -40px -80px auto;


  background: radial-gradient(circle at top left, rgba(35, 211, 211, 0.18), transparent 60%);


  opacity: 0.9;


  pointer-events: none;


  z-index: -1;


}





.cc-packs-hero-grid {


  display: grid;


  gap: 2rem;


}





@media (min-width: 960px) {


  .cc-packs-hero-grid {


    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);


    align-items: stretch;


  }


}





.cc-packs-eyebrow {


  text-transform: uppercase;


  letter-spacing: 0.14em;


  font-size: 0.78rem;


  color: #2e524f;


  margin-bottom: 0.9rem;


}





.cc-packs-title {


  font-size: clamp(2rem, 3.1vw, 2.6rem);


  margin: 0 0 0.9rem;


  color: var(--cc-color-heading, #121826);


}





.cc-packs-subtitle {


  margin: 0 0 1.4rem;


  max-width: 34rem;


  color: #4b5563;


}





.cc-packs-hero-bullets {


  margin: 0 0 1.7rem;


  padding-left: 1.1rem;


  font-size: 0.95rem;


  color: #1f2933;


}





.cc-packs-hero-bullets li + li {


  margin-top: 0.3rem;


}





.cc-packs-hero-ctas {


  display: flex;


  flex-wrap: wrap;


  gap: 0.75rem;


}





/* Buttons reutilizabile */





.cc-btn {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  gap: 0.4rem;


  padding: 0.75rem 1.6rem;


  border-radius: 999px;


  font-size: 0.92rem;


  font-weight: 500;


  text-decoration: none;


  border: 1px solid transparent;


  cursor: pointer;


  box-shadow: 0 10px 25px rgba(35, 211, 211, 0.25);


}





.cc-btn--primary {


  background: var(--cc-color-brand, #23d3d3);


  color: #ffffff;


}





.cc-btn--primary:hover {


  background: var(--cc-color-brand-dark, #18b9b9);


}





.cc-btn--ghost {


  background: #ffffff;


  color: var(--cc-color-heading, #121826);


  border-color: rgba(154, 164, 178, 0.4);


  box-shadow: none;


}





.cc-btn--ghost:hover {


  border-color: var(--cc-color-brand, #23d3d3);


}





/* Stat cards */





.cc-packs-hero-right {


  display: grid;


  gap: 0.9rem;


}





.cc-packs-stat-card {


  background: #ffffff;


  border-radius: 1.1rem;


  padding: 1.1rem 1.35rem;


  box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.06));


  border: 1px solid rgba(148, 163, 184, 0.25);


}





.cc-packs-stat-label {


  font-size: 0.78rem;


  text-transform: uppercase;


  letter-spacing: 0.1em;


  color: #6b7280;


  margin: 0 0 0.2rem;


}





.cc-packs-stat-value {


  font-size: 1.5rem;


  font-weight: 600;


  margin: 0 0 0.3rem;


}





.cc-packs-stat-note {


  margin: 0;


  font-size: 0.86rem;


  color: #6b7280;


}





/* Sumar profi */





.cc-packs-summary {


  margin-top: 2.6rem;


  background: #ffffff;


  border-radius: 1.25rem;


  padding: 1.8rem 1.9rem;


  box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.06));


  border-top: 3px solid #2e524f;


}





.cc-packs-summary h2 {


  margin: 0 0 0.7rem;


}





.cc-packs-summary p {


  margin: 0 0 0.75rem;


  font-size: 0.96rem;


  color: #1f2933;


}





.cc-packs-summary p:last-child {


  margin-bottom: 0;


}





/* ---------- Definiții ---------- */





.cc-packs-definitions {


  padding: 2.9rem 0 3.2rem;


}





.cc-packs-def-grid {


  display: grid;


  gap: 1.5rem;


}





@media (min-width: 960px) {


  .cc-packs-def-grid {


    grid-template-columns: 1.3fr 1fr 1fr;


  }


}





.cc-packs-def-card {


  background: #ffffff;


  border-radius: 1.15rem;


  padding: 1.5rem 1.6rem;


  box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.06));


}





.cc-packs-def-card--main {


  background: #f8fcfd;


}





.cc-packs-def-card h2,


.cc-packs-def-card h3 {


  margin: 0 0 0.6rem;


}





.cc-packs-examples {


  font-size: 0.9rem;


  color: #6b7280;


}





/* ---------- Secțiuni titlu ---------- */





.cc-packs-section-title {


  text-align: center;


  margin: 0 0 0.9rem;


  position: relative;


}





.cc-packs-section-title::after {


  content: "";


  display: block;


  width: 72px;


  height: 3px;


  border-radius: 999px;


  background: linear-gradient(90deg, #23d3d3, #2e524f);


  margin: 0.6rem auto 0;


}





.cc-packs-section-subtitle {


  text-align: center;


  margin: 0 0 2rem;


  font-size: 0.95rem;


  color: #4b5563;


}





/* ---------- Grid pachete ---------- */





.cc-packs-grid-section {


  padding: 3rem 0;


}





.cc-packs-grid {


  display: grid;


  gap: 1.4rem;


}





@media (min-width: 960px) {


  .cc-packs-grid {


    grid-template-columns: repeat(4, minmax(0, 1fr));


  }


}





.cc-pack-card {


  background: #ffffff;


  border-radius: 1.25rem;


  padding: 1.6rem 1.7rem;


  box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.06));


  display: flex;


  flex-direction: column;


  position: relative;


  border: 1px solid rgba(203, 213, 225, 0.7);


}





.cc-pack-card__head h3 {


  margin: 0 0 0.4rem;


}





.cc-pack-price {


  font-size: 1.4rem;


  font-weight: 600;


  margin: 0;


}





.cc-pack-price span {


  font-size: 0.88rem;


  font-weight: 400;


  color: #6b7280;


}





.cc-pack-list {


  margin: 1.05rem 0 0.9rem;


  padding-left: 1.1rem;


  font-size: 0.94rem;


}





.cc-pack-list li + li {


  margin-top: 0.28rem;


}





.cc-pack-note {


  margin-top: auto;


  font-size: 0.86rem;


  color: #6b7280;


}





/* Highlight */





.cc-pack-card--highlight {


  border: 2px solid var(--cc-color-brand, #23d3d3);


  box-shadow: 0 18px 45px rgba(35, 211, 211, 0.22);


  transform: translateY(-4px);


}





.cc-pack-badge {


  position: absolute;


  top: 0.85rem;


  right: 1rem;


  background: var(--cc-color-brand, #23d3d3);


  color: #ffffff;


  font-size: 0.75rem;


  padding: 0.25rem 0.6rem;


  border-radius: 999px;


  box-shadow: 0 8px 18px rgba(35, 211, 211, 0.6);


}





/* Premium & corporate */





.cc-pack-card--premium {


  border-top: 3px solid #2e524f;


}





.cc-pack-card--outline {


  border: 1px dashed #cbd5f5;


}





/* ---------- Ajutor pachet ---------- */





.cc-packs-help {


  padding: 3rem 0 2.5rem;


}





.cc-packs-help-grid {


  display: grid;


  gap: 1.1rem;


}





@media (min-width: 960px) {


  .cc-packs-help-grid {


    grid-template-columns: repeat(4, minmax(0, 1fr));


  }


}





.cc-packs-help-card {


  background: #ffffff;


  border-radius: 1.1rem;


  padding: 1.2rem 1.4rem;


  box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.05));


}





/* ---------- Tabel comparație + mobile cards ---------- */





.cc-packs-compare {


  padding: 3rem 0;


}





/* Desktop */





.cc-packs-compare-desktop {


  display: block;


}





.cc-packs-table-wrapper {


  overflow-x: auto;


}





.cc-packs-table {


  width: 100%;


  border-collapse: collapse;


  font-size: 0.94rem;


  background: #ffffff;


  border-radius: 1rem;


  overflow: hidden;


  box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.05));


}





.cc-packs-table th,


.cc-packs-table td {


  padding: 0.7rem 0.9rem;


  border-bottom: 1px solid #e5e7eb;


}





.cc-packs-table th {


  text-align: left;


  background: #f9fbff;


  font-weight: 600;


}





/* Mobile cards – hidden by default */





.cc-packs-compare-mobile {


  display: none;


}





/* ---------- De ce aleg afacerile ---------- */





.cc-packs-why {


  padding: 3rem 0 2.5rem;


}





.cc-packs-why-grid {


  display: grid;


  gap: 1.2rem;


}





@media (min-width: 960px) {


  .cc-packs-why-grid {


    grid-template-columns: repeat(4, minmax(0, 1fr));


  }


}





.cc-packs-why-card {


  background: #ffffff;


  border-radius: 1.1rem;


  padding: 1.2rem 1.4rem;


  box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.05));


}





/* ---------- FAQ ---------- */





.cc-packs-faq {


  padding: 3rem 0 2.8rem;


}





.cc-packs-faq-list {


  background: #ffffff;


  border-radius: 1.25rem;


  padding: 1.2rem 1.4rem;


  box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.05));


}





.cc-packs-faq details + details {


  border-top: 1px solid #e5e7eb;


}





.cc-packs-faq summary {


  cursor: pointer;


  padding: 0.7rem 0;


  list-style: none;


}





.cc-packs-faq summary::-webkit-details-marker {


  display: none;


}





.cc-packs-faq summary::after {


  content: '+';


  float: right;


  font-weight: 600;


}





.cc-packs-faq details[open] summary::after {


  content: '−';


}





.cc-packs-faq p {


  margin: 0 0 0.8rem;


  font-size: 0.95rem;


}





/* ---------- CTA finală ---------- */





.cc-packs-cta {


  margin-top: 1rem;


  border-radius: 1.5rem;


  background: linear-gradient(135deg, #23d3d3, #2e524f);


  color: #ffffff;


  padding: 2.2rem 2rem;


}





.cc-packs-cta-inner {


  display: grid;


  gap: 1.5rem;


  align-items: center;


}





@media (min-width: 900px) {


  .cc-packs-cta-inner {


    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);


  }


}





.cc-packs-cta-text h2 {


  margin: 0 0 0.4rem;


}





.cc-packs-cta-text p {


  margin: 0;


  max-width: 24rem;


}





.cc-packs-cta-form {


  background: rgba(255, 255, 255, 0.08);


  border-radius: 1rem;


  padding: 1rem 1.2rem;


  font-size: 0.9rem;


}





.cc-packs-cta-note {


  margin: 0;


  opacity: 0.95;


}





/* =====================================


   RESPONSIVE – MOBILE “WOW”


   ===================================== */





@media (max-width: 768px) {


  .cc-packs-page {


    padding: 2.2rem 0 3rem;


  }





  .cc-packs-hero {


    padding-top: 1.2rem;


  }





  .cc-packs-summary {


    margin-top: 2rem;


    padding: 1.5rem 1.4rem;


  }





  /* Comparație: ascundem tabelul, afișăm cardurile */


  .cc-packs-compare-desktop {


    display: none;


  }





  .cc-packs-compare-mobile {


    display: grid;


    gap: 1rem;


  }





  .cc-compare-card {


    background: #ffffff;


    border-radius: 1.1rem;


    padding: 1.2rem 1.4rem;


    box-shadow: var(--cc-shadow-soft, 0 16px 40px rgba(15, 23, 42, 0.06));


    border: 1px solid rgba(209, 213, 219, 0.8);


  }





  .cc-compare-card--highlight {


    border-color: var(--cc-color-brand, #23d3d3);


    box-shadow: 0 14px 35px rgba(35, 211, 211, 0.25);


  }





  .cc-compare-card--premium {


    border-top: 3px solid #2e524f;


  }





  .cc-compare-card h3 {


    margin: 0 0 0.7rem;


  }





  .cc-compare-card ul {


    list-style: none;


    margin: 0;


    padding: 0;


    font-size: 0.9rem;


  }





  .cc-compare-card li {


    display: flex;


    justify-content: space-between;


    gap: 0.7rem;


    padding: 0.35rem 0;


    border-bottom: 1px dashed #e5e7eb;


  }





  .cc-compare-card li:last-child {


    border-bottom: none;


  }





  .cc-compare-card span {


    color: #4b5563;


  }





  .cc-compare-card strong {


    font-weight: 600;


    white-space: nowrap;


  }


}





/* =====================================


   Pagina Pachete – layout boxed


   ===================================== */





.cc-packs-page {


  background: var(--cc-color-bg-page, #f9fbff);


  /* înainte era padding: 3rem 0 4rem; */


  padding: 5.5rem 0 4rem; /* împinge tot conținutul mai jos sub header */


}





@media (max-width: 768px) {


  .cc-packs-page {


    padding-top: 6.5rem; /* puțin mai mult pe mobil */


  }


}





/* ---------- Tabel comparație – mobile variant B ---------- */





@media (max-width: 768px) {


  .cc-packs-compare {


    padding-top: 2.2rem;


  }





  .cc-packs-table-wrapper {


    overflow-x: auto;


    margin: 0 -1.25rem; /* întinde tabelul până în marginea ecranului */


    padding: 0 1.25rem 0.75rem;


  }





  .cc-packs-table {


    table-layout: fixed;


    min-width: 640px; /* forțează scroll orizontal, nu micșorare la infinit */


    font-size: 0.9rem;


  }





  .cc-packs-table th,


  .cc-packs-table td {


    padding: 0.7rem 0.9rem;


  }





  /* un mic hint vizual că se poate face scroll */


  .cc-packs-table-wrapper::after {


    content: 'Derulează pentru a vedea toate pachetele →';


    display: block;


    font-size: 0.75rem;


    color: #6b7280;


    margin-top: 0.35rem;


  }





  /* scrollbar mai discret */


  .cc-packs-table-wrapper::-webkit-scrollbar {


    height: 6px;


  }





  .cc-packs-table-wrapper::-webkit-scrollbar-track {


    background: transparent;


  }





  .cc-packs-table-wrapper::-webkit-scrollbar-thumb {


    background: rgba(15, 23, 42, 0.18);


    border-radius: 999px;


  }


}





/* Accent subtil pe hero – o umbră mai soft și margine sus */





.cc-packs-summary {


  border-top: 3px solid #2e524f;


}





/* Cardul "Listare recomandată" să pară mai premium */





.cc-pack-card--highlight {


  border: 2px solid var(--cc-color-brand, #23d3d3);


  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.10);


  transform: translateY(-6px);


}





@media (max-width: 960px) {


  .cc-pack-card--highlight {


    transform: none; /* pe mobil mai calm */


  }


}





/* Pentru secțiunile cu carduri – spacing un pic mai airy */





.cc-packs-def-card,


.cc-packs-help-card,


.cc-packs-why-card {


  transition: transform 0.18s ease, box-shadow 0.18s ease;


}





.cc-packs-def-card:hover,


.cc-packs-help-card:hover,


.cc-packs-why-card:hover {


  transform: translateY(-2px);


  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);


}





.cc-packs-hero-grid {


  display: grid;


  gap: 2rem;


  align-items: flex-start;


}





@media (min-width: 960px) {


  .cc-packs-hero-grid {


    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);


    column-gap: 2.4rem;


  }


}





/* ================================


   PAGINA PACHETE – header gap fix


   ================================ */





/* setează înălțimea headerului (ca la activitate) */


body.page-id-XX {


  --cc-header-offset: 84px;


}





/* scoatem paddingul/marginea pe care Blocksy le pune înainte de content */


body.page-id-2530 .ct-main,


body.page-id-2530 .ct-main .ct-container {


  padding-top: 0 !important;


  margin-top: 0 !important;


  border-top: 0 !important;


}





/* main-ul nostru – fără padding sus, doar jos */


body.page-id-2530 .cc-packs-page {


  background: var(--cc-color-bg-page, #f9fbff);


  padding: 0 0 4rem;


}





/* =========================================


   HERO PACHETE – full width ca la ACTIVITATE


   ========================================= */





body.page-id-2530 .cc-packs-hero {


  position: relative;


  /* îl scoatem din container și îl facem full-bleed */


  width: 100vw;


  margin-left: 50%;


  transform: translateX(-50%);


  /* împingem conținutul sub headerul sticky */


  padding: calc(var(--cc-header-offset) + 32px) 0 56px;


  /* background de secțiune, modul bandă full-wide */


  background:


    radial-gradient(circle at top left, rgba(35, 211, 211, 0.18), transparent 55%),


    radial-gradient(circle at bottom right, rgba(46, 82, 79, 0.18), transparent 55%),


    #f5fbff;


  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);


}





/* conținutul din hero rămâne boxed ca restul site-ului */





body.page-id-2530 .cc-packs-hero-grid,


body.page-id-2530 .cc-packs-summary {


  max-width: 1120px;


  margin-left: auto;


  margin-right: auto;


  padding-inline: 20px;


}





/* mic tweak la summary, să arate ca un card sub hero */





body.page-id-2530 .cc-packs-summary {


  margin-top: 32px;


  border-radius: 26px;


  background: #ffffff;


}





@media (max-width: 767px) {


  body.page-id-XX {


    /* headerul pe mobil e puțin mai mic de obicei */


    --cc-header-offset: 72px;


  }





  body.page-id-2530 .cc-packs-hero {


    padding: calc(var(--cc-header-offset) + 16px) 0 40px;


  }





  body.page-id-2530 .cc-packs-hero-grid,


  body.page-id-2530 .cc-packs-summary {


    padding-inline: 16px;


  }


}





/* Înălțimea header-ului pentru pagina de Pachete */





body.page-id-2530 {


  --cc-header-offset: 84px; /* poți ajusta 80–90 dacă vezi că mai trebuie un pic */


}





/* Scoatem padding-ul standard Blocksy ca să putem lipi hero-ul de header */





body.page-id-2530 .ct-main,


body.page-id-2530 .ct-main .ct-container {


  padding-top: 0 !important;


  margin-top: 0 !important;


  border-top: 0 !important;


}





/* Pagina pachete – fără padding top, îl face hero-ul */





body.page-id-2530 .cc-packs-page {


  background: var(--cc-color-bg-page, #f9fbff);


  padding: 0 0 4rem;


}