/* =========================================================
   ROOT + GLOBAL
========================================================= */
:root{
  --primary:#0d6efd;
  --primary-dark:#0a58ca;
  --dark:#0b1c2d;
  --light:#f6f8fb;
  --muted:#6c757d;
}

*{ box-sizing:border-box; }

body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--light);
  color:#222;
  line-height:1.6;
}

a{ text-decoration:none; }
img{ max-width:100%; display:block; }

/* =========================================================
   NAVBAR
========================================================= */
.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  padding:14px 0;
  transition:padding .25s ease, box-shadow .25s ease;
}
.navbar.shrink{
  padding:6px 0;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.navbar-brand img{ height:42px; }
@media(max-width:576px){ .navbar-brand img{ height:32px; } }

/* =========================================================
   HERO
========================================================= */
.hero-section{
  background:linear-gradient(120deg,var(--primary),var(--primary-dark));
  padding:90px 0;
  color:#fff;
}
.hero-section h1{ font-weight:800; }
.hero-section .lead{ opacity:.9; }

/* =========================================================
   GENRE CARDS
========================================================= */
.genre-card{
  background:#fff;
  border-radius:14px;
  padding:22px 16px;
  text-align:center;
  box-shadow:0 8px 20px rgba(2,6,23,.06);
  transition:.25s ease;
}
.genre-card:hover{ transform:translateY(-4px); }

/* =========================================================
   MEDIA CARDS
========================================================= */
.media-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:.25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.media-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.media-img img{
  width:100%;
  height:220px;
  object-fit:cover;
}
@media(max-width:576px){ .media-img img{ height:180px; } }

.price-badge{
  position:absolute;
  top:12px;
  right:12px;
  background:var(--primary);
  color:#fff;
  font-size:13px;
  padding:6px 12px;
  border-radius:20px;
  font-weight:600;
}

.media-body{ padding:16px; flex:1; }
.media-title{ font-size:16px; font-weight:700; margin-bottom:6px; }
.media-desc{ font-size:13px; color:var(--muted); }

.media-actions{
  padding:14px 16px;
  border-top:1px solid #eee;
  display:flex;
  gap:8px;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* =========================================================
   CLIENTS
========================================================= */
.client-logo{
  filter:grayscale(100%);
  opacity:.7;
  transition:.3s ease;
}
.client-logo:hover{ filter:none; opacity:1; }


/* =========================================================
   CLIENT LOGOS – PROFESSIONAL AGENCY STYLE
========================================================= */

.client-card{
  background:#ffffff;
  border-radius:14px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:all .3s ease;
}

.client-card img{
  max-height:48px;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.75;
  transition:all .3s ease;
}

.client-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.client-card:hover img{
  filter:none;
  opacity:1;
}

/* Mobile tweak */
@media(max-width:576px){
  .client-card{
    height:80px;
  }
  .client-card img{
    max-height:40px;
  }
}



/* =========================================================
   FOOTER
========================================================= */
footer{ background:#0b1c2d; }
footer a{ color:#fff; opacity:.85; }
footer a:hover{ opacity:1; }

/* =========================================================
   MARIA AI – FINAL POLISH + RESPONSIVE FIX
========================================================= */

/* Container */
.maria-section{
  background:linear-gradient(180deg,#f7f9fc,#ffffff);
  padding:60px 0;
}

/* Main layout */
.maria-inline{
  display:flex;
  gap:30px;
  background:#ffffff;
  border-radius:24px;
  padding:30px;
  box-shadow:0 12px 40px rgba(0,0,0,.06);
}

/* LEFT PROFILE */
.maria-left{
  width:240px;
  display:flex;
  flex-direction:column;
  align-items:center;        /* ✅ center everything */
  justify-content:flex-start;
  text-align:center;
  border-right:1px solid #eee;
  padding-right:20px;
}


.maria-photo{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;   /* ✅ fix face centering */
  display:block;
  margin:0 auto 14px auto;  /* ✅ force center */
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}


.maria-name{
  font-weight:700;
  font-size:18px;
}

.maria-role{
  font-size:13px;
  color:#6c757d;
  margin-bottom:10px;
}

.maria-tags{
  list-style:none;
  padding:0;
  margin:10px 0 0;
}
.maria-tags li{
  display:inline-block;
  font-size:12px;
  background:#eef3ff;
  color:#0d6efd;
  padding:4px 10px;
  border-radius:20px;
  margin:4px 2px;
}

/* RIGHT PANEL */
.maria-right{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Messages */
.maria-messages{
  flex:1;
  padding:20px;
  overflow-y:auto;
  scroll-behavior:smooth;
  background:#fafbfe;
  border-radius:14px;
}

.maria-ai-msg,
.maria-user-msg{
  padding:12px 16px;
  border-radius:14px;
  margin-bottom:12px;
  max-width:85%;
  font-size:15px;
  line-height:1.5;
}

.maria-ai-msg{
  background:#f1f3f6;
  animation:fadeIn .25s ease;
}

.maria-user-msg{
  background:#e8f0ff;
  margin-left:auto;
}

/* INPUT BAR */
.maria-input{
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px solid #eee;
  padding:12px;
}

/* Input */
.maria-input input{
  flex:1;
  min-width:0;
  border:none;
  padding:14px 16px;
  font-size:15px;
  border-radius:12px;
  outline:none;
  background:#f4f6fa;
}

/* Voice button */
.maria-voice{
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:#6c757d;
  color:#fff;
  font-size:18px;
}

/* Send button */
.maria-send{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:44px;
  padding:0 18px;
  background:#0d6efd;
  color:#fff;
  border:none;
  border-radius:12px;
  font-weight:600;
}

.maria-send i{
  font-size:14px;
}

/* Mobile optimization */
@media(max-width:768px){

  .maria-inline{
    flex-direction:column;
    padding:20px;
  }

  .maria-left{
    width:100%;
    border-right:none;
    border-bottom:1px solid #eee;
    padding-bottom:20px;
  }

  .maria-input{
    flex-wrap:wrap;
  }

  .maria-input input{
    flex:1 1 100%;
  }

  .maria-input button{
    flex:1;
  }

  .maria-send span{
    display:none; /* icon only */
  }
}

/* Smooth animation */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}


@media(max-width:768px){

  .maria-inline{
    flex-direction:column;
    padding:20px;
  }

  .maria-left{
    width:100%;
    border-right:none;
    border-bottom:1px solid #eee;
    padding:0 0 20px 0;
    align-items:center;     /* ✅ center image on mobile */
  }

  .maria-photo{
    width:96px;
    height:96px;
  }
}

.maria-typing span{
  width:8px;
  height:8px;
  background:#999;
  border-radius:50%;
  display:inline-block;
  animation: blink 1.4s infinite both;
}
.maria-typing span:nth-child(2){animation-delay:.2s}
.maria-typing span:nth-child(3){animation-delay:.4s}

@keyframes blink{
  0%{opacity:.2}
  20%{opacity:1}
  100%{opacity:.2}
}