/* Custom app CSS extracted from the Tailwind input (site.css) so it can be served as a
   plain stylesheet alongside the Tailwind browser CDN — no build step required.
   Keep this in sync with the non-@import portion of site.css if you ever rebuild. */

a,
a:hover {
  text-decoration: none;
  color: inherit;
}

.text-green-600 {
  color: var(--color-green-600) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* The Modal (background) */
.modal-image {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content-image {
  margin: auto;
  display: block;
  max-width: 700px;
  max-height: 70vh;
}

.modal-content-image, #caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from { -webkit-transform: scale(0) }
  to { -webkit-transform: scale(1) }
}

@keyframes zoom {
  from { transform: scale(0) }
  to { transform: scale(1) }
}

@media only screen and (max-width: 700px) {
  .modal-content-image { width: 100%; }
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1031;
  left: 0;
  top: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

/* Modal Content/Box */
.modal-content {
  background-color: white;
  margin: 2% auto;
  padding: 20px;
  border: 0;
  width: 40%;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(138,138,138,0.51);
  -moz-box-shadow: 5px 5px 20px 0px rgba(138,138,138,0.51);
  box-shadow: 5px 5px 20px 0px rgba(138,138,138,0.51);
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  width: 100%;
  text-align: right;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.closeHelp {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  width: 100%;
  text-align: right;
}

.closeHelp:hover
.closeHelp:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.closeManagers {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  width: 100%;
  text-align: right;
}

.closeManagers:hover,
.closeManagers:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 1600px) {
  .modal-content { width: 45%; }
}

@media only screen and (max-width: 1000px) {
  .modal-content { width: 90%; }
}

.form-label {
  margin-top: .5rem !important;
}

.inner_title {
  font-size: 1.3rem;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #9393935e;
  border-radius: 50%;
  cursor: pointer;
}

.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container2 {
  position: relative;
  height: 150px;
  width: 150px;
  padding: 0px;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
}

.container2 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  display: block;
}

.container2:hover .overlay {
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Admin webhook / Google Forms panel (_WebhookSettings). Kept here    */
/* (always loaded) because the partial is AJAX-injected and an inline  */
/* <style> in it does not reliably apply.                              */
/* ------------------------------------------------------------------ */
.wh-wrap { padding:.5rem; max-width:820px; }
.wh-h { font-size:1.2rem; font-weight:800; color:#111827; margin:0 0 .25rem; }
.wh-sub { font-size:.85rem; color:#6b7280; margin:0 0 1.25rem; }
.wh-row { margin-bottom:.9rem; }
.wh-row label { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:#6b7280; margin-bottom:.3rem; }
.wh-inline { display:flex; gap:.5rem; }
.wh-inline input, .wh-inline textarea { width:100%; font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:.82rem; color:#111827; background:#f9fafb; border:1.5px solid #e5e7eb; border-radius:9px;
    padding:.55rem .7rem; }
.wh-copy { flex-shrink:0; border:none; border-radius:9px; padding:0 .9rem; font-weight:700; font-size:.8rem;
    color:#fff; background:#16a34a; cursor:pointer; }
.wh-copy:hover { background:#15803d; }
.wh-toggle { flex-shrink:0; border:1.5px solid #e5e7eb; background:#fff; border-radius:9px; padding:0 .8rem;
    cursor:pointer; font-size:.8rem; color:#374151; }
.wh-script { display:block; width:100%; box-sizing:border-box; min-height:280px; resize:vertical;
    white-space:pre; overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem;
    color:#111827; background:#f9fafb; border:1.5px solid #e5e7eb; border-radius:9px; padding:.55rem .7rem; }
.wh-warn { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:9px;
    padding:.6rem .8rem; font-size:.82rem; margin-bottom:1rem; }
.wh-steps { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:11px; padding:1rem 1rem 1rem 1.6rem;
    margin:1.1rem 0; }
.wh-steps li { font-size:.85rem; color:#166534; margin-bottom:.4rem; line-height:1.5; }
.wh-badge { display:inline-block; font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:100px;
    background:rgba(22,163,74,.1); color:#15803d; }