/*
Theme Name:     Crodino 2.0
Description:    Crodino Project
Author:         toolbox

*/

:root {
    --primary: #fff;
    --yellow-color: #ffc600;    
    --yello-color-alt: #ffd84c;
    --popup-background-color: #ffc600;
    --popup-color: #fff;    
}

@font-face {
	font-family: 'BAYARD';
        src: url('./fonts/BAYARD-Regular.ttf') 
            format('truetype');                
}

html{
    font-size: 16px;        
}

body{
    font-family: 'Sofia Sans Condensed', sans-serif;
    color: #ffffff;
    background-color: var(--yellow-color);
    width: 100%;     
}

body.area-all-intro{
    background-color: transparent;   
    
}

body *{
    font-family: 'Sofia Sans Condensed', sans-serif;
    
}

input:focus {
  outline: none;
}


.area{
    display: none;
}

.area.active{
    display: block;
}

.img img{
    width: 100%;
    height: auto;
}

button{
    font-size: 1rem;
    background-color: var(--yellow-color);
    border: 0;
    color: #ffffff;    
    font-weight: bold;
}

#intro button{
    width: 40vw;
    position: absolute;
    background-color: transparent;
    z-index: 10;    
}

#intro button#take-a-photo{
    left: 50vw;
    top: 16vh;
}

#intro button#life-switch{
    left: 7vw;
    top: 24vh;
    width: 39vw;    
}

#intro button#find-crodino{
    width: 48vw;    
    left: 18vw;
    top: 45vh;    
}

#home-logo{
    width: 50%;
    margin: 2rem auto 1rem auto;
    position: relative;
    z-index: 10;
}

img#home-bottom{
    width: auto;
    height: 48vh;
    position: absolute;
    right: 0;
    bottom: 0;    
    z-index: 10;
}

#home-canvas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100vw;
    height: 100vh;
}

#top-heading-effect{
    background-color: var(--yello-color-alt);
    
}

#top-heading-effect img{
    width: 20vw;
    margin: 1.5vh 40vw ;
    
}

#find-top-area{
    background-color: var(--yello-color-alt);
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    
}

#find-top-area-image{
    width: 100%;
    height: auto;
    margin: 0 0 15px 0;
    padding: 0;
}

#top-image-area-image{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0; 
    background-color: #ffffff;
    
}

.white-line-effent{
    display: block;
    width: 100%;
    height: 17px;
    background-color: #ffffff;
    
}

#area-find-crodino .back{
    position: relative;
    bottom: 20px;
    left: auto;
    margin-left: 25px;
    
}

.simple-article{
    margin: 2rem;
    position: relative;
    
}

.article-area-slider{
    margin: 2rem 0;
    position: relative;    
}

.white{
    background-color: #ffffff;
}

.white-color{
    color: #ffffff!important;
}

.article-area-slider.white{
    margin: 0;
    border-top: 2rem solid #ffffff;
    border-bottom: 2rem solid #ffffff;    
}

.orange{
    color: var(--yello-color-alt);    
}

.simple-article *, #area-find-crodino *{
    font-family: 'Sofia Sans Condensed', sans-serif;
    
}

.center{
    text-align: center;
}

.bayard{
    font-family: 'BAYARD', sans-serif!important;    
}

.simple-article h2{
    font-size: 2.4rem;
    line-height: 2.7rem;
    padding-bottom: 0.5rem;
    
}

.article-area-slider h2{
    font-size: 2rem;
    line-height: 2.3rem;    
}

.simple-article p{
    font-size: 1rem;
    line-height: 1.3rem;    
    font-weight: bold;    
    color: grey;
}

.simple-article p.strong{
    font-weight: bold;
}

.first-article-area{
    margin-right: 0;
    height: 360px;
    margin-bottom: 0;
}

.simple-article .bottle-bottom{
    height: 250px;
    width: auto;
    position: absolute;
    right: 0;
    bottom: 0;
}

.second-article-area, .second-article-area-new{
    background-color: #fff;
    color: var(--yellow-color);
    margin: 0;
    padding: 2rem;
}

.second-article-area{
    text-align: right;    
}

