/* =============================================================================
   styles.css — PaperTrue 1:1 remake
   §1  Master design system (PROMPT.md §3)
   §2  Native page tokens, extracted verbatim (PROMPT.md §3.1)
   §3  Component layer (css/remake.css)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   §1  Master design system & CSS tokens
   --------------------------------------------------------------------------- */
:root {
  /* === Dynamic Color System === */
  --color-brand: #4cb261;
  --color-brand-secondary: #007bff;
  --color-text-primary: #000000;
  --color-text-secondary: #212529;
  --color-text-muted: #343a40;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-border-primary: #dee2e6;
  --color-border-subtle: #c7cad2;

  /* === Typography System (derived from the page's own font-size usage) === */
  --font-family-base: 'proxima-nova', sans-serif;
  --font-size-hero: 36px;
  --font-size-h2: 20px;
  --font-size-title: 20px;
  --font-size-body: 15px;
  --font-size-small: 14px;
  --font-size-caption: 14px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === Spacing & Dimensions (most frequent values in the page's CSS) === */
  --container-max-width: 1140px;
  --grid-gap-x: 12px!important;
  --grid-gap-y: 6px!important;

  /* === Radii & Shadows === */
  --radius-card: 10px;
  --radius-pill: 9999px;
  --shadow-idle: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-modal: 0 20px 40px rgba(0,0,0,0.18);

  /* === Z-Index Stacking (defaults — the page's real scale is in §3.1) === */
  --z-sticky-header: 100;
  --z-dropdown-popover: 200;
  --z-modal-backdrop: 1000;
  --z-modal-content: 1001;
}

/* ---------------------------------------------------------------------------
   §2  Native page tokens (verbatim from the page's stylesheets)
   --------------------------------------------------------------------------- */
:root {
  --blue: #007bff;
  --breakpoint-lg: 992px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 576px;
  --breakpoint-xl: 1200px;
  --breakpoint-xs: 0;
  --crisp-color-background-light: 65.85, 65.85, 65.85;
  --crisp-color-background-locker: 255, 255, 255;
  --crisp-color-background-ultra-light: 48, 48, 48;
  --crisp-color-base-black-light: 255, 255, 255;
  --crisp-color-base-black-light-fixed: 28, 41, 59;
  --crisp-color-base-black-normal: 255, 255, 255;
  --crisp-color-base-black-normal-fixed: 0, 0, 0;
  --crisp-color-base-blue-light: 89, 144, 226;
  --crisp-color-base-blue-ultra-light: 224, 237, 255;
  --crisp-color-base-green-dark: 15, 128, 4;
  --crisp-color-base-green-light: 78, 206, 61;
  --crisp-color-base-green-normal: 34, 178, 15;
  --crisp-color-base-green-ultra-dark: 7, 58, 0;
  --crisp-color-base-grey-dark: 240, 242, 245;
  --crisp-color-base-grey-light: 70.95, 70.95, 70.95;
  --crisp-color-base-grey-normal: 211, 221, 230;
  --crisp-color-base-grey-ultra-dark: 240, 242, 245;
  --crisp-color-base-grey-ultra-light: 48, 48, 48;
  --crisp-color-base-orange-dark: 225, 105, 0;
  --crisp-color-base-red-dark: 199, 10, 34;
  --crisp-color-base-red-light: 255, 220, 224;
  --crisp-color-base-red-normal: 238, 51, 75;
  --crisp-color-base-red-ultra-dark: 107, 12, 0;
  --crisp-color-base-red-ultra-light: 255, 242, 243;
  --crisp-color-base-white-dark: 48, 48, 48;
  --crisp-color-base-white-normal: 18, 18, 18;
  --crisp-color-base-white-normal-fixed: 255, 255, 255;
  --crisp-color-base-yellow-light: 255, 244, 127;
  --crisp-color-base-yellow-normal: 245, 201, 12;
  --crisp-color-base-yellow-ultra-light: 255, 246, 208;
  --crisp-color-placeholder-disabled: 78.6, 78.6, 78.6;
  --crisp-color-placeholder-normal: 211, 221, 230;
  --crisp-color-separator-dark: 70.95, 70.95, 70.95;
  --crisp-color-separator-normal: 48, 48, 48;
  --crisp-color-shadow-normal: 0, 0, 0;
  --crisp-color-syntax-comment: 162, 162, 162;
  --crisp-color-syntax-doctype: 210, 123, 83;
  --crisp-color-syntax-identifier: 136, 196, 255;
  --crisp-color-syntax-keyword: 255, 158, 255;
  --crisp-color-syntax-literal: 194, 238, 101;
  --crisp-color-syntax-punctuation: 247, 247, 247;
  --crisp-color-syntax-regex: 102, 204, 204;
  --crisp-color-syntax-variable: 242, 119, 122;
  --crisp-color-text-black-normal: 255, 255, 255;
  --crisp-color-text-black-normal-fixed: 28, 41, 59;
  --crisp-color-text-grey-dark: 255, 255, 255;
  --crisp-color-text-grey-normal: 255, 255, 255;
  --crisp-color-text-white-normal: 28, 41, 59;
  --crisp-color-text-white-normal-fixed: 255, 255, 255;
  --crisp-color-theme-100: 214, 243, 215;
  --crisp-color-theme-200: 102, 120, 138;
  --crisp-color-theme-500: 40, 165, 45;
  --crisp-color-theme-600: 26, 148, 31;
  --crisp-color-theme-700: 20, 137, 25;
  --crisp-color-theme-800: 15, 123, 19;
  --crisp-color-theme-900: 10, 108, 14;
  --crisp-color-theme-reverse: 255, 255, 255;
  --crisp-customization-button-horizontal: var(--crisp-customization-mobile-button-horizontal);
  --crisp-customization-button-vertical: var(--crisp-customization-mobile-button-vertical);
  --crisp-customization-container-index: 1000000;
  --crisp-customization-default-button-horizontal: 0px;
  --crisp-customization-default-button-vertical: 0px;
  --crisp-customization-mobile-button-horizontal: 0px;
  --crisp-customization-mobile-button-vertical: 0px;
  --crisp-env-device-inset-bottom: max(env(safe-area-inset-bottom,0px), var(--crisp-override-env-safe-area-inset-bottom,0px));
  --crisp-env-device-inset-left: max(env(safe-area-inset-left,0px), var(--crisp-override-env-safe-area-inset-left,0px));
  --crisp-env-device-inset-right: max(env(safe-area-inset-right,0px), var(--crisp-override-env-safe-area-inset-right,0px));
  --crisp-env-device-inset-top: 0px;
  --cyan: #17a2b8;
  --danger: #dc3545;
  --dark: #343a40;
  --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --green: #28a745;
  --indigo: #6610f2;
  --info: #17a2b8;
  --iti-arrow-padding: 7px;
  --iti-arrow-size: 5px;
  --iti-arrow-width: 1.5px;
  --iti-border-color: rgb(var(--crisp-color-separator-normal));
  --iti-border-width: 1px;
  --iti-clear-icon-size: 15px;
  --iti-country-selector-bg: rgb(var(--crisp-color-base-white-normal));
  --iti-flag-count: 244;
  --iti-flag-height: calc(var(--iti-flag-width) * 3 / 4);
  --iti-flag-offset: -243;
  --iti-flag-width: 20px;
  --iti-globe-icon-size: 17px;
  --iti-hover-color: rgb(var(--crisp-color-base-grey-ultra-light));
  --iti-icon-color: rgb(var(--crisp-color-base-grey-normal));
  --iti-mobile-popup-margin: 30px;
  --iti-path-flags-1x: url();
  --iti-path-flags-2x: url();
  --iti-spacer-horizontal: 10px;
  --iti-strict-reject-flash-color: #ff00001f;
  --light: #f8f9fa;
  --lightningcss-dark: initial!important;
  --lightningcss-light: !important;
  --orange: #fd7e14;
  --pink: #e83e8c;
  --primary: #007bff;
  --purple: #6f42c1;
  --red: #dc3545;
  /* --savepage-url-240: url(data:image/svg+xml;  — truncated in the source snapshot */
  /* --savepage-url-244: url(data:image/svg+xml;  — truncated in the source snapshot */
  /* --savepage-url-266: url(data:image/png;  — truncated in the source snapshot */
  /* --savepage-url-267: url(data:image/webp;  — truncated in the source snapshot */
  /* --savepage-url-283: url(data:image/svg+xml;  — truncated in the source snapshot */
  /* --savepage-url-285: url(data:image/webp;  — truncated in the source snapshot */
  /* --savepage-url-286: url(data:image/webp;  — truncated in the source snapshot */
  /* --savepage-url-287: url(data:image/webp;  — truncated in the source snapshot */
  --secondary: #6c757d;
  --success: #28a745;
  --teal: #20c997;
  --v3-group-image-filter: none;
  --v3-picker-bg: var(--crisp-color-base-white-normal);
  --v3-picker-border: none;
  --v3-picker-emoji-hover: var(--crisp-color-base-grey-ultra-light);
  --v3-picker-fg: var(--crisp-color-base-black-normal);
  --v3-picker-input-bg: #222;
  --v3-picker-input-border: #444;
  --v3-picker-input-focus-border: #555;
  --warning: #ffc107;
  --white: #fff;
  --yellow: #ffc107;
}

/* ---------------------------------------------------------------------------
   §3  Component layer
   --------------------------------------------------------------------------- */
/* =============================================================================
   PaperTrue 1:1 remake — component layer
   Every colour / metric below resolves to the design tokens declared in
   styles.css (PROMPT.md §3 + §3.1). Loaded last, so it wins over the
   page's own stylesheets without altering their measurements.
   ========================================================================== */

/* ------------------------------------------------------------- base surface
   Only the values that match the page's own computed styles are applied here.
   Typography metrics (font-size / line-height / colour of body copy) stay with
   the page's own cascade so the 1:1 layout is not shifted. */
body {
  background-color: var(--color-bg-primary);
  font-family: var(--font-family-base);
}

::selection {
  background: rgba(76, 178, 97, .25);
}

/* focus ring — the original page removes outlines, keep them keyboard only */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-brand) !important;
  outline-offset: 2px;
}

