@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=IM+Fell+English:ital@0;1&family=Lora:ital,wght@0,400..700;1,400..700&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --font-default: "EB Garamond";
  --font-title: "IM Fell English"; 
  --font-headlines: "Cinzel"; 

  --breakpoint-xs: 30rem;
  --spacing: 0.5rem;

  --color-dark: oklch(21.6% 0.006 56.043);
  --color-white: oklch(94.3% 0.029 294.588);
  --color-link: #4c6a91;
  --color-background: #f4f1e1;
  --color-card-background: #f4f1e1;
  --color-background-2: #d7b75a;
  --color-text:#333132;



  --card-w: 150px;
  --card-h: 263px;
  --table-w: 1100px;

  --card-w-sm: 60px;
  --card-h-sm: 108px;

  --card-br: 12px;
  --card-br-sm: 6px;

  --card-padding: 0.5rem;
  --card-padding-sm: 2px;
  --card-padding-lg: 1rem;

  --scaling-factor: 2.2;
  --c-canvas-h: 640px;
  --c-canvas-w: 360px;
  --c-canvas-gap: 10px;
  
}

body {
    font-family: var(--font-default);
    font-size: 1rem;
    background-color: var(--color-background);
    color: var(--color-text);
    margin: 0; 
    padding: 0; 
    min-height: 100vh;
}

a {text-decoration: none; color:var(--color-link)}
p {margin-block-start: 0;}
img, svg { max-width: 100%; height:auto; display: block;}

/* Helpers */
      .w-full {width: 100%;}
      .w-50 {width:50% !important;}
      .w-max-sm {max-width: 360px;}

      .hidden {display: none !important;}

      .font-mono {font-family: monospace;}
      .upper { text-transform: uppercase;}

      .row {display: flex;flex-wrap: wrap; gap:2rem; align-items: center;box-sizing: border-box;justify-content: center;}
      .gap-sm {gap:0.5rem;}
      .col {flex:1 1 auto;}
      .flex-8 {flex: 8;}
      .flex-7 {flex: 7;}
      .flex-6 {flex: 6;}
      .flex-5 {flex: 5;}
      .flex-4 {flex: 4;}
      .flex-3 {flex: 3;}
      .flex-2 {flex: 2;}
      .align-top {align-items: flex-start;}
      .flex-50p {flex-basis: 50% !important;}

      .th {
        font-weight: 500;
        padding: 0.75rem 0.6rem;
        border-bottom: 1px solid oklch(55.3% 0.013 58.071);
      }
      
      .td {
        font-weight: 300;
        padding: 0.6rem;
        border-bottom: 1px solid oklch(37.4% 0.01 67.558);
      }

      .mt-0 {margin-top: 0 !important;}
      .mt {margin-top: calc(var(--spacing) * 8);} .mt-md {margin-top: calc(var(--spacing) * 8) !important;} .mt-l {margin-top: calc(var(--spacing) * 10);} .mt-xl {margin-top: calc(var(--spacing) * 12);}
      .mb-sm {margin-bottom: calc(var(--spacing) * 4) !important;} .mb {margin-bottom: calc(var(--spacing) * 8);} .mb-l {margin-bottom: calc(var(--spacing) * 10);} .mb-xl {margin-bottom: calc(var(--spacing) * 12);}

      .pt-0 {padding-top: 0 !important;}
      .pt-s {padding-top: calc(var(--spacing) * 7) !important;} .pt {padding-top: calc(var(--spacing) * 14) !important;} .pt-l {padding-top: calc(var(--spacing) * 10);} .pt-xl {padding-top: calc(var(--spacing) * 12);}
      .pb-s {padding-bottom: calc(var(--spacing) * 7) !important;} .pb {padding-bottom: calc(var(--spacing) * 14) !important;} .pb-l {margin-bottom: calc(var(--spacing) * 10);} .pb-xl {padding-bottom: calc(var(--spacing) * 12);}

      .text-center {text-align: center !important;}
      .text-left {text-align: left !important;}
      .text-right {text-align: right !important;}
      .text-small {font-size:0.8em !important;}


      .visible-mobile { display: none; }
      .hidden-mobile { display: block; }

      .fs80 {font-size: 0.8em !important;}

      @media (max-width: 768px) {
        .visible-mobile { display: block; }
        .hidden-mobile { display: none; }
      }