.speudo-line{
    width: 100%;
    height: 0.5rem;
    background-color: #ffffff;        
}

.speudo-line.orange{
    background-color: var(--yellow-color);    
}

.third-article-area{
    position: relative;
    margin-left: 0;
    padding-left: 2rem;
}

.third-article-area p{
    font-weight: normal;
}

.third-article-area p.strong{
    padding-bottom: 0;
    
}

.third-article-area p{
    padding-bottom: 1rem;
    
}

.article-area-slider img.left-effect{
    width: 35px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    
}

.third-article-area img.bottom-bottle{
    width: 43px;
    height: auto;
    position: absolute;
    right: -23px;
    bottom: -40px;
    
}

.enjoy-yout-life{
    position: absolute;
    z-index: 10;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    width: 100%;
    bottom: 225px
}

#area-find-crodino .simple-image{
    background-color: var(--yello-color-alt);
    
}

#area-find-crodino .simple-image img{
    width: 90vw;
    height: auto;
    display: block;
    padding-top: 2vh;
    padding-bottom: 2vh;    
    margin: 0 5vw;
}

/* -------------------------------------------------------------------------- */

.slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 40px;
}

.slider-container .simple-article{
    border: 1rem solid #ffffff;
    margin: 2rem 3rem 0 3rem;
}

.slider-two.slider-container .simple-article{
    margin: 0 3rem 0 3rem;    
}

.slider-container .simple-article{
    background-color: #ffffff;
    /* Σκιά επάνω και αριστερά */
    box-shadow: 
    -4px 0 6px -2px rgba(0,0,0,0.2),  /* αριστερή πλευρά */
    0 -4px 6px -2px rgba(0,0,0,0.2);   /* επάνω πλευρά */
}

.slider-container.background-color-white{
    background-color: #ffffff;    
}

.slider-container.background-color-white::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* το πάνω 30% */
    background-color: var(--yellow-color); 
    z-index: 1;
    pointer-events: none; /* για να μην παρεμβαίνει σε touch/clicks */
    
}

.slider-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
    width: 100%;
    position: relative;
    z-index: 5;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    color: var(--yellow-color);
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 3rem;
    
}

.prev-btn.white, .next-btn.white{
    color: #ffffff;    
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }


/* -------------------------------------------------------------------------- */

#area-take-a-photo{
    position: relative;
}

.image-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: auto;
    z-index: 10;
    
}

#cover-camera{
    position: fixed;
    height: 50px;
    z-index: 5;
    background-color: var(--yellow-color);
    bottom: 0;
    width: 100%;
    
}

#video, #facecanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* σημαντικό! */
  
}

#video.shelfie, #facecanvas.shelfie{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1); /* για mirror */    
}

.back{
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 30;
    width: 25vw;
    background-color: transparent;
}

.choose-camera{
    position: fixed;
    bottom: 23px;
    right: 25px;
    z-index: 35;     
    font-size: 1rem;        
    display: none;    
    width: 25vw;
    background-color: transparent;    
}

#back-camera{
    width: 34vw;    
    right: 10px;    
}

.choose-camera.active, #take-photo.active, #download.active{
    display: block;
}

#take-photo, #download{
    position: fixed;
    bottom: 80px;
    right: 25px;
    z-index: 35;     
    font-size: 1rem;        
    display: none;    
}

#take-photo{
    background-color: transparent;
    width: 25vw;
    bottom: 20px;
    right: 37vw;    
}

.image-area{
/*    width: calc(70vw - 20px);*/
    width: 70vw;
    margin: 5vh auto 3vh auto;    
/*    border: 10px solid var(--yellow-color);    */
    border: 0;
    background-color: var(--yellow-color);        
    
}

.action-area{
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    
}

.action-area button{
    width: 30vw;
    border: 0;
    margin: 0;
    font-size: 1rem;
    position: absolute;
    padding: 0;
    
    
}

.action-area button.downlad-button{
    left: 0;
    
}

.action-area button.share-button{
    right: 0;
    
}

#app-area.action-show-photo {
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    45deg,
    #ffffff,
    #ffffff 30px,
    #ffc600 30px,
    #ffc600 60px
  );
  
}

