/* assets/css/avcsc.css — site stylesheet. Loaded LAST, after Bootstrap and Font Awesome.
   Palette from the Auto Value Certified Service Centers logo:
     black  #000000  navbar, headings
     yellow #ffdf1c  accent rule, active nav, focus ring, badges ON BLACK only (fails on white)
     red    #ce1141  primary actions (white on red 5.6:1), hover #a80d34
   Mobile-first: CSRs use this on a phone or tablet in a customer's shop. */

:root {
	--avc-black: #000;
	--avc-yellow: #ffdf1c;
	--avc-red: #ce1141;
	--avc-red-dk: #a80d34;
	--avc-bg: #f5f4ef;
	--avc-line: #e3e1d8;
	--avc-muted: #5b5a55;
	--avc-nav-h: 3.75rem;

	--bs-body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-body-bg: var(--avc-bg);
	--bs-body-color: #111;
	--bs-primary: var(--avc-red);
	--bs-primary-rgb: 206, 17, 65;
	--bs-link-color: var(--avc-red);
	--bs-link-color-rgb: 206, 17, 65;
	--bs-link-hover-color: var(--avc-red-dk);
	--bs-link-hover-color-rgb: 168, 13, 52;
	--bs-border-color: var(--avc-line);
	--bs-focus-ring-color: rgba(255, 223, 28, .6);
}

html { -webkit-text-size-adjust: 100%; }
body.avc-body { min-height: 100vh; display: flex; flex-direction: column; padding-top: var(--avc-nav-h); }
body.avc-bare { padding-top: 0; }

.avc-skip { position: absolute; z-index: 2000; top: .5rem; left: .5rem; background: #fff; padding: .5rem .75rem; border-radius: .375rem; }

/* ---- buttons / focus -------------------------------------------------------- */
.btn-primary {
	--bs-btn-bg: var(--avc-red); --bs-btn-border-color: var(--avc-red);
	--bs-btn-hover-bg: var(--avc-red-dk); --bs-btn-hover-border-color: var(--avc-red-dk);
	--bs-btn-active-bg: var(--avc-red-dk); --bs-btn-active-border-color: var(--avc-red-dk);
	--bs-btn-disabled-bg: var(--avc-red); --bs-btn-disabled-border-color: var(--avc-red);
}
.btn-dark {
	--bs-btn-bg: #000; --bs-btn-border-color: #000; --bs-btn-hover-bg: #222; --bs-btn-hover-border-color: #222;
}
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
	border-color: #000;
	box-shadow: 0 0 0 .25rem rgba(255, 223, 28, .6);
}
.form-check-input:checked { background-color: var(--avc-red); border-color: var(--avc-red); }
.btn, .form-control, .form-select { min-height: 2.75rem; } /* thumb-sized targets */

/* ---- navbar ----------------------------------------------------------------- */
.avc-navbar {
	background: var(--avc-black);
	min-height: var(--avc-nav-h);
	border-bottom: 3px solid var(--avc-yellow);
	--bs-navbar-color: rgba(255, 255, 255, .85);
	--bs-navbar-hover-color: #fff;
	--bs-navbar-active-color: var(--avc-yellow);
	--bs-navbar-toggler-border-color: rgba(255, 255, 255, .35);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.avc-navbar .navbar-brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; }
