/* =========================================
   Autologout Dialog - CarePoint Design System
========================================= */

/* Overlay */
.ui-widget-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1px);
  opacity: inherit;
}
/* autologout-dialog-content */
/* Dialog Container */
.ui-dialog:has(#autologout-confirm),
.ui-dialog:has(#autologout-dialog-content)  {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 20px !important;
  border: none !important;
  padding: 0;
  font-family: "Figtree", "Nunito Sans", sans-serif;
}

/* =========================================
   Title Bar
========================================= */
.ui-dialog:has(#autologout-confirm) .ui-dialog-titlebar ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-titlebar {
  background: #fff !important;
  border: none;
  border-bottom: 1px solid #dadee0;
  border-radius: 20px 20px 0 0 !important;
  padding: 20px 30px 16px;
}
.path-pro-qcp-modules .ui-dialog:has(#autologout-confirm) .ui-dialog-titlebar ,
.path-pro-qcp-modules .ui-dialog:has(#autologout-dialog-content) .ui-dialog-titlebar {
  background: #fff !important;
  border: none;
  border-bottom: 1px solid #dadee0;
  border-radius: 20px 20px 0 0 !important;
  padding: 20px 30px 16px;
  padding-left: 0px;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-title,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-title {
  font-family: "Raleway", sans-serif;
  font-size: 20px !important;
  font-weight: 700;
  color: #004e90;
  margin-bottom: 0;
}

/* =========================================
   Close Button
========================================= */
.ui-dialog:has(#autologout-confirm) .ui-dialog-titlebar-close ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-titlebar-close {
  background-image: url("../../assets/close.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  background-color: #fff !important;
  border: 1px solid #dadee0 !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 1px;
      margin-top: -18px;
    margin-right: 10px;
}
/* Admin (Seven theme) - reset margin */
body:has(#block-seven-page-title) .ui-dialog:has(#autologout-confirm) .ui-dialog-titlebar-close ,
body:has(#block-seven-page-title) .ui-dialog:has(#autologout-dialog-content) .ui-dialog-titlebar-close {
  background-image: url("../../assets/close.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  background-color: #fff !important;
  border: 1px solid #dadee0 !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 1px;
  margin-top: 0 !important;
  margin-right: 0 !important;
}
.path-pro-qcp-modules .ui-dialog:has(#autologout-confirm) .ui-dialog-titlebar-close ,
.path-pro-qcp-modules .ui-dialog:has(#autologout-dialog-content) .ui-dialog-titlebar-close {
    background-image: url("../../assets/close.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  background-color: #fff !important;
  border: 1px solid #dadee0 !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 1px;
  margin-top: -10px !important;
  margin-right: 30px !important;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-titlebar-close .ui-icon,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-titlebar-close .ui-icon {
  display: none !important;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-titlebar-close:hover,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-titlebar-close:hover  {
  background-color: rgba(212, 220, 227, 0.5) !important;
}

/* =========================================
   Dialog Content
========================================= */
#autologout-confirm.ui-dialog-content ,
#autologout-dialog-content.ui-dialog-content {
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  padding: 24px 30px !important;
  background: #fff;
}

/* =========================================
   Button Pane
========================================= */
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane  {
  background: #fff !important;
  border: none;
  border-radius: 0 0 20px 20px;
  padding: 10px 30px 28px;
  display: flex;
  justify-content: flex-end;
}

.path-pro-qcp-modules .ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane,
.path-pro-qcp-modules .ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane  {
  padding-right: 20px !important;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonset ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonset{
  display: flex;
  gap: 12px;
}

/* =========================================
   Buttons - Shared
========================================= */
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button{
  position: relative;
  overflow: hidden;
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 50px;
  border: none;
  padding: 10px 36px;
  height: auto;
  cursor: pointer;
  color: #fff !important;
  transition: background-color 0.2s ease;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:focus,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:focus,
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:focus-visible ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Shine effect */
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button::before,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button::before,
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button::after ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translateX(-100px) skewX(-15deg);
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button::before ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button::before{
  width: 60px;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(30px);
  opacity: 0.5;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button::after ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button::after {
  width: 30px;
  left: 30px;
  background: rgba(255, 255, 255, 0.2);
  filter: blur(5px);
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:hover::before ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:hover::before {
  opacity: 1;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:hover::after,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:hover::after,
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button::before ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button::before {
  transform: translateX(300px) skewX(-15deg);
  transition: all 0.9s ease;
}

/* =========================================
   Yes Button - Green (stay logged in)
========================================= */
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:first-child ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:first-child {
  background-color: #8cad06;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:first-child:hover ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:first-child:hover{
  background-color: #f27300;
  transition: background-color 0.9s ease;
}

/* =========================================
   No Button - Orange (logout)
========================================= */
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:last-child,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:last-child {
  background-color: #ef8322;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:last-child:hover ,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:first-child {
  background-color: #8cad06;
  transition: background-color 0.9s ease;
}
/* Yes Button - Green */
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:first-child,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:first-child  {
  background-color: #8cad06 !important;
  background-image: none !important; /* Seven theme adds a gradient */
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:first-child:hover,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:first-child:hover {
  background-color: #f27300 !important;
  transition: background-color 0.9s ease;
}

/* No Button - Orange */
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:last-child,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:last-child  {
  background-color: #ef8322 !important;
  background-image: none !important;
}

.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button:last-child:hover,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button:last-child:hover {
  background-color: #8cad06 !important;
  transition: background-color 0.9s ease;
}

/* Also force text color and border */
.ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane button,
.ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane button {
  color: #fff !important;
  border: none !important;
  background-image: none !important;
}
/* =========================================
   Responsive
========================================= */
@media (max-width: 767px) {
  .ui-dialog:has(#autologout-confirm),  .ui-dialog:has(#autologout-dialog-content) {
    width: 90% !important;
    left: 5% !important;
  }

  .ui-dialog:has(#autologout-confirm) .ui-dialog-buttonpane ,
    .ui-dialog:has(#autologout-dialog-content) .ui-dialog-buttonpane {
    justify-content: center;
    padding: 10px 20px 24px;
  }
}