/* Account center: the redesigned profile pages for Visitor, Driver and Affiliate. Light page, red accent, mobile first. */
.ac-page { position: relative; isolation: isolate; background: #0b0b0e; color: #1b1c20; padding: 0 0 64px; font-size: 15px; }
.ac-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../images/bg/comp-page.webp?v=1) center / cover no-repeat; opacity: .4; filter: brightness(.4); }
.ac-band { position: relative; z-index: 1; overflow: hidden; background: #0d0d10; min-height: 330px; display: flex; align-items: flex-end; }
.ac-band::before { content: ""; position: absolute; inset: 0; background: url(../images/bg/comp-hero.webp?v=3) center 35% / cover no-repeat; opacity: .4; }
.ac-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 13, 16, .75), rgba(13, 13, 16, 0) 60%); }
.ac-cut { position: relative; z-index: 2; height: 22px; border-top: 3px solid #d4141d; pointer-events: none; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 22px 22px; box-shadow: 0 10px 28px -6px rgba(212, 20, 29, .55); -webkit-mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.ac-band .in { position: relative; z-index: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 16px 60px; }
.ac-band small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff5a61; margin-bottom: 4px; }
.ac-band h2 { color: #fff !important; font-size: 26px; font-weight: 800; }
.ac-page * { box-sizing: border-box; }
.ac-wrap { z-index: 1; max-width: 1180px; margin: 34px auto 0; padding: 0 16px; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; position: relative; }
.ac-page h1, .ac-page h2, .ac-page h3, .ac-page h4 { text-transform: none; letter-spacing: 0; color: #111216; margin: 0; }
.ac-page a { text-decoration: none; }
.ac-page p { margin: 0; text-align: start; }

/* side menu */
.ac-side { position: sticky; top: 16px; background: #fff; border: 1px solid #e6e6ea; border-radius: 18px; padding: 12px; }
.ac-side .ac-brand { font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #8b8d93; padding: 6px 10px 10px; }
.ac-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: #3a3c43; font-size: 14.5px; font-weight: 600; }
.ac-nav a i { width: 18px; text-align: center; color: #8b8d93; font-size: 16px; }
.ac-nav a:hover { background: #f4f4f6; color: #111216; }
.ac-nav a.on { background: #fdecec; color: #b3111a; }
.ac-nav a.on i { color: #d4141d; }
.ac-nav a.sell { background: #d4141d; color: #fff; margin: 4px 0 8px; }
.ac-nav a.sell i { color: #fff; }
.ac-nav a.sell:hover { background: #b3111a; color: #fff; }
.ac-nav .ac-sep { height: 1px; background: #eeeef1; margin: 8px 6px; }
.ac-lang { display: flex; gap: 8px; padding: 8px 12px 4px; font-size: 13px; color: #6b6e76; }
.ac-lang a { color: #6b6e76; font-weight: 600; }
.ac-lang a.cur { color: #111216; }

/* main column */
.ac-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ac-card { background: #fff; border: 1px solid #e6e6ea; border-radius: 18px; padding: 20px 22px; }
.ac-card > h3, .ac-h { font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ac-h small { font-size: 13px; font-weight: 500; color: #6b6e76; }
.ac-link { color: #b3111a; font-weight: 600; font-size: 13.5px; cursor: pointer; background: none; border: 0; padding: 0; }
.ac-link:hover { text-decoration: underline; color: #8f0e15; }
.ac-muted { color: #6b6e76; }

/* hero */
.ac-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ac-av { position: relative; width: 84px; height: 84px; border-radius: 50%; background: #fdecec center/cover no-repeat; color: #b3111a; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; border: 3px solid #fff; box-shadow: 0 0 0 1px #e6e6ea; flex: none; cursor: pointer; padding: 0; }
.ac-av .cam { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: #111216; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; border: 2px solid #fff; }
.ac-id { flex: 1; min-width: 200px; }
.ac-id h1 { font-size: 24px; font-weight: 800; line-height: 1.2; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ac-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #f0f0f3; color: #3a3c43; font-size: 12.5px; font-weight: 600; }
.ac-chip.red { background: #fdecec; color: #b3111a; }
.ac-chip.ok { background: #e7f6ec; color: #1d6b39; }
.ac-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid #d9d9de; background: #fff; color: #111216; font-weight: 700; font-size: 14px; cursor: pointer; }
.ac-btn:hover { background: #f4f4f6; color: #111216; }
.ac-btn.red { background: #d4141d; border-color: #d4141d; color: #fff; }
.ac-btn.red:hover { background: #b3111a; border-color: #b3111a; color: #fff; }
.ac-btn.white { background: #fff; color: #b3111a; border-color: #fff; }
.ac-btn.white:hover { background: #fdecec; }

/* driver cover banner */
.ac-cover { height: 170px; border-radius: 18px 18px 0 0; background: #2a2b30 center/cover no-repeat; position: relative; }
.ac-cover .ac-btn { position: absolute; inset-inline-end: 12px; top: 12px; min-height: 36px; font-size: 13px; padding: 0 14px; }
.ac-card.has-cover { padding: 0; overflow: hidden; }
.ac-card.has-cover .ac-hero { padding: 0 22px 20px; margin-top: -42px; }
.ac-card.has-cover .ac-id { padding-top: 46px; }
.ac-card.has-cover .ac-actions { padding-top: 52px; }

/* sell for free */
.ac-sell { background: #d4141d; color: #fff; border: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ac-sell .ico { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.ac-sell h3 { color: #fff; font-size: 19px; margin: 0 0 3px; display: block; }
.ac-sell p { color: rgba(255,255,255,.88); font-size: 14px; }
.ac-sell .ac-grow { flex: 1; min-width: 200px; }

/* progress and checklist */
.ac-bar { height: 8px; border-radius: 4px; background: #eeeef1; overflow: hidden; margin: 6px 0 12px; }
.ac-bar i { display: block; height: 100%; background: #d4141d; border-radius: 4px; }
.ac-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.ac-check div { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 5px 0; color: #3a3c43; }
.ac-check i { font-size: 17px; color: #c3c4ca; }
.ac-check .done i { color: #1d9b50; }
.ac-check .done span { color: #6b6e76; }
.ac-check a { color: inherit; }

/* detail rows */
.ac-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eeeef1; font-size: 14.5px; }
.ac-row:first-of-type { border-top: 0; }
.ac-row .k { width: 120px; color: #6b6e76; flex: none; }
.ac-row .v { flex: 1; min-width: 0; font-weight: 600; word-break: break-word; }
.ac-row .v.empty { color: #9a9ca3; font-weight: 400; }

/* grids and tiles */
.ac-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ac-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ac-tile { background: #f7f7f9; border: 1px solid #eeeef1; border-radius: 14px; padding: 14px 16px; }
.ac-tile b { display: block; font-size: 24px; font-weight: 800; color: #111216; }
.ac-tile span { font-size: 13px; color: #6b6e76; }
.ac-qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ac-qa a { display: flex; flex-direction: column; gap: 6px; background: #f7f7f9; border: 1px solid #eeeef1; border-radius: 14px; padding: 14px; color: #111216; font-weight: 700; font-size: 14px; }
.ac-qa a i { color: #d4141d; font-size: 20px; }
.ac-qa a small { color: #6b6e76; font-weight: 500; font-size: 12.5px; }
.ac-qa a:hover { border-color: #f0b3b6; background: #fff; }

/* referral link */
.ac-copy { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-copy input { flex: 1; min-width: 200px; height: 46px; border: 1px solid #d9d9de; border-radius: 12px; padding: 0 14px; font-size: 14px; background: #f7f7f9; color: #111216; direction: ltr; text-align: left; }
.ac-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ac-steps div { background: #f7f7f9; border-radius: 14px; padding: 14px; font-size: 14px; }
.ac-steps b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ac-steps b span { width: 24px; height: 24px; border-radius: 50%; background: #d4141d; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

/* driver tabs and media */
.ac-tabs { display: flex; gap: 6px; overflow-x: auto; background: #fff; border: 1px solid #e6e6ea; border-radius: 14px; padding: 5px; }
.ac-tabs button { flex: none; border: 0; background: transparent; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 14px; color: #5a5d65; cursor: pointer; }
.ac-tabs button.on { background: #fdecec; color: #b3111a; }
.ac-panel { display: none; flex-direction: column; gap: 16px; }
.ac-panel.on { display: flex; }
.ac-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.ac-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; background: #eeeef1 center/cover no-repeat; }
.ac-photo a { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(17,18,22,.75); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ac-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #e6e6ea; border-radius: 12px; font-weight: 600; font-size: 14px; color: #111216; background: #fff; }
.ac-links a i { font-size: 18px; color: #d4141d; }
.ac-empty { border: 1px dashed #d9d9de; border-radius: 14px; padding: 18px; text-align: center; color: #6b6e76; font-size: 14px; }
.ac-drop .dropzone { border: 2px dashed #d9d9de; border-radius: 14px; background: #fafafb; min-height: 110px; padding: 18px; }
.ac-drop .dropzone .dz-message { margin: 18px 0; color: #5a5d65; font-weight: 600; }
.ac-notice { background: #fff8e6; border: 1px solid #f3dd9b; color: #6b5200; border-radius: 14px; padding: 14px 18px; font-size: 13.5px; }

/* pop-ups (the existing edit windows, restyled) */
.modal-style .modal-content { border: 0; border-radius: 20px; overflow: hidden; }
.modal-style .modal-header { background: #fff; border-bottom: 1px solid #eeeef1; padding: 16px 22px; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; color: #111216; }
.modal-style .modal-header .close { opacity: .6; font-size: 26px; margin: 0; padding: 0; }
.modal-style .modal-body { padding: 20px 22px 22px; }
.modal-style .lbb { font-size: 13px; font-weight: 700; color: #3a3c43; margin-bottom: 6px; text-transform: none; }
.modal-style .form-control { height: 46px; border: 1px solid #d9d9de; border-radius: 12px; padding: 0 14px; background: #f7f7f9; font-size: 14.5px; box-shadow: none; }
.modal-style textarea.form-control { height: auto; padding: 12px 14px; }
.modal-style .form-control:focus { border-color: #d4141d; background: #fff; box-shadow: 0 0 0 4px rgba(212,20,29,.12); outline: 0; }
.modal-style .button.red, .modal-style .btn-primary4, .modal-style input[type=submit].button { background: #d4141d; color: #fff; border: 0; border-radius: 12px; min-height: 44px; padding: 0 24px; font-weight: 700; cursor: pointer; }
.modal-style .btn-primary4 { background: #111216; }
.modal-backdrop.show { opacity: .55; }

@media (min-width: 768px) and (max-width: 1199px) {
    .ac-band { min-height: 410px; }
}
@media (max-width: 767px) {
    .ac-band { min-height: 200px; }
    .ac-band .in { padding-bottom: 36px; }
    .ac-cut { height: 16px; background-size: 16px 16px; }
}
@media (max-width: 900px) {
    .ac-band h2 { font-size: 21px; }
    .ac-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px; }
    .ac-side { position: static; padding: 8px; min-width: 0; }
    .ac-side .ac-brand, .ac-lang { display: none; }
    .ac-nav { display: flex; gap: 6px; overflow-x: auto; }
    .ac-nav a { flex: none; padding: 9px 13px; white-space: nowrap; }
    .ac-nav .ac-sep { display: none; }
    .ac-nav a.sell { margin: 0; }
}
@media (max-width: 575px) {
    .ac-page { padding: 0 0 44px; }
    .ac-card { padding: 16px; border-radius: 16px; }
    .ac-id h1 { font-size: 21px; }
    .ac-g2, .ac-g3, .ac-check { grid-template-columns: 1fr; }
    .ac-row .k { width: 88px; }
    .ac-hero { gap: 14px; }
    .ac-actions, .ac-actions .ac-btn { width: 100%; }
    .ac-sell .ac-btn { width: 100%; }
    .ac-cover { height: 130px; }
}

/* club manager box above "Sell your car" */
.ac-club { background: #15171d; color: #fff; border: 0; border-inline-start: 5px solid #d4141d; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ac-club .ico { width: 52px; height: 52px; border-radius: 14px; background: rgba(212,20,29,.2); color: #ff6a72; display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.ac-club h3 { color: #fff; font-size: 19px; margin: 0 0 3px; display: block; }
.ac-club p { color: rgba(255,255,255,.8); font-size: 14px; margin: 0; }
.ac-club .ac-grow { flex: 1; min-width: 200px; }
.ac-club-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .ac-club .ac-btn { width: 100%; } .ac-club-btns { width: 100%; } }