/* =========================================================
   STYLE.CSS – HIBAMENTES, DUPLIKÁCIÓ NÉLKÜL
   (A meglévő stílusok + az ügyfél "rajz szerinti" layout)
   FONTOS: Ebben a verzióban NINCS client-wrap / client-grid régi rész,
           csak a végleges: .client-layout / .client-card / .client-span-2
   ========================================================= */

/* Alap beállítások */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;max-width:100%;overflow-x:hidden}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#1f2937 0,#020617 40%,#000 100%);
  color:#e5e7eb;
  min-height:100vh;
}

img{max-width:100%;height:auto}

/* Fejléc */
header{
  background:linear-gradient(90deg,#020617,#111827,#0f172a);
  border-bottom:1px solid #1f2937;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
header .topline{
  max-width:1200px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:.95rem;
  flex-wrap:wrap;
}
header .topline strong{font-weight:600}
header a{
  color:#e5e7eb;
  text-decoration:none;
  font-size:.95rem;
  margin-left:16px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
header a:hover{
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.4);
  transform:translateY(-1px);
}

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:999px;
  font-size:.75rem;
  margin-left:8px;
  background:rgba(56,189,248,.12);
  color:#7dd3fc;
  border:1px solid rgba(56,189,248,.4);
}

/* Fő konténer (alap oldal) */
.container{
  max-width:1200px;
  margin:30px auto 40px;
  padding:24px;
  background:rgba(15,23,42,.96);
  border-radius:18px;
  box-shadow:
    0 25px 60px rgba(0,0,0,.7),
    0 0 0 1px rgba(15,23,42,.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

h1,h2,h3{font-weight:600;margin-bottom:10px;color:#f9fafb}
h1{font-size:1.8rem}
h2{font-size:1.3rem;margin-top:24px}

/* Hírfolyam */
.post{
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
  background:radial-gradient(circle at top left,rgba(59,130,246,.15),rgba(15,23,42,.98));
  border:1px solid rgba(55,65,81,.8);
}
.post .date{font-size:.8rem;color:#9ca3af;margin-bottom:4px}
.post p{font-size:.95rem;line-height:1.5}

/* Form elemek */
form{margin:14px 0}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select{
  width:100%;
  padding:9px 11px;
  margin-top:5px;
  margin-bottom:12px;
  border-radius:10px;
  border:1px solid #4b5563;
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  font-size:.95rem;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input::placeholder,textarea::placeholder{color:#6b7280}
input:focus,textarea:focus,select:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 1px rgba(56,189,248,.7);
  background:#020617;
}

/* Gombok */
button,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 18px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,#2563eb,#22c55e);
  color:#f9fafb;
  font-weight:500;
  font-size:.9rem;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(37,99,235,.4);
  transition:transform .1s ease,box-shadow .15s ease,filter .1s ease;
}
button:hover,
input[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 15px 45px rgba(34,197,94,.5);
  filter:brightness(1.08);
}
button:active,
input[type="submit"]:active{
  transform:translateY(0);
  box-shadow:0 6px 20px rgba(37,99,235,.4);
}

/* Hiba / siker üzenetek */
.error{
  background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.6);
  color:#fecaca;
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:12px;
  font-size:.9rem;
}
.success{
  background:rgba(52,211,153,.1);
  border:1px solid rgba(52,211,153,.6);
  color:#bbf7d0;
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:12px;
  font-size:.9rem;
}

/* TMDB keresési találatok */
.search-results{margin-top:18px}
.search-results h3{margin-bottom:10px}
.search-results ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-top:4px;
}

/* egy találat kártya */
.media-card{
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:radial-gradient(circle at top,rgba(15,118,110,.25),rgba(15,23,42,.98));
  border-radius:16px;
  padding:12px 14px;
  border:1px solid rgba(55,65,81,.9);
  box-shadow:0 18px 40px rgba(0,0,0,.7);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.media-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(0,0,0,.9);
  border-color:rgba(56,189,248,.7);
}
.media-poster{
  width:210px;
  max-width:40%;
  border-radius:12px;
  flex-shrink:0;
}
.media-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.media-info h3{font-size:1.05rem;margin-bottom:0}
.media-meta{font-size:.85rem;color:#9ca3af}
.media-overview{font-size:.9rem;color:#d1d5db}
.media-action{margin-top:6px}
.media-action .badge{margin-left:0}

/* Üzenet doboz */
.message-box{
  margin-top:10px;
  padding:14px 16px;
  border-radius:14px;
  background:radial-gradient(circle at top left,rgba(96,165,250,.2),rgba(15,23,42,.98));
  border:1px solid rgba(59,130,246,.6);
}

/* Fizetési doboz */
.payment-box{
  margin-top:24px;
  padding:16px 18px;
  border-radius:14px;
  background:radial-gradient(circle at top left,rgba(250,204,21,.2),rgba(24,24,27,.96));
  border:1px solid rgba(250,204,21,.7);
}
.payment-box a{
  color:#facc15;
  font-weight:600;
  text-decoration:none;
}

/* Admin listák */
.container ul{list-style:none;margin-top:8px}
.container ul li{
  padding:8px 10px;
  margin-bottom:6px;
  border-radius:10px;
  background:rgba(15,23,42,.8);
  border:1px solid rgba(55,65,81,.9);
  font-size:.9rem;
}
.container ul li img{border-radius:8px}
.container ul li form{margin:0}

/* Admin rácsos elrendezés */
.admin-row{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}
.admin-col{flex:1 1 0;min-width:260px}

/* dropdown-hoz relatív szülő */
.admin-card{
  position:relative;
  background:rgba(15,23,42,.9);
  border-radius:14px;
  padding:14px 16px;
  border:1px solid rgba(55,65,81,.9);
  box-shadow:0 16px 40px rgba(0,0,0,.7);
}

/* Admin autocomplete dropdown */
.admin-suggest{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:8px;
  border:1px solid rgba(55,65,81,.9);
  border-radius:12px;
  background:rgba(2,6,23,.98);
  overflow:hidden;
  z-index:9999;
}
.admin-suggest-item{
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid rgba(55,65,81,.5);
}
.admin-suggest-item:last-child{border-bottom:none}
.admin-suggest-item:hover{background:rgba(148,163,184,.12)}

/* Reszponzív */
@media (max-width:900px){
  .admin-row{flex-direction:column}
}
@media (max-width:768px){
  header .topline{flex-direction:column;align-items:flex-start}
  header a{margin-left:0;margin-right:0}
  .container{margin:16px;padding:16px}
  .media-card{flex-direction:column}
  .media-poster{width:100%;max-width:100%}
}

/* =========================================================
   ÜGYFÉL FELÜLET – RAJZ SZERINTI LAYOUT
   Használat: <div class="client-layout"> ... </div>
   (1 széles, 2 fél, 1 széles, 2 fél, 1 széles)
   ========================================================= */

.client-layout{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

/* ügyfél kártya (külön az admin-card-tól) */
.client-card{
  background: rgba(15, 23, 42, 0.80);
  border: 1px solid rgba(55, 65, 81, 0.9);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  overflow:hidden;
}

/* teljes szélességű ügyfél kártya */
.client-span-2{grid-column:1 / -1}

/* h2 ne tolja le feleslegesen */
.client-card h2{margin-top:0}

/* TMDB kártyák ne húzzák szét a gridet */
.client-card .media-card,
.client-card .media-info{min-width:0}

@media (max-width:900px){
  .client-layout{grid-template-columns:1fr}
  .client-span-2{grid-column:auto}
/* ===== FELHASZNÁLÓ KERESŐ / SELECT JAVÍTÁS ===== */

/* natív select lista */
select,
select option {
  color: #000 !important;
  background: #fff !important;
}

/* admin autocomplete javaslat lista */
.admin-suggest {
  background: #ffffff !important;
  color: #000 !important;
}

/* egyes találatok */
.admin-suggest-item {
  color: #000000 !important;
  background: #ffffff !important;
}

/* hover állapot */
.admin-suggest-item:hover {
  background: #e5e7eb !important;
  color: #000000 !important;
}

/* badge maradjon színes */
.admin-suggest-item .badge {
  color: #000000 !important;
}
.modal-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display:flex; align-items:center; justify-content:center;
  padding: 16px;
}

.modal-box{
  width: min(520px, 100%);
  background:#111;          /* ha sötét a design, ha világos, akkor #fff */
  color:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.modal-box input, .modal-box textarea, .modal-box select{
  width:100%;
  margin:6px 0 12px 0;
}
.btn-secondary{
  background:#444;
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
}
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-box{
  width: min(520px, 100%);
  background: rgba(10, 20, 40, .95);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.btn-secondary{
  background:#444;
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
}