/* --- BASE MODAL STYLES --- */
/* Ensure the image inside Cropper.js is displayed correctly */
#ac-modal_image {
   max-width: 100%;
   max-height: 100%;
   width: auto; /* Important for aspect ratio */
   height: auto; /* Important for aspect ratio */
   display: block;
}
/* Hide default Cropper.js background */
.cropper-bg{
  background-image: unset !important;
}
/* Apply default font */
#ac-modal_cropper *{
  font-family: 'Montserrat', sans-serif !important;
  box-sizing: border-box; /* Include padding/border in width/height calculations */
}
/* Main modal overlay - covers full viewport */
#ac-modal_cropper{
  transition: .2s all linear;
  width: 100vw;
  height: 100vh;
  z-index: 999999999999999;
  backdrop-filter: blur(3px);
  background-color: #00000094; /* Semi-transparent background */
  position: fixed;
  top: 0;
  left: 0;
  /* --- ROBUST CENTERING METHOD 1: Flexbox --- */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  /* --- ROBUST CENTERING METHOD 2: Fallback (if flexbox has issues) --- */
  /* text-align: center; */ /* Can help center inline-block children */
  visibility: hidden;
  opacity: 0;
  padding: 10px; /* Add padding to prevent content touching edges */
}
.ac-modal_open{
  opacity:1 !important;
  visibility: visible !important;
}

/* --- MODAL CARD LAYOUT (FLEXBOX) --- */
/* This is the main card container */
#ac-modal_cropper_card {
    width: 100%;
    height: 100%; /* Allow it to grow/shrink */
    max-width: 1000px; /* Cap width on large screens */
    max-height: 95vh; /* Cap height to ensure margins */
    /* --- ROBUST CENTERING METHOD 3: For the card itself --- */
    /* If the flexbox on the parent doesn't work perfectly in all cases */
    /* margin: auto; */ /* This can help center if display:block is somehow forced */
    /* --- VISUAL STYLING --- */
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Subtle shadow */
    /* Background is applied to card_bg now */
    display: flex; /* Make the card itself a flex container */
    flex-direction: column; /* Stack children vertically */
}
/* Background and main structure */
#ac-modal_cropper_card_bg {
  padding: 15px; /* Padding inside the card */
  border-radius: 15px; /* Match card border radius */
  display: flex;
  flex-direction: column; /* Stack title, content, buttons */
  height: 100%; /* Take full height of #ac-modal_cropper_card */
  width: 100%; /* Take full width */
  /* --- VISUAL STYLING --- */
  backdrop-filter: blur(20px);
  background: rgb(19,19,19);
  background: -moz-radial-gradient(circle, rgba(19,19,19,0.29175420168067223) 0%, rgba(0,0,0,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(19,19,19,0.29175420168067223) 0%, rgba(0,0,0,1) 100%);
  background: radial-gradient(circle, rgba(19,19,19,0.29175420168067223) 0%, rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131313",endColorstr="#000000",GradientType=1);
}
/* Top title/action bar */
#ac-modal_cropper_card_tittle {
  flex-shrink: 0; /* Prevent shrinking */
  display: flex;
  justify-content: space-between; /* Space title and buttons */
  align-items: center;
  margin-bottom: 15px; /* Space below */
}
#ac-modal_cropper_card_tittle h5{
  margin: 0px;
  color: white;
  text-transform: unset;
  font-weight: unset;
  font-size: 20px;
}
#ac-crop_top_actions{
    display: flex;
    gap: 10px; /* Space between buttons */
}
#ac-logOut{
  font-size: 14px;
  padding: 8px 16px;
  color: white;
  border-radius: 50px;
  border: none !important;
  background-color: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  outline: none !important;
  white-space: nowrap;
}
#ac-logOut img{
  width: 18px;
  height: 18px; /* Explicit height */
  margin-right: 8px;
  object-fit: contain; /* Ensure icon fits */
}
#ac-crop_save{
  background-color: #ffffff;
  font-size: 14px;
  padding: 8px 24px;
  color: black;
  border-radius: 50px;
  border: none !important;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 15px #ffffff85;
  user-select: none;
  outline: none !important;
  white-space: nowrap;
}
#ac-crop_save img{
  width: 18px;
  height: 18px;
  margin-right: 8px;
  margin-top: -2px;
  object-fit: contain;
}

/* --- CONTENT AREA (Centered, Controlled Height) --- */
/* This area holds the .img-container for Cropper.js */
#ac-modal_cropper_card_conttent {
  flex-grow: 1; /* Take available space */
  flex-shrink: 1; /* Allow shrinking if needed */
  min-height: 0; /* Crucial for flexbox shrinking */
  /* --- CENTERING THE CONTENT AREA ITSELF --- */
  display: flex; /* Make it a flex container */
  justify-content: center; /* Center its children (img-container) horizontally */
  align-items: center; /* Center its children (img-container) vertically */
  /* --- HEIGHT CONTROL --- */
  flex-basis: 65%; /* Default height basis */
  max-height: 70vh; /* Cap max height */
  margin: 10px 0; /* Vertical margin */
  overflow: hidden; /* Contain the image container */
  box-sizing: border-box;
  padding: 5px 0; /* Small padding inside */
  /* Optional visual tweaks */
  /* border: 1px solid #444; */
  /* border-radius: 10px; */
}
/* The container that Cropper.js directly manipulates */
.img-container {
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  /* Visual styles moved from here */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Let Cropper.js handle the inner image positioning/borders */
}

