/* Color variables and Bootstrap color overrides are in colors.css */


/* ------------------------------------------ */
/* FONTS */
/* ------------------------------------------ */
.eaves {
  font-family: mrs-eaves-roman-all-small-ca, serif;
  font-weight: 400;
  font-style: normal;
}

.new-spirit {
font-family: "new-spirit", serif;
font-weight: 400;
font-style: normal;
}


/* ------------------------------------------ */
/* NAV BADGES (next to wordmark) */
/* ------------------------------------------ */
.beta-badge,
.env-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;             /* compact pill */
  font-size: 0.62rem;                  /* slightly smaller */
  line-height: 1.1;
  letter-spacing: 0.06em;
  font-weight: 600;                     /* less bold */
  color: var(--white-085);        /* muted on dark navbar */
  background: transparent;              /* outline style */
  border: 1px solid var(--beta-badge-border);
  border-radius: 999px;                 /* pill shape */
  transform: translateY(-1px);          /* slight lift for alignment */
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;                /* as it’s a link */
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* Hover/focus like outline buttons */
#top-nav.navbar-dark .beta-badge:hover,
#top-nav.navbar-dark .beta-badge:focus,
#top-nav.navbar-dark .env-badge:hover,
#top-nav.navbar-dark .env-badge:focus {
  color: var(--white);
  border-color: var(--beta-badge-hover-border);
  background: var(--beta-badge-hover-bg);
}

.env-badge-dev {
  color: var(--white);
  background: linear-gradient(180deg, var(--main-orange), var(--dark-orange));
  border-color: rgba(255, 255, 255, 0.2);
}




/* ------------------------------------------ */
/* GENERAL STYLES */
/* ------------------------------------------ */



/* Make Skinny */
.list main.container, .edit main.container {
  max-width: 960px;
}

.fs-90 {
  font-size: .9rem !important;
}
.fs-80 {
  font-size: .8rem !important;
}
.draft-container {
   background: var(--draft-container-bg);
   border: 3px dashed var(--draft-container-border);
   margin-bottom: 20px;
}


/* ------------------------------------------ */
/* --------- LIST CAROUSEL ------------------ */
/* ------------------------------------------ */
/* Container that holds the arrows and the image viewport */
.carousel {
  display: flex;
  align-items: center;
  margin: 1rem auto;
  position: relative;
}
/* Wrapper for the scrolling images */
.carousel-track-wrapper {
  overflow-x: auto;   /* allow horizontal scrolling */
  overflow-y: hidden;  /* hide vertical scrollbar */
  width: 100%;
  /* Hide scrollbar for Webkit (Chrome, Safari) */
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
}
.carousel-track-wrapper::-webkit-scrollbar {
  display: none;                 /* Chrome, Safari */
}
/* Optional: Custom scrollbar styling (Webkit browsers)
.carousel-track-wrapper::-webkit-scrollbar {
  height: 8px;
}
.carousel-track-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.carousel-track-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.carousel-track-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}
 */
/* The track containing the images */
.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}
/* Arrow button styling */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--arrow-bg); /* semi-transparent dark */
  border: none;
  color: var(--arrow-text);         /* slightly see-through white */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  box-shadow: 0 1px 3px var(--arrow-shadow);
  transition: all 0.2s ease;
  z-index: 10;
}

.arrow:hover {
  background-color: var(--arrow-hover-bg);  /* darken slightly on hover */
  color: var(--white);
  transform: translateY(-50%) scale(1.1);
}

.arrow.left {
  left: -20px; /* push slightly outside the carousel bounds */
}

.arrow.right {
  right: -20px;
}
/* Hide arrows on small screens */
@media (max-width: 768px) {
  .arrow {
  display: none;
  }
}


/* ------------------------------------------ */
/* LIKES */
/* ------------------------------------------ */

.like-container {
	display: flex;
  /* justify-content: flex-center; */
	align-items: center;
	color: var(--like-icon-default);

}
.list .like-container {
	justify-content: flex-start;

}
.like-msg { /* not currently used */
	font-size: 12px;
	margin-right: 5px;
	margin-bottom: 3px;
}    
.like-icon:hover, .like-icon.clicked {
	transform: scale(1.3); /* Optional: apply scale on hover */
	transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}