a {
  transition: color .3s ease, opacity .3s ease;
}

/* -------------------------------------------------------------- modal layer */
.modal.show {
  display: block;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal-backdrop);
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  transition: opacity .15s linear;
}

.modal-backdrop.show {
  opacity: .5;
}

.modal {
  z-index: var(--z-modal-content);
}

/* ------------------------------------------------- service card accordion */
#accordionServices .collapse {
  overflow: hidden;
  transition: height .35s ease;
}

#accordionServices .collapse.show {
  display: block;
}

/* ------------------------------------------------------------- chat widget */
#crisp-chatbox {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999999;
  font-family: 'Crisp Noto Sans Regular', var(--font-family-base);
}

.cc-chat-panel {
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 460px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

#crisp-chatbox.cc-open .cc-chat-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.cc-7mjuy {
  flex: 0 0 auto;
}

.cc-1wrj8 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgb(var(--crisp-color-base-green-normal)) 0%, rgb(var(--crisp-color-base-green-dark)) 100%);
  color: #fff;
  position: relative;
}

.cc-djbaw {
  display: none;
}

.cc-1fqc8 {
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, .2);
}

.cc-ro90h {
  width: 42px;
  height: 42px;
}

.cc-246rz {
  fill: #ffffff;
}

.cc-header-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.cc-header-name {
  font-weight: 700;
  font-size: 15px;
}

