/* driverdetails.css */

/* —— Reset & base —— */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#222; background:#f9f9f9; }
.hidden { display:none !important; }

/* —— Header —— */
.site-header { display:flex; align-items:center; justify-content:space-between; background:#000; color:#fff; padding:.75rem 2rem; }
.site-header .logo img { height:32px; }
.main-nav a { color:#fff; text-decoration:none; margin:0 1rem; font-weight:500; }
.auth-buttons button { background:transparent; border:2px solid #fff; color:#fff; padding:.5rem 1rem; margin-left:1rem; border-radius:4px; cursor:pointer; font-weight:500; }
.auth-buttons button:hover { background:#fff; color:#000; }

/* —— Hero —— */
.hero { text-align:center; padding:4rem 1rem; }
.hero h1 { font-size:2.5rem; line-height:1.2; color:#000; }
.hero p { margin-top:1rem; font-size:1.125rem; color:#555; }

/* —— Forms —— */
.form-section { max-width:360px; margin:2rem auto; background:#fff; padding:2rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.form-section h2 { margin-bottom:1rem; text-align:center; color:#000; }
.form-section form { display:flex; flex-direction:column; }
.form-section input, .form-section select { margin-bottom:1rem; padding:.75rem; border:1px solid #ccc; border-radius:4px; }
.form-section button { padding:.75rem; background:#000; color:#fff; border:none; border-radius:4px; cursor:pointer; font-weight:500; }
.form-section button:hover { background:#333; }
.error-msg { margin-top:.5rem; color:#d00; font-size:.9rem; text-align:center; }

/* NEW: Part-time fields group */
.pt-fields {
  border: 1px dashed #c8c8c8;
  border-radius: 8px;
  padding: 12px;
  margin-top: 4px;
}
.form-row { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.75rem; }

/* —— Footer —— */
.site-footer { text-align:center; padding:1rem; font-size:.9rem; color:#777; }

/* —— Shared popup styles —— */
#driver-error, #custom-alert { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; color:#000; padding:1.5rem 2rem; border:2px solid #000; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,.2); z-index:9999; max-width:90%; width:300px; text-align:center; font-weight:500; }
#driver-error::before { content:"⚠️"; display:block; font-size:1.5rem; margin-bottom:.5rem; }
#custom-alert button { margin-top:1rem; background:#000; color:#fff; border:none; padding:.5rem 1rem; border-radius:4px; cursor:pointer; font-weight:500; }
#custom-alert button:hover { background:#333; }

/* —— Form-level error messages —— */
.form-error { background:#fff; color:#000; border:2px solid #000; padding:1rem; margin-bottom:1rem; border-radius:6px; font-size:.95rem; line-height:1.4; }

/* —— Disabled button & spinner —— */
button[disabled]{ opacity:.6; cursor:not-allowed; }
.loading-spinner{ display:inline-block; vertical-align:middle; width:1em; height:1em; border:2px solid #f3f3f3; border-top:2px solid #000; border-radius:50%; animation:spin .8s linear infinite; }
.field-error{ display:block; background:#fff; color:#000; border:1px solid #000; padding:.3rem .6rem; margin-top:.3rem; border-radius:4px; font-size:.9rem; }
@keyframes spin{ 100%{ transform:rotate(360deg); } }

/* —— Contract Section —— */
.contract-section{ margin-top:2rem; }
.signature-block{ display:flex; justify-content:space-between; margin-top:1rem; }
.signature-block .company-signature, .signature-block .driver-signature{ width:48%; text-align:center; }
.signature-block .owner-signature{ font-family:"Brush Script MT",cursive; font-size:1.25rem; }
.contract-section textarea{ width:100%; height:400px; margin-top:1rem; padding:.5rem; border:1px solid #ccc; border-radius:4px; resize:vertical; }
.signature-block canvas{ width:100%; height:150px; border:1px solid #000; border-radius:4px; }
.signature-block button{ margin-top:.5rem; padding:.25rem .5rem; border:1px solid #000; background:#fff; cursor:pointer; }