/* Avanta Quick Registration - front-end. Scoped under .aqr. Renders content only; the theme provides header/nav/footer. */ .aqr{ --aqr-blue:#001ed2;--aqr-navy:#00003c;--aqr-ink:#0a1024;--aqr-muted:#5a6280; --aqr-line:#d9deee;--aqr-bg:#f5f7fd;--aqr-card:#fff;--aqr-radius:14px; --aqr-green-bg:#e6f8f3;--aqr-green:#087a55;--aqr-amber-bg:#fff6e6;--aqr-amber:#9a6407; --aqr-red-bg:#fdecea;--aqr-red:#c62828; font-family:inherit;color:var(--aqr-ink);max-width:960px;margin:0 auto;line-height:1.6; } .aqr *,.aqr *::before,.aqr *::after{box-sizing:border-box} .aqr-hidden{display:none !important} /* V7 #8: the full registration page fills the theme's content column so it lines up with the site header width (no full-bleed breakout). The drawer keeps its own narrow width. */ .aqr:not(.aqr-drawer){max-width:100%} /* Let the embedded Fluent Form participant repeater scroll rather than overflow the page on narrow screens. */ .aqr-formwrap .ff-el-repeater,.aqr-formwrap .ff_repeater_table{max-width:100%;overflow-x:auto} .aqr-note{border-radius:var(--aqr-radius);padding:14px 18px;margin:0 0 18px;font-size:14px} .aqr-note p{margin:0 0 6px}.aqr-note p:last-child{margin:0} .aqr-note--info{background:#eef1fc;border:1px solid #c7d0f5;color:var(--aqr-navy)} .aqr-note--warn{background:var(--aqr-amber-bg);border:1px solid #f0c36b;color:#6b4a05} .aqr-note--muted{background:var(--aqr-bg);border:1px solid var(--aqr-line);color:var(--aqr-muted)} .aqr-admin-warn{background:var(--aqr-red-bg);border:1px solid #f2b8b5;color:var(--aqr-red);padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:13px} .aqr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:8px} .aqr-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .aqr-label{font-weight:700;color:var(--aqr-navy);font-size:14px} .aqr-req{color:var(--aqr-red)} .aqr-hint{font-size:12px;color:var(--aqr-muted);min-height:16px} .aqr-select{width:100%;padding:12px 14px;border:1.5px solid var(--aqr-line);border-radius:10px;background:#fff;font-size:15px;color:var(--aqr-ink);appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6280' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;transition:border-color .15s,box-shadow .15s} .aqr-select:focus{outline:none;border-color:var(--aqr-blue);box-shadow:0 0 0 3px rgba(0,30,210,.12)} .aqr-select:disabled{background:var(--aqr-bg);color:#9aa1bd;cursor:not-allowed} .aqr-schedule{margin:10px 0 22px} .aqr-sec-title{color:var(--aqr-navy);font-size:16px;font-weight:800;margin:0 0 12px} .aqr-loading,.aqr-noschedule{padding:18px;border:1px dashed var(--aqr-line);border-radius:12px;background:var(--aqr-bg);color:var(--aqr-muted);text-align:center;font-size:14px} /* Class / schedule cards */ .aqr-clslist{display:flex;flex-direction:column;gap:12px} .aqr-cls{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--aqr-card);border:1.5px solid var(--aqr-line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s} .aqr-cls:hover{border-color:var(--aqr-blue)} .aqr-cls.is-selected{border-color:var(--aqr-blue);box-shadow:0 0 0 3px rgba(0,30,210,.10);background:#fbfcff} .aqr-cls.is-closed{opacity:.6;cursor:not-allowed} .aqr-cls input{position:absolute;opacity:0;width:0;height:0} .aqr-cls__radio{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--aqr-line);margin-top:2px;position:relative;transition:border-color .15s} .aqr-cls:hover .aqr-cls__radio{border-color:var(--aqr-blue)} .aqr-cls input:checked+.aqr-cls__radio{border-color:var(--aqr-blue)} .aqr-cls input:checked+.aqr-cls__radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--aqr-blue)} .aqr-cls input:focus-visible+.aqr-cls__radio{box-shadow:0 0 0 3px rgba(0,30,210,.2)} .aqr-cls__body{flex:1 1 auto;min-width:0} /* V3: stack name -> status -> dates so every card aligns (long "seats remaining" badges no longer wrap only on some cards). */ .aqr-cls__top{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .aqr-cls__name{font-weight:700;color:var(--aqr-navy);font-size:15.5px} .aqr-cls__meta{display:block;font-size:12.5px;color:var(--aqr-muted);margin-top:3px} .aqr-cls__dates{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .aqr-chip{display:inline-block;background:var(--aqr-bg);border:1px solid var(--aqr-line);border-radius:8px;padding:4px 10px;font-size:12.5px;color:var(--aqr-ink);font-weight:600} .aqr-chip--muted{color:var(--aqr-muted);font-weight:500} .aqr-status{display:inline-block;font-size:11px;font-weight:700;padding:3px 11px;border-radius:100px;background:var(--aqr-green-bg);color:var(--aqr-green);white-space:nowrap} .aqr-status--limited,.aqr-status--coming_soon{background:var(--aqr-amber-bg);color:var(--aqr-amber)} .aqr-status--full,.aqr-status--closed,.aqr-status--cancelled,.aqr-status--completed{background:var(--aqr-red-bg);color:var(--aqr-red)} .aqr-muted{color:var(--aqr-muted)} .aqr-formnotice{background:#eef1fc;border:1px solid #c7d0f5;color:var(--aqr-navy);border-radius:12px;padding:16px 18px;font-size:14px} .aqr-attendee{margin:6px 0 20px} .aqr-h3{color:var(--aqr-navy);font-size:18px;margin:0 0 14px} .aqr-radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:960px} .aqr-largenote{background:#eef2ff;border:1px solid #dce2ff;border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:13px;color:#334;line-height:1.6} .aqr-radio{position:relative;display:flex;align-items:center;gap:14px;border:1.5px solid var(--aqr-line);border-radius:14px;padding:16px 18px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,background .15s} .aqr-radio:hover{border-color:var(--aqr-blue)} .aqr-radio.is-selected{border-color:var(--aqr-blue);background:#fbfcff;box-shadow:0 0 0 3px rgba(0,30,210,.10)} .aqr-radio input{position:absolute;opacity:0;width:0;height:0} .aqr-radio__dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--aqr-line);position:relative;transition:border-color .15s} .aqr-radio:hover .aqr-radio__dot{border-color:var(--aqr-blue)} .aqr-radio input:checked~.aqr-radio__dot{border-color:var(--aqr-blue)} .aqr-radio input:checked~.aqr-radio__dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--aqr-blue)} .aqr-radio input:focus-visible~.aqr-radio__dot{box-shadow:0 0 0 3px rgba(0,30,210,.2)} .aqr-radio__ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--aqr-bg);color:var(--aqr-navy);font-size:18px;transition:background .15s,color .15s} .aqr-radio input:checked~.aqr-radio__ic{background:var(--aqr-blue);color:#fff} .aqr-radio__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0} .aqr-radio__title{font-weight:700;color:var(--aqr-navy);font-size:15.5px} .aqr-radio__sub{font-size:12px;color:var(--aqr-muted);margin-top:2px} .aqr-formwrap{background:var(--aqr-card);border:1px solid var(--aqr-line);border-radius:var(--aqr-radius);padding:22px;margin-top:8px;box-shadow:0 8px 30px rgba(0,0,60,.06)} /* Responsive */ @media (max-width:720px){ .aqr-grid{grid-template-columns:1fr} .aqr-cls{padding:14px} .aqr-radios{grid-template-columns:1fr} /* V7 #18: stack the suggestion title + category chip so long course names don't collide with the chip on narrow screens. */ .aqr-cs-item{flex-direction:column;align-items:flex-start;gap:6px} .aqr-cs-item__c{max-width:100%;white-space:normal} } /* V7 #16: the course-detail booking popup keeps the 3-column desktop layout (its responsive 3/2/1 columns live in course-detail.css). Here we only ensure the radios can use the full popup width; the single-column stacking is applied on mobile below, not unconditionally. */ .aqr-drawer .aqr-radios{max-width:100%} @media (max-width:560px){ .aqr-drawer .aqr-radios{grid-template-columns:1fr} } /* Hero banner (this page only). Uses the theme's .dhero / .feat-card styles (loaded on pages via courses.css); this wrapper just breaks it full-width and adds small fallbacks so the button/note render even without the theme CSS. */ .aqr-hero-fullbleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:30px;overflow:hidden} .aqr-hero-note{display:inline-flex;align-items:center;gap:7px;color:#5a6280;font-size:13px;font-weight:600} .aqr-hero-note i{color:#f5a623} .aqr-hero-fullbleed .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-size:14px;line-height:1;transition:background .15s,transform .15s} .aqr-hero-fullbleed .btn-primary{background:#001ed2;color:#fff} .aqr-hero-fullbleed .btn-primary:hover{background:#0018a8;transform:translateY(-1px)} /* Locked mode - opened for a specific course (from a course Register button). Hide the Category/Course/Schedule pickers; show only the attendee + form. */ .aqr-locked .aqr-grid{display:none} .aqr-locked #aqr-schedule{display:none !important} .aqr-lockedhead{background:#eef1fc;border:1px solid #c7d0f5;border-radius:12px;padding:16px 18px;margin:0 0 20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px} .aqr-lockedhead__label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--aqr-muted)} .aqr-lockedhead__course{font-size:17px;font-weight:800;color:var(--aqr-navy)} .aqr-lockedhead__run{font-size:13px;color:var(--aqr-muted)} .aqr-lockedhead__run:not(:empty)::before{content:"· "} /* V2 item 19: quick-register schedule redesign - 2-3 column grid, compact 2-line cards (no time, single-line dates), and Weekday/Weekend/Holiday filter pills. */ .aqr-clslist--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} /* V3: full-width desktop drawer shows the class list as a 3-column grid. */ @media(min-width:900px){.aqr-clslist--grid{grid-template-columns:repeat(3,1fr)}} .aqr-cls__dates--line{display:block;margin-top:8px;font-size:12.5px;color:var(--aqr-ink);font-weight:600;line-height:1.5} /* Card order: the dates lead, the class type sits under them in small text. */ .aqr-cls__top .aqr-cls__dates--line{margin-top:0;font-size:14px;font-weight:700;color:var(--aqr-navy)} .aqr-cls__name--sm{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--aqr-muted,#6b7280)} /* Class type and language share the second line. The separator is a CSS pseudo-element, not text, so .aqr-cls__name still reads as just the class name for the selected-schedule summary built in registration.js. */ .aqr-cls__meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:6px} .aqr-cls__meta .aqr-cls__name--sm{margin-top:0} .aqr-cls__lang{font-size:12px;font-weight:600;color:var(--aqr-muted,#6b7280)} .aqr-cls__lang::before{content:"·";margin-right:6px} .aqr-sched-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .aqr-sched-filter{border:1.5px solid var(--aqr-line);background:var(--aqr-card);color:var(--aqr-ink);font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:100px;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s} .aqr-sched-filter:hover{border-color:var(--aqr-blue);color:var(--aqr-blue)} .aqr-sched-filter.is-active{background:var(--aqr-blue);border-color:var(--aqr-blue);color:#fff} @media(max-width:640px){.aqr-clslist--grid{grid-template-columns:1fr}} /* ============================================================ Sticky progress stepper (V6) — Quick Registration banner ============================================================ */ /* Page breathing room (not the compact drawer variant) */ .aqr:not(.aqr-drawer){padding:clamp(22px,3vw,38px) 0 clamp(40px,5vw,60px)} /* Slim page heading */ .aqr-pagehead{text-align:center;max-width:640px;margin:0 auto 24px} .aqr-pagehead__eyebrow{display:inline-block;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#001ed2;background:#E9ECFF;padding:6px 14px;border-radius:20px;margin-bottom:14px} .aqr-pagehead__title{font-family:'DM Sans',sans-serif;font-size:clamp(26px,3.4vw,36px);font-weight:800;color:var(--aqr-navy);letter-spacing:-.6px;line-height:1.12;margin:0 0 10px} .aqr-pagehead__sub{font-size:14.5px;color:var(--aqr-muted);line-height:1.6;margin:0} /* The theme gives every h1 in page content "margin:1.6em 0 .6em" (.av-page__body h1, courses.css), which outranks the single class above and put 64px between the "Quick Registration" label and this heading. */ .aqr .aqr-pagehead__title{margin:0 0 10px} /* Stepper */ /* justify-content:safe center — the steps pack to their natural width, so centre them when there's spare room on the right; "safe" falls back to flex-start when the row overflows (mobile) so the first step stays reachable while scrolling. */ .aqr-stepper{position:sticky;top:64px;z-index:50;display:flex;align-items:center;justify-content:safe center;gap:2px;flex-wrap:nowrap;overflow-x:auto;background:linear-gradient(180deg,#ffffff,#fbfcff);border:1px solid var(--aqr-line);border-radius:16px;box-shadow:0 12px 32px -18px rgba(0,0,60,.5);padding:16px 22px;margin:0 0 30px;scrollbar-width:none} .aqr-stepper::-webkit-scrollbar{display:none} .admin-bar .aqr-stepper{top:96px} .aqr-step{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:2px} .aqr-step:not(:last-child)::after{content:"";flex:1 1 22px;min-width:18px;height:3px;margin:0 8px;background:var(--aqr-line);border-radius:3px;transition:background .3s} .aqr-step__marker{position:relative;width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:#fff;color:var(--aqr-muted);font-weight:800;font-size:13px;font-family:'DM Sans',sans-serif;border:2px solid var(--aqr-line);transition:all .25s} .aqr-step__check{display:none;font-size:12px;line-height:1} .aqr-step__label{font-size:13px;font-weight:600;color:var(--aqr-muted);white-space:nowrap;transition:color .25s;font-family:'DM Sans',sans-serif} .aqr-step.is-active .aqr-step__marker{background:linear-gradient(135deg,#001ed2,#3D33BB);color:#fff;border-color:#001ed2;box-shadow:0 0 0 5px rgba(0,30,210,.12);transform:scale(1.06)} .aqr-step.is-active .aqr-step__label{color:var(--aqr-navy);font-weight:700} .aqr-step.is-done .aqr-step__marker{background:#0B9E6E;color:#fff;border-color:#0B9E6E} .aqr-step.is-done .aqr-step__num{display:none} .aqr-step.is-done .aqr-step__check{display:block} .aqr-step.is-done .aqr-step__label{color:var(--aqr-ink)} .aqr-step.is-done:not(:last-child)::after{background:#0B9E6E} @media(max-width:860px){ .aqr-pagehead{margin-bottom:18px} .aqr-stepper{gap:0;padding:12px 12px;border-radius:12px;margin-bottom:22px} .aqr-step{gap:8px;padding:2px} .aqr-step__label{font-size:12px} .aqr-step__marker{width:28px;height:28px;font-size:12px} .aqr-step:not(:last-child)::after{flex:0 0 16px;min-width:16px;margin:0 5px} } /* ============================================================ Course search (find + auto-select) + View Course Details help ============================================================ */ .aqr-coursesearch{position:relative;margin:0 0 4px} .aqr-coursesearch__title{display:block;font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px;color:var(--aqr-navy);margin:0 0 8px} /* V7 #13: "Not sure of the course name?" prompt above the category/course selects. */ .aqr-browsehint{margin:18px 0 10px;font-size:13.5px;font-weight:600;color:var(--aqr-muted);position:relative;padding-top:16px;border-top:1px solid var(--aqr-line)} .aqr-coursesearch__box{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid rgba(0,0,60,.12);border-radius:12px;padding:11px 16px;transition:border-color .15s,box-shadow .15s} .aqr-coursesearch__box:focus-within{border-color:#001ed2;box-shadow:0 0 0 4px rgba(0,30,210,.10)} .aqr-coursesearch__box i{color:#7B84AA;font-size:14px;flex-shrink:0} .aqr-coursesearch__box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:#0A1024;padding:2px 0} .aqr-coursesearch__box input::placeholder{color:#9aa0bd} .aqr-coursesearch .aqr-hint{display:block;margin-top:6px} .aqr-coursesearch__results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:#fff;border:1px solid rgba(0,0,60,.12);border-radius:12px;box-shadow:0 16px 40px -14px rgba(0,0,60,.5);overflow:hidden;max-height:340px;overflow-y:auto} .aqr-cs-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:11px 16px;border-bottom:1px solid rgba(0,0,60,.06);font:inherit;transition:background .12s} .aqr-cs-item:last-child{border-bottom:0} .aqr-cs-item:hover,.aqr-cs-item:focus{background:#EEF0FA} .aqr-cs-item__t{font-size:14px;font-weight:600;color:#0A1024} .aqr-cs-item__c{font-size:11.5px;font-weight:600;color:#001ed2;background:#E9ECFF;border-radius:20px;padding:3px 10px;white-space:nowrap;flex-shrink:0} .aqr-cs-empty{padding:14px 16px;font-size:13px;color:#7B84AA} .aqr-course-help{margin:10px 0 6px;font-size:13px;line-height:1.6;color:#7B84AA} .aqr-course-help__link{display:inline-flex;align-items:center;gap:6px;margin-left:4px;color:#001ed2;font-weight:700;text-decoration:none;white-space:nowrap} .aqr-course-help__link:hover{text-decoration:underline} .aqr-course-help__link i{font-size:11px} /* --------------------------------------------------------------- * Date-picker year dropdown (see frontend/js/datepicker.js). * flatpickr styles its month