/* Motaz CV Builder V41.6.6 — stable mobile navigation and visible product polish. */

:root {
  --v4165-navy: #102f40;
  --v4165-blue: #1d6682;
  --v4165-blue-soft: #eaf3f6;
  --v4165-gold: #d9b66f;
  --v4165-line: #cbdbe1;
  --v4165-shadow: 0 14px 38px rgba(14, 47, 64, .11);
}

@media (min-width: 761px) {
  html {
    scrollbar-gutter: stable;
  }
}

html,
body,
.app-shell {
  max-width: 100%;
  overflow-x: clip;
}

body.v40-builder {
  background:
    radial-gradient(circle at 12% 0, rgba(198, 225, 235, .42), transparent 31rem),
    #e8eef0;
}

body.v40-builder :is(button, summary) {
  transform: none !important;
  transition-property: color, background-color, border-color, box-shadow, opacity !important;
  transition-duration: 140ms !important;
}

body.v40-builder :is(button, summary):active {
  transform: none !important;
}

.v4163-view-enter,
.editor.mobile-active,
.preview-stage.mobile-active {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

body.v40-builder .app-header {
  background: linear-gradient(112deg, #0c2635 0%, #123d51 58%, #174f68 100%) !important;
  border-bottom: 2px solid rgba(217, 182, 111, .68) !important;
  box-shadow: 0 10px 28px rgba(6, 26, 36, .22) !important;
}

body.v40-builder .logo-emblem {
  border-color: rgba(238, 211, 157, .72) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}

body.v40-builder .ui-language-toggle {
  padding: 4px !important;
  background: rgba(4, 20, 28, .34) !important;
  border: 1px solid rgba(222, 235, 240, .25) !important;
  border-radius: 15px !important;
}

body.v40-builder .ui-language-toggle button {
  border-radius: 11px !important;
}

body.v40-builder .ui-language-toggle button.active {
  color: #173c4e !important;
  background: linear-gradient(145deg, #fff, #eef4f6) !important;
  border-color: #fff !important;
  box-shadow: 0 5px 14px rgba(3, 20, 29, .18) !important;
}

body.v40-builder :is(
  .section-journey,
  .form-panel,
  .workspace-dashboard,
  .preview-design-studio,
  .preview-save-card,
  .v4162-about-card
) {
  border-color: var(--v4165-line) !important;
  box-shadow: var(--v4165-shadow) !important;
}

body.v40-builder :is(input, textarea, select):focus-visible,
body.v40-builder button:focus-visible,
body.v40-builder summary:focus-visible,
body.v40-builder a:focus-visible {
  outline: 3px solid rgba(49, 135, 170, .28) !important;
  outline-offset: 2px !important;
}

body.v40-builder .journey-arrow.v40-journey-control:not(:disabled),
body.v40-builder .form-step-actions > button:not(:disabled):not(.form-preview-button) {
  color: #173f52 !important;
  background: linear-gradient(145deg, #fff, #edf4f6) !important;
  border-color: #b9ced7 !important;
}

body.v40-builder .form-step-actions .form-preview-button {
  background: linear-gradient(135deg, var(--v4165-navy), var(--v4165-blue)) !important;
  box-shadow: 0 10px 22px rgba(18, 76, 101, .19) !important;
}

body.v40-builder .v40-inline-progress {
  background: linear-gradient(135deg, #0d3447, #1d6985) !important;
  border-color: #327b97 !important;
}

body.v40-builder .v40-inline-progress::after {
  transition: none !important;
}

html.v30-dark body.v40-builder {
  background:
    radial-gradient(circle at 15% 0, rgba(35, 89, 110, .26), transparent 31rem),
    #08151b !important;
}

html.v30-dark body.v40-builder :is(
  .section-journey,
  .form-panel,
  .workspace-dashboard,
  .preview-design-studio,
  .preview-save-card,
  .v4162-about-card
) {
  border-color: #38515c !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28) !important;
}

html.v30-dark body.v40-builder .journey-arrow.v40-journey-control:not(:disabled),
html.v30-dark body.v40-builder .form-step-actions > button:not(:disabled):not(.form-preview-button) {
  color: #e7f2f5 !important;
  background: #1a3039 !important;
  border-color: #45636f !important;
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overscroll-behavior-x: none;
  }

  body.v40-builder .app-header {
    min-height: 92px !important;
    padding: 10px 12px !important;
  }

  body.v40-builder .app-header .brand-mark,
  body.v40-builder .app-header .header-actions {
    min-width: 0 !important;
  }

  body.v40-builder .app-header .brand-mark > div > b {
    font-size: 15px !important;
    white-space: nowrap;
  }

  body.v40-builder .mobile-switch {
    position: static !important;
    width: auto !important;
    margin: 10px 10px 8px !important;
    padding: 5px !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid #cbdce3 !important;
    border-radius: 17px !important;
    box-shadow: 0 10px 24px rgba(18, 59, 78, .1) !important;
  }

  body.v40-builder .mobile-switch button {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  body.v40-builder .mobile-switch button.active {
    color: #fff !important;
    background: linear-gradient(135deg, #123d51, #20708d) !important;
    box-shadow: 0 7px 16px rgba(16, 72, 96, .2) !important;
  }

  body.v40-builder :is(.editor, .preview-stage, .builder-layout) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body.v40-builder .editor,
  body.v40-builder .preview-stage {
    overflow-x: clip !important;
  }

  body.v40-builder .section-journey,
  body.v40-builder .form-panel,
  body.v40-builder .workspace-dashboard,
  body.v40-builder .preview-design-studio,
  body.v40-builder .preview-save-card {
    border-radius: 18px !important;
  }

  body.v40-builder .section-journey-head {
    gap: 7px !important;
    padding: 10px !important;
  }

  body.v40-builder .journey-arrow.v40-journey-control {
    min-height: 50px !important;
    border-radius: 13px !important;
  }

  body.v40-builder .form-step-actions {
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(14, 54, 72, .13) !important;
  }

  body.v40-builder .preview-stage {
    padding-inline: 10px !important;
  }

  body.v40-builder .preview-toolbar {
    max-width: 100% !important;
  }

  body.v40-builder .mobile-app-dock {
    right: 10px !important;
    left: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    padding: 7px !important;
    border: 1px solid rgba(184, 205, 214, .84) !important;
    border-radius: 21px !important;
    box-shadow: 0 18px 42px rgba(7, 31, 42, .24) !important;
  }

  body.v40-builder .mobile-app-dock > button {
    min-height: 64px !important;
    border-radius: 15px !important;
  }

  body.v40-builder .mobile-app-dock > button.active {
    background: #e9f4f7 !important;
    box-shadow: inset 0 0 0 1px #aac7d2 !important;
  }

  html.v30-dark body.v40-builder .mobile-switch {
    background: #10232b !important;
    border-color: #3c5661 !important;
  }

  html.v30-dark body.v40-builder .mobile-app-dock > button.active {
    background: #194456 !important;
    box-shadow: inset 0 0 0 1px #4f7584 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v40-builder *,
  body.v40-builder *::before,
  body.v40-builder *::after {
    scroll-behavior: auto !important;
  }
}

@media print {
  body.v40-builder {
    background: #fff !important;
  }
}