/* ==========================================================
   Florentis — Award Certificate Modal UI + Theme Picker
   (UI inside Teacher Hub / dashboard)
   ========================================================== */

.fl-cert-contactline{
  margin-top:12px;
  text-align:center;
  font-size:13px;
  color:#172830;
  font-weight:500;
}

/* Award Certificate modal overlay */
.flth-cert-issue-overlay{
  position:fixed;
  inset:0;
  background:rgba(23,40,48,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999999;
}

.flth-cert-issue-card{
  width:min(640px, 96vw);
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  border-top:6px solid #f4d488;
}

.flth-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.flth-modal-x{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-size:22px;
  cursor:pointer;
}

.flth-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Theme picker cards */
.flth-theme-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:6px;
}

@media (max-width:720px){
  .flth-theme-grid{ grid-template-columns:1fr; }
}

.flth-theme-card{
  text-align:left;
  border:1px solid #d8dee6;
  background:#fff;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}

.flth-theme-card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.flth-theme-card.is-active{
  border-color:#27537a;
  box-shadow:0 0 0 3px rgba(39,83,122,.18);
}

.flth-theme-thumb{
  height:64px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.06);
  margin-bottom:8px;
  position:relative;
  overflow:hidden;
}

.flth-theme-name{ font-weight:700; font-size:14px; margin-bottom:2px; }
.flth-theme-desc{ font-size:12px; opacity:.75; }

/* Thumbnail looks */
.flth-theme-thumb.theme-default{
  background: linear-gradient(180deg, #f7f8fb, #ffffff);
}

.flth-theme-thumb.theme-fun1{
  background:
    radial-gradient(circle at 20% 30%, rgba(244,212,136,.8) 0 10px, transparent 11px),
    radial-gradient(circle at 70% 40%, rgba(172,174,110,.75) 0 10px, transparent 11px),
    radial-gradient(circle at 40% 70%, rgba(39,83,122,.55) 0 10px, transparent 11px),
    linear-gradient(180deg,#ffffff,#f7f8fb);
}

.flth-theme-thumb.theme-fun2{
  background:
    radial-gradient(circle at 25% 35%, rgba(244,212,136,.95) 0 12px, transparent 13px),
    radial-gradient(circle at 60% 55%, rgba(244,212,136,.85) 0 10px, transparent 11px),
    radial-gradient(circle at 80% 30%, rgba(244,212,136,.75) 0 8px, transparent 9px),
    linear-gradient(180deg,#fffaf0,#ffffff);
}

/* Emoji overlay icons for thumbs */
.flth-theme-thumb .star,
.flth-theme-thumb .star2,
.flth-theme-thumb .star3,
.flth-theme-thumb .dot,
.flth-theme-thumb .dot2,
.flth-theme-thumb .dot3,
.flth-theme-thumb .cup{
  position:absolute;
  display:grid;
  place-items:center;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  line-height:1;
  padding:0;
  margin:0;
  user-select:none;
  pointer-events:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
}

/* FUN1 */
.flth-theme-thumb.theme-fun1 .star::before  { content:"⭐️"; }
.flth-theme-thumb.theme-fun1 .star2::before { content:"✨"; }
.flth-theme-thumb.theme-fun1 .star3::before { content:"⭐️"; }

.flth-theme-thumb.theme-fun1 .star  { right:12px; top:8px;  font-size:18px; transform:rotate(8deg); }
.flth-theme-thumb.theme-fun1 .star2 { right:40px; top:28px; font-size:14px; transform:rotate(-10deg); opacity:.9; }
.flth-theme-thumb.theme-fun1 .star3 { right:18px; top:44px; font-size:12px; transform:rotate(14deg); opacity:.85; }

.flth-theme-thumb.theme-fun1 .star,
.flth-theme-thumb.theme-fun1 .star2,
.flth-theme-thumb.theme-fun1 .star3{
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
}

/* FUN2 */
.flth-theme-thumb.theme-fun2 .dot::before  { content:"✨"; }
.flth-theme-thumb.theme-fun2 .dot2::before { content:"⭐️"; }
.flth-theme-thumb.theme-fun2 .dot3::before { content:"✨"; }

.flth-theme-thumb.theme-fun2 .dot  { left:10px; top:10px; font-size:14px; opacity:.9; }
.flth-theme-thumb.theme-fun2 .dot2 { right:12px; top:12px; font-size:14px; opacity:.9; }
.flth-theme-thumb.theme-fun2 .dot3 { right:26px; bottom:10px; font-size:12px; opacity:.75; }

.flth-theme-thumb.theme-fun2 .cup::before { content:"🏆"; }
.flth-theme-thumb.theme-fun2 .cup{
  right:12px;
  bottom:10px;
  font-size:18px;
  opacity:.95;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
}