/**
 * Main site design layer — Phase 5b.
 * Path: public_html/css/site.css   (loaded last in templates/default_am/comman/main_layout.php)
 * Same type and form style as the hire app and ampanel (Public Sans, rounded fields, clear focus), keeping
 * the One Party Hire brand red. One button style for every main action (the green and red buttons were mixed).
 * Restyles the existing markup only; page structure and scripts are unchanged.
 */
:root {
  --site-brand: #E50D0D;
  --site-brand-dark: #B80A0A;
  --site-ink: #1C2230;
  --site-text: #2B2F38;
  --site-muted: #6A7180;
  --site-line: #E3E6EB;
  --site-field: #C9CED6;
  --site-bg: #F4F5F7;
  --site-r: 10px;
  --site-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body { font-family: var(--site-font); color: var(--site-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .ban-text h1, .ban-text h2 { font-family: var(--site-font); color: var(--site-ink); letter-spacing: -.01em; }
a { color: var(--site-brand); }
a:hover, a:focus { color: var(--site-brand-dark); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--site-brand) 35%, transparent); outline-offset: 2px; }

/* buttons: one main style (brand red), one secondary (outline) */
.green-btn, .try-for .submit, .contactus .green-btn, input.submit, button.submit,
.green-btn-myprofile, .vibrant-btn.btn-color-2 {
  background: var(--site-brand) !important; border: 1px solid var(--site-brand) !important; color: #fff !important;
  border-radius: var(--site-r) !important; font-family: var(--site-font); font-weight: 700; font-size: 15px;
  text-transform: none; letter-spacing: 0; padding: 12px 24px; box-shadow: none; cursor: pointer; transition: background .15s;
}
.green-btn:hover, .try-for .submit:hover, input.submit:hover, button.submit:hover,
.green-btn-myprofile:hover, .vibrant-btn.btn-color-2:hover { background: var(--site-brand-dark) !important; border-color: var(--site-brand-dark) !important; }
.white-btn, .white-btn-myprofile, .vibrant-btn.btn-color-3 {
  background: #fff !important; border: 1px solid var(--site-field) !important; color: var(--site-ink) !important;
  border-radius: var(--site-r) !important; font-family: var(--site-font); font-weight: 700; font-size: 15px; text-transform: none; padding: 12px 24px;
}
.white-btn:hover, .white-btn-myprofile:hover, .vibrant-btn.btn-color-3:hover { border-color: var(--site-brand) !important; color: var(--site-brand) !important; background: #fff !important; }
.red-btn-myprofile { border-radius: var(--site-r) !important; text-transform: none; font-weight: 700; }

/* form cards: sign up, log in, forgot / reset password */
.row.features { background: var(--site-bg); }
.try-for {
  background: #fff; border: 1px solid var(--site-line); border-radius: 14px; width: 100%; max-width: 520px;
  padding: 36px 36px 32px; box-shadow: 0 12px 34px rgba(28, 34, 48, .06);
}
.try-for label, .contactus label { font-weight: 600; font-size: 14px; color: var(--site-ink); margin-bottom: 6px; display: block; }
.try-for .input, .contactus .input, .try-for input.form-control, .contactus .form-control {
  width: 100%; height: 46px; line-height: normal; border: 1px solid var(--site-field); border-radius: var(--site-r);
  padding: 10px 14px; margin-bottom: 18px; font-family: var(--site-font); font-size: 15px; color: var(--site-text); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.contactus textarea.input, .contactus .textarea { height: auto; min-height: 140px; }
.try-for .input:focus, .contactus .input:focus, .form-control:focus {
  border-color: var(--site-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-brand) 15%, transparent); outline: none;
}
.try-for .input::placeholder, .contactus .input::placeholder { color: #9AA1AD; }
.try-for .submit { display: block; width: 100%; margin: 24px 0 0; padding: 14px 24px; }
.try-for input[type=radio] { accent-color: var(--site-brand); margin: 0 4px 0 0; }
.try-for .error, label.error { color: var(--site-brand-dark); font-weight: 500; font-size: 13px; margin: -12px 0 14px; }
.try-for a { font-weight: 600; }

/* Bootstrap forms (support, add-ons, checkout) */
.form-horizontal .control-label, .form-group > label { font-weight: 600; color: var(--site-ink); }
.form-control {
  height: 44px; border: 1px solid var(--site-field); border-radius: var(--site-r); box-shadow: none;
  font-family: var(--site-font); font-size: 15px; color: var(--site-text);
}
textarea.form-control { height: auto; }
.alert { border-radius: var(--site-r); }

/* tables (My profile) */
.table { font-family: var(--site-font); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--site-line) !important; }
.table > thead > tr > th { background: var(--site-bg); color: var(--site-muted); font-size: 13px; font-weight: 600; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #FAFBFC; }

/* page banner title on inner pages */
.jumbotron.about-ban .ban-text h1, .jumbotron.about-ban .ban-text h2 { font-weight: 800; }

@media (max-width: 767px) {
  .try-for { padding: 24px 20px; border-radius: 12px; }
}