/* Simple base styling for PKND Support */

.pknd-support {
  display: none;
  position: relative;
  padding: 15px 35px 15px 15px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    height 0.3s ease;
}

.pknd-support.show-alert {
  display: block !important;
}

.pknd-support.initially-hidden {
  display: none !important;
}

.pknd-support-close {
  position: absolute;
  right: 10px;
  top: 10px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  color: white;
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid white;
  padding: 0;
  margin: 0;
  width: 32px;
  height: 32px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  outline: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.pknd-support-close:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

.pknd-support-close:active {
  background-color: rgba(0, 0, 0, 0.7);
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pknd-support-reopen {
  position: fixed;
  bottom: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #3e3e3e;
  color: white;
  font-weight: bold;
  border: 2px solid white;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 16px;
  padding: 0;
  outline: none;
  /* Animation only runs for 6 seconds after appearing */
  animation: pulse-attention 2s 3;
  box-sizing: border-box;
}

.pknd-support-reopen.position-type-percentage:not(.bottom-center) {
  right: 10%;
}

.pknd-support-reopen.position-type-pixels:not(.bottom-center) {
  right: 10px;
}

/* Ensure minimum spacing for reopen button */
.pknd-support-reopen[style*="right: 0"] {
  right: 10px !important;
  bottom: 10px !important;
}

.pknd-support-reopen[style*="left: 0"] {
  left: 10px !important;
  bottom: 10px !important;
}

.pknd-support-reopen.bottom-center {
  left: 50%;
  transform: translateX(-50%);
}

.pknd-support-reopen:not(.position-type-percentage):not(.position-type-pixels):not(.bottom-center) {
  right: 10%;
}

/* Specific styling for edit pages */
body.path-node-edit .pknd-support-reopen:not([data-show-on-edit="true"]),
body.path-edit .pknd-support-reopen:not([data-show-on-edit="true"]),
[class*="page-node-"][class*="edit"] .pknd-support-reopen:not([data-show-on-edit="true"]) {
  /* Hide by default on edit paths, JavaScript will show it if enabled */
  display: none !important;
}

/* Logo visibility on edit pages is controlled by settings and JavaScript */
body.path-node-edit .pknd-support-logo-container.show-on-edit,
body.path-edit .pknd-support-logo-container.show-on-edit,
[class*="page-node-"][class*="edit"] .pknd-support-logo-container.show-on-edit,
body.path-node-edit .pknd-support-gin-sidebar-container.show-on-edit,
body.path-edit .pknd-support-gin-sidebar-container.show-on-edit,
[class*="page-node-"][class*="edit"] .pknd-support-gin-sidebar-container.show-on-edit {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Show only when explicitly enabled through setting and block is enabled */
.pknd-support-reopen.on-edit-path[data-show-on-edit="true"] {
  z-index: 1000; /* Higher z-index to appear above edit forms */
  display: block !important; /* Show on edit pages when enabled */
  position: fixed !important; /* Ensure fixed positioning */
  /* Let JavaScript handle positioning based on settings */
}

/* Hide reopen button when block is not enabled */
body:not(.pknd-block-enabled) .pknd-support-reopen {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure consistent spacing with logo container */
.pknd-support-reopen.with-logo {
  min-right: 10px;
  min-left: 10px;
}

.pknd-support-reopen:hover {
  background-color: #005684;
  transform: scale(1.1);
  animation: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.pknd-support-reopen.bottom-center:hover {
  transform: translateX(-50%) scale(1.1);
}

/* Special styling for edit forms - only when block is enabled */
body.pknd-block-enabled form.node-form .pknd-support-reopen[data-show-on-edit="true"],
body.pknd-block-enabled.path-node-edit .pknd-support-reopen[data-show-on-edit="true"],
body.pknd-block-enabled.path-edit .pknd-support-reopen[data-show-on-edit="true"],
body.pknd-block-enabled [class*="page-node-"][class*="edit"] .pknd-support-reopen[data-show-on-edit="true"] {
  z-index: 1000 !important;
  position: fixed !important;
  display: block !important;
  /* Let JavaScript handle positioning based on settings */
}

/* Logo visibility on forms depends on the logo_on_edit setting */
form.node-form .pknd-support-logo-container.show-on-edit,
form.node-form .pknd-support-gin-sidebar-container.show-on-edit,
form.node-form .pknd-support-logo.show-on-edit {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pknd-support-reopen:active {
  transform: scale(0.95);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

@keyframes pulse-attention {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 116, 189, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(0, 116, 189, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 116, 189, 0);
    transform: scale(1);
  }
}

.pknd-support-content {
  margin-right: 20px;
}

/* Alert color styles */
.pknd-support.message {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

.pknd-support.warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.pknd-support.critical {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

.pknd-support.scheme-alternate.message {
  background-color: #e8f5e9;
  border-color: #c8e6c9;
  color: #2e7d32;
}

.pknd-support.scheme-alternate.warning {
  background-color: #fff3e0;
  border-color: #ffe0b2;
  color: #ef6c00;
}

.pknd-support.scheme-alternate.critical {
  background-color: #ffebee;
  border-color: #ffcdd2;
  color: #c62828;
}

/* Logo styles */
.pknd-support-logo-container {
  position: fixed;
  z-index: 999 !important;
  bottom: 20px;
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.pknd-support-logo-container.loaded {
  opacity: 1;
}

/* Gin sidebar specific styles */
.pknd-support-gin-sidebar-container {
  position: fixed;
  z-index: 999 !important; /* Higher than regular toolbar */
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.pknd-support-gin-sidebar-container.loaded {
  opacity: 1;
}

.pknd-support-logo-container.bottom-left.position-type-percentage:not([style*="left"]) {
  /* Default position if inline style is not applied - percentage */
  left: 10%;
  justify-content: flex-start;
}

.pknd-support-logo-container.bottom-left.position-type-pixels:not([style*="left"]) {
  /* Default position if inline style is not applied - pixels */
  left: 10px;
  justify-content: flex-start;
}

.pknd-support-logo-container.bottom-center {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 10px;
}

.pknd-support-logo-container.bottom-right.position-type-percentage:not([style*="right"]) {
  /* Default position if inline style is not applied - percentage */
  right: 10%;
  justify-content: flex-end;
}

.pknd-support-logo-container.bottom-right.position-type-pixels:not([style*="right"]) {
  /* Default position if inline style is not applied - pixels */
  right: 10px;
  justify-content: flex-end;
}

/* Ensure minimum spacing for logo container */
.pknd-support-logo-container[style*="right: 0"] {
  right: 10px !important;
}

/* .pknd-support-logo-container[style*="left: 0"] {
  left: 10px !important;
} */

.pknd-support-logo-wrapper {
  transform-origin: center center !important;
  display: inline-block;
  cursor: pointer;
}

/* Gin sidebar specific positioning for logo wrapper */
.gin--vertical-toolbar .pknd-support-gin-sidebar-container .pknd-support-logo-wrapper {
  position: relative;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

/* For right-aligned logos, change transform origin */
.pknd-support-logo-container.bottom-right .pknd-support-logo-wrapper {
  transform-origin: bottom right !important;
}

/* For left-aligned logos, change transform origin */
.pknd-support-logo-container.bottom-left .pknd-support-logo-wrapper {
  transform-origin: bottom left !important;
}

.pknd-support-logo {
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}

/* Responsive styles */
@media (max-width: 768px) {
  .pknd-support {
    padding: 12px 30px 12px 12px;
    font-size: 13px;
  }

  @media (max-width: 480px) {
    .pknd-support-reopen.position-type-percentage {
      bottom: 5px;
      right: 5%;
      width: 36px;
      height: 36px;
    }

    .pknd-support-reopen.position-type-pixels {
      bottom: 5px;
      right: 5px;
      width: 36px;
      height: 36px;
    }

    .pknd-support-reopen.bottom-center {
      bottom: 5px;
      width: 36px;
      height: 36px;
    }

    .pknd-support-reopen:not(.position-type-percentage):not(.position-type-pixels):not(.bottom-center) {
      bottom: 5px;
      right: 5%;
      width: 36px;
      height: 36px;
    }

  .pknd-support-logo {
    max-width: 150px;
  }

  .pknd-support-logo-container {
    bottom: 15px;
  }

  /* These are only applied when inline styles are not present */
  .pknd-support-logo-container.bottom-left.position-type-percentage:not([style*="left"]) {
    left: 8%;
  }

  .pknd-support-logo-container.bottom-left.position-type-pixels:not([style*="left"]) {
    left: 8px;
  }

  .pknd-support-logo-container.bottom-right.position-type-percentage:not([style*="right"]) {
    right: 8%;
  }

  .pknd-support-logo-container.bottom-right.position-type-pixels:not([style*="right"]) {
    right: 8px;
  }

  /* Gin sidebar specific styles for tablet */
  .pknd-support-gin-sidebar-container {
    max-width: 60px;
  }
}

@media (max-width: 480px) {
  .pknd-support-reopen.position-type-percentage:not(.bottom-center) {
    bottom: 10px;
    right: 5%;
    width: 36px;
    height: 36px;
  }

  .pknd-support-reopen.position-type-pixels:not(.bottom-center) {
    bottom: 10px;
    right: 5px;
    width: 36px;
    height: 36px;
  }

  .pknd-support-reopen.bottom-center {
    bottom: 10px;
    width: 36px;
    height: 36px;
  }

  .pknd-support-reopen:not(.position-type-percentage):not(.position-type-pixels):not(.bottom-center) {
    bottom: 10px;
    right: 5%;
    width: 36px;
    height: 36px;
  }

  .pknd-support-logo {
    max-width: 100px;
  }

  .pknd-support-logo-container {
    bottom: 10px;
  }

  /* These are only applied when inline styles are not present */
  .pknd-support-logo-container.bottom-left.position-type-percentage:not([style*="left"]) {
    left: 5%;
  }

  .pknd-support-logo-container.bottom-left.position-type-pixels:not([style*="left"]) {
    left: 5px;
  }

  .pknd-support-logo-container.bottom-right.position-type-percentage:not([style*="right"]) {
    right: 5%;
  }

  .pknd-support-logo-container.bottom-right.position-type-pixels:not([style*="right"]) {
    right: 5px;
  }

  /* Gin sidebar specific styles for mobile */
  .pknd-support-gin-sidebar-container {
    max-width: 40px;
  }

  /* Edit page specific styles for mobile */
    body.pknd-block-enabled.path-node-edit .pknd-support-reopen[data-show-on-edit="true"],
    body.pknd-block-enabled.path-edit .pknd-support-reopen[data-show-on-edit="true"],
    body.pknd-block-enabled [class*="page-node-"][class*="edit"] .pknd-support-reopen[data-show-on-edit="true"],
    body.pknd-block-enabled .pknd-support-reopen.on-edit-path[data-show-on-edit="true"] {
      width: 44px;
      height: 44px;
      font-size: 16px;
      z-index: 1000;
      position: fixed !important;
      /* Let JavaScript handle positioning based on settings */
    }
}