/* Keyframes for click animation */
@keyframes clickAnimation {
	0% {transform: scale(1);}
	50% {transform: scale(2.0);}
	100% {transform: scale(1.3);}
}
.clicked {
	/* Apply the click animation */
	animation: clickAnimation 0.4s ease;
}
/* Ensure transform property is transitioned smoothly */
.like-icon {
	font-size: 10px;
	transition: transform 0.2s ease-in-out;
	display: inline-block; /* Necessary for transform to work */
}


/* ------------------------------------------ */
/* ----------- NEW DRAFT & CONFIRM ---------- */
/* ------------------------------------------ */

.sticky-top-custom {
  position: sticky;
  top: 80px; /* set to the nav's height */
  align-self: flex-start;
}
/* Un-stick on small screens (≤ 991px) */
@media (max-width: 991px) {
  .sticky-top-custom {
    position: static !important; /* back to NORMAL flow */
    top: auto;                   /* ignore sticky offset */
  }
}

/* Adjust card background on hover */
.new-draft .card-link .card {
  background-color: var(--draft-card-bg);
}
.new-draft .card-link:hover .card {
  background-color: var(--draft-card-hover-bg);
  transition: background-color 0.3s ease;
}

/* ------------------------------------------ */
/* Review Edit Pages */
/* ------------------------------------------ */

/* Text under the book media images */
.sm-icon-text {
	font-size: .65rem;
}

/* CALENDAR PICKER */
[type="date"] {
	background: var(--white) url(../images/bootstrap-icons/calendar3.svg)  94% 50% no-repeat ;
	margin-top: 8px;
}
[type="date"]::-webkit-inner-spin-button {
	display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
}
.calendar {
	border: 1px solid var(--calendar-border);
	border-radius: 5px;
	background-color: var(--white);
	padding: 5px;
	box-shadow: inset 0 3px 6px var(--calendar-inner-shadow);
	font-size: 1rem;
	width: 150px;
} 

/* RATING EMOJI IMAGES */
 /* Hide the actual radio buttons */
 .hidden-radio {
	 display: none;
 }
 /* Style for each image container */
 .rating-image-container {
	 display: inline-block !important;
	 width: 50px;
	 margin-bottom: 10px;
	 opacity: 0.15;
	 transition: transform 0.2s ease;
 }
 /* Style for each image */
 .rating-image-container img {
	 width: 50px;
	 padding-right: 10px;
 }
 .rating-image-container:hover {
	 transform: scale(1.1); /* Scales up the image to 110% of its size */
 }
 /* On hover, change image opacity */
 .rating-image-container:hover,
 .selected {
	opacity: 1;
	filter: brightness(150%);
 }
 .rating-image-container.selected img {
	 /* https://isotropic.co/tool/hex-color-to-css-filter/ */
   filter: invert(47%) sepia(15%) saturate(2065%) hue-rotate(70deg) brightness(50%) contrast(83%);
 } 
 /* COMPLETION SLIDER */
 .slidecontainer {
   width: 100%; /* Width of the outside container */
 }
 .slider {
	-webkit-appearance: none;
   margin: 8px 0px; /* Gives slider approx same heigh as Read Date input. Looks nicer and aligns description text below */
   width: 100%;
   height: 15px;
   border-radius: 5px;   
   background: var(--slider-track-bg);
   outline: none;
   opacity: 0.7;
   -webkit-transition: .2s;
   transition: opacity .2s;
 }
 /* Mouse-over effects */
 .slider:hover {
   opacity: 1; /* Fully shown on mouse-over */
 }
 /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 25px;
   height: 25px;
   border-radius: 50%; 
   cursor: pointer;
 }
 
 .slider::-moz-range-thumb {
   width: 25px;
   height: 25px;
   border-radius: 50%;
   cursor: pointer;
 }
 
 /* red glow for the rating area */
 .rating-area.error-glow {
 box-shadow: 0 0 8px 4px var(--success-main) !important;
 border-radius: 4px; /* make the glow nicely rounded */
 }
 
 /* Core blockquote */
 blockquote{
   margin: 1.75rem 0;
   padding: 0.75rem 1.25rem 0.75rem 1.75rem;
   position: relative;
 
   font-family: "new-spirit", "Iowan Old Style", "Times New Roman", serif;
   font-size: 1.05rem;
   line-height: 1.65;
 
   color: var(--blockquote-text);
   background: none;
   border-left: 2px solid var(--dark-green);
 }
 
 /* Subtle opening quotation mark */
 blockquote::before{
   content: "“";
   position: absolute;
   left: 0.4rem;
   top: -0.15rem;
   font-size: 2.6rem;
   line-height: 1;
   color: var(--dark-green);
   font-family: "new-spirit", serif;
 }
 
 /* Paragraph spacing */
 blockquote p{
   margin: 0.5rem 0;
 }
 
 blockquote > :last-child{
   margin-bottom: 0;
 }
 
 /* Attribution / citation line */
 blockquote cite,
 blockquote .quote-cite{
   display: block;
   margin-top: 0.75rem;
   font-size: 0.9rem;
   font-style: normal;
   color: var(--blockquote-cite);
 }
 
 /* Nested quotes feel more marginal, less emphatic */
 blockquote blockquote{
   margin: 1rem 0 0;
   padding-left: 1.25rem;
   border-left-color: var(--mid-green);
 }
 
 blockquote blockquote::before{
   content: "“";
   left: 0.25rem;
   color: var(--mid-green);
 }
 
 .editor-preview blockquote,
 .editor-preview-side blockquote{
   font-family: "new-spirit", "Iowan Old Style", "Times New Roman", serif;
 }
 
 /* ------------------------------------------ */
 /* ------------------ TIMELINE -------------- */
 /* ------------------------------------------ */

 .timeline img.review-cover {
   width: 150px;
   float: left;
   padding-right: 20px;
   padding-bottom: 10px;
 }
