/* The login and the account pages of the tester: the colours of the tester (deep blue on a soft ground). */
:root { --ac-ink: #1d2b44; --ac-mute: #5b6678; --ac-line: #dbe4f3; --ac-bg: #eef2f9; --ac-card: #fff; --ac-blue: #2f6fde; --ac-navy: #0b1830; --ac-green: #1e9650; --ac-red: #b3261e; --ac-amber: #e08a00; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ac-bg); color: var(--ac-ink); font: 15px/1.5 "Segoe UI", system-ui, Arial, sans-serif; }
a { color: var(--ac-blue); }
.ac-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; background: linear-gradient(115deg, #0b1830 0%, #17356d 55%, #2058a8 100%); color: #fff; }
.ac-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }
.ac-logo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .16); font-size: 24px; }
.ac-nav { display: flex; align-items: center; gap: 18px; }
.ac-nav a, .ac-link { color: rgba(255, 255, 255, .9); font: inherit; font-size: 14px; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.ac-nav a:hover, .ac-link:hover { color: #fff; text-decoration: underline; }
.ac-inline { display: inline; margin: 0; }
.ac-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: 18px; }
.ac-auth .ac-main { max-width: 460px; justify-content: center; }
.ac-card { background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: 18px; padding: 24px; box-shadow: 0 8px 24px rgba(20, 40, 90, .08); }
.ac-card h1 { margin: 0 0 4px; font-size: 24px; }
.ac-card h2 { margin: 0 0 4px; font-size: 19px; }
.ac-card h3 { margin: 0 0 8px; font-size: 14px; }
.ac-sub { margin: 0 0 16px; color: var(--ac-mute); }
.ac-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 20px; padding: 4px; border-radius: 12px; background: #e9eef7; }
.ac-tabs a { padding: 9px 8px; border-radius: 9px; text-align: center; color: var(--ac-mute); font-weight: 600; text-decoration: none; }
.ac-tabs a.on { background: #fff; color: #1d4fb8; box-shadow: 0 1px 4px rgba(20, 40, 90, .18); }
form label { display: block; margin: 14px 0 5px; font-size: 13px; font-weight: 600; color: #3a475c; }
.ac-opt { color: #8a97ad; font-weight: 400; }
form input[type=text], form input[type=email], form input[type=password] { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #cfd8e6; border-radius: 11px; background: #fbfcfe; color: var(--ac-ink); font: inherit; }
form input:focus { outline: 3px solid rgba(47, 111, 222, .22); border-color: var(--ac-blue); background: #fff; }
.ac-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; margin-top: 18px; padding: 0 22px; border: 1px solid #cfd8e6; border-radius: 11px; background: #fff; color: var(--ac-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ac-btn.main { width: 100%; border-color: var(--ac-blue); background: var(--ac-blue); color: #fff; box-shadow: 0 4px 12px rgba(47, 111, 222, .3); }
.ac-btn.main:hover { background: #2760c4; }
.ac-account .ac-btn.main { width: auto; }
.ac-msg { margin: 0 0 6px; padding: 10px 14px; border-radius: 11px; font-size: 14px; }
.ac-msg.err { background: #fff1ef; border: 1px solid #f3c6c1; color: #a8271f; }
.ac-msg.info { margin-top: 16px; background: #eef4ff; border: 1px solid #c7d9f7; color: #24467f; }
.ac-fine { margin: 16px 0 0; text-align: center; color: var(--ac-mute); font-size: 13.5px; }
.ac-who { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ac-who b { display: block; font-size: 17px; }
.ac-who span:not(.ac-av) { color: var(--ac-mute); font-size: 14px; }
.ac-av { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #e8f0fe; color: #1d4fb8; font-size: 20px; font-weight: 700; }
.ac-plan { padding: 18px 20px; border-radius: 14px; background: #f4f7fd; border: 1px solid var(--ac-line); }
.ac-planhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ac-badge { display: inline-block; padding: 3px 14px; border-radius: 99px; background: #e8f0fe; color: #1d4fb8; font-weight: 700; font-size: 14px; }
.ac-badge.sm { padding: 2px 12px; font-size: 12.5px; }
.ac-badge.pro, .ac-plan-pro .ac-badge { background: #e4f6ea; color: #1b7a43; }
.ac-plan-expired .ac-badge, .ac-plan-guest .ac-badge { background: #fdeceb; color: var(--ac-red); }
.ac-left { color: var(--ac-mute); font-size: 14px; }
.ac-bar { height: 8px; margin: 14px 0 2px; border-radius: 99px; background: #dde6f5; overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2f6fde, #7b4bc4); }
.ac-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ac-planbox { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--ac-line); border-radius: 14px; background: linear-gradient(135deg, #f4f8ff 0%, #fff 70%); }
.ac-planbox b { font-size: 15px; }
.ac-price { font-size: 26px; font-weight: 700; color: #17356d; }
.ac-days { color: var(--ac-mute); font-size: 13px; }
.ac-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ac-ul { margin: 0; padding: 0; list-style: none; }
.ac-ul li { position: relative; padding: 5px 0 5px 24px; border-bottom: 1px solid #eef2f8; font-size: 14px; }
.ac-ul li::before { content: "\f00c"; position: absolute; left: 0; top: 6px; font-family: FontAwesome; font-size: 13px; color: var(--ac-green); }
.ac-foot { padding: 18px; text-align: center; color: var(--ac-mute); font-size: 13px; }
@media (max-width: 560px) { .ac-top { padding: 12px 14px; } .ac-card { padding: 18px; } }

.ac-planbox { position: relative; }
.ac-planbox.best { border-color: #9bd4b0; background: linear-gradient(135deg, #f2fbf5 0%, #fff 70%); }
.ac-price small { color: var(--ac-mute); font-size: 14px; font-weight: 400; }
.ac-save { position: absolute; top: 12px; right: 14px; padding: 2px 10px; border-radius: 99px; background: var(--ac-green); color: #fff; font-size: 12px; font-weight: 700; }

.ac-msg.ok { background: #eaf6ee; border: 1px solid #b7e0c4; color: #1b6b3b; font-weight: 600; }
form.ac-planbox { margin: 0; }
form.ac-planbox .ac-btn { margin-top: 12px; width: 100%; }
.ac-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ac-table th { text-align: left; padding: 8px 10px; background: #eef3fb; color: #44536b; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.ac-table td { padding: 9px 10px; border-top: 1px solid #edf1f8; }
.ac-table small { color: var(--ac-mute); word-break: break-all; }
.ac-doc h1 { margin-top: 0; }
.ac-doc h2 { margin: 22px 0 6px; font-size: 17px; }
.ac-doc p, .ac-doc li { color: #2a3547; }
.ac-doc ul { padding-left: 20px; }

/* with the menu of the site above (Bootstrap and the site styles are loaded too): the page starts under the fixed menu, and the links keep their colours */
body.ac-page { padding-top: 50px; }
.ac-brand:hover, .ac-brand:focus { color: #fff; text-decoration: none; }
a.ac-btn:hover, a.ac-btn:focus { text-decoration: none; }
a.ac-btn.main:hover, a.ac-btn.main:focus { color: #fff; }
.ac-tabs a:hover { text-decoration: none; color: #1d4fb8; }
.ac-nav a:hover { text-decoration: underline; }
.ac-card form input[type=text], .ac-card form input[type=email], .ac-card form input[type=password] { box-shadow: none; }
/* the Home button stays next to the name of the site (the menu itself scrolls sideways) */
.navbar-header .nav-homebtn { float: left; margin: 11px 6px 0 2px; padding: 4px 13px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 99px; color: #fff; font-size: 13px; line-height: 18px; text-decoration: none; }
.navbar-header .nav-homebtn:hover, .navbar-header .nav-homebtn:focus { background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; }
.ac-card h1, .ac-card h2 { font-weight: 700; }
.ac-card h3 { font-weight: 600; }

/* the eye in the password box: shows or hides what was typed */
.ac-pw { position: relative; }
.ac-pw input { padding-right: 48px; }
.ac-eye { position: absolute; top: 0; right: 0; width: 46px; height: 44px; padding: 0; border: 0; border-radius: 0 11px 11px 0; background: none; color: #7a869b; font-size: 17px; cursor: pointer; }
.ac-eye:hover { color: var(--ac-blue); }
.ac-eye:focus-visible { outline: 3px solid rgba(47, 111, 222, .35); outline-offset: -3px; }
.ac-eye[aria-pressed="true"] { color: var(--ac-blue); }

/* the login page: what the tester does and its screenshots, beside the form */
.ac-auth .ac-main { max-width: 1100px; }
.ac-authwrap { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 36px; align-items: start; }
.ac-authwrap .ac-authcard { grid-column: 2; grid-row: 1; }
.ac-show { grid-column: 1; grid-row: 1; min-width: 0; padding-top: 6px; }
.ac-show h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; color: var(--ac-navy); }
.ac-show .ac-ul { margin-bottom: 22px; }
.ac-show .ac-ul li { font-size: 15px; }
.ac-shots { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; }
.ac-shots figure { flex: 0 0 auto; width: 270px; margin: 0; scroll-snap-align: start; }
.ac-shots figcaption { margin-top: 8px; color: var(--ac-mute); font-size: 13px; text-align: center; }
.ac-shot { display: block; width: 100%; padding: 0; border: 1px solid var(--ac-line); border-radius: 14px; background: #fff; overflow: hidden; cursor: zoom-in; box-shadow: 0 6px 18px rgba(20, 40, 90, .12); transition: transform .15s, box-shadow .15s; }
.ac-shot:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 40, 90, .18); }
.ac-shot:focus-visible { outline: 3px solid rgba(47, 111, 222, .45); outline-offset: 2px; }
.ac-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
.ac-lb { max-width: min(94vw, 1100px); max-height: 92vh; padding: 12px; border: 0; border-radius: 14px; background: #fff; text-align: center; }
.ac-lb::backdrop { background: rgba(8, 16, 34, .72); }
.ac-lb img { display: block; max-width: 100%; max-height: calc(92vh - 70px); margin: 0 auto; border-radius: 8px; }
.ac-lb p { margin: 8px 0 0; color: var(--ac-mute); font-size: 14px; }
.ac-lb-x { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1d2b44; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
@media (max-width: 900px) {
    .ac-authwrap { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 460px; margin: 0 auto; width: 100%; }
    .ac-authwrap .ac-authcard, .ac-show { grid-column: 1; }
    .ac-show { grid-row: 2; }
    .ac-show h2 { font-size: 23px; }
}