.cc-header-status {
  font-size: 12px;
  opacity: .85;
}

.cc-15na2 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.cc-8ky09 {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px;
  background: #f7f9f8;
}

.cc-6ek5f {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-message {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  background: #fff;
  color: var(--color-text-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.cc-message-agent {
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}

.cc-message-user {
  align-self: flex-end;
  background: rgb(var(--crisp-color-base-green-normal));
  color: #fff;
  border-bottom-right-radius: 3px;
}

.cc-129ks {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--color-border-primary);
  background: #fff;
}

.cc-12zic {
  flex: 1 1 auto;
}

.cc-1icrj {
  width: 100%;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  font-size: 14px;
  resize: none;
  color: var(--color-text-primary);
}

.cc-1icrj:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 .15rem rgba(76, 178, 97, .2);
  outline: none;
}

.cc-send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--crisp-color-base-green-normal));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.cc-send:hover {
  background: rgb(var(--crisp-color-base-green-dark));
  transform: translateY(-1px);
}

.cc-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000000;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--crisp-color-base-green-normal));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform .2s ease, background-color .2s ease;
}

.cc-launcher:hover {
  background: rgb(var(--crisp-color-base-green-dark));
  transform: translateY(-2px);
}

#crisp-chatbox.cc-open ~ .cc-launcher,
#crisp-chatbox.cc-open + .cc-launcher {
  transform: scale(0);
}

@media (max-width: 575.98px) {
  .cc-launcher {
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
  }

  #crisp-chatbox {
    right: 14px;
    bottom: 74px;
  }

  .cc-chat-panel {
    width: calc(100vw - 28px);
    height: 70vh;
  }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}