/* make filter consistent on text in all browsers */
 .spoiler {
   display: inline-block;      /* helps filter on inline text */
   filter: blur(6px);
   transition: filter 0.3s ease;
   user-select: none;          /* don't let people select/copy while hidden */
   pointer-events: none;       /* disable clicks on links/buttons while hidden */
 }
 
 /* once revealed, restore everything */
 .spoiler-wrapper.revealed .spoiler {
   filter: none;
   user-select: text;
   pointer-events: auto;
 }
 
 /* your existing styles are good: */
 .spoiler-wrapper { cursor: pointer; }
 .spoiler-explanation { font-style: italic; font-size: .9em; color: var(--spoiler-explanation); margin-bottom: .5em; }
 .spoiler-wrapper.revealed .spoiler-explanation { display: none; }
 
 
 .timeline .stat-bar-box {
   background: var(--stat-bar-bg);
   padding: .5rem;
   border: 1px solid var(--stat-bar-border);
   font-size: .7rem;
 }
 .timeline .stat-bar-box .stat {
   font-size: .9rem;
   display: block;
   font-weight: bold;
 }
 
 
 /* ------------------------------------------ */
  /* ------------------ EDIT LISTS -------------- */
  /* ------------------------------------------ */
 .edit-list .list-container {
   
 }
 .edit-list .list-item-container {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   
   margin-bottom: 10px; /* Add space between items */
   cursor: move; /* Indicate items can be dragged */
   
   border: 1px solid var(--edit-list-item-border);
   border-radius: 5px;
   background-color: var(--edit-list-item-bg);
 }
 /* Style for the dragging state */
 .edit-list .list-item-container.sortable-chosen {
   cursor: grabbing;
   opacity: 0.5; /* Makes the dragging item semi-transparent */
   background-color: var(--edit-list-item-drag-bg);
 }
 .edit-list .position-container {
   display: flex;
   align-items: center;
 }
 .edit-list .delete-container {
   margin-left: auto;
   display: flex;
   align-items: center;
 }
 .edit-list .delete-book-btn {
   cursor: pointer;
   xfont-size: 2rem;
   opacity: .75;
 }
 .edit-list .delete-book-btn:hover {
   opacity: 1;
 }
 .edit-list .title-container {
 
 }
 .edit-list .author-container {
 
 }
 .edit-list .list-new-book .list-item-container:hover {
   cursor: pointer;
 }
 .edit-list .list-item-container.sortable-chosen {
   cursor: grabbing;
   opacity: 1; /* Keep full opacity */
   background-color: var(--edit-list-item-bg); /* Same as the normal row background */
 }
 .custom-placeholder {
   background-color: var(--placeholder-bg);
   border: 1px dashed var(--placeholder-border);
   height: 50px; /* Adjust this to match your row height */
   margin-bottom: 10px;
 }


