@import url('./theme.css');

/* ===== 01. IMPORTS ===== */

/* ===== 02. DESIGN TOKENS ===== */
/* -- Marketing How it Works - tokens and components from theme-proofpros (only what this page uses) -- */
:root {--ink: #071229; --proof: #0857ff; --proof2: #1d9bff; --soft: #eef5ff; --line: #d6e5ff; --muted: #5a6e8a; --blue-dark: #0040cc;}
/* AI Quote Builder colours (common frontend static/css/quote-builder.css reads these). Edit here to retheme. */
:root {--ov-primary: var(--pp-brand, #1d4ed8); --ov-primary-dark: #1e3a8a; --ov-primary-soft: #eff6ff; --ov-ink: #111827; --ov-muted: #64748b; --ov-line: #dbe3ef; --ov-success: #22c55e; --ov-warning: #f59e0b; --ov-danger: #b91c1c; --ov-action: #1a73e8;}

/* ===== 03. MODALS & OVERLAYS ===== */
.focus-overlay {opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.985); transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;}
.focus-overlay.is-open {opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); transition: opacity .24s ease, transform .24s ease, visibility 0s;}
.focus-panel {width: min(1180px, calc(100vw - 24px)); height: min(820px, calc(100vh - 24px));}
#messages, .qc-thin-scroll {scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;}
#messages::-webkit-scrollbar, .qc-thin-scroll::-webkit-scrollbar {width: 6px;}
#messages::-webkit-scrollbar-track, .qc-thin-scroll::-webkit-scrollbar-track {background: transparent;}
#messages::-webkit-scrollbar-thumb, .qc-thin-scroll::-webkit-scrollbar-thumb {background: #cbd5e1; border-radius: 999px;}
#messages::-webkit-scrollbar-thumb:hover, .qc-thin-scroll::-webkit-scrollbar-thumb:hover {background: #94a3b8;}
.progress-bar {transition: width .2s ease;}
.message-row {animation: rise .22s ease both;}
@keyframes rise {
  from {opacity: 0; transform: translateY(8px);}
  to {opacity: 1; transform: translateY(0);}
}

/* ===== 04. HERO & MARKETING ===== */
.proof-why-card {border-color: rgb(191 219 254 / 15%); box-shadow: none; padding: 12px 16px; min-height: 118px;}
.proof-why-subtext {color: #5373bb; line-height: 1.75;}
.proof-trust-divider {background-color: rgb(191 219 254 / 15%);}
.proof-trust-item {padding: 0 10px;}
.proof-interface-card {border: 1px solid rgba(226, 232, 240, 0.95); box-shadow: 0 4px 32px rgba(8, 87, 255, 0.10);}
.proof-interface-inner {border: 0.5px solid rgb(226 232 240 / 26%);}
.proof-ai-card {border: 1px solid rgba(147, 197, 253, 0.95) !important; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.22), 0 4px 18px #bfdbfe, 5px 5px 4px rgba(37, 99, 255, 0.30), 1px 2px 11px #dbeafe, 0 17px 13px #dbeafe;}
.proof-ai-card:hover {box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.32), 0 5px 20px #93c5fd, 5px 6px 6px rgba(37, 99, 255, 0.38), 1px 3px 14px #bfdbfe, 0 19px 16px #bfdbfe;}
.proof-steps-desktop {padding: 15px 0;}
.proof-step-arrow {height: 168px; margin-right: -22px;}
.proof-step-arrow:last-child {margin-right: 0;}
.proof-left-col button.text-proof {cursor: pointer;}
.proof-see-how-button {background-color: rgb(255 255 255 / 32%);}
.proof-hero-tag {background: rgb(232 241 255 / 61%);}

/* ===== 05. HOW IT WORKS BAND ===== */
/* -- Home "how it works" band. The workspace above is a centered 1180px card and the
   page body adds 24px/16px padding, so the band is pulled full-bleed out of that
   padding while its arrows stay aligned to the same 1180px column. -- */
.proof-steps-band {margin-top: 25px; margin-bottom: 0; margin-left: calc(var(--pp-band-gutter, 16px) * -1); margin-right: calc(var(--pp-band-gutter, 16px) * -1);}
/* -- match .ppWorkspace so the cards line up -- */
.proof-steps-band > div {max-width: 1180px; padding-left: var(--pp-band-gutter, 16px); padding-right: var(--pp-band-gutter, 16px);}
/* -- the desktop row fills the full 1180px like .ppWorkspace itself (which has no
   inner gutter), so the arrows start and end exactly on the card's edges -- */
.proof-steps-band .proof-steps-desktop {border-radius: 5px; padding: 4px 0; background-color: rgba(0, 0, 77, 0.9);}
/* -- .proof-steps-tablet carries a `padding: 28px 1.5rem` shorthand (shared with
   how-it-works.html) that outranks the `> div` rule above and would blow out the
   band's gutters, so re-assert them here at equal specificity. -- */
.proof-steps-band .proof-steps-tablet {padding-left: var(--pp-band-gutter, 16px); padding-right: var(--pp-band-gutter, 16px);}
/* -- Home "How it Works" band - full-bleed dark strip with a proportional arrow
   row. Scoped to #how.proof-steps-band (home.html only) so the standalone
   #how section on how-it-works.html keeps its own responsive variants. -- */
#how.proof-steps-band {--step-overlap: -1.8%; --band-gutter: 16px; display: block; position: relative; width: 100%; max-width: none; margin: 18px 0 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none;}
/* -- Heading row: title left, tagline right, both inside the 1180px column.
   Laid out as a flex row so the two can never overlap - the tagline shrinks
   and wraps instead of sliding under the title. -- */
#how.proof-steps-band .proof-steps-heading {box-sizing: border-box; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: min(1180px, 100%); margin: 0 auto 14px; padding: 0 var(--band-gutter);}
#how.proof-steps-band .proof-steps-heading::before {content: "How it Works"; flex: 0 0 auto; color: #171e2b; font-size: 16px; font-weight: 600; line-height: 24px;}
#how.proof-steps-band .proof-steps-heading::after {content: "Describe. Estimate. Connect. Complete."; flex: 0 1 auto; min-width: 0; color: #778195; font-size: 12px; line-height: 24px; text-align: right;}
/* -- Full-width background, centered image row -- */
#how.proof-steps-band .proof-steps-desktop {box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 0; width: min(1180px, 100%); max-width: 1180px; margin: 0 auto; padding: 18px var(--band-gutter) 22px; border: 0; border-radius: 0; background: #17213c; box-shadow: 0 0 0 100vmax #17213c; clip-path: inset(0 -100vmax);}
#how.proof-steps-band .proof-step-arrow {display: block; flex: 1 1 0%; min-width: 0; width: 0; max-width: none; height: auto; margin: 0; object-fit: contain;}
#how.proof-steps-band .proof-step-arrow + .proof-step-arrow {margin-left: var(--step-overlap);}

/* ===== 06. WORKSPACE UI TEXT SIZING ===== */
/* -- Page-wide text size bump: +10% over the base ppWorkspace sizes in workspace.css -- */
/* -- Header -- */
.ppLogo {font-size: 35.2px !important;}
.ppTop h1 {font-size: 28.6px !important;}
.ppTop nav a {font-size: 15.4px !important;}
/* -- ToDo sidebar -- */
.ppPanelHead select {font-size: 15.4px !important;}
.ppStatusHead, .ppStatusBadge {font-size: 12.1px !important;}
.ppTask strong {font-size: 17.6px !important;}
.ppMoreTodos {font-size: 13.75px !important;}
.ppInlineAdd span, .ppInlineAdd input {font-size: 15.4px !important;}
/* -- Project and estimate -- */
.ppProjectTitle {font-size: 22px !important;}
.ppEstimateText small {font-size: 11.55px !important;}
.ppEstimateText strong {font-size: 26.4px !important;}
.ppStrengthLabel {font-size: 15.4px !important;}
/* -- Conversation -- */
.ppBubble, .ppBubble p {font-size: 16.5px !important; line-height: 1.5;}
.ppChoices button {font-size: 14.3px !important;}
.ppChoices > span, .ppAskLead, .ppAskChip, .ppAskMore {font-size: 13.75px !important;}
/* -- Message composer -- */
.ppComposer textarea {font-size: 15.4px !important;}
.ppSubmit {font-size: 14.85px !important;}

/* ===== 07. HEADER & NAVIGATION ===== */
body:not(.ppDemo):not(.ppPage):not(.ppAdmin):not(.ppMarketing) .header_sec {padding: 24px 16px 20px; background: white;}

/* ===== 08. FORM BUILDER (.enigma_theme.content_sec) ===== */
.enigma_theme.content_sec form.layout_sec {display: flex; justify-content: center; width: 100%;}
.enigma_theme.content_sec form.layout_sec > div, .enigma_theme.content_sec form #layoutPreview {width: 100%; float: unset !important; margin: 0 auto !important;}
.enigma_theme.content_sec .main_form, .enigma_theme.content_sec .form_builds {width: 100%; height: auto !important; float: none;}
.enigma_theme.content_sec form label, .enigma_theme.content_sec form .form-group label, .enigma_theme.content_sec form .formbuilder-text-label {display: block; margin-bottom: 6px; width: 100%; float: left; text-align: left; font-size: 14px; font-weight: 600; color: var(--ink);}
.enigma_theme.content_sec form .formbuilder-required {color: #dc2626; margin-left: 2px;}
.enigma_theme.content_sec form .form-group {margin-top: 10px;}
.enigma_theme.content_sec form .rendered-form .form-group, .enigma_theme.content_sec form .rendered-form .formbuilder-checkbox, .enigma_theme.content_sec form .rendered-form .formbuilder-radio {float: left; margin: 0; width: 100%;}
.enigma_theme.content_sec form .form-group .radio-group .formbuilder-radio, .enigma_theme.content_sec form .form-group .checkbox-group .formbuilder-checkbox {display: flex; gap: 5px; align-items: baseline;}
.enigma_theme.content_sec form .form-group .radio-group label, .enigma_theme.content_sec form .form-group .checkbox-group label {margin-left: 2px; font-weight: 400;}
.enigma_theme.content_sec form .theme-input, .enigma_theme.content_sec form .form-control, .enigma_theme.content_sec form .rendered-form input[type="text"], .enigma_theme.content_sec form .rendered-form input[type="email"], .enigma_theme.content_sec form .rendered-form input[type="tel"], .enigma_theme.content_sec form .rendered-form input[type="number"], .enigma_theme.content_sec form .rendered-form input[type="date"], .enigma_theme.content_sec form .rendered-form input[type="password"], .enigma_theme.content_sec form .rendered-form select, .enigma_theme.content_sec form .rendered-form textarea {display: block; width: 100%; min-height: 44px; padding: 11px 14px; border: 1px solid #cfd8e6; border-radius: 10px; background-color: #fff; color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.4; appearance: none; transition: border-color .15s ease, box-shadow .15s ease;}
.enigma_theme.content_sec form .theme-input::placeholder, .enigma_theme.content_sec form .form-control::placeholder, .enigma_theme.content_sec form .rendered-form textarea::placeholder {color: #94a3b8;}
/* -- Border colour alone marks focus. workspace.css carries a global
   `:where(a,button,input,textarea,select):focus-visible{outline:3px solid currentColor}`
   that fires on keyboard focus, so :focus-visible is listed too - otherwise the dark
   ring would come back when tabbing between fields. -- */
.enigma_theme.content_sec form .theme-input:focus, .enigma_theme.content_sec form .form-control:focus, .enigma_theme.content_sec form .rendered-form input:focus, .enigma_theme.content_sec form .rendered-form select:focus, .enigma_theme.content_sec form .rendered-form textarea:focus, .enigma_theme.content_sec form .theme-input:focus-visible, .enigma_theme.content_sec form .form-control:focus-visible, .enigma_theme.content_sec form .rendered-form input:focus-visible, .enigma_theme.content_sec form .rendered-form select:focus-visible, .enigma_theme.content_sec form .rendered-form textarea:focus-visible {outline: none; border-color: var(--proof); box-shadow: none;}
.enigma_theme.content_sec form .rendered-form textarea {min-height: 110px; resize: vertical;}
.enigma_theme.content_sec form .rendered-form input[type="date"] {cursor: pointer;}
.enigma_theme.content_sec form .rendered-form input[type="file"] {padding: 0 !important; height: 44px; line-height: 42px;}
.enigma_theme.content_sec form .rendered-form input[type="file"]::file-selector-button {height: 42px; margin-right: 12px; padding: 0 14px; border: 0; border-right: 1px solid #dbe4f1; background: #eef5ff; color: var(--proof); font-size: 13px; font-weight: 700; cursor: pointer;}
.enigma_theme.content_sec form .rendered-form input[type="checkbox"], .enigma_theme.content_sec form .rendered-form input[type="radio"] {width: 18px; min-height: 18px; height: 18px; flex-shrink: 0; accent-color: var(--proof);}
.enigma_theme.content_sec form .rendered-form select {background-image: url(https://dutbmp3xi6xk2.cloudfront.net/themebuilder/theme-edurock_light/img/arrow-down-black.svg); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 5px; padding-right: 36px; cursor: pointer;}
.enigma_theme.content_sec form .rendered-form button[type="submit"], .enigma_theme.content_sec form .rendered-form .formbuilder-button button, .enigma_theme.content_sec form .formbuilder-button button {display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 46px; margin: 6px 0 0 !important; padding: 12px 32px; border: 1px solid var(--proof); border-radius: 10px; background-color: var(--proof); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .16s ease, box-shadow .16s ease;}
.enigma_theme.content_sec form .rendered-form button[type="submit"]:hover, .enigma_theme.content_sec form .formbuilder-button button:hover {background-color: var(--blue-dark); border-color: var(--blue-dark);}
.enigma_theme.content_sec form .formbuilder-button {width: 100%; float: left; margin: 0 !important;}
.enigma_theme.content_sec .main_form .wizard_form .prevArrowBtn, .enigma_theme.content_sec .main_form .wizard_form .nextArrowBtn {color: var(--proof) !important;}
.enigma_theme.content_sec .main_form .prevBtn, .enigma_theme.content_sec .main_form .nextBtn {display: inline-block; padding: 9px 22px; border: 1px solid var(--proof) !important; border-radius: 50px; background-color: var(--proof) !important; color: #fff; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer;}
.enigma_theme.content_sec .main_form .prevBtn:hover, .enigma_theme.content_sec .main_form .nextBtn:hover {background-color: #fff !important; color: var(--proof);}
.enigma_theme.content_sec .main_form .wizard_form .progress-header .progress-bar {background-color: var(--proof);}

/* ===== 09. WIDGETS ===== */
/* -- Webinar / demo video loader (how-it-works.html modal). theme-proofpros gets
   these same rules injected by custom_scripts.js; this theme loads only boot.js,
   so they live here. boot.js hides the loader via style.display - there is no
   .hidden rule in this theme. -- */
.demo-video-wrap {position: relative; overflow: hidden; background: #000;}
.demo-video-loader {position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #000;}
.demo-video-spinner {width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 9999px; animation: webinar-video-spin 0.8s linear infinite;}
.demo-video-status {color: rgba(255, 255, 255, 0.8); font-size: 14px;}
.demo-video-wrap video.webinar_url {display: block; width: 100%; height: 100%; background: #000; object-fit: contain;}
@keyframes webinar-video-spin {
  to {transform: rotate(360deg);}
}

/* ===== 10. RESPONSIVE ===== */

/* -- min-width queries, smallest to largest -- */

@media (min-width: 640px) {
  .proof-feature-list {column-gap: 0;}
  .proof-feature-item {position: relative;}
  .proof-feature-item + .proof-feature-item {padding-left: 16px;}
  .proof-feature-item + .proof-feature-item::before {position: absolute; top: 50%; left: 0; width: 1px; height: 35px; background: rgba(148, 163, 184, 0.35); content: ""; transform: translateY(-50%);}
}

@media (min-width: 1024px) {
  .proof-steps-band {margin-top: 25px;}
}

@media (min-width: 1200px) {
  .enigma_theme.content_sec form.layout_sec {max-width: 800px; float: unset !important; margin: 0 auto !important;}
}

@media (min-width: 1261px) {
  .proof-hero-scene .proof-hero-arrow {left: -185px; top: 87px; width: 140px;}
}

@media (min-width: 1361px) {
  .proof-hero-scene {transform: translateX(-40px);}
}

/* -- range queries (min-width and max-width), ordered by min-width -- */

/* -- body padding is 0 under 768px, 12px from 768-1279px, and 16px elsewhere -- */
@media (min-width: 768px) and (max-width: 1023px) {
  .proof-hero-girl {left: -136px !important;}
  .proof-tablet-arrow {right: 260px !important; left: auto !important;}
}

@media (min-width: 768px) and (max-width: 1279px) {
  .proof-steps-band {--pp-band-gutter: 12px;}
}

@media (min-width: 1024px) and (max-width: 1110px) {
  .proof-text-wrapper {width: 100% !important; max-width: 100% !important;}
}

@media (min-width: 1024px) and (max-width: 1260px) {
  .proof-hero-girl, .proof-hero-arrow {display: none !important;}
}

/* -- the legacy rule above hides .proof-steps-desktop in favour of
   .proof-steps-tablet, but the home band has no .proof-steps-tablet markup -
   only the single arrow row - so without this the strip would render empty. -- */
@media (min-width: 1024px) and (max-width: 1263px) {
  .proof-steps-desktop {display: none !important;}
  .proof-steps-tablet {display: grid !important; padding: 28px 1.5rem;}
  #how.proof-steps-band .proof-steps-desktop {display: flex !important;}
}

/* -- max-width queries, largest to smallest -- */

/* -- Desktop only. The four arrow images carry their own step numbers and body
   copy, so below 1024px they shrink past the point of being readable - the whole
   band (heading row included) is hidden there instead of restacked. -- */
@media (max-width: 1023px) {
  #how.proof-steps-band {display: none !important;}
}

@media (max-width: 926px) {
  .proof-tablet-arrow {display: none !important;}
}

@media (max-width: 920px) {
  .focus-panel {height: calc(100vh - 18px);}
}

@media (max-width: 767px) {
  .proof-steps-band {--pp-band-gutter: 0px; margin-top: 25px;}
}

/* -- The status text still conveys the state without the rotating ring -- */
@media (prefers-reduced-motion: reduce) {
  .demo-video-spinner {animation: none;}
}
.brands_overview .brand_initials {background: #eef5ff; color: #0857ff;}
/* -- Creator overview (creators_overview.html), same rules as theme-proofpros (same #0857ff accent) -- */
.coursearea.creators_overview {width: 100%;}
.creators_overview .flex.flex-wrap > div {padding-top: 100px; padding-bottom: 40px;}
.creators_overview .grid {display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 18px !important;}
.creators_overview .creator-card {background: #ffffff; border-radius: 20px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 14px; transition: transform 0.15s, box-shadow 0.15s;}
.creators_overview .creator-card:hover {transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.15);}
.creators_overview .creator-card > div:first-child {display: flex; align-items: center; gap: 14px;}
.creators_overview .creator-card > div:first-child > div:first-child {width: 52px; height: 52px; background: linear-gradient(300deg, #0040cc, #0857ff, #4080ff); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-size: 1.2rem; flex-shrink: 0;}
.creators_overview .creator-card > div:first-child > img {width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.creators_overview .creator-card > div:first-child > div:last-child {flex: 1; min-width: 0;}
.creators_overview .creator_name {color: #111827; margin-bottom: 3px;}
.creators_overview .creator-no-leads {color: #6B6B72 !important;}
.creators_overview .creator-leads-badge {border-color: rgba(48, 209, 88, 0.5) !important; background-color: rgba(48, 209, 88, 0.15) !important;}
/* -- Course overview (course_overview.html), same rules as theme-proofpros (same #0857ff accent) -- */
.course_overview.coursearea .container > div:first-child {padding-top: 100px; padding-bottom: 40px;}
.course_overview.coursearea .courseListCard {min-width: 22em; max-width: 24em;}
.course_overview.coursearea .gridAreaImg {min-height: 170px;}
.course_overview.coursearea .courseTitle {min-height: 56px;}
.course_overview.coursearea .profile_img, .course_overview.coursearea .gridAreaWraper .usrInitial {width: 30px !important; height: 30px !important;}
.course_overview.coursearea .course_title {font-size: 18px;}
.course_overview.coursearea .course_desc {font-size: 14px;}
.course_overview.coursearea .courseCard .usrInitial {width: 32px !important; height: 32px !important; border-radius: 25px !important;}
.course_overview.coursearea .course__text__wraper {display: flex; align-items: center;}
.course_overview.coursearea .property__team__tap {display: flex !important; flex-direction: row !important; gap: 4px; list-style: none; padding: 0; margin: 0;}
.course_overview.coursearea .courseView {color: #0857ff;}
.course_overview .gridAreaWraper .gridAreaImg {max-height: none; height: 12rem;}
.course_overview .gridAreaWraper .gridAreaImg img {width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;}
.course_overview .courseCard > div > a:first-child img {width: 100%; height: 100%; object-fit: cover;}
.course_overview #courseGridView.hidden, .course_overview #courseListView.hidden {display: none !important;}
.course_overview .single__tab__link {color: #9ca3af;}
.course_overview .single__tab__link.active, .course_overview .single__tab__link:hover {color: #0857ff;}
.course_overview .course__text__wraper .course__text h3 {font-weight: 700;}
.courseListCard .courseTitle:hover {color: #0857ff;}


/** Completed Jobs widget (completed_jobs.html) — equal-height cards and review "Show more".
    Toggle behaviour: static/js/completed-jobs-widget.js */
.cj-scope .cj-review-toggle { display:inline-block; height:20px; margin-top:2px; font-size:13px; font-weight:600; font-style:normal; line-height:20px; color:#0857ff; cursor:pointer; visibility:hidden; }
.cj-scope .cj-review-toggle.is-visible { visibility:visible; }
.cj-scope .cj-review-toggle:hover { text-decoration:underline; }
.cj-scope .cj-review.is-expanded { display:block; -webkit-line-clamp:unset; overflow:visible; height:auto; }
.cj-scope .cj-tags { min-height:28px; }

/* Auth pages: reserve room under the content for the house illustration (35% of the section width,
   max 620px, ~.337 aspect) so it never overlaps the last feature row ("Keep your conversations together"). */
@media (min-width: 1024px) {#main-content > section_boundary:has(> img[src*="login_banner"]) > .drop-zone {padding-bottom: calc(min(35%, 620px) * .337 + 24px);}}