/* CSS Document */
/*
Theme Name: Dansatori
Theme URI: https://creare.website/
Author: https://creare.website/
Description: Site creat pentru Ansamblul de dans Basarabenii.
Version: 1.7 (COMPLET - Include Stiluri Pagini Repertuar)
*/

/* =RESET & CORE
-------------------------------------------------------------- */
html { color:#000; background:#FFF; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td,main,article,section,header,footer,nav,details,summary { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var { font:inherit; }
del,ins { text-decoration:none; }
li { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
main, header, footer, section, article, nav, details, summary { display: block; }

@font-face {
    font-family: myFont;
    src: url(fonts/segoe_print_4.ttf);
    font-display: swap;
}

/* =WORDPRESS & ALIGNMENT
-------------------------------------------------------------- */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption img { border: 0 none; height: auto; margin:0; max-width: 98.5%; padding: 0; width: auto; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.hidden { display:none !important; }

/* =STRUCTURA SITE
-------------------------------------------------------------- */
#pageWrapper { width:100%; min-height: 100vh; }
#logoContent { max-width:1200px; margin:0 auto; }
#logo { text-align:center; padding:20px 0; }
    
.separator {
    height:125px; margin-top:20px;
    background: #391d1d;
    background: linear-gradient(to right, #391d1d 0%,#643232 50%,#643232 50%,#391d1d 100%,#643232 100%);
}

.section { max-width:1200px; margin:20px auto 0 auto; }
.desktop { display:block; }
.mobile { display:none; }
.desktop, .mobile, .all, .google_map { margin:0 4%; }

/* =TYPOGRAPHY & HEADINGS
-------------------------------------------------------------- */
section h1, article h1, header h1, .singleRepertuar h1 {
    text-align:center;
    font-family:myFont, sans-serif;
    font-size: 24px;
    margin: 20px auto;
    font-weight:bold;
    text-transform:uppercase;
    color: #3D1F1F;
    line-height: 1.3;
}

section h2, .section_name {
    text-align:center;
    font-family:myFont, sans-serif;
    font-size: 20px;
    margin: 10px auto;
    font-weight:bold;
    text-transform:uppercase;
    color: #3D1F1F;
}

section p {
    font-family:myFont, sans-serif;
    font-size:16px;
    text-align: left;
    text-indent: 3em;
    line-height:28px;
}

.hr_top { background:url(img/hr_top.svg) no-repeat top center; height:33px; border:none !important; margin: 20px 0 10px 0; }
.hr_bottom { background:url(img/hr_bottom.svg) no-repeat top center; height:33px; border:none !important; margin: 10px 0 20px 0; }
.hr_top_2 { background:url(img/hr_top_2.svg) no-repeat top center; height:29px; border:none !important; }
.hr_bottom_2 { background:url(img/hr_bottom_2.svg) no-repeat top center; height:29px; border:none !important; }
.section_name_2 { text-align:center; font-family:myFont; font-size:16px; margin:-10px auto; font-weight:bold; text-transform:uppercase; color: #fff; }

/* =BUTOANE
-------------------------------------------------------------- */
.btn_rep {
  border-radius: 60px;
  font-family: myFont, sans-serif;
  color: #FFFFFF;
  background-color: #5d2f2f;
  border:1px solid #5d2f2f;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  font-weight:bold;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn_rep:hover { background: #FFFFFF; color: #5d2f2f; text-decoration: none; }

.call_btn {
    height:40px; border-radius:8px; padding:7px 10px; margin: 10px;
    border:1px solid #F33E4D; background-color:#F33E4D;
    cursor:pointer; color:white; font-weight: bold; width: auto;
}
.form_btn { height:40px; border-radius:8px; padding:0 10px; margin:10px; border:1px solid #43C36B; width: 80%; max-width: 300px; }

/* =INTRO CONTENT
-------------------------------------------------------------- */
.intro_ul { font-family:myFont; line-height:50px; font-size:20px; color:#3d1f1f; }
.intro_text { font-family:myFont; line-height:40px; font-size:18px; color:#3d1f1f; text-indent:0px; text-align:left !important; }

/* =CTA GRID (INTRO PĂTRĂȚELE 2x2)
-------------------------------------------------------------- */
.cta-grid-fix { margin: 40px auto; padding: 0 15px; max-width: 900px; }
.cta-row-fix { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.cta-card-fix {
    background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 25px 15px;
    width: 46%; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s; display: flex; flex-direction: column; align-items: center; min-height: 220px;
}
.cta-card-fix:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #5d2f2f; }
.cta-card-fix h4 { border-bottom: none !important; margin: 0 0 10px 0 !important; font-size: 18px !important; color: #3D1F1F; font-family: myFont, sans-serif; line-height: 1.3; font-weight: bold; text-transform: uppercase; }
.cta-card-fix p { font-size: 14px !important; color: #666; margin-bottom: 20px !important; text-indent: 0 !important; text-align: center !important; flex-grow: 1; font-family: sans-serif !important; }
.cta-card-fix .btn_rep { margin-top: auto; font-size: 14px; }

/* =ABOUT US SYSTEM (CUM LUCRAM)
-------------------------------------------------------------- */
.about_us_system_text { font-family:myFont; color:#FFFFFF; font-size:16px; display: block; line-height: 1.2; }
.indicator { margin:15px 0 7px 0; max-width: 40px; height: auto; }
.process-icon { width: 80px; height: 80px; object-fit: contain; margin-bottom: 10px; transition: transform 0.3s; }
.process-icon:hover { transform: scale(1.1); }
.process-dotted-line { border-top:3px dotted white; margin:0 12% 20px 12%; opacity: 0.7; }
.process-cell { width: 25%; padding: 10px; vertical-align: top; }
.process-link { color: white; text-decoration: none; transition: opacity 0.3s; }
.process-link:hover { opacity: 0.8; text-decoration: underline; }

/* =FAQ MODERN
-------------------------------------------------------------- */
details.gs-acc { border-bottom: 1px solid #ddd; margin-bottom: 15px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
summary.gs-acc__btn { cursor: pointer; padding: 15px; font-family: myFont, sans-serif; font-size: 16px; font-weight: bold; color: #3D1F1F; list-style: none; display: flex; justify-content: space-between; align-items: center; background-color: #fcfcfc; border-radius: 5px; transition: background 0.3s; }
summary.gs-acc__btn:hover { background-color: #f0f0f0; }
summary.gs-acc__btn::-webkit-details-marker { display: none; }
.gs-acc__panel { padding: 20px; border-top: 1px solid #eee; color: #555; line-height: 1.6; background: #fff; text-align: left; }
.gs-acc__panel p { text-indent: 0; margin-bottom: 10px; font-family: sans-serif; }
.gs-icon { font-size: 24px; font-weight: normal; color: #5d2f2f; }
details[open] summary ~ * { animation: slideDown .3s ease-in-out; }
@keyframes slideDown { 0% {opacity: 0; transform: translateY(-10px);} 100% {opacity: 1; transform: translateY(0);} }

/* =ABOUT SECTION STYLES
-------------------------------------------------------------- */
.about-text-cell { padding: 0 20px; text-align: justify; vertical-align: middle; }
.about-img { border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s; }
.about-img:hover { transform: scale(1.02); }
.closing-cta { text-align: center; font-weight: bold; margin-top: 20px; font-size: 18px; color: #3D1F1F; font-family: myFont, sans-serif; }

/* =SINGLE PAGE & CONTACT STYLES
-------------------------------------------------------------- */
.singleRepertuar { margin:0 auto; padding:0 20px; }
.content-body img { max-width: 100%; height: auto; border-radius: 5px; }
.contact-highlight a { font-size: 20px; font-weight: bold; color: #000; text-decoration: none; }
.contact-email a { font-size: 16px; color: #333; text-decoration:none; }
.modal-content-wrapper { position: relative; padding: 20px; max-width: 500px; margin: 0 auto; }
.modal-social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.modal-social-item a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: white; font-size: 12px; }
.modal-social-item img { margin-bottom: 5px; }
.fixed_button { position:fixed; bottom:20px; right:20px; width:80px; height:80px; z-index:9998; }
.fixed_form { position:fixed; bottom:0px; right:0px; width:100%; z-index:9999; border:0px solid #43C36B; background-color:#212529; text-align:center; }

/* =REPERTUAR & SERVICII GRID
-------------------------------------------------------------- */
.rep-pad { padding: 15px; }
.title_rep { font-size: 18px; height: 50px; font-weight:bold; text-align:center; text-indent: 0em; overflow: hidden; }
.desc_rep { font-size: 16px; line-height: 25px; margin: 12px 0; text-indent: 0; padding: 0 10px; text-align: center; }
.img_rep { margin:0 0 10px 0; width:90%; border-radius: 5px; }

/* =WHY US
-------------------------------------------------------------- */
.why_us_ul { font-family:myFont; line-height:50px; font-size:20px; color:#FFFFFF; margin-left:20%; }
.why_us_text { font-family:myFont; line-height:40px; font-size:18px; color:#FFFFFF; text-indent:0px; text-align:left; }

/* =PRICE & PARTNERS STYLES
-------------------------------------------------------------- */
.price-table { width: 100%; border: 0; margin-bottom: 30px; }
.price-row { border-bottom: 1px solid #eee; }
.price-img-cell { width: 30%; vertical-align: top; text-align: center; padding: 20px; }
.price-text-cell { width: 70%; vertical-align: top; padding: 20px; }
.price-img { width: 100%; max-width: 220px; height: auto; border-radius: 5px; }
.price-desc { font-family: myFont, sans-serif; font-size: 18px; line-height: 1.6; color: #000; text-align: left; }
.btn_price { font-family: myFont, sans-serif; color: #5d2f2f; font-size: 18px; text-decoration: none; font-weight:bold; cursor: pointer; }
.btn_price:hover { text-decoration: underline; color: #000; }
.partner-img-cell { width: 40%; vertical-align: top; text-align: center; padding: 25px; }
.partner-text-cell { width: 60%; vertical-align: top; padding: 25px; }

/* =RECENZII (CLIENTI.PHP)
-------------------------------------------------------------- */
.review-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.2s; }
.review-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.review-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
.review-name { font-weight: bold; color: #365899; font-size: 16px; text-decoration: none; }
.review-stars { color: #FFD700; font-size: 14px; }
.review-text { font-style: italic; color: #333; margin-top: 5px; font-size: 14px; line-height: 1.4; }
.review-date { font-size: 12px; color: #999; text-align: right; margin-top: 10px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; padding: 20px 0; }

/* =PAGE CONTENT STYLES (NOU: Pentru pagini interne ca Dansuri Populare)
-------------------------------------------------------------- */
.page-img-wrapper { text-align: center; margin-bottom: 30px; }
.page-main-img { border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); max-width: 100%; height: auto; }
.page-content-text { text-align: justify; line-height: 1.8; font-size: 16px; }
.page-content-text p { margin-bottom: 15px; text-indent: 0; }
.wiki-link { color: #5d2f2f; text-decoration: underline; }
.wiki-link:hover { text-decoration: none; color: #3d1f1f; }

/* Sectiunea Tradiții */
.traditions-section-title { text-align: center; color: #5d2f2f; margin-bottom: 20px; font-weight: bold; text-transform: uppercase; font-family: myFont, sans-serif; font-size: 20px; }
.traditions-wrapper { text-align: justify; line-height: 1.6; }
.tradition-item { margin-bottom: 15px; }
.tradition-name { color: #3D1F1F; font-size: 18px; display: block; margin-bottom: 5px; font-family: myFont, sans-serif; font-weight: bold; }
.tradition-desc { margin-top: 0; text-indent: 0; }

/* CTA Button Big */
.cta-wrapper {
    display: flex;            /* Activează Flexbox */
    justify-content: center;  /* Centrează butonul orizontal */
    align-items: center;      /* Aliniere verticală */
    width: 100%;              /* Ocupă toată lățimea */
    margin: 40px auto;        /* Spațiere sus/jos */
}

.btn-cta-big {
    display: inline-flex !important; /* Forțăm flex pe buton pentru iconiță */
    align-items: center;             /* Aliniază iconița 📞 cu textul pe verticală */
    justify-content: center;         /* Centrează conținutul în buton */
    padding: 15px 30px;
    font-size: 20px;
    gap: 10px;                       /* Spațiu între 📞 și text */
    text-align: center;
    max-width: 90%;                  /* Să nu iasă din ecran pe mobil */
}

/* =PARTENERI & SERVICII STYLES (NOU)
-------------------------------------------------------------- */
/* Titluri inchise la culoare (fata de cele albe standard) */
.section-title-dark {
    color: #3D1F1F !important;
}

/* Lista de servicii fara buline */
.service-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
}
.service-list li {
    margin-bottom: 8px; /* Spatiu mic intre randuri */
}

/* Casuta de Contacte */
.contact-box {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 25px 20px;
    border-radius: 8px;
    text-align: center;
    margin: 30px 0;
}
.contact-box-title {
    color: #5d2f2f;
    font-family: myFont, sans-serif;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: bold;
}
.contact-box-text {
    margin-bottom: 10px;
    font-size: 18px;
    color: #333;
}

/* Link-uri specifice */
.contact-link-phone {
    color: #F33E4D;
    text-decoration: none;
    font-weight: bold;
}
.contact-link-phone:hover { text-decoration: underline; }

.contact-link-yt {
    color: #365899;
    text-decoration: underline;
}
.contact-link-yt:hover { text-decoration: none; }

/* Butoane mai mici pentru lista de jos */
.btn-small {
    font-size: 14px !important;
    padding: 10px 20px !important;
    margin: 5px !important; /* Sa nu se lipeasca pe mobil */
}

/* Utilitare spatiere */
.mt-20 { margin-top: 20px !important; }
.mb-40 { margin-bottom: 40px !important; }

/* =GOOGLE MAP STYLES
-------------------------------------------------------------- */
#map { height: 500px; width: 100%; margin: 0 auto; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); background-color: #eee; }
.seo-hidden-container { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* =MEDIA QUERIES
-------------------------------------------------------------- */
@media only screen and (max-width:1000px) {
    .separator { height:100px; }
}

@media only screen and (max-width:950px) {
    .separator { height:80px; }
    .intro_ul, .why_us_ul { line-height:40px; font-size:20px; }
    .why_us_ul { margin-left:15%; }
    section p { font-size:16px; }
    .btn_rep { font-size: 16px; }
    .title_rep, .desc_rep { font-size: 16px; }
    
    /* Responsive Price/Partners */
    .price-img-cell, .price-text-cell,
    .partner-img-cell, .partner-text-cell { padding: 15px; }
}

@media only screen and (max-width:680px) {
    .separator { height:50px; }
    .desktop { display:none; }
    .mobile { display:block; }
    .intro_ul { line-height:30px; font-size:16px; text-align:left; margin-left: 10px; }
    .why_us_text { line-height:30px; font-size:16px; margin-left:5%; }
    #logo img { width:70%; }
    #pageWrapper { width:100% !important; }
    .btn_price { font-size:12px; }
    
    /* CTA Grid pe Mobil - 1 coloana */
    .cta-card-fix { width: 100%; margin-bottom: 10px; }
    
    /* About pe Mobil */
    .about-text-cell { padding: 0 10px; text-align: left; }
    .about-img { margin: 15px 0; width: 100% !important; }
    
    /* Price/Partners Stack pe Mobil */
    .price-img-cell, .price-text-cell,
    .partner-img-cell, .partner-text-cell { 
        display: block; width: 100%; text-align: center; padding: 10px;
    }
    .price-desc { text-align: center; }
    .reviews-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .modal-social-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* =VIDEO & UTILS
-------------------------------------------------------------- */
.video-home { margin:0 4%; }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.vid-list-container { width: 92%; overflow: hidden; margin-top: 20px; margin-left:4%; padding-bottom: 20px; }
.vid-list { width: 1344px; position: relative; top:0; left: 0; }
.vid-item { display: block; width: 148px; height: 115px; float: left; margin: 0; padding: 10px; }
.thumb { overflow:hidden; height: 84px; }
.thumb img { width: 100%; position: relative; top: -13px; }
.vid-item .desc { color: #21A1D2; font-size: 15px; margin-top:5px; }
.vid-item:hover { background: #eee; cursor: pointer; }
.arrows { position:relative; width: 100%; }
.arrow-left { color: #fff; position: absolute; background: #777; padding: 15px; left: -25px; top: -130px; z-index: 99; cursor: pointer; }
.arrow-right { color: #fff; position: absolute; background: #777; padding: 15px; right: -25px; top: -130px; z-index:100; cursor: pointer; }
.arrow-left:hover, .arrow-right:hover { background: #CC181E; }

/* =ANIMATII
-------------------------------------------------------------- */
.face { animation: shake 3s cubic-bezier(.36,.07,.19,.97) both; animation-iteration-count: infinite; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }
.face:hover { animation: shake 3s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }
@keyframes shake { 2.5% {transform: translate3d(-1px, 0, 0);} 5% {transform: translate3d(2px, 0, 0);} 7.5% {transform: translate3d(-4px, 0, 0);} 10%{transform: translate3d(4px, 0, 0);} 12.5% {transform: translate3d(-4px, 0, 0);} 15% {transform: translate3d(4px, 0, 0);} 17.5% {transform: translate3d(-4px, 0, 0);} 20% {transform: translate3d(2px, 0, 0);} 22.5% {transform: translate3d(-1px, 0, 0);} 90% {transform: translate3d(-1px, 0, 0);} }

/* =LAZY YOUTUBE
-------------------------------------------------------------- */
.wrapper { max-width: 680px; margin: 60px auto; padding: 0 20px; }
.youtube { background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; }
.youtube img { width: 100%; top: -16.82%; left: 0; opacity: 0.7; }
.youtube .play-button { width: 90px; height: 60px; background-color: red; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px; }
.youtube .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; }
.youtube img, .youtube .play-button { cursor: pointer; }
.youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button:before { position: absolute; }
.youtube .play-button, .youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 ); }
.youtube iframe { height: 100%; width: 100%; top: 0; left: 0; }
.oprit { opacity: 0.4; filter: alpha(opacity=40); cursor:default !important; }
.buttonMeniuOffer { text-decoration-color: red; }