/* --- Onboarding Carousel --- */
.onboarding-carousel-item {
  width: 100%;
  aspect-ratio: 2 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background-color: var(--index-stat-import-bg); /* Fallback color */
  border: 4px solid var(--white);
  box-shadow: 0 10px 25px var(--onboarding-shadow);
}

/* Optional overlay to improve text contrast if image is busy */
.onboarding-carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--onboarding-overlay); /* Darker tint (approx 50%) */
  z-index: 1;
}

.onboarding-text-overlay {
  position: absolute;
  z-index: 2; /* above the tint */
  color: var(--white);
  text-shadow: 0 1px 3px var(--onboarding-text-shadow);
  padding: 1rem;
  /* Max width preventing text from hitting edges too hard */
  max-width: 80%;
}

@media (max-width: 576px) {
  .onboarding-carousel-item {
    aspect-ratio: unset;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1.25rem;
  }
  .onboarding-carousel-item::after {
    background: var(--onboarding-overlay-mobile);
  }
  .onboarding-text-overlay {
    position: static;
    font-size: 0.9rem;
    padding: 0;
    max-width: 100%;
  }
}

/* --- Updated Onboarding Text for split positioning --- */
.onboarding-text-element {
  position: absolute;
  z-index: 2;
  color: var(--onboarding-text);
  text-shadow: 0 1px 3px var(--onboarding-text-shadow);
  /* Default font sizes - can be overridden inline or via utility classes */
}
.onboarding-text-element.ob-title {
  font-size: 1.75rem; 
  font-weight: 700;
  margin: 0;
}
.onboarding-text-element.ob-desc {
  font-size: 1rem;
  margin: 0;
  max-width: 80%;
}

@media (max-width: 576px) {
  .onboarding-text-element {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    max-width: 100%;
  }
  .onboarding-text-element.ob-title {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
  }
  .onboarding-text-element.ob-desc {
    font-size: 0.85rem;
    max-width: 100%;
  }
}

/* --- Onboarding Highlighter Overlay --- */
#onboarding-highlighter-container {
  position: fixed;
  inset: 0;
  z-index: 1060; /* Higher than Bootstrap modals/offcanvas */
  pointer-events: none; /* Let clicks pass through if needed, or block them */
  display: none; /* Hidden by default */
  overflow: hidden; /* Prevent box-shadow spillover issues */
}

#onboarding-highlighter-box {
  position: absolute;
  border-radius: 8px;
  /* The "dimmed" background is actually this massive shadow */
  box-shadow: 0 0 0 9999px var(--highlighter-dim); 
  
  /* The circle/highlight border itself */
  border: 3px solid var(--onboarding-highlight-border); /* Bootstrap warning yellow */
  
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Pulse animation for the border */
@keyframes ob-pulse {
  0% { box-shadow: 0 0 0 0 var(--highlighter-pulse-glow), 0 0 0 9999px var(--highlighter-dim); }
  70% { box-shadow: 0 0 0 10px var(--highlighter-pulse-fade), 0 0 0 9999px var(--highlighter-dim); }
  100% { box-shadow: 0 0 0 0 var(--highlighter-pulse-fade), 0 0 0 9999px var(--highlighter-dim); }
}

#onboarding-highlighter-box.animate-pulse {
  animation: ob-pulse 2s infinite;
}

/* Limit carousel width on large screens */
@media (min-width: 992px) {
  #onboardingCarousel {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------------
   UTILITY CLASSES — layout/typography for color utility classes
   (Color properties are in colors.css)
   ------------------------------------------------------------------ */

.text-list-not-found {
  line-height: 1.5;
}

.stub-banner {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.stub-banner-text {
  font-size: 0.9rem;
  font-weight: 500;
}