/* Fundal general și font */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 20px;
}

h1 {
    font-size: 36px; /* Forțează aceeași dimensiune peste tot */
    font-weight: bold;
    margin: 10px 0;
	color: purple
	
}

h2 {
    font-size: 22px;  /* Ajustează ca să fie uniform */
    font-weight: normal;
    margin: 10px 0;
	color: purple
}
nav ul li {
    display: inline-block;
    margin-right: 15px;
    background: none !important; /*  Elimină orice fundal */
    padding: 0;
    margin: 0;
    list-style: none;
}


nav ul li a {
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    text-decoration: none;
    color: purple; /* Text mov */
    padding: 10px 15px;
    background: none !important; /*  Elimină fundalul */
    border: none !important;
    box-shadow: none !important;
}

/*  La hover, DOAR textul devine verde */
nav ul li a:hover {
    color: #28f28d   !important;
    background: none !important;
}


/* Container pentru conținut principal */
/* Stil pentru containerul drop-down */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Ascunde inițial meniul drop-down */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 200px; /* Lățimea drop-down-ului */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Umbra */
    z-index: 1000; /* Asigură că apare peste alte elemente */
}

/* Stil pentru link-urile din drop-down */
.dropdown-content a {
    padding: 10px 15px;
    text-decoration: none;
    display: block;
	color: purple; /* Înlocuiește cu culoarea dorită a textului */
}

/* Schimbă culoarea link-urilor la hover */
.dropdown-content a:hover {
    background-color: #28f28d ; /* Culoare mai închisă la hover */
    color: white; /* Text alb la hover */
}

