/* style.css - Updated with iOS Glassmorphism Effect */

/*fonts*/

@font-face {
  font-family: "Glo Sans";
  src: url("/fonts/Glo-Sans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glo Sans";
  src: url("/fonts/Glo-Sans-Book.ttf") format("truetype");
  font-weight: 400; 
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glo Sans";
  src: url("/fonts/Glo-Sans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glo Sans";
  src: url("/fonts/Glo-Sans-Bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  font-family: "Glo Sans", Helvetica, Arial, sans-serif;
}

body { 
    margin: 0; 
    padding: 0; 
    /* Un fundal gradient fluid si elegant pentru a pune in valoare efectul de sticla */
/*
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%, #a8edea 100%);
    background-attachment: fixed;
*/
    color: #1c1c1e; 
    min-height: 100vh;
    background-image: url(imagini/background-desktop.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Optional: Adaugam niste "bule" de culoare in fundal pentru un efect de sticla si mai spectaculos */
/*
body::before {
    content: '';
    position: fixed;
    top: -10%; left: -10%; width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(255,182,193,0.4) 0%, rgba(255,255,255,0) 70%);
    z-index: -1;
}
body::after {
    content: '';
    position: fixed;
    bottom: -10%; right: -10%; width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(173,216,230,0.5) 0%, rgba(255,255,255,0) 70%);
    z-index: -1;
}
*/

/* Header */
header { 
    background: rgba(255, 255, 255, 0.08); 
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px); /* Pentru Safari/iOS */
    padding: 15px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}
header img {
    display: inline-block;
    width: 160px;
    height: auto;
}
.menu-links a { color: #FE5000; text-decoration: none; font-weight: 600; margin: 0 5px; }

/* Login Container (Glass) */
.login-body { display: flex; justify-content: center; align-items: center; height: 100vh; }
.login-container { 
/*    background: rgba(255, 255, 255, 0.6); */
    background: rgba(255, 102, 12, 0.29);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgb(112, 44, 11);
    padding: 40px 30px; 
    border-radius: 24px; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 
    width: 90%; 
    max-width: 400px; 
    text-align: center; 
}
.login-container h1 {
    color: #fff;
    font-weight: 500;
}

/* Search Container */
.search-container { padding: 30px 20px; max-width: 800px; margin: 0 auto; position: relative; }

/* BARA DE CĂUTARE - iOS Glass */
#searchInput { 
    width: 100%; 
    padding: 16px 24px; 
    font-size: 1.2rem; 
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
/*    border: 1px solid rgba(255, 255, 255, 0.7);*/
    border: 2px solid #e95b05;
    border-radius: 12px;
    outline: none; 
    color: #fff;
    transition: all 0.3s ease; 
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
}
#searchInput:focus { 
    background: rgba(255, 255, 255, 0.16);
    border-color: #e95b05;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}
#searchInput::placeholder { color: #f6f6f6; }

/* CHENARUL CU REZULTATE - iOS Glass */
.results-box { 
    display: none; 
    position: absolute; 
    top: 95px; 
    left: 20px; 
    right: 20px; 
    background: rgba(255, 255, 255, 0.08); 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 2px solid #e95b05;
    border-radius: 12px; 
    max-height: 400px; 
    overflow-y: auto; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); 
    z-index: 10; 
}
.result-item { 
    padding: 16px 20px; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); 
    cursor: pointer; 
    font-size: 1.1rem; 
    transition: background 0.2s ease;
    color: #f6f6f6;
}
.result-item:hover, .result-item:active { 
    background: rgba(255, 255, 255, 0.24); /* Efect subtil la apasare */
}
.result-item:last-child { border-bottom: none; }

.text-green { color: #34c759; font-weight: 600; } /* Verde nativ iOS */
.text-red { color: #ff3b30; font-weight: 600; }   /* Rosu nativ iOS */

/* POPUP / MODAL DATE INVITAT - iOS Glass */
.modal { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.3); /* Fundalul paginii se intuneca putin */
    backdrop-filter: blur(90px);
    -webkit-backdrop-filter: blur(90px);
    justify-content: center; align-items: center; z-index: 1000; padding: 20px; 
}
.modal-content { 
    background: rgba(255, 255, 255, 0.16); 
    backdrop-filter: blur(90px);
    -webkit-backdrop-filter: blur(90px);
    border: 2px solid #e95b05;
    padding: 30px; 
    border-radius: 12px; 
    width: 100%; 
    max-width: 600px; 
    position: relative; 
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2); 
}
.modal-content h3 {
    margin-top: 0px;
    color: #fff;
}
.close-btn { 
    position: absolute; 
    top: 20px; 
    right: 25px; 
    font-size: 28px; 
    cursor: pointer; 
    color: #f6f6f6; 
    transition: color 0.2s;
}
.close-btn:hover { color: #fff; }
.modal-actions { margin-top: 25px; display: flex; gap: 12px; flex-direction: column; }
#modalDetails h3 { margin-top: 0; font-size: 1.5rem; color: #fff; }
/* Aliniere Iconite si Text in Popup */
.modal-info-row {
    display: flex;
    align-items: center;
    gap: 15px; /* Spatiul dintre iconita si text */
    font-size: 1.2rem;
    color: #f6f6f6;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-info-row:last-child {
    border-bottom: none;
}

/* Prevenim deformarea iconitelor SVG */
.modal-info-row svg {
    flex-shrink: 0;
}

/* Butoane - Stil iOS */
.btn { 
    width: 100%; 
    padding: 16px; 
    font-size: 1.1rem; 
    border: none; 
    border-radius: 12px; 
    cursor: pointer; 
    color: white; 
    font-weight: 500;
    transition: transform 0.1s ease, opacity 0.2s;
}
.btn-success { background: #34c759; }
.btn-danger { background: #ff3b30; }
.btn-success:active, .btn-danger:active { transform: scale(0.97); opacity: 0.9; } /* Efect de apasare (tap) */
.login-container .btn { background: #ff6b0c; margin-top: 20px; }

form input { 
    width: 100%; padding: 14px; margin-top: 10px; 
    border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; 
    box-sizing: border-box; background: rgba(255,255,255,0.8); outline: none;
    font-weight: 400;
}
form input::placeholder { color: #2c2c2c; font-weight: 400; }
form input:focus { border-color: #e95b05; }

/* Container Util */
.container { max-width: 800px; margin: auto; padding: 20px; }
.card { 
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 25px; 
    border-radius: 20px; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 
}
.mt-20 { margin-top: 20px; } 
.mb-20 { margin-bottom: 20px; display: inline-block; background: rgba(0, 0, 0, 0.05); color: #007aff; padding: 10px 15px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.success { background: rgba(52, 199, 89, 0.15); color: #248a3d; padding: 15px; border-radius: 12px; margin-bottom: 15px; border: 1px solid rgba(52, 199, 89, 0.3);}
.error { background: rgba(255, 59, 48, 0.15); color: #c92a20; padding: 15px; border-radius: 12px; margin-bottom: 15px; border: 1px solid rgba(255, 59, 48, 0.3);}

/* Toast Notification - iOS Style */
.toast { 
    visibility: hidden; 
    min-width: 250px; 
    background: rgba(28, 28, 30, 0.85); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #fff; 
    text-align: center; 
    border-radius: 30px; 
    padding: 16px 24px; 
    position: fixed; 
    z-index: 1001; 
    left: 50%; 
    bottom: 40px; 
    font-size: 16px; 
    font-weight: 500;
    transform: translateX(-50%); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.toast.show { visibility: visible; animation: fadein 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), fadeout 0.4s 2.5s ease-in; }

@keyframes fadein { from { bottom: 0; opacity: 0; transform: translate(-50%, 20px); } to { bottom: 40px; opacity: 1; transform: translate(-50%, 0); } }
@keyframes fadeout { from { bottom: 40px; opacity: 1; } to { bottom: 0; opacity: 0; } }

/* --- Personalizare Bară de Scroll (iOS/Glassmorphism Style) --- */

/* Lățimea bazei de scroll */
.results-box::-webkit-scrollbar {
    width: 10px;
}

/* "Șina" pe care culisează bara (o lăsăm transparentă pentru a nu strica efectul de sticlă) */
.results-box::-webkit-scrollbar-track {
    background: transparent;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Bara efectivă (Thumb-ul) */
.results-box::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* O nuanță subtilă, semi-transparentă */
    border-radius: 10px; /* Îi facem colțurile rotunde */
    border: 3px solid rgba(255, 255, 255, 0); /* Adăugăm un mic spațiu invizibil în jurul ei */
    background-clip: padding-box; /* Face ca marginea de mai sus să acționeze ca un padding */
}

/* Când utilizatorul ține degetul / mouse-ul pe bară */
.results-box::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* Media Queries pentru asezarea pe landscape (cand Fold-ul este deschis) */
@media (min-width: 600px) {
    .modal-actions { flex-direction: row; }
}
@media screen and (max-width: 480px) {
    body {
        background-image: url(imagini/background-mobile.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    }
    
}