/* =========================================
   DearFlip Custom Overrides
   Theme: MSHRC Dark Premium (Clean & Modern)
   ========================================= */

/* 1. Global Viewport Styling */
body.flipbook-body,
body {
  background-color: #1a1a1a !important; /* Deep dark grey for focus */
}

.df-container {
  background-color: #1a1a1a !important;
}

/* 2. Control Bar Container - The "Messed Up" Clean Fix */
.df-ui-controls {
  background: rgba(0, 51, 102, 0.85) !important; /* Brand Blue, High Opacity */
  backdrop-filter: blur(10px); /* Glass effect */
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px; /* Fully rounded pill shape */
  bottom: 30px !important;
  padding: 8px 15px !important; /* Slightly reduced padding */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px; /* Consistent spacing */
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999 !important;
}

/* 3. Control Buttons (Icons) */
.df-ui-btn {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important; /* Off-white for comfort */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 36px !important; /* Slightly smaller for elegance */
  height: 36px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  cursor: pointer;
}

.df-ui-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #e8a317 !important; /* Gold on hover */
  transform: translateY(-0.7px);
}

.df-ui-btn.df-ui-btn-active {
  color: #e8a317 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* 4. Icon Size adjustments */
.df-ui-btn i,
.df-ui-btn:before {
  font-size: 18px !important;
}

/* 5. Pagination Input "1 / 46" */
.df-ui-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 15px;
}

.df-ui-wrapper input[type="text"] {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-radius: 5px !important;
  padding: 4px 13px;
  text-align: center;
  font-size: 13px;
  width: 45px !important;
  height: 26px !important;
}

.df-ui-wrapper span {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px;
}

/* 6. Navigation Side Arrows */
.df-ui-prev,
.df-ui-next {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 20% !important;
  width: 50px;
  height: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.df-ui-prev:hover,
.df-ui-next:hover {
  background: #003366 !important; /* Primary fill */
  color: #fff !important;
  border-color: #003366;
  transform: scale(1.01);
  box-shadow: 0 0 15px rgba(0, 51, 102, 0.4);
}

/* 7. Close Viewer Button */
.close-viewer-btn {
  position: absolute;
  top: 25px;
  right: 30px;
  z-index: 100000;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 20px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.close-viewer-btn:hover {
  background: #e8a317 !important;
  border-color: #e8a317;
  color: #000 !important;
  box-shadow: 0 4px 15px rgba(232, 163, 23, 0.3);
}

/* 8. More Menu / Dropup FIX (The "Redesigned" Custom Menu) */
.more-container {
  padding: 8px 0 !important;
  background-color: #002b55 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  bottom: 30px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  min-width: 230px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  z-index: 100001 !important;
}

/* Target the buttons inside the more menu */
.more-container .df-ui-btn,
.df-ui-more .df-ui-popup button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 20px !important;
  background: transparent !important;
  color: #fff !important;
  border-radius: 0 !important;
  height: auto !important;
  text-align: left !important;
  /* Reset old hacks */
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}

.more-container .df-ui-btn:hover {
  background-color: #e8a317 !important;
  color: #000 !important;
}

/* HIDE THE OLD PSEUDO ELEMENTS ON THESE BUTTONS */
.more-container .df-ui-btn:before,
.more-container .df-ui-btn.fixed-layout:before {
  content: none !important;
  display: none !important;
}

/* Style the NEW Injected Structure */
.custom-icon-box {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 12px !important; /* The gap */
  flex-shrink: 0 !important;
}

.custom-icon-box i {
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
  color: #fff !important;
}

.custom-text-box {
  font-family: inherit !important; /* Ensure generic font doesn't override */
  font-size: 14px !important;
  line-height: 1 !important; /* Match icon */
  font-weight: 400 !important; /* Standardize weight */
  color: #fff !important;
  white-space: nowrap !important;
}

/* Specific fix for pagemode to ensure it matches */
.df-ui-pagemode .custom-text-box {
  opacity: 1 !important;
}

/* 9. Icons Fix (Using explicit classes as backup) */
.df-ui-btn i {
  font-family: "themify" !important;
  font-style: normal;
  line-height: normal;
}