/* Afișează meniul la hover */
.dropdown:hover .dropdown-content {
    display: block;
}
/*  Stil pentru secțiunile din pagina Servicii */
.pagina-servicii section {
    padding: 50px;
    margin: 30px auto; /* Spațiu între secțiuni */
    max-width: 80%;
    background-color: #f7f7f7;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

/*  Stil pentru titlurile din pagina Servicii */
.pagina-servicii section h2 {
    color: #5a3a80;
    text-align: center;
    margin-bottom: 15px;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 220px; /* Spațiu între poză și text */
    width: 80%;
    margin: auto;
    padding: 20px;
}

/* Imaginea profilului */
.image-container img {
    width: 300px;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

/* Secțiunea de introducere */
.intro {
    max-width: 50%;
    font-size: 18px;
    color: #333;
    text-align: left;
}
 /* Centrează titlurile pe toate paginile */
h1, h2 ,h4{
    text-align: center;
    margin: 10px 0;
}
.acasa {
    
    background-size: cover;
    background-position: center;
    height: 125vh;
    display: flex;
    align-items: flex-start; /* Aliniază textul sus */
    justify-content: flex-end; /* Mută textul în dreapta */
    text-align: right; /* Textul să fie aliniat la dreapta */
    padding: 20px 40px; /* Reduce padding-ul sus pentru a urca textul */
    color: purple;
    position: relative;
}

.overlay {
    background-color:0;
    padding: 20px;
    border-radius: 10px;
}


p {
    font-size: 20px;  /*paragraf mai mare*/
}
.header-top {
    display: flex;
    justify-content: space-between; /* Elemente la extremități */
    align-items: center; /* Aliniere verticală */
    padding: 10px 40px; /* Ajustează padding-ul */
}

.phone-number {
    font-size: 18px;
    font-weight: bold;
    color: #a2288c;
}

.auth-links {
    font-size: 16px;
    font-weight: bold;
}

.auth-links a {
    text-decoration: none;
    color: #a2288c; /* Mov */
    margin-left: 10px; /* Spațiu între link-uri */
}

.auth-links a:hover {
    text-decoration: underline; /* Opțional */
}


/*  Ajustează dimensiunea câmpurilor Nume și Telefon */
input[type="text"],
input[name="telefon"],
input[id="telefon"] {
    width: 250px; /* Dimensiune fixă */
    max-width: 250px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/*  Ajustează dimensiunea câmpului Email */
input[type="email"] {
    width: 250px; /* Setează o dimensiune mai mică */
    max-width: 250px;
    padding: 8px;
    font-size: 16px;
}

/*  Ajustează dimensiunea casetei de Mesaj */
textarea {
    width: 300px; /* Lățime fixă */
    height: 100px; /* Înălțime ajustată */
    resize: vertical;
    padding: 8px;
    font-size: 16px;
}

.contact-section {
    width: 20%; 
    text-align: left;
    margin-left: 5%; /* Mută secțiunea mai spre stânga */
}

/* Container pentru ambele secțiuni */
.contact-container {
    display: flex;
    justify-content: center; /* Centrare pe pagină */
    align-items: flex-start; /* Aliniere la început */
    gap: 50px; /* Spațiu între ele */
    max-width: 80%;
    margin: auto;
    padding: 20px;
}

/* Secțiunea „Unde mă poți găsi” */
.contact-section {
    flex: 2; /* Îi permite să ocupe jumătate din spațiu */
    text-align:left; /* Aliniere la stânga */
}

/* Secțiunea „Formular de Contact-aliniere la dreapta paginii” */
.formular-contact {
    margin-left: auto;
    margin-right: 50px; /* Ajustează această valoare */
}

/* Stilizare inputuri pentru uniformitate */
.form-section input,
.form-section textarea {
    width: 100%; /* Lățime completă */
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Stilizare buton */
.form-section button {
    padding: 10px 20px;
    background-color: #6a0dad;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.form-section button:hover {
    background-color: #5a0cad;
}
/*Pagina Acasa- despre tine, despre mine*/
.despre-tine {
    font-size: 24px; /* Mărimea textului  */
    font-style: italic; /* Face textul italic */
    color: purple; /* Schimbă culoarea (se poate alege oricand alt cod de culoare) */
	font-weight:bold;
	text-decoration:underline;/* Subliniere */
}
.despre-mine {
    font-size: 24px; 
    font-style: italic; 
    color: purple;
    font-weight: bold;
    text-decoration: underline; /* Sublinierea textului */
    margin-bottom: 5px; /* Spațiere față de următorul paragraf */
}

.despre-tine p:last-child {
    margin-bottom: 5px; /* Reducerea spațiului după ultimul paragraf din Despre tine */
}
.titlu-despre {
    font-family: Georgia, serif;
    color: purple;
    font-size: 24px;
}

/* Containerul-despre mine */
.despre-mine-container {
    margin: 10px 40px; /* Reduci spațiul de sus */
    padding: 20px;
    line-height: 1; 
    max-width: 80%;
}

/* Fundal animat /imagini/fundal-relaxant-acasa*/
.animated-background {
    position: relative;
    width: 100vw;
    height: calc(100vh - 80px); /* Ajustează înălțimea pentru bara de navigare */
    background-image: url('imagini/fundal-relaxant.jpg'); /* Imaginea de fundal */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    opacity: 0;
    transform: scale(0.2) translate(-100%, -100%); /* Imaginea începe mică și în colț */
    animation: growIn 1.5s ease-out forwards;
}

/* Definirea animației */
@keyframes growIn {
    0% {
        opacity: 0;
        transform: scale(0.2) translate(-100%, -100%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

/* Poziționare text peste fundal */
.overlay {
    position: absolute;
    top: 8%;  /* Scade valoarea pentru a urca textul mai sus */
    right: 5%;
    background: none; /* Fundal transparent */
    padding: 15px;
    border-radius: 10px;
    text-align: right; /* Aliniere text la dreapta */
}

/* Stilizare text */
.overlay h1 {
    color: purple;
    font-size: 28px;
    font-weight: bold;
}

.overlay p {
    color: purple;
    font-size: 18px;
}
/*pagina Contact- poza la-psiholog - stilizare */
.animated-contact-background {
    position: absolute; /* Fixează imaginea în fundal */
    top: 0; /* Începe de sus */
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('imagini/La-psiholog.jpg'); /* Fundalul */
    background-size: contain; /* Se asigură că întreaga imagine se vede */
    background-position:center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(0.2) rotate(-30deg) translate(100%, -100%); /* Apare mică, rotită, în colț dreapta sus */
    animation: unfoldBackground 1.5s ease-out forwards;
    z-index: -1; /* Imaginea va fi în spatele textului */
}

/* Animația de desfășurare */
@keyframes unfoldBackground {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(-30deg) translate(100%, -100%);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0) translate(0, 0);
    }
}
.social-buttons {
    position: absolute;
    top: 250px; /* Ajustează pentru a le poziționa mai sus sau mai jos */
    left: 20px; /* Ajustează pentru a le muta stânga/dreapta */
    z-index: 10; /* Asigură că sunt peste imagine */
    display: flex;
    gap: 10px;
}

/* Stil pentru butoanele de social media */
.social-buttons img {
    width: 60px;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

/* Efect hover */
.social-buttons img:hover {
    transform: scale(1.1);
}


/*  Container pentru formular */
form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-align: left;
    max-width: 400px;
    width: 100%;
}

/*  Stil pentru câmpurile de input */
input {
    width: 100%;
    padding: 8px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/*  Stil pentru buton */
button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background-color: #0056b3;  /*Pentru butoanele de la plata*/
}

/*  Lista rezervărilor */
ul {
    list-style: none;
    padding: 0;
}

li {
    background: #fff;
    padding: 10px;
    margin: 5px;
    border-radius: 4px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.container {      /*Aranjarea in pagina pentru Autentificare*/
    display: flex;
    justify-content: center; /* Centrează pe pagină */
    margin-top: 50px;
}

table {
    border-collapse: collapse;
}

td {
    padding: 20px; /* Spațiere între coloane */
    vertical-align: top; /* Aliniere sus */
}

.auth-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 300px; /* Lățime fixă pentru fiecare secțiune */
    text-align: center;
}

.auth-box h3 {
    color: #4a148c; /* Mov închis */
}

.auth-box input {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.auth-box button {
    width: 100%;
    padding: 10px;
    background: purple;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.auth-box button:hover {
    background: purple;
}
.form-container {
    display: flex;
    justify-content: center; /* Centrează conținutul pe pagină */
    gap: 50px; /* Adaugă un spațiu de 50px între ele */
}

.form-box {
    width: 350px;
    padding: 20px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

 /*Stiluri doar pentru formularul de plată */
.form-plata {
    background-color: #ede7f6; /* Mov foarte deschis */
    border: 2px solid #b39ddb; /* Mov mediu pentru contur */
    padding: 20px; /* Spațiere interioară */
    border-radius: 10px; /* Colțuri rotunjite */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Efect de umbră */
}
/* Stiluri pentru casetele de input (date și oră) doar în formularul de plată */


.form-plata select {
    background-color: #ede7f6;
    border: 2px solid #b39ddb;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
    color: #4a148c;
    height: 38px;
}

/* Stiluri doar pentru formularul de plată */
.form-plata {
    background-color: #ede7f6; /* Mov foarte deschis */
    border: 2px solid #b39ddb; /* Mov mediu pentru contur */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px; /* Lățime maximă */
    margin: auto; /* Centrare pe pagină */
}

/* Aranjare în două coloane */
.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

/* Etichete și inputuri aliniate corect */
.form-group {
    display: flex;
    flex-direction: column;
    width: 48%; /* Fiecare câmp ocupă 48% din lățime */
}

/* Inputurile stilizate */
.form-row {
    display: flex;
    gap: 10px;
}

.form-group {
    flex: 1;
}
.form-group input,
 .form-group select {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 2px solid #b39ddb;
    border-radius: 5px;
    background-color: #f3e5f5;
    color: #4a148c;
	
}

/* Buton stilizat */
button {
    width: 100%;
    padding: 10px;
    font-size: 18px;
    background-color: #673ab7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #5e35b1;
}
.lista-programari {
    list-style: none;
    padding: 0;
}

.lista-programari li {
    background: #f3e5f5;
    border-left: 5px solid #9c27b0;
    margin: 10px 0;
    padding: 10px;
    font-size: 16px;
}
/* Containerul principal */
.dashboard-container {
    text-align: center;
    margin-top: 20px;
}

/* Stil pentru textul "Bun venit, Name!" */
.welcome-message {
    font-size: 24px;
    font-weight: bold;
    color: #800080; /* Mov închis */
    margin-bottom: 30px;
    text-transform: none;
}

/* Organizare secțiunea de programări */
.programari-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

/* Stilizare tabel programări */
.programari-section table {
    width: 70%;
    border-collapse: collapse;
}

/* Coloana titlului */
.programari-title {
    width: 30%;
    font-size: 20px;
    font-weight: bold;
    color: #4B0082; /* Mov regal */
    text-align: left;
    padding-right: 20px;
}

/* Lista programărilor */
.lista-programari {
    list-style: none;
    padding: 0;
}

.lista-programari li {
    background: #f4e1ff; /* Mov deschis pastel */
    border-left: 6px solid #9933cc; /* Mov aprins */
    padding: 12px;
    margin: 6px 0;
    border-radius: 10px;
    font-size: 18px;
    text-align: left;
    font-weight: bold;
    color: #4B0082; /* Mov regal */
    transition: all 0.3s ease-in-out;
}

/* Efect hover pe programări */
.lista-programari li:hover {
    background: #e1c4ff;
    transform: scale(1.03);
    cursor: pointer;
}
/*Tabela pe care o vede admin-ul*/
.tabel-programari {
    width: 90%;
    margin: 30px auto;
    border-collapse: collapse;
    font-size: 16px;
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.2);
}

.tabel-programari th, .tabel-programari td {
    padding: 12px 15px;
    border: 1px solid #d0b3e6;
    text-align: center;
}

.tabel-programari th {
    background-color: #e8d7f7;  /* Mov foarte deschis */
    color: #4a148c;             /* Mov închis */
    font-weight: bold;
}

.tabel-programari td a {
    color: #7b1fa2;
    text-decoration: none;
}

.tabel-programari td a:hover {
    text-decoration: underline;
    color: #4a148c;
}
/* stilizare carduri din Blog -articolele dinamice*/
.flip-container {
  perspective: 1000px;
  width: 280px;
  height: 370px;
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-container:hover .flip-card {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
}

.flip-front img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-bottom: 1px solid #ccc;
}

.flip-front h3 {
  color: #800080;
  margin: 10px 0 5px;
}

.flip-front p {
  color: #4B0082;
  font-size: 14px;
}

.flip-back {
  transform: rotateY(180deg);
  background-color: #f3e5f5;
  color: #4B0082;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.btn-citeste {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background-color: #800080;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
}
.admin-nav-hidden nav {  /*Sa imi ascunda in admin.php  bara de navigare*/
    display: none !important;
}
/*Pagina Servicii-stilizare pentru titluri si detalii*/
.titlu-cu-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 10px;
}

.titlu-cu-link h2 {
    margin: 0;
    font-size: 24px;
    color: #6a0dad;
}

.link-detalii {
    font-size: 16px;
    text-decoration: none;
    color: #6a0dad;
    font-weight: bold;
    border: 1px solid #6a0dad;
    padding: 4px 12px;
    border-radius: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.link-detalii:hover {
    background-color: #6a0dad;
    color: white;
}
/*Titlu relevant pentru SEO-in pagina Despre mine*/
.h1-seo {
    text-align: center;
    font-size: 22px;
    color: #800080;
    margin: 20px auto 0px auto;
}
/*Am mutat bara de navigare sus in pagina pentru o stilizare mai frumoasa*/
.main-nav ul {
  display: flex;
  gap: 25px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.site-title {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 20px;
  color: purple;
}
/*Pentru pagina de plata,casete*/
.form-plata input[type="text"][name="data_programarii"],
.form-plata select[name="ora_programarii"] {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 2px solid #800080; /* Bordura mov intens, la fel ca celelalte */
    border-radius: 10px;
    background-color: #f3e5f5;
    color: #4a148c;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    height: 38px;
    box-sizing: border-box;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    flex: 1;
}

#data,
#ora {
    padding: 10px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
}

/* ============================================================
   HEADER + MENIU (desktop + hamburger pe mobil)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
img  { max-width: 100%; }

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 30px;
    position: relative;
}

.main-nav { margin: 0 auto; }          /* centrat, fara margin-left fix */

.main-nav ul {
    display: flex;
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

/* butonul hamburger: ascuns pe desktop */
.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #d9bfd8;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.menu-toggle:hover { background: #f7eef7; }
.menu-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background: #800080;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- MOBIL ---------- */
@media (max-width: 900px) {

    body { padding: 10px; }

    .header-top {
        padding: 8px 4px;
        flex-wrap: wrap;
    }

    .phone-number { font-size: 16px; }

    .menu-toggle { display: flex; }

    /* meniul devine o lista sub bara, pe toata latimea */
    .main-nav {
        display: none;
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        margin: 0;
    }
    .main-nav.active { display: block; }

    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border: 1px solid #ece1e5;
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(67, 44, 62, .10);
        overflow: hidden;
    }

    .main-nav ul li {
        display: block;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        border-bottom: 1px solid #f0e7e2;
    }
    .main-nav ul li:last-child { border-bottom: 0; }

    .main-nav ul li a {
        display: block;
        padding: 14px 18px;
    }

    .site-title h1 { font-size: 24px; }
    .site-title h2 { font-size: 17px; margin-top: 0 !important; }
}