.avc-navbar .navbar-brand img { height: 2.4rem; width: auto; }
.avc-navbar .navbar-brand span { font-size: 1.05rem; letter-spacing: .01em; }
.avc-navbar .nav-link { font-weight: 600; padding: .75rem .9rem; }
.avc-navbar .nav-link.active { color: var(--avc-yellow); }
.avc-user {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 999px;
	padding: .45rem .9rem; font-weight: 600; min-height: 2.75rem;
}
.avc-user:hover, .avc-user:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 991.98px) {
	.avc-navbar .navbar-collapse { padding: .5rem 0 1rem; }
	.avc-navbar .dropdown { margin-top: .5rem; }
	.avc-viewas { margin: .5rem 0; }
}
.avc-viewas .form-select { min-height: 2.5rem; max-width: 20rem; background-color: #1c1c1c; color: #fff; border-color: rgba(255, 255, 255, .35); }
.avc-viewas-bar { background: var(--avc-yellow); color: #000; padding: .5rem 0; font-size: .9rem; border-bottom: 1px solid #d4b800; }

/* ---- breadcrumb / layout ----------------------------------------------------- */
.avc-crumbbar { background: #fff; border-bottom: 1px solid var(--avc-line); }
.avc-crumbbar .breadcrumb { margin: 0; padding: .6rem 0; font-size: .9rem; }
.avc-container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.avc-main { flex: 1 0 auto; width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.avc-footer { text-align: center; color: var(--avc-muted); font-size: .8rem; padding: 1rem; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { color: #000; font-weight: 700; }

/* ---- flash: floats above content so it never shifts the page ------------------- */
.avc-flash {
	position: fixed; z-index: 1080; left: 50%; transform: translateX(-50%);
	top: calc(var(--avc-nav-h) + .75rem); width: min(36rem, calc(100% - 1.5rem));
}
.avc-bare .avc-flash { top: .75rem; }
.avc-flash .alert { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15); transition: opacity .6s ease, transform .6s ease; }
.avc-flash .alert.flash-out { opacity: 0 !important; transform: translateY(-.5rem) !important; transition: opacity .6s ease, transform .6s ease !important; }

/* ---- cards ------------------------------------------------------------------- */
.avc-card { background: #fff; border: 1px solid var(--avc-line); border-radius: .75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.avc-card-body { padding: 1rem 1.1rem; }
@media (min-width: 576px) { .avc-card-body { padding: 1.25rem 1.5rem; } }

/* ---- sign-in ----------------------------------------------------------------- */
.avc-login { max-width: 26rem; margin: 1rem auto 0; }
.avc-login-logo { display: block; width: 9rem; height: auto; margin: 0 auto .75rem; }

/* ---- customer list ----------------------------------------------------------- */
.avc-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.avc-tools .form-control { flex: 1 1 14rem; }
.avc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.avc-chip {
	border: 1px solid var(--avc-line); background: #fff; color: #111; border-radius: 999px;
	padding: .4rem .85rem; font-size: .875rem; font-weight: 600; min-height: 2.5rem;
}
.avc-chip[aria-pressed="true"] { background: #000; border-color: #000; color: var(--avc-yellow); }

.avc-list { display: grid; gap: .6rem; }
@media (min-width: 768px) { .avc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avc-cust {
	display: block; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--avc-line); border-left: 5px solid var(--avc-line);
	border-radius: .6rem; padding: .85rem 1rem;
}
a.avc-cust:hover, a.avc-cust:focus-visible { border-color: #000; border-left-color: var(--avc-red); color: inherit; }
.avc-cust[data-status="PENDING"]  { border-left-color: var(--avc-yellow); }
.avc-cust[data-status="RENEWED"]  { border-left-color: #198754; }
.avc-cust[data-status="DECLINED"],
.avc-cust[data-status="NORESP"]   { border-left-color: var(--avc-red); }
.avc-cust-name { font-weight: 700; font-size: 1.02rem; }
.avc-cust-meta { color: var(--avc-muted); font-size: .85rem; }
.avc-cust-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.avc-badge { display: inline-block; border-radius: 999px; padding: .2rem .6rem; font-size: .78rem; font-weight: 700; }
.avc-badge-PENDING  { background: #000; color: var(--avc-yellow); }
.avc-badge-RENEWED  { background: #d1e7dd; color: #0f5132; }
.avc-badge-DECLINED,
.avc-badge-NORESP   { background: #f8d7da; color: #842029; }
.avc-empty { text-align: center; color: var(--avc-muted); padding: 2rem 1rem; }

/* ---- customer-facing (bare) renewal page ------------------------------------- */
.avc-barehead {
	background: #000; border-bottom: 3px solid var(--avc-yellow);
	display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem;
}
.avc-barelogo { height: 3rem; width: auto; }
.avc-baretitle { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
@media (min-width: 576px) { .avc-barelogo { height: 3.75rem; } .avc-baretitle { font-size: 1.25rem; } }

.avc-renew { max-width: 46rem; margin: 0 auto; }
.avc-fee { font-size: 1.3rem; font-weight: 700; text-align: center; padding: .75rem 1rem; border: 2px solid #000; border-radius: .6rem; background: #fff; }
.avc-agreement > :last-child { margin-bottom: 0; }
.avc-agreement h3, .avc-agreement h4 { font-size: 1.1rem; margin-top: 1rem; }
.avc-agreement h3:first-child, .avc-agreement h4:first-child { margin-top: 0; }

.avc-options { display: grid; gap: .5rem; }
.avc-option {
	display: flex; align-items: flex-start; gap: .75rem; cursor: pointer;
	padding: .9rem 1rem; border: 2px solid var(--avc-line); border-radius: .6rem; background: #fff; min-height: 3.25rem;
}
.avc-option input { margin-top: .15rem; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; accent-color: var(--avc-red); }
.avc-option:has(input:checked) { border-color: #000; box-shadow: inset 5px 0 0 var(--avc-red); }
.avc-option:has(input:focus-visible) { outline: 3px solid var(--avc-yellow); outline-offset: 2px; }
.avc-note { padding: .7rem .9rem; border-radius: .5rem; background: #fff8cc; border: 1px solid #f0d84a; }
.avc-note:empty { display: none; }

@media print {
	.avc-navbar, .avc-crumbbar, .avc-footer, .avc-flash, .avc-noprint { display: none !important; }
	body.avc-body { padding-top: 0; background: #fff; }
	.avc-barehead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}