/* Scoped card styling for pages under app/registration/.
   Applies only when a wrapper element uses the .reg-card class. */

.reg-card,
.reg-card .card,
.reg-card .card-body {
    color: #495057;
    font-size: 0.875rem;
}

.reg-card .card {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0.50rem;
    padding: 0.75rem 0.75rem;
}

.reg-card .card-header {
    padding: 0.75rem 0.75rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid #d8dbe0;
    color: #495057;
    font-weight: bold;
    font-size: 1rem;
    border-top-left-radius: calc(0.50rem - 1px);
    border-top-right-radius: calc(0.50rem - 1px);
}
.reg-card .card-header .license-errs .err-message {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    font-weight: normal;
}
.reg-card .card-body {
    padding: 0.75rem 0.75rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid #d8dbe0;
    color: #495057;
    border-top-left-radius: calc(0.50rem - 1px);
    border-top-right-radius: calc(0.50rem - 1px);
}

/* Inner cards nested inside a .reg-card outer card revert to Bootstrap defaults
   so they visually match technician/personal.asp. */
.reg-card .card .card {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    padding: 0;
}
.reg-card .card .card > .card-header {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.75rem 1.25rem;
    color: inherit;
    font-weight: normal;
    font-size: 0.875rem;
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

/* Match the .form-control look used on technician/personal.asp
   (from app/css/style4.css + Bootstrap 4 base). Registration doesn't
   load Bootstrap, so without this the inputs render unstyled. */
.reg-card .form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: inherit;
    line-height: 2.0;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.reg-card .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
.reg-card .form-control:disabled,
.reg-card .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}
/* Error state: beats .reg-card .form-control on specificity so the red
   border on invalid fields (added by around-input-border-error) actually
   shows. Matches the same "on save" pattern used in step2PI.asp. */
.reg-card .form-control.around-input-border-error {
    background-color: #fff4f4;
    border-color: red;
    color: red;
    font-style: italic;
}
.reg-card .form-control.white-form-el-error {
    background-color: #fff4f4;
    color: #fd4b30;
}
.reg-card .datepicker.form-control {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    line-height: 1.5;
}
.reg-card input[type="file"] {
    font-size: 0.75rem;
}
.reg-card input[type="file"]::-webkit-file-upload-button {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.reg-card .personal-fields {
    display: flex;
    flex-wrap: wrap;
}
.reg-card .personal-fields > .row.pt-2 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-left: 0;
    margin-right: 0;
}
@media (max-width: 767px) {
    .reg-card .personal-fields > .row.pt-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.reg-card .address-fields {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}
.reg-card .address-fields > .address-field {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding-right: 0.75rem;
}
.reg-card .address-fields > .address-field:last-child {
    padding-right: 0;
}
@media (max-width: 499px) {
    .reg-card .address-fields > .address-field {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }
    .reg-card .address-fields > .address-field + .address-field {
        padding-top: 0.5rem;
    }
}

/* Match the .table look used on technician/personal.asp
   (from Bootstrap 4.1). Registration doesn't load Bootstrap,
   so without this the tables render unstyled. */
.reg-card .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.reg-card .table th,
.reg-card .table td {
    padding: 0.5rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.reg-card .table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}
.reg-card .table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

/* Bootstrap's .table-responsive* wrappers add horizontal scroll to
   contain wide tables. Registration doesn't load Bootstrap, so
   re-declare the overflow behavior scoped to .reg-card. */
.reg-card .table-responsive,
.reg-card .table-responsive-sm,
.reg-card .table-responsive-md,
.reg-card .table-responsive-lg,
.reg-card .table-responsive-xl {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Phone: widen the registration card by trimming the surrounding
   padding on the outer .container and the .contact-form-card. */
@media (max-width: 767px) {
    .main .main-content .contact-form .contact-form-card {
        padding: 0.25rem;
    }
    section.container {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }
    .reg-card .card {
        padding: 0.75rem 1.25rem;
    }
    .reg-card .card-header,
    .reg-card .card-body {
        padding: 0.75rem 1.25rem;
    }
    /* Stack footer sections so they fit on a phone — inline styles on
       _regfootercontent.html pin a 4-column grid, so override with !important.
       Flip order so Contact Info shows above the Company Info block. */
    footer.footer .footer-content {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    footer.footer .footer-content .footer-contact {
        order: 1;
        align-items: flex-start;
    }
    footer.footer .footer-content .footer-about {
        order: 2;
    }
    footer.footer .footer-content .footer-about .footer-copyright,
    footer.footer .footer-content .footer-about .footer-copyright p {
        text-align: center;
    }
    /* Contact text (incl. email value) can wrap on narrow phones; the
       inline text-align:center on .footer-content centers the wrapped
       lines — force left so the email label and value stay flush-left. */
    footer.footer .footer-contact .contact-item .contact-text,
    footer.footer .footer-contact .contact-item .contact-text .contact-label,
    footer.footer .footer-contact .contact-item .contact-text .contact-value {
        text-align: left;
    }
}