/* =========================
   Shared Registration Styles
   Used by:
   - register_user.php
   - edit_user.php
   - register_model.php
   - edit_model.php
   - password pages using body.passwordPage + .passwordForm
   ========================= */

/* Base */
body {
  font-family: 'Urbanist', sans-serif;
  background: #5c8ac8;
  font-size: 14.5px;
}

body.passwordPage {
  font-family: 'Urbanist', Arial, sans-serif;
  background: #333333;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  margin-top: -3px;
  color:#21426b;
}

h2{
  color:#f79144;
}

label {
  display: block;
  margin-top: 15px;
}

.activation-message {
    margin-top: 15px;
    color: #000;
    text-align: center;
}

button {
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  padding: 10px 18px;
  border: none;
  background: #21426b;
  color: #ffffff;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 20px;
}

button:hover {
  background: #f79144;
}

input,
select {
  width: 97%;
  padding: 10px;
  font-size: 14px;
}

select {
  box-sizing: border-box;
}

input[readonly] {
  background: #e9e9e9;
  color: #666666;
  cursor: not-allowed;
}

input[name="phone"],
input[name="ipms_number"] {
  width: 50%;
}

a {
    color: #f79144;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #5c8ac8;
    text-decoration: none;
}

.mandatory-error {
    color: #dc3545;
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 8px;
    display: none;
}

/* Footer */
.site-footer {
  text-align: center;
  padding-bottom: 20px;
  margin-top: -10px;
  font-size: 13px;
  color: #fff;
  
}

/* Containers */
.container {
  max-width: 850px;
  box-sizing: border-box;
  margin: 20px auto;
  background: #ffffff;
  padding: 30px;
  border-radius: 6px;
}

body.termsPage .container {
  margin: 30px auto;
}

/* Pin footer to the true bottom of the page even when content is short.
   Grid instead of flex so the footer row is always exactly its own
   height and the content row takes all remaining space - no gap. */
html:has(body.termsPage) {
  height: 100%;
}

body.termsPage {
  display: grid !important;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  margin: 0;
}

body.termsPage .terms-main {
  min-height: 0;
}

body.termsPage .footer {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
}

.container.userForm {
  max-width: 600px;
  margin: 30px auto;
  padding-top: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.container.modelForm {
  max-width: 800px !important;
  margin: 30px auto;
  padding-left: 30px;
  padding-right: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.container.passwordForm {
  width: 420px !important;
  max-width: 420px;
  margin-top: -100px;
  background: #ffffff;
  padding: 30px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.container.wide {
  max-width: 600px;
  margin: 40px auto;
}

body:not(.passwordPage) .container:not(.userForm):not(.modelForm):not(.passwordForm) {
  max-width: 850px;
}

/* User form layout */
.row-half {
  display: flex;
  gap: 10px;
}

.half-input {
  flex: 1;
}

.row-half .half-input input,
.row-half .half-input select {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.container.modelForm .radio-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: 0;
  margin-top: 15px;
}

.container.modelForm .radio-row label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 0;
  white-space: nowrap;
}

.container.modelForm .radio-row input[type="radio"] {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

.showpw-row {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  user-select: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.showpw-row label {
  margin: 0;
  display: inline;
}
#show_passwords {
  width: auto !important;
}

/* Model form layout */
.model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}

.container.modelForm input,
.container.modelForm textarea,
.container.modelForm select,
.container.model-form input,
.container.model-form textarea,
.container.model-form select {
  width: 97%;
  padding: 8px;
  font-family: 'Urbanist', Arial, sans-serif;
  font-size: 14px;
}
textarea {
    cursor: text;
}

.full-textarea {
  width: 100%;
  font-size: 14px;
  padding: 8px;
  font-family: 'Urbanist', Arial, sans-serif;
}

.special-categories{
  margin-top:20px;
}
.category-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px 20px;
}
.category-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  margin-top:0;
}

.container.modelForm .special-categories input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
  width: auto;
  height: auto;
  padding: 0;
  flex: 0 0 auto;
}

.junior-helper {
  color: red;
}

/* Terms */

.terms-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  width: 100%;
}

.terms-row input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.terms-text {
  font-size: 13px;
  line-height: 1.2;
  min-width: 0;
}

.terms-text label {
  display: inline;
  margin: 0;
  white-space: normal;
}

.terms {
  text-align: justify;
}

/* SMS express written consent (toll-free verification requirement).
   Mirrors .terms-row / .terms-text so it reads as part of the form. */

.sms-consent-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  width: 100%;
}

.sms-consent-row input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.sms-consent-text {
  font-size: 11px;
  line-height: 1.35;
  min-width: 0;
}

.sms-consent-text label {
  display: inline;
  margin: 0;
  white-space: normal;
  font-size: inherit;
  font-weight: 400;
}

/* The bold "Optional / not required" sentence runs inline at the end of
   the consent paragraph - no separate block. */
.sms-consent-text strong {
  font-weight: 700;
}

.doc-note {
  display: block;
  width: 100%;
  text-align: center;
  color: #444444;
  margin-bottom: 20px;
}

/* Messages */
.message {
  margin-top: 15px;
  color: red;
}

.error {
  color: red;
  margin-top: 10px;
}

.success {
  color: green;
  margin-top: 15px;
}

.notice {
  font-weight: bold;
  margin-top: 10px;
}

.note-green {
  color: #2eb52e;
  margin-top: 10px;
  text-align: center;
}

.note-red {
  color: red;
  margin-top: 10px;
  text-align: center;
}

.note-success {
  margin-top: 15px;
  padding: 10px 12px;
  border: 1px solid #b7e1b7;
  background: #eaf7ea;
  color: #1f7a1f;
  border-radius: 4px;
  text-align: center;
}

