body { margin:0; font-family: Arial, sans-serif; background:#0b1220; color:#fff; }
.banner { padding:18px 14px; text-align:center; background: #0f1b33; }
.logo-top { height:64px; margin-bottom:10px; }
.title { margin: 0 0 6px; }
.survey-description { margin:0; opacity:.85; }

.smiley-wrapper { max-width: 760px; margin: 0 auto; padding: 18px; }
.smiley-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 18px; }
.smiley-question { text-align:center; font-size: 22px; margin: 6px 0 14px; }
.smiley-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.smiley-btn {
  width: 170px; height: 120px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color:#fff;
  cursor:pointer;
}
.smiley-emoji { font-size: 46px; margin-top: 14px; }
.smiley-label { margin-top: 10px; font-size: 16px; opacity:.95; }
.smiley-hint { text-align:center; opacity:.85; margin-top: 12px; font-size:14px; }

.popup-overlay { display:none; position:fixed; inset:0; background: rgba(0,0,0,.65); z-index:999; }
.popup { max-width:520px; margin:10vh auto; background:#111; border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px; }
.reason-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.reason-item { display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.reason-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.reason-actions button { padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.reason-actions button.primary { background: rgba(0,123,255,.22); border-color: rgba(0,123,255,.5); }
.reason-actions button:disabled { opacity:.5; cursor:not-allowed; }

.thankyou-overlay { display:none; position:fixed; inset:0; background: rgba(0,0,0,.7); z-index:998; }
.thankyou-box { max-width:520px; margin:20vh auto; text-align:center; background:#111; border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:22px; }
.countdown { opacity:.85; margin-top: 8px; }


/* Tablet / kiosk tuning */
@media (min-width: 700px) {
  .logo-top { height: 90px; }
  .title { font-size: 34px; }
  .survey-description { font-size: 18px; }

  .smiley-wrapper { max-width: 900px; padding: 26px; }
  .smiley-card { padding: 26px; border-radius: 18px; }

  .smiley-question { font-size: 30px; margin: 10px 0 18px; }

  .smiley-row { gap: 18px; }

  .smiley-btn {
    width: 220px;
    height: 170px;
    border-radius: 20px;
    font-size: 18px;
  }

  .smiley-emoji { font-size: 64px; margin-top: 18px; }
  .smiley-label { font-size: 20px; margin-top: 14px; }
  .smiley-hint { font-size: 16px; margin-top: 16px; }
}

/* Kiosk: prevent text selection */
* { -webkit-tap-highlight-color: transparent; }