/* Phase 5 shared application shell */
:root{--mcc-ink:#132238;--mcc-blue:#0759a8;--mcc-blue-dark:#053d75;--mcc-surface:#fff;--mcc-soft:#eef4f9;--mcc-line:#ced9e3;--mcc-radius:12px;--mcc-shadow:0 8px 24px rgba(15,35,55,.10)}
*{box-sizing:border-box}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{margin:0;color:var(--mcc-ink);background:#f6f8fa}.mcc-app-header{position:relative;z-index:50;background:var(--mcc-surface);border-bottom:1px solid var(--mcc-line);box-shadow:0 2px 12px rgba(10,35,60,.07)}
.mcc-app-bar{min-height:74px;max-width:1200px;margin:auto;padding:.55rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.mcc-brand{display:flex;align-items:center;gap:.7rem;color:var(--mcc-ink);text-decoration:none}.mcc-brand img{width:auto;max-height:52px}.mcc-brand-copy{display:flex;flex-direction:column;line-height:1.15}.mcc-brand-copy strong{font-size:1.05rem}.mcc-brand-copy small{color:#5a6c7c;margin-top:.2rem}.mcc-user-greeting{margin-left:auto;font-size:.9rem;color:#526476}
.mcc-nav-toggle{display:none;min-width:44px;min-height:44px;border:1px solid var(--mcc-line);border-radius:9px;background:#fff;font-size:1.45rem}.mcc-primary-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.15rem;padding:.25rem 1rem .7rem;max-width:1200px;margin:auto}.mcc-primary-nav a{display:flex;align-items:center;gap:.38rem;padding:.62rem .78rem;border-radius:8px;color:var(--mcc-ink);text-decoration:none;font-weight:600;font-size:.93rem}.mcc-primary-nav a:hover,.mcc-primary-nav a:focus-visible,.mcc-primary-nav a.is-active{background:var(--mcc-blue);color:#fff}.mcc-nav-icon{min-width:1.1em;text-align:center}
.mcc-app-main{width:min(1200px,calc(100% - 2rem));margin:1.2rem auto 2rem;min-height:55vh}.mcc-app-main>table[width="100%"],.mcc-app-main>table{max-width:100%}.mcc-subnav{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1rem;padding:.8rem;background:#fff;border:1px solid var(--mcc-line);border-radius:var(--mcc-radius)}.mcc-subnav>div{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}.mcc-subnav strong{margin-right:.25rem}.mcc-subnav a{padding:.4rem .55rem;border-radius:6px;text-decoration:none}.mcc-subnav a:hover{background:var(--mcc-soft)}
.mcc-footer{width:min(1200px,calc(100% - 2rem));margin:1.5rem auto;padding:1.2rem;border-top:1px solid var(--mcc-line)}
/* Make legacy content coexist with shell */
.mcc-app-main .topnav,.mcc-app-main .pubhead{display:none!important}.mcc-app-main .search,.mcc-app-main .option,.mcc-app-main .error{max-width:100%}.mcc-app-main img{max-width:100%;height:auto}.mcc-app-main input,.mcc-app-main select,.mcc-app-main textarea,.mcc-app-main button{max-width:100%}
@media(max-width:760px){.mcc-app-bar{min-height:64px}.mcc-brand img{max-width:110px;max-height:45px}.mcc-brand-copy strong{font-size:.95rem}.mcc-brand-copy small{font-size:.75rem}.mcc-user-greeting{display:none}.mcc-nav-toggle{display:inline-grid;place-items:center}.mcc-primary-nav{display:none;padding:.4rem .8rem .9rem;grid-template-columns:1fr 1fr}.mcc-primary-nav.is-open{display:grid}.mcc-primary-nav a{min-height:44px}.mcc-app-main{width:min(100% - 1rem,1200px);margin-top:.65rem}.mcc-subnav{display:block}.mcc-subnav>div{margin:.45rem 0}.mcc-app-main table{font-size:.9rem}}
@media(max-width:420px){.mcc-primary-nav{grid-template-columns:1fr}.mcc-brand-copy{display:none}}


/* Phase 5.1: public account access and stable registration-form containment. */
.mcc-portal-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.35rem;
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem .8rem;
  border-top:1px solid #e7edf2;
}
.mcc-portal-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#66788a;margin-right:.2rem}
.mcc-portal-nav a{display:inline-flex;align-items:center;gap:.35rem;padding:.48rem .66rem;border:1px solid var(--mcc-line);border-radius:999px;background:#fff;color:var(--mcc-ink);text-decoration:none;font-size:.86rem;font-weight:700}
.mcc-portal-nav a:hover,.mcc-portal-nav a:focus-visible,.mcc-portal-nav a.is-active{background:var(--mcc-blue-dark);border-color:var(--mcc-blue-dark);color:#fff}

/* The legacy registration pages contain nested tables and historic width
   attributes. Contain them inside the application shell instead of allowing
   an inner wrapper to create a horizontally draggable page. */
.mcc-public .mcc-app-main,
.mcc-public .mcc-app-main .search,
.mcc-public .mcc-app-main .search>div,
.mcc-public .mcc-app-main table.index,
.mcc-public .mcc-app-main td.option,
.mcc-public .mcc-app-main form,
.mcc-public .mcc-app-main form>table{
  min-width:0;
  max-width:100%;
}
.mcc-public .mcc-app-main .search{width:min(100%,960px);overflow:visible}
.mcc-public .mcc-app-main .search>div{width:100%;overflow:visible}
.mcc-public .mcc-app-main table.index{width:min(100%,900px)!important;table-layout:auto}
.mcc-public .mcc-app-main td.option{overflow-wrap:anywhere}
.mcc-public .mcc-app-main form{width:100%;overflow:clip}
.mcc-public .mcc-app-main form>table{width:min(100%,760px)!important;margin-inline:auto}
.mcc-public .mcc-app-main form input,
.mcc-public .mcc-app-main form select,
.mcc-public .mcc-app-main form textarea{min-width:0}

@media(max-width:760px){
  .mcc-portal-nav{display:grid;grid-template-columns:1fr 1fr;padding:.65rem .8rem .85rem;gap:.5rem;background:#f7fafc}
  .mcc-portal-label{grid-column:1/-1;text-align:center;margin:0 0 .05rem}
  .mcc-portal-nav a{justify-content:center;min-height:44px;border-radius:9px}
  .mcc-public .mcc-app-main .search{padding:0;margin:1rem auto}
  .mcc-public .mcc-app-main .search>div{padding:.65rem}
  .mcc-public .mcc-app-main table.index{margin:.5rem auto;box-shadow:none}
  .mcc-public .mcc-app-main form{overflow:visible}
  .mcc-public .mcc-app-main form>table{display:block;width:100%!important}
  .mcc-public .mcc-app-main form>table>tbody{display:block;width:100%}
}
@media(max-width:420px){.mcc-portal-nav{grid-template-columns:1fr}}


/* Phase 5.2: wider desktop registration cards without weakening mobile containment. */
@media (min-width: 1000px) {
  .mcc-page-driverapp .mcc-app-main {
    width: min(1440px, calc(100% - 3rem));
    max-width: 1440px;
  }
  .mcc-page-driverapp .mcc-app-main .search {
    width: min(100%, 1320px);
    margin-inline: auto;
  }
  .mcc-page-driverapp .mcc-app-main table.index {
    width: min(100%, 1280px) !important;
  }
  .mcc-page-driverapp .mcc-app-main form > table {
    width: min(100%, 1160px) !important;
  }
  .mcc-page-newcustomer .mcc-app-main {
    width: min(1320px, calc(100% - 3rem));
    max-width: 1320px;
  }
  .mcc-page-newcustomer .mcc-app-main table.index {
    width: min(100%, 1120px) !important;
  }
  .mcc-page-newcustomer .mcc-app-main form > table {
    width: min(100%, 980px) !important;
  }
}

/* Legacy availability rows may still be intrinsically wide; keep any remaining
   overflow inside the form card rather than on the entire page. */
.mcc-page-driverapp .mcc-app-main td.option,
.mcc-page-newcustomer .mcc-app-main td.option {
  max-width: 100%;
  overflow-x: auto;
}

/* Phase 5.3: consolidated login dropdown and full-width public forms. */
.mcc-login-menu{position:relative;display:flex;align-items:stretch}
.mcc-login-toggle{display:flex;align-items:center;gap:.38rem;padding:.62rem .78rem;border:0;border-radius:8px;background:transparent;color:var(--mcc-ink);font:inherit;font-weight:600;font-size:.93rem;cursor:pointer}
.mcc-login-toggle:hover,.mcc-login-toggle:focus-visible,.mcc-login-menu.is-open>.mcc-login-toggle{background:var(--mcc-blue);color:#fff}
.mcc-login-caret{font-size:.8em;margin-left:.12rem}
.mcc-login-dropdown{position:absolute;z-index:80;top:calc(100% + .35rem);left:50%;transform:translateX(-50%);width:max-content;min-width:220px;padding:.4rem;background:#fff;border:1px solid var(--mcc-line);border-radius:10px;box-shadow:var(--mcc-shadow)}
.mcc-login-dropdown[hidden]{display:none}
.mcc-login-dropdown a{display:flex;width:100%;padding:.7rem .8rem;border-radius:7px;white-space:nowrap}
.mcc-login-dropdown a+a{margin-top:.15rem}

/* Registration forms use the same generous content width as the pickup page. */
.mcc-page-driverapp .mcc-app-main,
.mcc-page-newcustomer .mcc-app-main{width:min(1200px,calc(100% - 2rem));max-width:1200px}
.mcc-page-driverapp .mcc-app-main .search,
.mcc-page-newcustomer .mcc-app-main .search{width:100%;max-width:1200px;margin-inline:auto}
.mcc-page-driverapp .mcc-app-main table.index,
.mcc-page-newcustomer .mcc-app-main table.index{width:100%!important;max-width:1200px!important}
.mcc-page-driverapp .mcc-app-main form,
.mcc-page-newcustomer .mcc-app-main form{width:100%;overflow:visible}
.mcc-page-driverapp .mcc-app-main form>table,
.mcc-page-newcustomer .mcc-app-main form>table{width:100%!important;max-width:none!important;table-layout:fixed;margin-inline:0}
.mcc-page-driverapp .mcc-app-main form>table td:first-child:not([colspan]),
.mcc-page-newcustomer .mcc-app-main form>table td:first-child:not([colspan]){width:220px;min-width:220px;padding-right:1rem;overflow-wrap:normal;word-break:normal}
.mcc-page-driverapp .mcc-app-main form>table td:nth-child(2),
.mcc-page-newcustomer .mcc-app-main form>table td:nth-child(2){width:auto}
.mcc-page-driverapp .mcc-app-main form input[type="text"],
.mcc-page-driverapp .mcc-app-main form input[type="password"],
.mcc-page-driverapp .mcc-app-main form input[type="email"],
.mcc-page-driverapp .mcc-app-main form input[type="tel"],
.mcc-page-driverapp .mcc-app-main form select,
.mcc-page-driverapp .mcc-app-main form textarea,
.mcc-page-newcustomer .mcc-app-main form input[type="text"],
.mcc-page-newcustomer .mcc-app-main form input[type="password"],
.mcc-page-newcustomer .mcc-app-main form input[type="email"],
.mcc-page-newcustomer .mcc-app-main form input[type="tel"],
.mcc-page-newcustomer .mcc-app-main form select,
.mcc-page-newcustomer .mcc-app-main form textarea{width:min(100%,620px)!important;max-width:100%}
.mcc-page-driverapp .availability-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}
.mcc-page-driverapp .availability-day{padding:.7rem .65rem}
.mcc-page-driverapp .availability-slot{font-size:.95rem;gap:.4rem}
.mcc-page-driverapp .mcc-app-main td.option,
.mcc-page-newcustomer .mcc-app-main td.option{overflow-x:visible}

@media(max-width:760px){
  .mcc-login-menu{display:block}
  .mcc-login-toggle{width:100%;min-height:44px;justify-content:flex-start}
  .mcc-login-dropdown{position:static;transform:none;width:100%;min-width:0;margin:.25rem 0 0;padding:.25rem;background:#f4f7fa;box-shadow:none}
  .mcc-login-dropdown a{min-height:44px;padding:.65rem .75rem}
  .mcc-page-driverapp .mcc-app-main,
  .mcc-page-newcustomer .mcc-app-main{width:min(100% - 1rem,1200px)}
  .mcc-page-driverapp .mcc-app-main form>table,
  .mcc-page-newcustomer .mcc-app-main form>table{table-layout:auto}
  .mcc-page-driverapp .mcc-app-main form>table td:first-child:not([colspan]),
  .mcc-page-newcustomer .mcc-app-main form>table td:first-child:not([colspan]){width:100%;min-width:0;padding-right:.55rem}
  .mcc-page-driverapp .availability-grid{grid-template-columns:1fr}
}

/* Phase 5.4: contact-style mobile registration forms.
   The legacy registration forms remain wide on desktop, but on phones each
   label/value row becomes a single-column block like contact.php. */
@media (max-width: 760px) {
  .mcc-page-driverapp .mcc-app-main .search,
  .mcc-page-newcustomer .mcc-app-main .search {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .mcc-page-driverapp .mcc-app-main table.index,
  .mcc-page-newcustomer .mcc-app-main table.index,
  .mcc-page-driverapp .mcc-app-main form > table,
  .mcc-page-newcustomer .mcc-app-main form > table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
  }

  .mcc-page-driverapp .mcc-app-main form > table > tbody,
  .mcc-page-newcustomer .mcc-app-main form > table > tbody,
  .mcc-page-driverapp .mcc-app-main form > table > tbody > tr,
  .mcc-page-newcustomer .mcc-app-main form > table > tbody > tr {
    display: block;
    width: 100%;
  }

  .mcc-page-driverapp .mcc-app-main form > table > tbody > tr > td,
  .mcc-page-newcustomer .mcc-app-main form > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    padding: .35rem .65rem;
    text-align: left !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .mcc-page-driverapp .mcc-app-main form > table > tbody > tr > td:first-child:not([colspan]),
  .mcc-page-newcustomer .mcc-app-main form > table > tbody > tr > td:first-child:not([colspan]) {
    width: 100% !important;
    min-width: 0 !important;
    padding: .55rem .65rem .15rem;
    font-weight: 600;
  }

  .mcc-page-driverapp .mcc-app-main form input[type="text"],
  .mcc-page-driverapp .mcc-app-main form input[type="password"],
  .mcc-page-driverapp .mcc-app-main form input[type="email"],
  .mcc-page-driverapp .mcc-app-main form input[type="tel"],
  .mcc-page-driverapp .mcc-app-main form select,
  .mcc-page-driverapp .mcc-app-main form textarea,
  .mcc-page-newcustomer .mcc-app-main form input[type="text"],
  .mcc-page-newcustomer .mcc-app-main form input[type="password"],
  .mcc-page-newcustomer .mcc-app-main form input[type="email"],
  .mcc-page-newcustomer .mcc-app-main form input[type="tel"],
  .mcc-page-newcustomer .mcc-app-main form select,
  .mcc-page-newcustomer .mcc-app-main form textarea {
    display: block;
    width: 100% !important;
    max-width: 32rem !important;
    min-width: 0 !important;
    margin: 0;
  }

  .mcc-page-driverapp .mcc-app-main form textarea,
  .mcc-page-newcustomer .mcc-app-main form textarea {
    resize: vertical;
  }

  .mcc-page-driverapp .mcc-app-main td.option,
  .mcc-page-newcustomer .mcc-app-main td.option {
    overflow-x: hidden;
  }
}

/* Stripe Checkout */
.mcc-payment-callout {
  margin: 1.25rem auto;
  padding: 1rem 1.25rem;
  max-width: 42rem;
  border: 1px solid #d8c879;
  border-radius: .6rem;
  background: #fff9d7;
  text-align: center;
}
.mcc-payment-callout h3 { margin-top: 0; }
.mcc-payment-form { margin: .75rem 0 0; }
.mcc-payment-button {
  appearance: none;
  border: 0;
  border-radius: .45rem;
  padding: .8rem 1.2rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: #14549b;
  cursor: pointer;
}
.mcc-payment-button:hover,
.mcc-payment-button:focus-visible { background: #0e3f78; }
.mcc-payment-confirmed {
  margin: 1rem auto;
  max-width: 42rem;
  padding: .8rem 1rem;
  border-radius: .45rem;
  background: #e8f7e8;
  font-weight: 700;
  text-align: center;
}