/* --- BOTTOM ACTION BAR --- */
#ac-modal_cropper_card_bottom {
  flex-shrink: 0; /* Prevent shrinking */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto; /* Push to bottom */
  background: white;
  padding: 15px 10px;
  border-radius: 0 0 10px 10px;
  z-index: 10;
}
/* Action buttons */
.ac-cropper_actions{
  border-radius: 50px;
  border: none !important;
  background-color: white;
  color: #3d3d3d;
  font-size: 16px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  outline: none !important;
  white-space: nowrap;
}
.ac-cropper_actions:focus, .ac-cropper_actions:hover{
  background-color: #565656;
  color: white;
}
/* Icons inside action buttons - Larger */
.ac-cropper_actions img{
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50px;
  padding: 6px;
  margin: 0 7px 0 -9px;
  box-sizing: content-box;
  object-fit: contain;
}

/* --- CROPPER.JS GRID STYLING --- */
/* Style the built-in grid lines */
.cropper-view-box,
.cropper-dashed.dashed-h,
.cropper-dashed.dashed-v {
    border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Style the center indicator */
.cropper-center {
    width: 0;
    height: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Style the resize handle */
.cropper-point.point-se{
  height: 5px !important;
  opacity: .75 !important;
  width: 5px !important;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media screen and (max-width: 1100px){
  #ac-modal_cropper_card_bg {
    padding: 12px;
    max-height: 90vh;
  }
  #ac-modal_cropper_card_conttent {
    flex-basis: 60%;
    max-height: 65vh;
  }
  .ac-cropper_actions {
    font-size: 15px;
    padding: 7px 13px;
  }
  .ac-cropper_actions img {
    width: 20px;
    height: 20px;
    padding: 5px;
  }
  #ac-crop_save, #ac-logOut {
    font-size: 13px;
    padding: 7px 20px;
  }
  #ac-crop_save img, #ac-logOut img {
    width: 17px;
    height: 17px;
  }
}

/* --- MOBILE-SPECIFIC STYLES --- */
@media screen and (max-width: 768px) {
  #ac-modal_cropper {
    padding: 5px; /* Less padding on mobile */
  }
  #ac-modal_cropper_card {
     max-height: 98vh; /* Almost full height */
     max-width: none; /* Allow full width */
     border-radius: 10px; /* Slightly smaller radius */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  }
  #ac-modal_cropper_card_bg {
    padding: 10px; /* Less padding */
    border-radius: 10px;
  }
  #ac-modal_cropper_card_conttent {
    flex-basis: 55%; /* Reduce height basis on mobile */
    max-height: 60vh; /* Cap max height more strictly */
    margin: 8px 0; /* Reduce margin */
    padding: 3px 0; /* Reduce padding */
  }
  #ac-modal_cropper_card_tittle {
    margin-bottom: 12px;
    flex-direction: column; /* Stack title/buttons */
    gap: 10px;
    text-align: center;
  }
  #ac-modal_cropper_card_tittle h5 {
    font-size: 18px;
  }
  #ac-crop_top_actions {
    width: 100%;
    justify-content: space-between;
  }
  #ac-logOut, #ac-crop_save {
    font-size: 12px;
    padding: 6px 15px;
  }
  #ac-logOut img, #ac-crop_save img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
  #ac-modal_cropper_card_bottom {
    margin-top: auto;
    padding: 12px 5px;
    gap: 6px;
  }
  .ac-cropper_actions {
    font-size: 12px; /* Slightly larger font for mobile */
    padding: 7px 12px; /* Larger touch target */
  }
  .ac-cropper_actions img {
    width: 24px; /* Larger icon for mobile */
    height: 24px;
    padding: 5px;
    margin: 0 6px 0 -8px;
  }
}

/* --- SMALL MOBILE ADJUSTMENTS --- */
@media screen and (max-width: 480px){
  #ac-modal_cropper_card_bg {
    padding: 8px;
  }
  #ac-modal_cropper_card_tittle {
    margin-bottom: 10px;
    gap: 8px;
  }
  #ac-modal_cropper_card_tittle h5 {
    font-size: 16px;
  }
  #ac-logOut, #ac-crop_save {
    font-size: 11px;
    padding: 5px 12px;
  }
  #ac-logOut img, #ac-crop_save img {
    width: 14px;
    height: 14px;
    margin-right: 5px;
  }
  #ac-modal_cropper_card_conttent {
    flex-basis: 50%; /* Further reduce height basis */
    max-height: 55vh; /* Further cap max height */
    margin: 5px 0;
    padding: 2px 0;
  }
  #ac-modal_cropper_card_bottom {
    padding: 10px 4px;
    gap: 5px;
  }
  .ac-cropper_actions {
    font-size: 11px;
    padding: 6px 10px;
  }
  .ac-cropper_actions img {
    width: 22px;
    height: 22px;
    padding: 4px;
    margin: 0 5px 0 -7px;
  }
  #ac-crop_top_actions,
  #ac-modal_cropper_card_bottom {
    flex-wrap: wrap;
  }
}