/* Same stack as Bootstrap 3 body when the host page has no Bootstrap (e.g. assets on S3). */
    #configurationstudio-root {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #cs-viewer {
      width: 100%;
      height: 80vh;
      background: #f8f9fa;
      border-radius: 8px;
      position: relative;
      overflow-x: hidden;
      overflow-y: hidden;
    }
    /* Keep WebGL canvas behind all overlay UI (messages, context menus) so they show in fullscreen */
    #cs-viewer > canvas {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      display: block;
    }

    .viewer-config-id {
      position: absolute;
      bottom: 15px;
      right: 15px;
      background: rgba(0, 0, 0, 0.7);
      color: #ffffff;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: bold;
      z-index: 998;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .viewer-config-id:hover {
      background: rgba(0, 0, 0, 0.85);
    }

    .viewer-watermark {
      position: absolute;
      left: 16px;
      bottom: 16px;
      width: min(280px, 34%);
      z-index: 997;
      pointer-events: none;
      user-select: none;
      opacity: 0.82;
    }

    .viewer-watermark img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Messages/toasts/alerts container – inside #cs-viewer so they show in fullscreen */
    #cs-viewerMessages {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10000;
    }
    #cs-viewerMessages > * {
      pointer-events: auto;
    }
    #cs-viewerMessages .toast-message,
    #cs-viewerMessages .copy-instruction {
      position: absolute;
      top: 20px;
      right: 20px;
      min-width: 300px;
      max-width: 400px;
      z-index: 10001;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    }
    #cs-viewerMessages .copy-instruction {
      top: 80px;
      background: #fff3cd;
      border: 1px solid #ffeaa7;
      color: #856404;
      padding: 10px;
      border-radius: 4px;
    }
    .viewer-alert-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10002;
    }
    .viewer-alert-modal {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      max-width: 420px;
      min-width: 280px;
      padding: 20px;
      margin: 20px;
    }
    .viewer-alert-modal .viewer-alert-text {
      white-space: pre-wrap;
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .viewer-alert-modal .viewer-alert-ok {
      padding: 8px 20px;
      background: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    .viewer-alert-modal .viewer-alert-ok:hover {
      background: #0056b3;
    }
    .viewer-order-code {
      margin: 10px 0 14px;
      padding: 10px 12px;
      border-radius: 6px;
      background: #f1f3f5;
      border: 1px solid #dfe3e7;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.03em;
      text-align: center;
      color: #1f2933;
    }
    .viewer-alert-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }
    .viewer-alert-modal .viewer-alert-secondary {
      padding: 8px 20px;
      background: #e9ecef;
      color: #343a40;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    .viewer-alert-modal .viewer-alert-secondary:hover {
      background: #dce1e6;
    }

    /* Settings button positioned relative to viewer */
    .settings-button {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 24px;
      height: 24px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
      transition: opacity 0.2s ease;
      padding: 0;
    }

    .settings-button:hover {
      opacity: 0.7;
    }

    .settings-button svg {
      width: 24px;
      height: 24px;
      fill: #495057;
    }

    /* Help button */
    .help-button {
      position: absolute;
      top: 8px;
      right: 8px;
      height: 22px;
      background: #0d6efd;
      color: #ffffff;
      border: 1px solid #0b5ed7;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      z-index: 1000;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      padding: 0 7px;
      box-shadow: 0 1px 5px rgba(13, 110, 253, 0.22);
      animation: helpButtonPulse 2.8s ease-in-out infinite;
    }

    .help-button:hover {
      background: #0b5ed7;
      border-color: #0a58ca;
      transform: translateY(-1px);
    }

    .help-button-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2px;
      line-height: 1;
      white-space: nowrap;
    }

    @keyframes helpButtonPulse {
      0%, 100% {
        box-shadow: 0 1px 5px rgba(13, 110, 253, 0.22);
      }
      50% {
        box-shadow: 0 1px 8px rgba(13, 110, 253, 0.3);
      }
    }

    /* Fullscreen button */
    .fullscreen-button {
      position: absolute;
      top: 15px;
      right: 45px;
      width: 24px;
      height: 24px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
      transition: opacity 0.2s ease;
      padding: 0;
    }

    .fullscreen-button:hover {
      opacity: 0.7;
    }

    .fullscreen-button svg {
      width: 24px;
      height: 24px;
      fill: #495057;
    }

    /* Fullscreen mode styles */
    #cs-viewer:fullscreen {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }

    #cs-viewer:-webkit-full-screen {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }

    #cs-viewer:-moz-full-screen {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }

    #cs-viewer:-ms-fullscreen {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }

    /* Custom Help Wizard Styles */
    .wizard-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .wizard-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .wizard-tooltip {
      position: fixed;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      max-width: 350px;
      min-width: 280px;
      top: -9999px;
      left: -9999px;
      z-index: 10003;
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: auto;
    }

    .wizard-tooltip.active {
      opacity: 1;
      transform: scale(1);
    }

    .wizard-tooltip-header {
      padding: 16px 20px 12px;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .wizard-tooltip-title {
      font-size: 18px;
      font-weight: 600;
      color: #212529;
      margin: 0;
    }

    .wizard-tooltip-close {
      background: none;
      border: none;
      font-size: 24px;
      color: #6c757d;
      cursor: pointer;
      padding: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: color 0.2s ease;
    }

    .wizard-tooltip-close:hover {
      color: #212529;
    }

    .wizard-tooltip-body {
      padding: 16px 20px;
      color: #495057;
      font-size: 14px;
      line-height: 1.6;
    }

    .wizard-tooltip-body strong {
      color: #212529;
    }

    .wizard-tooltip-footer {
      padding: 12px 20px 16px;
      border-top: 1px solid #e9ecef;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .wizard-progress {
      font-size: 12px;
      color: #6c757d;
    }

    .wizard-buttons {
      display: flex;
      gap: 8px;
    }

    .wizard-btn {
      padding: 8px 16px;
      border: 1px solid #dee2e6;
      background: #ffffff;
      color: #495057;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .wizard-btn:hover:not(:disabled) {
      background: #f8f9fa;
      border-color: #adb5bd;
    }

    .wizard-btn-primary {
      background: #007bff;
      color: #ffffff;
      border-color: #007bff;
    }

    .wizard-btn-primary:hover:not(:disabled) {
      background: #0056b3;
      border-color: #0056b3;
    }

    .wizard-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .wizard-highlight-box {
      position: absolute;
      border: 3px solid #007bff;
      border-radius: 4px;
      box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
      pointer-events: none;
      z-index: 10001;
      transition: all 0.3s ease;
      background: transparent;
      /* Use border and shadow only, no background to avoid covering tooltip */
    }

    .wizard-pulse {
      animation: wizardPulse 2s ease-in-out infinite;
    }

    @keyframes wizardPulse {

      0%,
      100% {
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
        border-color: #007bff;
      }

      50% {
        box-shadow: 0 0 30px rgba(0, 123, 255, 0.8);
        border-color: #0056b3;
      }
    }

    /* Undo/Redo buttons container */
    .undo-redo-buttons {
      position: absolute;
      top: 15px;
      right: 75px;
      display: flex;
      gap: 8px;
      z-index: 999;
    }

    .undo-redo-button {
      width: 24px;
      height: 24px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease;
      padding: 0;
    }

    .undo-redo-button:hover:not(.disabled) {
      opacity: 0.7;
    }

    .undo-redo-button.disabled {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }

    .undo-redo-button svg {
      width: 24px;
      height: 24px;
      fill: #495057;
    }

    /* Viewer control buttons (dimensions toggle, etc.) */
    .viewer-control-button {
      width: 24px;
      height: 24px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease;
      padding: 0;
    }

    .viewer-control-button:hover {
      opacity: 0.7;
    }

    .viewer-control-button svg {
      width: 24px;
      height: 24px;
      fill: #495057;
    }
    
    #cs-toggleDimensionsButton svg {
      width: 18px;
      height: 18px;
    }
    
    #cs-toggleDimensionsButton svg path {
      fill: #495057;
      opacity: 0.65;
    }

    .settings-menu {
      position: absolute;
      top: 60px;
      right: -400px;
      min-width: 150px;
      max-width: 225px;
      width: 225px;
      max-height: calc(75vh - 80px);
      background: #ffffff;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      padding: 16px;
      z-index: 1100;
      transition: right 0.3s ease-in-out;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .settings-menu.visible {
      right: 15px;
    }

    .settings-menu-section {
      margin-bottom: 12px;
    }

    .settings-menu-section:last-child,
    .settings-menu-section:last-of-type {
      margin-bottom: 0;
    }

    .settings-menu-section label {
      display: block;
      font-weight: bold;
      color: #495057;
      margin-bottom: 8px;
      font-size: 13px;
    }

    .settings-menu-section .modern-btn-group {
      display: flex;
      gap: 8px;
      margin-bottom: 4px;
    }

    .settings-menu-section input[type="range"] {
      width: 100%;
      margin-top: 8px;
    }

    .settings-menu-section .help {
      font-size: 10px;
      color: #6c757d;
      margin-top: 4px;
      display: block;
    }

    /* Settings Accordion */
    .settings-accordion {
      border-top: 1px solid #e9ecef;
      padding-top: 12px;
      margin-top: 12px;
    }

    .settings-accordion-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      padding: 4px 0;
      transition: background 0.2s ease;
      border-radius: 4px;
      margin: -4px 0;
      padding: 4px 8px;
    }

    .settings-accordion-header:hover {
      background: #f8f9fa;
    }

    .settings-accordion-header .context-menu-label {
      margin-bottom: 0;
      font-weight: 600;
    }

    .settings-accordion-icon {
      font-size: 10px;
      color: #6c757d;
      transition: transform 0.3s ease;
    }

    .settings-accordion-header.collapsed .settings-accordion-icon {
      transform: rotate(-90deg);
    }

    .settings-accordion-content {
      max-height: 500px;
      overflow: hidden;
      transition: max-height 0.3s ease, opacity 0.3s ease;
      opacity: 1;
    }

    .settings-accordion-content.collapsed {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
      margin-top: 0;
      margin-bottom: 0;
    }

    /* Preset subsection styling */
    .preset-subsection {
      margin-bottom: 12px;
    }

    .preset-subsection:last-child {
      margin-bottom: 0;
    }

    .preset-subsection-label {
      font-size: 10px;
      font-weight: 600;
      color: #6c757d;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Context menu styling */
    /* Shared context menu styles - below settings panel so they never cover it */
    .context-menu {
      position: absolute;
      background: #ffffff;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      padding: 12px;
      min-width: 150px;
      max-width: min(250px, calc(100vw - 260px));
      max-height: 95%;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 999;
      font-size: 12px;
      left: -1000px;
      top: 20px;
      transition: left 0.3s ease-in-out;
    }

    .context-menu.visible {
      left: 20px;
    }

    /* Modern right-click drop menu (VS Code / Windows 11 style) */
    .context-menu.drop-right-click-menu {
      left: 0;
      top: 0;
      transition: none;
      min-width: 125px;
      padding: 4px 0;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 6px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
      font-size: 13px;
    }
    .context-menu.drop-right-click-menu .context-menu-section {
      margin-bottom: 0;
      padding: 0;
    }
    .context-menu.drop-right-click-menu .context-menu-label {
      display: none;
    }
    .context-menu.drop-right-click-menu .context-menu-btn {
      display: block;
      width: 100%;
      margin: 0;
      padding: 8px 14px 8px 12px;
      border: none;
      border-radius: 0;
      background: transparent;
      text-align: left;
      font-size: 13px;
      color: #333;
      min-width: 0;
      border-radius: 0;
    }
    .context-menu.drop-right-click-menu .context-menu-btn:hover {
      background: rgba(0, 0, 0, 0.06);
    }
    .context-menu.drop-right-click-menu .context-menu-btn:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .context-menu.drop-right-click-menu .context-menu-btn:last-of-type {
      border-radius: 0 0 4px 4px;
    }
    .context-menu.drop-right-click-menu .context-menu-btn:only-of-type {
      border-radius: 4px;
    }
    .context-menu.drop-right-click-menu .context-menu-btn.disabled {
      color: #aaa;
      pointer-events: none;
    }
    .context-menu.drop-right-click-menu .right-click-separator {
      height: 1px;
      background: rgba(0, 0, 0, 0.1);
      margin: 4px 0;
    }

    .context-menu-section {
      margin-bottom: 12px;
    }

    .context-menu-section:last-child {
      margin-bottom: 0;
    }

    .context-menu-label {
      font-weight: bold;
      color: #495057;
      margin-bottom: 6px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .context-menu-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      width: 100%;
    }
    
    /* Ensure preset buttons in settings menu wrap properly */
    #cs-settingsMenu .context-menu-buttons {
      max-width: 100%;
    }
    
    #cs-settingsMenu .context-menu-btn {
      flex: 0 1 auto;
      min-width: 0;
      max-width: calc(50% - 2px);
    }

    .cord-supply-select {
      width: 100%;
      max-width: 180px;
      padding: 6px 10px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      font-size: 11px;
      color: #495057;
      background: #ffffff;
      cursor: pointer;
      margin-top: 0px;
    }

    .cord-supply-select:hover {
      border-color: #adb5bd;
    }

    .cord-supply-select:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
    }

    .export-model-select {
      padding: 4px 2px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      font-size: 11px;
      color: #495057;
      background: #ffffff;
      cursor: pointer;
    }

    .export-model-select:hover {
      border-color: #adb5bd;
    }

    .export-model-select:focus {
      outline: none;
      border-color: #007bff;
    }

    .context-menu-btn {
      padding: 4px 8px;
      border: 1px solid #dee2e6;
      background: #ffffff;
      color: #495057;
      border-radius: 4px;
      cursor: pointer;
      font-size: 11px;
      transition: all 0.2s ease;
      min-width: 40px;
      text-align: center;
    }

    .context-menu-btn:hover {
      background: #f8f9fa;
      border-color: #adb5bd;
    }

    .context-menu-btn[data-preset].selected {
      background: #007bff;
      color: #ffffff;
      border-color: #007bff;
    }

    .context-menu-btn[data-preset].selected:hover {
      background: #0056b3;
      border-color: #0056b3;
      color: #ffffff;
    }

    .context-menu-btn.active {
      background: #007bff;
      color: #ffffff;
      border-color: #007bff;
    }

    .context-menu-btn.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    #cs-configIdInput.error {
      border-color: #dc3545;
      background-color: #fff5f5;
    }

    #cs-configIdInput.error:focus {
      border-color: #dc3545;
      box-shadow: 0 0 0 0.2px rgba(220, 53, 69, 0.25);
    }

    .context-menu-dropdown {
      position: relative;
      width: 100%;
    }

    .context-menu-dropdown-selected {
      padding: 6px 8px;
      border: 1px solid #dee2e6;
      background: #ffffff;
      border-radius: 4px;
      cursor: pointer;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .context-menu-dropdown-selected:hover {
      background: #f8f9fa;
    }

    .context-menu-dropdown.open .context-menu-dropdown-options {
      display: block;
    }

    .context-menu-dropdown-options {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #ffffff;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin-top: 2px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 1001;
    }

    .context-menu-dropdown-option {
      padding: 6px 8px;
      cursor: pointer;
      font-size: 11px;
      border-bottom: 1px solid #f8f9fa;
    }

    .context-menu-dropdown-option:last-child {
      border-bottom: none;
    }

    .context-menu-dropdown-option:hover {
      background: #f8f9fa;
    }

    .context-menu-dropdown-option.active {
      background: #007bff;
      color: #ffffff;
    }

    .context-menu input[type="range"] {
      margin-top: 4px;
    }

    .context-menu .cord-length-input {
      width: 4em;
      padding: 4px 8px;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      background: #fff;
      color: #212529;
      box-sizing: border-box;
    }
    .context-menu .cord-length-input:hover {
      border-color: #adb5bd;
    }
    .context-menu .cord-length-input:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
    }
    .context-menu .cord-length-input::-webkit-outer-spin-button,
    .context-menu .cord-length-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .context-menu .cord-length-input[type="number"] {
      appearance: textfield;
      -moz-appearance: textfield;
    }

    .context-menu .help {
      font-size: 9px;
      color: #6c757d;
    }


    /* ID-specific overrides */
    #cs-canopyContextMenu #cs-contextOptionsButtons {
      max-width: calc(2 * 100px + 4px);
    }

    #cs-canopyContextMenu #cs-contextOptionsButtons .context-menu-btn {
      flex: 0 1 auto;
      min-width: auto;
      width: auto;
    }

    #cs-contextViewerBgColorPicker {
      padding: inherit !important;
    }

    .control-bar {
      margin-top: 15px;
    }

    .panel {
      background: #ffffff;
      border-color: #dee2e6;
    }

    .panel-heading {
      background: #f8f9fa !important;
      border-color: #dee2e6 !important;
      color: #495057;
    }

    .help {
      color: #6c757d;
      font-size: 10px;
      margin-left: 6px;
    }

    .swatch {
      width: 60px;
      height: 60px;
      cursor: pointer;
      display: block;
      margin: 0;
    }

    .swatch.active {
      outline: 2px solid #007bff;
    }

    /* Swatch container styling */
    .swatch-container {
      display: inline-block;
      text-align: center;
      margin-right: 8px;
      margin-bottom: 8px;
      vertical-align: top;
    }

    .swatch-name {
      display: block;
      font-size: 10px;
      color: #6c757d;
      margin-top: 4px;
      text-align: center;
      line-height: 1.2;
      max-width: 60px;
      word-wrap: break-word;
    }

    code {
      color: #e83e8c;
      background: #f8f9fa;
    }

    .main-row {
      margin-top: 15px;
    }

    .controls-column {
      padding-right: 15px;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      overflow-x: hidden;
    }

    .output-column {
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* Slim modern scrollbar for columns */
    .controls-column::-webkit-scrollbar,
    .output-column::-webkit-scrollbar {
      width: 6px;
    }

    .controls-column::-webkit-scrollbar-track,
    .output-column::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 3px;
    }

    .controls-column::-webkit-scrollbar-thumb,
    .output-column::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 3px;
      transition: background 0.2s ease;
    }

    .controls-column::-webkit-scrollbar-thumb:hover,
    .output-column::-webkit-scrollbar-thumb:hover {
      background: #9ca3af;
    }

    /* Firefox scrollbar styling */
    .controls-column,
    .output-column {
      scrollbar-width: thin;
      scrollbar-color: #d1d5db transparent;
    }

    .drop-content {
      margin-top: 15px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;
      border: 1px solid #e9ecef;
    }

    /* Custom scrollbar styling for drop-content */
    .drop-content::-webkit-scrollbar {
      width: 8px;
    }

    .drop-content::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    .drop-content::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
    }

    .drop-content::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }

    .drop-content .form-group {
      margin-bottom: 15px;
    }

    .drop-content .form-group:last-child {
      margin-bottom: 0;
    }

    .drop-content label {
      font-weight: 600;
      color: #495057;
      margin-bottom: 8px;
      display: block;
    }

    .drop-swatches {
      margin-top: 8px;
    }

    .drop-swatches .swatch {
      width: 60px;
      height: 60px;
      margin-right: 6px;
      margin-bottom: 6px;
    }


    /* Modern button styling for selectors */
    .modern-btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 8px;
    }

    /* Custom dropdown styling */
    .custom-dropdown {
      position: relative;
      width: auto;
      display: block;
      min-width: 150px;
      margin-top: 8px;
      font-size: 12px;
    }

    .custom-dropdown-selected {
      width: auto;
      padding: 8px 36px 8px 12px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
    }

    .custom-dropdown-selected:after {
      content: '';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #333;
      pointer-events: none;
    }

    .custom-dropdown.open .custom-dropdown-selected:after {
      border-top: none;
      border-bottom: 6px solid #333;
    }

    .custom-dropdown.open .custom-dropdown-selected {
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

    .custom-dropdown-options {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #dee2e6;
      border-top: none;
      border-radius: 0 0 4px 4px;
      max-height: 300px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 8px;
    }

    .custom-dropdown.open .custom-dropdown-options {
      display: block;
    }

    .custom-dropdown-option {
      padding: 10px 12px;
      margin: 4px 0;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
    }

    .custom-dropdown-option:hover {
      transform: scale(1.02);
    }

    .custom-dropdown-option:first-child {
      margin-top: 0;
    }

    .custom-dropdown-option:last-child {
      margin-bottom: 0;
    }

    /* Hex Grid Styles */
    .hex-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 10px;
    }

    .hex-row {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .hex-cell {
      width: 40px;
      height: 40px;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .hex-cell::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      transition: all 0.2s ease;
    }

    /* Shape-specific styling using SVG backgrounds */
    .hex-cell.shape-hex::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%23f0f0f0' stroke='%23ddd' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.shape-circle::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23f0f0f0' stroke='%23ddd' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.shape-square::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' rx='8' fill='%23f0f0f0' stroke='%23ddd' stroke-width='2'/%3E%3C/svg%3E");
    }

    /* Hover states */
    .hex-cell.shape-hex:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%23e0e0e0' stroke='%23bbb' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.shape-circle:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23e0e0e0' stroke='%23bbb' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.shape-square:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' rx='8' fill='%23e0e0e0' stroke='%23bbb' stroke-width='2'/%3E%3C/svg%3E");
    }

    /* Occupied states */
    .hex-cell.occupied.shape-hex::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%234CAF50' stroke='%2345a049' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.occupied.shape-circle::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%234CAF50' stroke='%2345a049' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.occupied.shape-square::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' rx='8' fill='%234CAF50' stroke='%2345a049' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.occupied.shape-hex:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%2345a049' stroke='%2345a049' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.occupied.shape-circle:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%2345a049' stroke='%2345a049' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.occupied.shape-square:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' rx='8' fill='%2345a049' stroke='%2345a049' stroke-width='2'/%3E%3C/svg%3E");
    }

    /* Active states */
    .hex-cell.active.shape-hex::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%232196F3' stroke='%231976D2' stroke-width='2'/%3E%3C/svg%3E");
      box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    }

    .hex-cell.active.shape-circle::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%232196F3' stroke='%231976D2' stroke-width='2'/%3E%3C/svg%3E");
      box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    }

    .hex-cell.active.shape-square::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' rx='8' fill='%232196F3' stroke='%231976D2' stroke-width='2'/%3E%3C/svg%3E");
      box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    }

    .hex-cell.active.shape-hex:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%231976D2' stroke='%231976D2' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.active.shape-circle:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%231976D2' stroke='%231976D2' stroke-width='2'/%3E%3C/svg%3E");
    }

    .hex-cell.active.shape-square:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' rx='8' fill='%231976D2' stroke='%231976D2' stroke-width='2'/%3E%3C/svg%3E");
    }

    /* Empty states with dashed borders */
    .hex-cell.empty.shape-hex::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%23f9f9f9' stroke='%23ccc' stroke-width='2' stroke-dasharray='5,5'/%3E%3C/svg%3E");
    }

    .hex-cell.empty.shape-circle::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23f9f9f9' stroke='%23ccc' stroke-width='2' stroke-dasharray='5,5'/%3E%3C/svg%3E");
    }

    .hex-cell.empty.shape-square::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' rx='8' fill='%23f9f9f9' stroke='%23ccc' stroke-width='2' stroke-dasharray='5,5'/%3E%3C/svg%3E");
    }

    .hex-cell.empty.shape-hex:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,25 95,75 50,95 5,75 5,25' fill='%23e8f5e8' stroke='%234CAF50' stroke-width='2' stroke-dasharray='5,5'/%3E%3C/svg%3E");
    }

    .hex-cell.empty.shape-circle:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23e8f5e8' stroke='%234CAF50' stroke-width='2' stroke-dasharray='5,5'/%3E%3C/svg%3E");
    }

    .hex-cell.empty.shape-square:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' rx='8' fill='%23e8f5e8' stroke='%234CAF50' stroke-width='2' stroke-dasharray='5,5'/%3E%3C/svg%3E");
    }

    .hex-label {
      position: relative;
      z-index: 1;
      font-size: 12px;
      font-weight: bold;
      color: white;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }

    .hex-plus {
      position: relative;
      z-index: 1;
      font-size: 24px;
      font-weight: bold;
      color: #999;
      line-height: 1;
      transition: color 0.2s ease;
    }

    .hex-cell.empty .hex-label {
      color: #999;
      text-shadow: none;
    }

    .hex-cell.empty:hover .hex-label {
      color: #4CAF50;
    }

    .hex-cell.add-instance:hover .hex-plus {
      color: #4CAF50;
    }

    .modern-btn {
      padding: 6px 12px;
      border: 1px solid #dee2e6;
      background: #ffffff;
      color: #495057;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s ease;
      min-width: 40px;
      text-align: center;
    }

    .modern-btn:hover {
      background: #f8f9fa;
      border-color: #adb5bd;
    }

    .modern-btn.active {
      background: #007bff;
      color: #ffffff;
      border-color: #007bff;
      box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
    }

    .modern-btn.disabled,
    .modern-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    .modern-btn.disabled:hover,
    .modern-btn:disabled:hover {
      background: #ffffff;
      border-color: #dee2e6;
    }

    /* Output window styling */
    .output-window {
      margin-top: 15px;
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      overflow: hidden;
    }

    .output-header {
      background: #e9ecef;
      padding: 10px 15px;
      border-bottom: 1px solid #dee2e6;
      color: #495057;
      font-size: 14px;
    }

    .output-content {
      padding: 15px;
      background: #ffffff;
      font-family: 'Courier New', monospace;
      font-size: 16px;
      color: #495057;
      word-break: break-all;
    }

    /* Spec sheet preview (8.5 x 11 inches) */
    .spec-sheet {
      width: 8.5in;
      height: 11in;
      margin-top: 15px;
      background: #ffffff;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      font-family: 'Open Sans Condensed', sans-serif;
    }

    .spec-sheet-header {
      background: #e9ecef;
      padding: 10px 15px;
      border-bottom: 1px solid #dee2e6;
      color: #495057;
      font-size: 14px;
    }
 
    .spec-sheet-body {
      padding: 20px;
      height: calc(100% - 42px);
      overflow: auto;
      font-size: 10pt;
      line-height: 1.4;
      color: #615b4f;
    }

    .spec-sheet-header {
      font-size: 24pt;
      margin-bottom: 20px;
      line-height: 1.2;
      color: #615b4f;
    }

    .spec-sheet-header-ratio {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      display: inline;
      color: #615b4f;
    }

    .spec-sheet-header-cluster {
      font-weight: normal;
      display: inline;
      color: #615b4f;
    }

    .spec-sheet-logo {
      text-align: center;
      margin-bottom: 20px;
    }

    .spec-sheet-logo img {
      height: 40px;
      max-width: 180px;
    }

    .spec-sheet-title {
      text-align: center;
      font-size: 18pt;
      font-weight: bold;
      margin-bottom: 5px;
      color: #615b4f;
    }

    .spec-sheet-subtitle {
      text-align: center;
      font-size: 11pt;
      color: #615b4f;
      margin-bottom: 25px;
    }

    .spec-sheet-section {
      margin-bottom: 20px;
      page-break-inside: avoid;
    }

    .spec-sheet-section-title {
      font-size: 12pt;
      font-weight: bold;
      color: #615b4f;
      margin-bottom: 5px;
      border-bottom: 1px solid #615b4f;
      padding-bottom: 0px;
      text-transform: uppercase;
    }
    
    .spec-sheet-two-column {
      display: flex;
      gap: 30px;
      margin-bottom: 30px;
      page-break-inside: avoid;
    }
    
    .spec-sheet-column-left {
      flex: 1;
    }
    
    .spec-sheet-column-right {
      flex: 1;
    }
    
    .spec-sheet-image-container {
      text-align: center;
      margin: 10px 0;
      width: 100%;
    }
    
    .spec-sheet-image-container img {
      max-width: 100%;
      height: auto;
    }

    .spec-sheet-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid #e9ecef;
    }

    .spec-sheet-row:last-child {
      border-bottom: none;
    }

    .spec-sheet-label {
      font-weight: 600;
      color: #615b4f;
      flex: 0 0 40%;
      text-transform: uppercase;
    }

    .spec-sheet-value {
      color: #615b4f;
      flex: 1;
      text-align: right;
    }

    .spec-sheet-instance {
      margin-bottom: 25px;
      padding: 15px;
      background: #f8f9fa;
      border-left: 4px solid #007bff;
      border-radius: 4px;
    }

    .spec-sheet-instance-header {
      font-size: 11pt;
      font-weight: bold;
      color: #615b4f;
      margin-bottom: 12px;
    }

    .spec-sheet-drop {
      margin-top: 10px;
      padding: 10px;
      background: #ffffff;
      border-left: 3px solid #28a745;
      border-radius: 3px;
    }

    .spec-sheet-drop-header {
      font-size: 10pt;
      font-weight: 600;
      color: #615b4f;
      margin-bottom: 8px;
    }

    .spec-sheet-code {
      font-size: 9pt;
      background: #f8f9fa;
      padding: 4px 8px;
      border-radius: 3px;
      display: inline-block;
      margin-top: 4px;
    }

    .spec-sheet-footer {
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #dee2e6;
      font-size: 9pt;
      color: #615b4f;
      text-align: center;
    }

    /* Print styles for PDF */
    @media print {
      @page {
        size: letter;
        margin: 0.75in 0.75in 1in 0.75in; /* Extra bottom margin for footer */
        @top-center {
          content: element(page-header);
        }
        @bottom-center {
          content: element(page-footer);
        }
      }

      .spec-sheet-body {
        counter-reset: page-number;
      }

      .page-header {
        position: running(page-header);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        border-bottom: 1px solid #dee2e6;
        background: #e9ecef;
        color: #495057;
        font-size: 14px;
      }

      .page-footer {
        position: running(page-footer);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        border-top: 1px solid #dee2e6;
        font-size: 9pt;
        color: #615b4f;
      }

      .page-footer-logo img {
        height: 25px;
        max-width: 120px;
      }

      .page-footer-info {
        display: flex;
        gap: 15px;
        align-items: center;
      }

      .page-number::after {
        counter-increment: page-number;
        content: "Page " counter(page-number);
      }

      /* Hide the content header on print (using running header instead) */
      .spec-sheet-header {
        display: none;
      }

      /* Limit 3D image height to fit on page one */
      .spec-sheet-image-container img {
        max-height: 4in;
        object-fit: contain;
      }

      /* Page break before instance details */
      .spec-sheet-instance-details {
        page-break-before: always;
      }

      /* Prevent page breaks inside sections */
      .spec-sheet-section {
        page-break-inside: avoid;
      }

      .spec-sheet-instance {
        page-break-inside: avoid;
      }

      /* Ensure two-column layout fits on page one */
      .spec-sheet-two-column {
        page-break-inside: avoid;
      }
    }

    /* Panel styling */
    .panel-heading {
      user-select: none;
      transition: background-color 0.2s ease;
    }

    .panel-heading:hover {
      background: #e9ecef !important;
    }

    .panel-body {
      transition: all 0.3s ease;
      overflow: hidden;
    }

    .panel-body.collapsed {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
    }

    /* Copy settings styling */
    .copy-settings-group {
      margin-top: 10px;
    }

    .copy-settings-group .form-control {
      margin-bottom: 8px;
    }

    .copy-settings-btn {
      background-color: #007bff;
      border-color: #007bff;
      color: white;
      font-size: 12px;
      padding: 6px 12px;
      border-radius: 6px;
      transition: all 0.2s ease;
    }

    .copy-settings-btn:hover {
      background-color: #0056b3;
      border-color: #0056b3;
    }

    .copy-settings-btn.disabled {
      background-color: #6c757d;
      border-color: #6c757d;
      cursor: not-allowed;
      opacity: 0.6;
    }

    .copy-settings-btn.disabled:hover {
      background-color: #6c757d;
      border-color: #6c757d;
    }

    /* Product output instance display styling */
    .instance-display {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background: #f9f9f9;
    }

    .instance-text {
      flex: 1;
      margin-right: 15px;
    }

    .instance-visual {
      flex-shrink: 0;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    .layout-visual {
      text-align: center;
      padding: 10px;
    }

    /* Price hidden by default; shown when unlocked via logo secret */
    #cs-priceSection.price-locked {
      display: none !important;
    }

    .header-wrap {
      position: relative;
      width: 100%;
      margin-top: 15px;
      margin-bottom: 15px;
      overflow: visible;
    }

    .header-logo-wrap {
      display: flex;
      align-items: center;
      width: fit-content;
    }

    .header-logo-wrap img {
      cursor: default;
      height: 50px;
      max-width: 200px;
    }

    .price-unlock-panel {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      transform: translateX(100%);
      transition: transform 0.25s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      gap: 6px;
      z-index: 100;
      visibility: hidden;
    }

    .price-unlock-panel .price-unlock-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .price-unlock-panel.open {
      transform: translateX(0);
      visibility: visible;
    }

    .price-unlock-panel input[type="password"],
    .price-unlock-panel input[type="text"] {
      width: 120px;
      padding: 6px 10px;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      font-size: 13px;
    }

    .price-unlock-panel .price-unlock-btn {
      flex: 1;
      min-width: 0;
      padding: 6px 12px;
      font-size: 12px;
      background: #212529;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
    }

    .price-unlock-panel .price-unlock-btn:hover {
      background: #343a40;
    }

    .price-unlock-panel .price-unlock-btn.wrong-password {
      background: #dc3545;
    }

    .price-unlock-panel .price-unlock-btn.wrong-password:hover {
      background: #c82333;
    }

    .price-unlock-panel .price-unlock-msg {
      font-size: 11px;
      color: #dc3545;
      margin-top: 4px;
    }