a.mainpage {
  text-decoration: none;
  color: var(--color-text);
}
a.mainpage:hover {
  text-decoration: none;
}

h1 {
  font-family: var(--font-title);
  font-size: 3.25rem;
  text-align: center;
  padding: 0;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

h2 {
  font-family: var(--font-headlines);
  font-size: 2.75rem;
  line-height: 1.25em;
  text-align: center;
  margin-top: 0;
  margin-bottom: 5rem;
}

h2.headline {
  margin: 0 auto;
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 1.3em;
  text-align: center;
  max-width: 540px;
}

h3 {
  font-family: var(--font-headlines);
  font-size: 2rem;
  line-height: 1.25em;
  text-align: center;
}

h4 {
  font-size: 1.75rem;
  font-family: var(--font-headlines);
  font-weight: 400;
  line-height: 1.25em;
  text-align: center;
}
h5 {
  font-family: var(--font-headlines);
}
p {
  font-size: 1.5rem;
}

.bg-2 {
  background-color: var(--color-background-2);
}

.page-wrap-narrow {
  max-width: 540px;
  margin: 8rem auto;
}


.ziua {
  margin-bottom: 2.5rem;
}



.card {
  padding: var(--card-padding);
  background-color: var(--color-card-background);
  width: fit-content;
  border-radius: var(--card-br);
  margin: auto;
}


.card-title {
  font-family: var(--font-title), 'Noto Serif',serif;
  text-transform: uppercase;
  font-weight: 700;
}

#cartea-zilei-titlu {
  margin: 3.5rem auto 1.5rem auto;
  font-size: 2.5rem;
}

#cartea-zilei-img {
  padding: var(--card-padding-lg);
}

#cartea-zilei-img img {
  border-radius: 10px;
}

.etalare {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  border: 1rem solid #fff;
  background-color: #fff;
  border-radius: 12px;
  padding: 0rem;
  box-sizing: border-box;
  width: 300px;
  height: 400px;
  margin: 0;
  transition: all .3s ease;
}
.etalare:hover {
  transform: scale(1.03) translateY(-12px);
}
.etalare h3, .etalare p {
  color: var(--color-text);
}