.message-error,
.message-success,
.message-info {
  padding: 10px 12px;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
}

.message-error {
  background: #fdeaea;
  border: 1px solid #f5bcbc;
  color: #b10000;
}

.message-success {
  background: #eaf7ea;
  border: 1px solid #b7e1b7;
  color: #1f7a1f;
}

.message-info {
  background: #eaf2ff;
  border: 1px solid #b8d2ff;
  color: #124a9a;
}

.pw-hint {
  display: block;
  margin-top: 4px;
  color: #777777;
}

.pw-hint.good {
  color: #2eb52e;
}

.pw-hint.bad {
  color: red;
}

/* Autocomplete */
.autocomplete-field-wrap,
.autocomplete-results-wrap {
  position: relative;
}

.autocomplete-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-top: none;
  z-index: 9999;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  border-radius: 0 0 6px 6px;
}

.autocomplete-result-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #eeeeee;
}

.autocomplete-result-item:last-child {
  border-bottom: none;
}

.autocomplete-result-item:hover {
  background: #f5f5f5;
}

.headerArea{
    background:#21426b;
    color:#fff;
    margin:-30px -30px 10px -30px;
    padding:15px 30px 4px 30px;
}

.headerArea h1{
    color:#fff;
}

.headerArea p,
.headerArea strong{
    color:#fff;
}

.modelHeader{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:12px;
}
.headerArea p{
    margin:5px 0 0 0;
}

.modelHeader img{
    max-height:90px;
    width:auto;
    height:auto;
}

.modelHeader h1{
    margin:0;
}

/* Password pages */
.container.passwordForm label {
  margin-top: 10px;
}

.container.passwordForm input[type="email"],
.container.passwordForm input[type="password"],
.container.passwordForm input[type="text"] {
  width: 95%;
  padding: 10px;
  font-family: 'Urbanist', Arial, sans-serif;
  font-size:14px;
}

.links {
  margin-top: 20px;
  text-align: center;
}

.links a {
  display: block;
  margin-top: 8px;
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}

/* Utility */
.inline {
  display: inline-block;
  margin-left: 10px;
}

.disabled {
  opacity: 0.5;
}

.back {
  margin-top: 20px;
  text-align: center;
}

.actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.actions button {
  margin-top: 0;
}

/* Responsive */
@media (max-width: 500px) {
  .row-half {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {

  .modelHeader {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .modelHeader h1 {
    margin: 0;
  }

  body.passwordPage {
    margin-top: 50px;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 16px;
  }

  .container.passwordForm {
    width: 100% !important;
    max-width: 420px;
    padding: 20px;
  }
}

/* =========================
   Most Popular Voting
   ========================= */

.container.modelForm.mostPopularForm {
  max-width: 850px !important;
}

.event-summary {
  text-align: left;
  margin: 0 0 22px 0;
}

.event-summary h2 {
  margin: 0 0 6px 0;
}

.event-summary p {
  margin: 0;
  font-size: 15px;
}

.vote-main-row {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    align-items: flex-start;
}

.vote-left-column {
  min-width: 0;
  box-sizing: border-box;
  margin-right: 15px;
}

.hsm-side-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 18px 0;
}

.event-header-row{
    display:grid;
    grid-template-columns:80% 20%;
    align-items:start;
    padding-top: 10px;
}

.event-header-logo{
    text-align:right;
}

.event-header-logo .hsm-side-logo{
    margin:0;
}

.vote-entry-row {
  margin-top: 1em;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.vote-entry-field{
    flex: 1;
    min-width: 260px;
    max-width: 320px;
}

.vote-entry-field label {
  margin-top: 0;
}

.vote-entry-field input {
  width: 100% !important;
  box-sizing: border-box;
}

.vote-entry-row button {
  margin-top: 0;
  white-space: nowrap;
}

.entry-details {
  margin-top: 18px;
  line-height: 1.7;
}

.entry-detail-line {
  margin: 4px 0;
}

/* Model photo gallery (thumbnail shown for the looked-up entry, matching
   the judging pages: capped 300x180px, prev/next arrows, "click to see
   full size" caption underneath that opens the photo in a new tab). */
.model-photo-gallery {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.model-photo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.model-photo-link {
  display: inline-block;
  line-height: 0;
}

.model-photo-img {
  max-width: 300px !important;
  max-height: 180px !important;
  width: auto !important;
  height: auto !important;
  display: block;
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

.model-photo-caption {
  font-size: 11px;
  color: #888;
  text-align: center;
}

.model-photo-arrow {
  flex: 0 0 auto;
  padding: 4px 12px;
  font-size: 18px;
  line-height: 1;
}

.admin-entry-row,
.admin-ballot-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  text-align: left;
}

.admin-ballot-row > div {
  flex: 1;
}

.admin-ballot-row button {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  white-space: nowrap;
}

.admin-entry-row h3 {
  margin: 0;
  text-align: center;
}

.admin-ballot-row button {
  margin-top: 0;
  white-space: nowrap;
}

.admin-entry-row input,
.admin-ballot-row input {
  width: 100% !important;
  box-sizing: border-box;
}

.admin-reset-votes {
  text-align: center;
}

.vote-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  width: 100%;
}

.vote-actions button {
  margin-top: 0;
}

.thank-you-message {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
  margin: 30px 0 10px 0;
}

@media screen and (max-width: 768px) {
  .vote-main-row {
    grid-template-columns: 1fr;
  }

  .vote-entry-row {
    flex-wrap: nowrap;
  }

  .vote-entry-field {
    width: 60%;
    min-width: 0;
  }

  .admin-entry-row,
  .admin-ballot-row {
    grid-template-columns: 1fr;
  }
}