#show-photo .back{
    background-color: var(--yellow-color);
    left: 0;
    padding-left: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#show-photo .add-message.hide, #show-photo .restore.hide{
    display: none;
}

#show-photo .add-message, #show-photo .restore{
    background-color: var(--yellow-color);    
    bottom: 25px;
    right: 0;
    z-index: 30;
    padding-right: 25px;
    padding-top: 5px;
    padding-bottom: 5px;   
    position: fixed;
}

#show-photo .restore{
    width: 50vw;    
}

#show-photo .add-message{
    width: 60vw;        
}

.life-switch-logo{
    width: 45vw;
    position: absolute;
    top: 8vh;
    
}

#area-life-switch-success .life-switch-logo{    
    top: 5vh;    
    width: 35vw;
}

#area-life-switch.area.active, #area-life-switch-success.area.active{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ώστε να πιάσει όλο το ύψος της οθόνης */
    flex-direction: column;    
    
}

#area-life-switch, #area-life-switch-success {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
  
}

.message-area, .message-form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

.message-area{
    margin-bottom: 2.5rem;    
}

.message-area h2{
    font-size: 1.1rem;
    line-height: 1.3rem;
    font-weight: bold;
    
}

#area-life-switch-success .message-area{
    margin-top: 2rem;
    margin-bottom: 0;
}

#area-life-switch-success .message-area, .message-area h2{
    text-align: center;
}

#area-life-switch-success h2{
    font-size: 2.3rem;
    font-weight: bold;    
}

#area-life-switch-success p, #area-life-switch p{
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.7rem;
}

#area-life-switch-success p{
    padding-bottom: 1rem;
}

#area-life-switch-success .extra-line{
    padding-top: 0.5rem;    
    text-align: center;
    padding-bottom: 9rem;
}

.take-photo{
    width: 20vw;
}

#message{
    width: 70vw;
    font-size: 1.5rem;
    padding: 0.5rem;
    background-color: #fddf96;
    border: 0;
    border-radius: 10px;
    text-align: center;
    color: #ffffff;    
}  

#submit{
    font-size: 1.1rem;    
    font-weight: bold;        
    border: 3px solid #ffffff;
    border-radius: 10px;
    padding: 5px 10px;
}

.message-form-success, .message-form.inactive{
    display: none;
}

.message-form-success.active{    
    display: block;
}

.message-form-success.active p{
    text-align: center;
}

#area-life-switch-success, #area-life-switch{
    position: relative;
}

#area-life-switch-success{
    overflow: hidden;
}

#app-area.action-area-life-switch, #app-area.action-area-life-switch{
    overflow: hidden;    
    height: 100vh;
    
}

#app-area.action-area-life-switch-success{
    height: 100vh;    
    overflow: hidden;    
    
}

#area-life-switch-success.area.active{
    height: 90vh!important;    
    overflow: hidden;    
    
}

#area-life-switch-success .speudo-line, 
#area-life-switch .speudo-line{
    height: 0.8rem;
}

#area-life-switch-success .footer-effect, 
#area-life-switch .footer-effect{
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0.5rem;
    z-index: 10;
}

#area-life-switch-success .back, 
#area-life-switch .back{
    bottom: 4.5rem;
}

#area-life-switch-success .bottom-bottle, 
#area-life-switch .bottom-bottle{
    position: fixed;
    z-index: 15;
    width: 25vw;
    height: auto;
    bottom: 0.25rem;    
    right: 10px;
}

.jconfirm .jconfirm-holder{
    width: 80%;
    margin: 0 auto;
}
.jconfirm-box{text-align: center;}
.jconfirm.jconfirm-light .jconfirm-box{background-color: var(--popup-background-color) !important; border: 1px solid color: var(--popup-color);}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content, .jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll{ min-height: 60px;}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{color: var(--popup-color) !important; background-color: transparent !important;}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons{text-align: center; float: none!important;}
.jconfirm-title-c{font-family: 'Sofia Sans Condensed', sans-serif; line-height: 1.5; font-weight: 400; color: var(--popup-color);}
.jconfirm-content{font-family: 'Sofia Sans Condensed', sans-serif; font-weight: 400; color: var(--popup-color);}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;    
}