.etalare p {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.etalare .alege {
  text-align: center;
  margin-top: auto;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0rem;
  color: #333132;
  padding: 0.75rem;
  background-color: #b5aca5;
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: -8px;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  border-top: 2px solid #333132;
}
.etalare-inner {
  border: 4px solid #333132;
  border-radius: 12px;
  background-color: #f7db56;
  height: 100%;
  padding: 0.5rem;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}



  form {
      width: 100%;
  }
  form input, form select, form button {
      color: var(--color-dark);
      display: block;
      width: 100%; 
      box-sizing: border-box;
      padding: 0.75rem;
      margin: 0.75rem auto;
      border: 0;
      border-radius: 0.5rem;
      background-color: var(--color-white);
      font-size: 1.25rem;
      transition: all .2s ease;
      outline: none;
  }
  input[type="checkbox"] {
    width: auto;
  }
  form button {
    cursor: pointer;
    background-color: #f7db56;
    color: var(--color-text);
  }
  form button:hover {
    cursor: pointer;
    background-color: #ffe25b;
    color: var(--color-link);
    transform: scale(1.01);
  }



.container, .container-sm, .container-md {
  margin: 0px auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* SM */
    @media (min-width: 640px) {
      .container, .container-sm, .container-md {
        max-width: 540px;
      }
      h1 {
        font-size: 5.25rem;
      }
      h2.headline {
        font-size:2rem;
      }
      h2 {
        font-size: 3rem;
      }
      
    }

/* MD */
    @media (min-width: 768px) {

      .container, .container-md {
        max-width: 720px;
      }

      h2 {
        font-size: 3.5rem;
      }

    }

/* LG */
    @media (min-width: 992px) {
      .container {
          max-width: 960px;
      }

      h2 {
        font-size: 4rem;
      }

    }



/* FOOTER */

  footer {
    padding: 2rem 0;
    display: flow-root;
  }
  .footer-menu {
    display: block;
    text-align: center;
  }
  .footer-menu .col {
    margin-bottom: 3rem;
  }
  .footer-menu h5 {
    font-size: 1rem;
    margin-block: 0;
    margin: 0;
    padding: 0.5rem;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
    opacity: 0.85;
  }
  .footer-menu h5.title {
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 1;
  }
  .footer-menu a {
    display: block;
    padding: 0.5rem;
    color:var(--color-link);
  }
  .menu-horoscop-azi-zodii {
    display: none;
  }

  .footer-text {
    padding: 0 0.5rem 0.5rem;
    font-size: 1rem;
    line-height: 1.25em;
    max-width: 80%;
    margin: 0.5rem auto;
  }

  .footer-text a {
    display: inline !important;
    padding: 0 !important;
  }

  .copyright {
    margin-top: 2.5rem;
    font-size: 0.75rem;
    line-height: 1.4em;
    padding-bottom: 1rem;
    color: var(--color-white);
    text-align: center;
  }

  .legal {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 1rem;
  }
  .legal div {
    padding: 0.5rem 0.5rem 0 0.5rem;
  }

  @media (min-width: 640px) {
    .footer-menu {
      display: flex;
      justify-content: space-around;
      text-align: left;
    }
    .footer-menu h5 {
      text-align: left;
    }
    .footer-text {
      margin: 0;
    }
    .legal {
      justify-content: space-between;
    }
  }












  /*

    ALEGE CARTEA

  */

    .scena{
      perspective: 1000px;
      overflow:hidden; 
    }

    .table { 
      width:490px;     
      height:580px;
      position: relative;
      padding:0px;
      box-sizing:border-box;
      overflow:hidden; 
      margin: auto;
    }
    @media (max-width: 490px) {
      .table {
        overflow: hidden;
        margin-left: calc((100vw - 490px) / 2);
      }
    }

    .card-de-ales{
      position:absolute; 
      width: calc(var(--card-w) + 2 * var(--card-padding)); 
      height: calc(var(--card-h) + 2 * var(--card-padding)); 
      border-radius:10px; 
      display:flex; 
      flex-direction:column; 
      align-items:center; 
      justify-content:center; 
      user-select:none; 
      cursor:pointer; 
      
      box-shadow:0 2px 3px #ef5863;

      transition:transform .18s ease, box-shadow .18s ease;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
    }


    .face {
      position: absolute;
      inset: 0;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;

      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .face.back {
      transform: rotateY(180deg); 
    }

    .face.front {
      transform: rotateY(0deg);
    }

    /*.placed-card {
      width: calc(var(--card-w) + 2 * var(--card-padding)); 
      height: calc(var(--card-h) + 2 * var(--card-padding)); 
      overflow: hidden;         
      padding: 0;               
      box-sizing: border-box; 
    }*/



    .cards-are-selectable .card-de-ales:hover{ 
      transform: translateY(-12px) rotateY(180deg) !important;
      box-shadow:0 4px 16px rgba(2, 6, 23, 0.5);
    }
    .card-de-ales.picked{ display: none; }




    /* Responsive: reduce sizes on narrow screens */
    @media (max-width:640px){
      /* :root{--card-w:110px;--card-h:170px} */
    }

    
    .picked-area {
      margin-top: 1rem;
      padding:2rem;
      box-sizing:border-box;
      display: flex;
      justify-content: center;
      gap:2rem;
      flex-wrap: wrap;
    }
    
    .card-placement {
      width: calc(var(--card-w) + 2 * 3rem);
    }

    .card-placement-title {
      font-size: 1.5rem;
      margin: 0;
      padding: 0;
      margin-bottom: 1rem;
    }

    

    .slot{
      width: calc(var(--card-w) + 2 * var(--card-padding)); 
      height: calc(var(--card-h) + 2 * var(--card-padding)); 
      box-sizing:border-box;
      border-radius: var(--card-br);
      border:1px solid white;
      margin: auto;
    }

    .aleg-1 .slot{
      width: calc(1.5 * var(--card-w) + 2 * var(--card-padding)) !important; 
      height: calc(1.5 * var(--card-h) + 2 * var(--card-padding)) !important;
    }
    .aleg-1 .card-img-sized{
      width: calc(1.5 * var(--card-w) + 2 * var(--card-padding)) !important; 
      height: calc(1.5 * var(--card-h) + 2 * var(--card-padding)) !important;
    }

    
    .min-h {
      min-height: 140px;
    }

    .placed-card-info {
      margin-top: 1rem;
      transition: all 0.6s ease;
      overflow: hidden;
    }

    @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    .placed-card-info p {
      text-align: center;
      opacity: 0;
      transform: translateY(-10px);
      animation: fadeInDown 3s ease forwards;
    }

    #interpretation {
      display: none;
    }
    .show-animated {
      display: block !important;
      animation: fadeInDown 3s ease forwards;
    }
    
    #getInterpretation {
      margin: auto;
      display: block;
      padding: 1rem 2rem;
      font-size: 1.5rem;
      font-weight: 700;
      border: 0px;
      border-radius: 12px;
      background-color: transparent;
      color: var(--color-link);
      cursor: pointer;
    }
    #getInterpretation:hover {
      text-decoration: underline;
    }

    .floating-card{
      /*position:fixed; --for relative */
      position:absolute; 
      left:0; 
      top:0; 
      margin:0; 
      transform-origin:center center; 
      border-radius: var(--card-br); 
      pointer-events:none; 
      z-index:10000; 
      transition:transform 2.5s cubic-bezier(.2,.9,.3,1), opacity .25s ease;
      box-shadow:0 30px 60px rgba(2,6,23,0.6);
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
    }

    .card-img-sized{
      width:var(--card-w); 
      height:var(--card-h); 
      border-radius: var(--card-br);
    }

    .card-image.inversat {
      transform: rotate(180deg);
    }

    .da-sau-nu {
      font-weight: 700;
      margin: 3rem auto 2rem auto;
      font-size: 3.5rem;
      line-height: 1;
    }


    h2.crucea-headline {
      margin-bottom: 1rem;
    }
    h4.crucea-intro {
      margin-bottom: 6rem;
      margin-top: 0;
      font-family: var(--font-default);
      line-height: 1.5em;
    }
    .crucea-celtica {
      position: relative;
      width: 360px;
      height: 500px;
      margin: 2rem auto;
    }
    .crucea-celtica .slot {
      position: absolute;
      width: calc(var(--card-w-sm) + 2 * var(--card-padding-sm)) !important;
      height: calc(var(--card-h-sm) + 2 * var(--card-padding-sm))  !important;
    }
    .crucea-celtica .slot .card {
      padding: calc(var(--card-padding-sm));
      border-radius: var(--card-br-sm);
    }

    .crucea-celtica .slot .card .card-img-sized{
      width: var(--card-w-sm);
      height: var(--card-h-sm);
      border-radius: var(--card-br-sm);
    }

    .crucea-interpretare .card-placement-title {
      padding-top: 4rem !important;
      font-weight: 700;
    }

    #se-incarca { margin-top: 3rem; text-align: center; }
    #se-incarca p { margin: 1rem; font-size: 1rem; }
    #crucea-interpretare-ai {
      padding-top: 5rem;
    }


    /*

      Cum Functioneaza Section
    
    */

.cum-sa {
  display:flex;
  align-items:center;
  gap: 0.75rem;
  max-width: 640px;        
  margin: 0 auto 4rem auto;
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
}

.cum-sa-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.cum-sa-btn img{ width:24px; height:24px; display:block; }

.cum-sa-btn:focus{ outline: 2px solid #6ea8fe; outline-offset:2px; }

.cum-sa-btn.disabled{
  opacity:.35;
  cursor: default;
  pointer-events: none;
}


.pasi{
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;           /* important so flex child can shrink */
}

.pasi-slider{
  display: flex;          
  flex-direction: row;    
  flex-wrap: nowrap;      
  transition: transform 300ms ease;
  will-change: transform;
  width: 100%;
}

.pas{
  flex: 0 0 100%;         
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pas h4{
  margin: 0;
  padding: 0;
  margin-bottom: o.5rem;
}
.pas p{
  margin:0;
  padding: 0;
  font-size: 1.25rem;
}

@media (min-width:560px){
  .pas p{ font-size: 1.5rem; margin-top: 1rem; }
  .cum-sa-btn img{ width: 36px; height:36px; }
}





.loader {
  margin: 2rem auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}
.inner { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; }
.inner.one { left: 0%; top: 0%; animation: rotate-one 1s linear infinite; border-bottom: 5px solid var(--color-text); }
.inner.two { right: 0%; top: 0%; animation: rotate-two 1s linear infinite; border-right: 5px solid  var(--color-text); }
.inner.three { right: 0%; bottom: 0%; animation: rotate-three 1s linear infinite; border-top: 5px solid  var(--color-text); }
@keyframes rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } }
@keyframes rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } }
@keyframes rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } }