/*
 Theme Name:   dailybookchoice
 Template:     neve
 Description:  Child theme for the Neve theme
 Author:       Volkan
 Author URI:   http://localhost/wordpress
 Version:      1.0.0
*/

.seo-intro {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

svg#icon-bell-o{
  width: 18px !important;
  height: 18px !important;
}



/* Temp fix for Loop grid nothing found message */
/* (Optional) If Elementor renders duplicate "Nothing found" messages,
   hide all but the last one — frontend only and scoped to loop grid */
body:not(.elementor-editor-active) .elementor-widget-loop-grid
  .e-loop-nothing-found-message:not(:last-child){
  display: none !important;
}

/* Preferred: zero out the built-in paddings via CSS variables (frontend only) */
body:not(.elementor-editor-active) .elementor-widget-loop-grid{
  --e-loop-nothing-found-message-space-from-top: 0px;
  --e-loop-nothing-found-message-space-from-bottom: 0px;
}

/* Fallback: force the message’s paddings to 0 (covers older browsers) */
body:not(.elementor-editor-active) .elementor-widget-loop-grid .e-loop-nothing-found-message{
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  /* legacy shorthands */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}




img.book-cover {
    width: auto;
    height: auto;
}

img {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

/* ===== Avatar Styling ===== */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  vertical-align: middle;
}

/* ===== User Picture Circle Container ===== */
.dbc-user-picture-circle {
  display: inline-block !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0;
  line-height: 0 !important;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-size: 0 !important;
}

.dbc-user-picture-circle * {
  box-sizing: border-box !important;
}

.dbc-user-picture-circle .avatar,
.dbc-user-picture-circle img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: top !important;
  position: relative;
  box-sizing: border-box !important;
  line-height: 0 !important;
}



.dbc-scrollbox {
  max-height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0;
}



/* Remove Elementors' Accordion styling box shadow */
.dbc-no-focus-shadow :is([tabindex]:focus, [tabindex]:focus-visible, input:focus, input:read-write:focus, select:focus, textarea:focus),
.dbc-no-focus-shadow .elementor-accordion .elementor-tab-title:focus,
.dbc-no-focus-shadow .elementor-accordion .elementor-tab-title:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.dbc-no-focus-shadow :is(input:focus, select:focus, textarea:focus) {
  --formfieldbordercolor: initial;
}


/* Search results button styling*/
.dbc-see-all-results-row{
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
}

.dbc-see-all-results-link{
  display:block;
  text-align:center;
  font-weight:600;
  text-decoration:none !important;
  cursor:pointer;
}
.dbc-see-all-results-link:hover{
  opacity:.85;
}


/* Weird min height set by JSF */
.jet-smart-filters-sorting .jet-sorting-select select,
.jet-smart-filters-sorting select {
  min-height: 0 !important;
  line-height: 20px !important; /* some browsers ignore on <select>, fine */
  padding-top: 3px !important;
  padding-bottom: 2px !important;
  width: 162px;
}


.rating-star {
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
}

/* Hide the magnifier SVG (and any icon fallback) */
.wpdiscuz-search-box svg,
.wpdiscuz-search-box #wpdiscuz-search-img,
.wpdiscuz-search-box i#wpdiscuz-search-img{
  display:none !important;
}

/* Make the input fill the whole box, align text left, use Poppins */
.wpdiscuz-search-box input.wpdiscuz-comm-search{
  flex:1 1 auto !important;
  width:100% !important;
  max-width:100% !important;

  margin:0 !important;
  padding:10px 12px !important;   /* adjust if you want */
  box-sizing:border-box !important;

  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-align:left !important;
}

/* If WPDiscuz adds extra left padding because it expects an icon, kill it */
.wpdiscuz-search-box input.wpdiscuz-comm-search{
  padding-left:12px !important;
}


/* Stop hiding nested comments*/
#wpdcom .wpd-hidden {
    visibility: visible !important; /* Ensures the element is visible */
    opacity: 1 !important; /* Sets opacity to fully visible */
    transition: visibility 0s, opacity 0.5s linear; /* Keeps the transition effect intact */
}


/* Remove content from pseudo-elements */
.wpd-comment-label::before,
.wpd-comment-label::after {
    content: none !important;
    display: none !important;
}

.wpd-comment-author a {
  font-family: Poppins, sans-serif;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important; /* Adjust as needed */
}

.wpd-comment-last-edited svg {
  margin-right: 7px; /* Adjust as needed */
  vertical-align: middle;
}

.wpd-comment-last-edited {
  padding-bottom: 10px;
}

/* Stronger selector for spacing between all top-level comments */
#wpdcom .wpd-thread > .wpd-comment {
  margin-left: 0 !important;
}

#wpdcom .wpd-thread-filter .wpdf-sorting {
  font-family: "Poppins" !important;
  font-size: 13px !important;
}

/* Indent only nested replies */
#wpdcom .wpd-comment .wpd-comment {
  margin-left: 74px !important;
}

#wpdcom .wpd-comment-text {
    color: #494949 !important;
}

/* The whole comment box*/
.wpd-comment-wrap {
  padding-top: 10px !important;
}

#comments input:not([type=submit]):not([type=checkbox]) {
  width: auto !important;
}


/* Stronger selector for spacing between replies (nested comments) */
#wpdcom .wpd-comment .wpd-comment {
  margin-top: 5px !important;
}

/* Optional: extra spacing under each comment for clarity */
#wpdcom .wpd-comment-footer {
  margin-bottom: 10px !important;
}

.wpd-reply-button span {
    font-size: 13px !important;
}
#comment-11 > div.wpd-comment-text p {
  font-size: 13px;
}
.wpd-comment-text p {
  margin-bottom: 0 !important;
}


/* Also disable native tooltip if present via title attribute */
.wpd-comment-label[title] {
    pointer-events: none !important;
}


/* SVG icons spacing & size */
#wpd-editor-toolbar-0_0 .ql-toolbar button svg {
    height: 18px;
    width: 18px;
    margin: 0 4px;
}

/* Button hover effect */
#wpd-editor-toolbar-0_0 .ql-toolbar button:hover {
    background: #f5f5f5;
    border-radius: 4px;
}

/* Optional: Textarea fallback (hidden) */
#wpd-editor-0_0 textarea.wc_comment {
    display: none !important;
}




/* Target all SVG icons inside the wpDiscuz submit field */
.wc-field-submit .wpd_label__check svg {
    width: 15px !important;
    height: 15px !important;
}

/* Add spacing between each label (icon group) */
.wc-field-submit .wpd_label {
    margin-right: 20px;
    align-items: center;
}

/* Optional: adjust spacing between icons and label text if needed */
.wc-field-submit .wpd_label__text {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =====================================================
   WPDiscuz / WUN – Notifications dropdown styling
   DailyBookChoice (consolidated + WHITE bell with THIN outline)
===================================================== */

/* Base wrapper */
#wun-container,
#wun-container .wun-notifications{
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-radius: 14px !important;
}

/* Ensure rounding is visible */
#wun-container .wun-notifications{
  overflow: hidden !important;
}

/* Notifications title */
#wun-container .wun-head-bell-wrap-m > span{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 23px !important;
  color: #222 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  font-synthesis: none !important;
}

/* =====================================================
   HEADER bell icon — white fill + THIN white outline
===================================================== */

/* DEFAULT bell (everywhere): black */
svg#icon-bell-o.wun-bell,
svg#icon-bell-o.wun-bell path{
  fill:#0a0000 !important;
}
svg#icon-bell-o.wun-bell{ filter:none !important; }

/* ONLY inside your “white bell” container */
.dbc-bell--white svg#icon-bell-o.wun-bell,
.dbc-bell--white svg#icon-bell-o.wun-bell path{
  fill:#effff4 !important;
}
.dbc-bell--white svg#icon-bell-o.wun-bell{
  filter: drop-shadow(0 0 0.55px #fff) !important;
}




.rating-star {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

/* Compact star rating display */
.compact-rating {
  font-size: 14px;
  color: #000;
  display: inline-flex;
  align-items: center;
}

.compact-rating .star-icon {
  color: #ffd56c;
  margin-right: 4px;
  font-size: 16px;
}



/* Prevent hiding the scrollbar during the animation */
html {
  overflow-y: scroll !important;   /* Always show vertical scrollbar */
  overflow-x: hidden !important;   /* Prevent horizontal shift/glitch */
}

body {
  overflow-x: hidden !important;   /* Prevent content from spilling sideways */
}



/* Dashboard Tabs specific styling */ 
.dbc-tab-dark .e-n-tabs-heading {
  background-color: #14171c !important;
  min-height: 100vh;
}

/* Back to previous page button styling*/
.dbc-back-button {
    border: 1px solid rgba(255, 255, 255, 0.3);
}


.flag-crop {
  width: 100px;
  height: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flag-container {
  height: 550px;
  overflow-y: auto;  /* enables vertical scroll if content is too tall */
  overflow-x: hidden; /* prevent horizontal scrolling */
  padding-right: 8px; /* optional: prevent content from hiding behind scrollbar */
  background-color: #F8F8F8;
  border-radius: 15px;
  border: 1px solid #E0E0E0; /* added border */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

}


/* Force shortcode styling */
.shortcode-force-styling {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
  line-height: normal;
  letter-spacing: -0.4px;
  word-spacing: 1px;
}

/* Clickable text links (authors, genres, etc.) – blue + underline, mild hover */
.text-link-styling {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
  text-underline-offset: 2px;
  line-height: normal;
  letter-spacing: -0.4px;
  word-spacing: 1px;
  color: #4682b4;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.text-link-styling:hover {
  color: #0a3d6b;
  text-decoration: underline;
}

/* Container css */
.upvoted-books-container {
    min-width: 550px;
}

.past-month-container {
    min-width: 770px;
}

.upvote-medals {
	min-width: 120px;
}

.genre-containers {
	min-width: 220px;
}

.login-bar {
	min-width: 250px;
}

/*THIS IS PART OF THE BOOK TEMPLATE*/
.book_of_the_day-template-default .read-more-button {
    display: none;
}

.truncate-text {
  display: -webkit-box;
  line-clamp: 21;
  -webkit-line-clamp: 21; /* Adjust this value to control the number of lines displayed */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-text-small {
  display: -webkit-box;
  line-clamp: 15;
  -webkit-line-clamp: 15; /* Adjust this value to control the number of lines displayed */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Book recommendations of the month filter bar custom css ---------------*/
.elementor-portfolio-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line if necessary */
}

/* Style for the filter bar */
.elementor-portfolio__filters {
    background-color: #000;
    color: #fff;
    min-width: 200px; /* Set a minimum width for the filter bar */
    font-family: 'Poppins', sans-serif; /* Set the font family to Poppins */
    font-size: 14px; /* Set the font size to 14px */
}


/* Style for filter items */
.elementor-portfolio__filter {
    cursor: pointer;
    display: block;
	padding-top: 1px;
	padding-bottom: 1px;
}

/* Hover state for filter items */
.elementor-portfolio__filter:hover {
    background-color: #14171c;
    color: #fff;
}

/* Active state for filter items */
.elementor-portfolio__filter.active {
    background-color: #14171c;
    color: #fff;
}

.elementor-portfolio.elementor-grid.elementor-posts-container.elementor-has-item-ratio {
	padding: 0px;
}

/* Genre/Occupation page flipping book display ---------------*/

.book-showcase-container .clearfix:before,
.book-showcase-container .clearfix:after {
	content: " ";
	display: table;
}

.book-showcase-container .clearfix:after {
	clear: both;
}

.book-showcase-container .clearfix {
	/* IE6/7 hack removed (invalid in modern CSS parsers): *zoom: 1; */
	zoom: 1; /* harmless in modern browsers; keeps non-empty rule */
}

.book-showcase-container body {
	background: #f6f6f6;
	font-weight: 400;
	font-size: 15px;
	color: #333;
	overflow: scroll;
	overflow-x: hidden;
}

.bk-left h3 {
	font-weight: 100;
	font-size: 20px;
	color: #000;
}

.bk-left h4 {
	font-weight: 100;
	font-size: 16px;
	color: #000;
}

.book-showcase-container {
	width: 100%;
	position: relative;
}

.book-showcase-container > header {
	padding: 30px 30px 40px 30px;
}

.book-showcase-container > header h1 {
	font-size: 34px;
	line-height: 38px;
	margin: 0;
	font-weight: 700;
	color: #333;
	float: left;
}

.codrops-top {
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.2);
}

.codrops-demos a {
	display: inline-block;
	margin: 10px;
	color: #666;
	font-weight: 700;
	line-height: 30px;
	border-bottom: 4px solid transparent;
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255, 255, 255, 0.8);
	color: #000;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* Demo Buttons Style */
.codrops-demos {
	float: right;
}

.codrops-demos a:hover {
	color: #000;
	border-color: #000;
}

.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	color: #aaa;
	border-color: #aaa;
}

.support-note {
	color: #d7823e;
	font-size: 16px;
	display: block;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
	text-align: left;
	clear: both;
}

/* =========================
   Global size variables
   ========================= */
.bk-list {
  --bk-w: 234px;   /* front cover width (change this) */
  --bk-h: 360px;   /* front cover height (change this) */
  --bk-depth: 20px;/* cover thickness (Z) */
  --bk-gut: 5px;   /* inner page inset */
  --bk-spine: 40px;/* spine thickness */

  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

/*book showcase*/
.bk-list li {
  position: relative;
  width: var(--bk-w);
  float: left;
  z-index: 1;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  margin: 10px;
}

.bk-list li:last-child {
	margin-right: 0;
}

.bk-info {
	position: relative;
	/* was 440px; equals H + spine */
	margin-top: calc(var(--bk-h) + var(--bk-spine));
}

.bk-info h3 {
	padding: 25px 0 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	font-size: 26px;
}

.bk-info h3 span:first-child {
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	padding-bottom: 5px;
	display: block;
	color: #777;
}

.bk-info p {
	line-height: 24px;
	color: #444;
	min-height: 160px;
}

.bk-info button {
	background-color: #ffd56c;
	border: none;
	color: #fff;
	display: inline-block;
	padding: 3px 15px;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
	margin-right: 4px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.bk-info button.bk-active,
.bk-info button:active {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

.no-touch .bk-info button:hover,
.bk-info button.bk-active {
	background-color: #14171c;
}

.bk-list li .bk-book {
	position: absolute;
	width: 100%;
	height: var(--bk-h);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
}

.bk-list li .bk-book.bk-bookdefault:hover {
	-webkit-transform: rotate3d(0, 1, 0, 35deg);
	transform: rotate3d(0, 1, 0, 35deg);
}

.bk-list li .bk-book > div,
.bk-list li .bk-front > div {
	display: block;
	position: absolute;
}

.bk-list li .bk-front {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
	-webkit-transform: translate3d(0, 0, var(--bk-depth));
	transform: translate3d(0, 0, var(--bk-depth));
	z-index: 10;
}

.bk-list li .bk-front > div {
	z-index: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.bk-list li .bk-page {
	-webkit-transform: translate3d(0, 0, calc(var(--bk-depth) - 1px));
	transform: translate3d(0, 0, calc(var(--bk-depth) - 1px));
	display: none;
	width: calc(var(--bk-w) - var(--bk-gut));
	height: calc(var(--bk-h) - (var(--bk-gut) * 2));
	top: var(--bk-gut);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 9;
}

.bk-list li .bk-front,
.bk-list li .bk-back,
.bk-list li .bk-front > div {
	width: var(--bk-w);
	height: var(--bk-h);
}

.bk-list li .bk-left,
.bk-list li .bk-right {
	width: var(--bk-spine);
	left: calc(var(--bk-spine) / -2);
}

.bk-list li .bk-top,
.bk-list li .bk-bottom {
	width: calc(var(--bk-w) - var(--bk-gut));
	height: var(--bk-spine);
	top: calc(var(--bk-spine) * -0.375); /* was -15px for 40px spine */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bk-list li .bk-back {
	-webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, var(--bk-depth));
	transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, var(--bk-depth));
	box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
	border-radius: 3px 0 0 3px;
}

.bk-list li .bk-cover-back {
	background-color: #000;
	-webkit-transform: rotate3d(0, 1, 0, -179deg);
	transform: rotate3d(0, 1, 0, -179deg);
}

.bk-list li .bk-right {
	height: calc(var(--bk-h) - (var(--bk-gut) * 2));
	top: var(--bk-gut);
	-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, calc(var(--bk-w) - var(--bk-gut)));
	-moz-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, calc(var(--bk-w) - var(--bk-gut)));
	transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, calc(var(--bk-w) - var(--bk-gut)));
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bk-list li .bk-left {
	height: var(--bk-h);
	-webkit-transform: rotate3d(0, 1, 0, -90deg);
	transform: rotate3d(0, 1, 0, -90deg);
}

.bk-list li .bk-top {
	-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, calc((var(--bk-h) - (var(--bk-gut) * 2)) / 2));
	transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, calc((var(--bk-h) - (var(--bk-gut) * 2)) / 2));
}

.bk-list li .bk-bottom {
	-webkit-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, calc(var(--bk-h) - (var(--bk-gut) * 2)));
	transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, calc(var(--bk-h) - (var(--bk-gut) * 2)));
}

/* Transform classes */
.bk-list li .bk-viewinside .bk-front {
	-webkit-transform: translate3d(0, 0, var(--bk-depth)) rotate3d(0, 1, 0, -160deg);
	transform: translate3d(0, 0, var(--bk-depth)) rotate3d(0, 1, 0, -160deg);
}

.bk-list li .bk-book.bk-viewinside {
	-webkit-transform: translate3d(0, 0, 150px) rotate3d(0, 1, 0, 0deg);
	transform: translate3d(0, 0, 150px) rotate3d(0, 1, 0, 0deg);
}

.bk-list li .bk-book.bk-viewback {
	-webkit-transform: translate3d(0, 0, 0px) rotate3d(0, 1, 0, 180deg);
	transform: translate3d(0, 0, 0px) rotate3d(0, 1, 0, 180deg);
}

/* Rounder corners variable (keep if you already added it) */
.bk-list { --bk-radius: 15px; } /* try 28–36px if you want even rounder */

/* Closed book: round the RIGHT corners of the front cover */
.bk-list li .bk-front > div {
  border-radius: 0 var(--bk-radius) var(--bk-radius) 0 !important;
  overflow: hidden; /* clip the image to the radius */
}

/* When opened (view inside) OR flipped to back: round the LEFT corners */
.bk-list li .bk-book.bk-viewinside .bk-front > div,
.bk-list li .bk-book.bk-viewback  .bk-front > div {
  border-radius: var(--bk-radius) 0 0 var(--bk-radius) !important;
}

/* Back cover corners (stay left-rounded) */
.bk-list li .bk-back {
  border-radius: var(--bk-radius) 0 0 var(--bk-radius) !important;
  overflow: hidden;
}

/* Optional: WebKit edge anti-aliasing guard on transformed faces */
.bk-list li .bk-front > div,
.bk-list li .bk-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-clip: padding-box;
}


/* Main colors and content */
.bk-list li .bk-page,
.bk-list li .bk-right,
.bk-list li .bk-top,
.bk-list li .bk-bottom {
	background-color: #fff;
}

.bk-list li .bk-front > div {
	border-radius: 0 3px 3px 0;
	box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
}

.bk-list li .bk-front:after {
	content: '';
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: -1px;
	width: 1px;
}

.bk-list li .bk-cover:after,
.bk-list li .bk-back:after {
	content: '';
	position: absolute;
	top: 0;
	left: 10px;
	bottom: 0;
	width: 3px;
	background: rgba(0, 0, 0, 0.06);
	box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}

.bk-list li .bk-back:after {
	left: auto;
	right: 10px;
}

.bk-left h2 {
	width: calc(var(--bk-h) - var(--bk-spine)); /* was 360px for 400px height */
	height: 20px;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(90deg) translateY(calc(var(--bk-spine) * -1));
	transform: rotate(90deg) translateY(calc(var(--bk-spine) * -1));
	line-height: var(--bk-spine);
	text-align: center;
}

/* Adjust the padding and text alignment for the content inside the book */
.bk-content {
    position: absolute;
    top: 30px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    overflow: hidden;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    cursor: default;
}

.bk-content p {
    padding: 0 0 10px;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 13px;
    line-height: 20px;
	text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bk-content-current {
	opacity: 1;
	pointer-events: auto;
}

/* Book 1 (unchanged) */
.book-1 .bk-front > div,
.book-1 .bk-back,
.book-1 .bk-left,
.book-1 .bk-front:after {
	background-color: #444;
}

.book-1 .bk-cover {
    background-size: cover;
    background-position: center center;
}

.book-1 .bk-cover h2 {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 30px;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
	font-size: 12px;
}

.book-1 .bk-left h2 .dash {
    font-weight: 400;
    font-size: 14px;
    margin: 0 5px;
}

.book-1 .bk-cover h2 span:first-child,
.book-1 .bk-left h2 span:first-child {
	color: #fff;
	font-weight: 400;
	font-size: 14px;
}

.book-1 .bk-cover h2 span:first-child {
	display: block;
}

.book-1 .bk-cover h2 span:last-child,
.book-1 .bk-left h2 span:last-child {
	font-family: "Poppins", Georgia, serif;
	font-weight: 300;
}

.book-1 .bk-content p {
	font-size: 11px;
}

.book-1 .bk-left h2 {
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    padding-right: 10px;
    text-align: center;
	font-family: "Poppins", Georgia, serif;
}

.book-1 .bk-back p {
	color: #fff;
	font-size: 11px;
	padding: 40px;
	text-align: center;
}

/* Fallbacks */
.no-csstransforms3d .bk-list li .bk-book > div,
.no-csstransforms3d .bk-list li .bk-book .bk-cover-back {
	display: inline-block;
}

.no-csstransforms3d .bk-list li .bk-book > div.bk-front {
	display: block;
}

.no-csstransforms3d .bk-info button,
.no-js .bk-info button {
	display: inline-block;
}

/* Add these styles to target the bk-cover and bk-cover-back */
.bk-list li .bk-cover,
.bk-list li .bk-cover-back {
    background-color: inherit;
}

/* Style for the "Read More" button */
.bk-readmore {
    margin-top: 15px;
    color: #000;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
	  font-weight: 600;
    transition: transform 0.3s ease;
    justify-content: center;
}

.bk-readmore .bk-arrow {
    margin-left: 5px;
    margin-top: -3px;
}

.bk-readmore .bk-arrow::before {
    content: '\00bb';
    font-size: 18px;
    vertical-align: middle;
}

.bk-readmore:hover,
.bk-readmore:focus {
    transform: skewX(-15deg);
}

/* --- FIX ONLY: keep rounded outer edge while flipping --- */

/* 1) Neutralize any previous radius applied to all front faces */
.bk-list li .bk-front > div{
  border-radius: 0 !important; /* keeps your other styles, just removes the swap */
}

/* 2) Give each face its own radius (no swapping) */
.bk-list li .bk-front .bk-cover{
  /* outside face (closed): round RIGHT side */
  border-radius: 0 var(--bk-radius) var(--bk-radius) 0 !important;
  overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(0.01px); /* avoids tiny seam on WebKit */
}
.bk-list li .bk-front .bk-cover-back{
  /* inside face (visible when opened): round LEFT side */
  border-radius: var(--bk-radius) 0 0 var(--bk-radius) !important;
  overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  /* it’s already rotated in your CSS; this just ensures correct rendering */
  transform: rotateY(-179.9deg) translateZ(0.01px);
}

/* 3) Make sure open/flip states never override the per-face radii */
.bk-list li .bk-book.bk-viewinside .bk-front .bk-cover,
.bk-list li .bk-book.bk-viewback  .bk-front .bk-cover{
  border-radius: 0 var(--bk-radius) var(--bk-radius) 0 !important;
}
.bk-list li .bk-book.bk-viewinside .bk-front .bk-cover-back,
.bk-list li .bk-book.bk-viewback  .bk-front .bk-cover-back{
  border-radius: var(--bk-radius) 0 0 var(--bk-radius) !important;
}


/* --- restore page depth + visible inner edge (no other changes) --- */

/* soft drop shadow so the white page pops */
.bk-list li .bk-page{
  box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.12);
  outline: 1px solid rgba(0,0,0,.06);
  border-radius: 10px; /* subtle rounding for the paper slab */
  background: #fff;    /* keep paper white but separated from bg */
}

/* thin “cover/paper edge” so you see a darker sliver on the left */
.bk-list li .bk-page::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 10px;                      /* thickness of the visible edge */
  background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,0));
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  pointer-events: none;
}


/* Display featured image as a book ------------------------ */
.image-as-a-book.custom-image {
  width: 23em; /* Increased from 18.5em */
  height: calc(23em * 1.4); /* Maintain original aspect ratio */
  margin-top: -5.5em; /* Adjusted upward to balance visual alignment */
  position: relative;
  transform: perspective(60em) rotateX(58deg) rotateZ(-34deg) skewY(-7deg);
  box-shadow:
    -1.8em 2.2em 0.4em -0.4em rgba(0, 0, 0, 0.8),
    -2em 2.4em 1.1em -0.3em rgba(0, 0, 0, 0.5),
    0.4em 2.5em 1.5em rgba(0, 0, 0, 0.3);
  border-top-right-radius: 0.4em;
}

/* Adjusted styles for the custom class */
.image-as-a-book.custom-image img {
  border-top-right-radius: 0.4em;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  filter: saturate(90%);
  display: block;
  object-fit: cover;
  object-position: center;
  left: 0;
  right: 0;
  z-index: 1; /* Ensure the image is above the rib and pages */
}

.image-as-a-book:before,
.image-as-a-book:after {
  content: '';
  position: absolute;
  top: 0;
}

.image-as-a-book:before {
  width: 105%;
  height: 105%;
  left: -5%;
  z-index: -1;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(115deg, transparent 2.8%, #3f3f3f 3%, #3f3f3f 16%, transparent 16%),
    linear-gradient(125deg, transparent 10%, #3f3f3f 10%, #3f3f3f 17%, #222 46.8%, transparent 47%),
    linear-gradient(125deg, transparent 46%, rgba(0, 0, 0, 0.5) 46.5%, rgba(0, 0, 0, 0.25) 49%, transparent 53%),
    linear-gradient(to right, #444, #666),
    linear-gradient(#444, #444),
    linear-gradient(140deg, transparent 45%, #eee 45%, #ccc 96.8%, rgba(170, 170, 170, 0) 97%);
  background-size: 100% 100%, 111% 100%, 100% 100%, 100% 0.4em, 94% 0.2em, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 95.8%, 0 100%, 0 0;
}

.image-as-a-book:after {
  width: 100%;
  height: 100%;
  left: -5%;
  z-index: -1;
  background-position: 0 0, 2.2% 100%, 3% 100%, 2.2% 0, 3% 0;
}


/* Book dimensions display mockup*/
.dbc-book2{
  --w-left:2%;
  --w-top:87%;
  --w-len:64%;
  --w-angle:24deg;

  --h-left:-9%;
  --h-top:5%;
  --h-len:138%;
  --h-angle:-66deg;

  /* pill centers */
  --w-pill-left:75%;
  --w-pill-top:86%;
  --h-pill-left:10%;
  --h-pill-top:41%;
}

/* Updated container to fit larger books */
.container-for-book {
  width: 900px; /* Increased from 700px */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 70px 50px;
  margin: 0 auto;
}

.container-for-book > img {
  width: 270px; /* Increased from 220px */
}


/* Bookmark canvas pop-up */
.bookmark-section {
  position: relative;
  background-color: #f0c040;
  padding: 20px;
    filter: drop-shadow(8px 0 14px rgba(0, 0, 0, 0.28));


  /* your original notch shape */
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    50% 85%,
    0 100%
  );

  overflow: hidden;
  z-index: 1;
  box-shadow: none;
}

/* Right-side “shadow” that hugs the bookmark edge exactly */
.bookmark-section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;            /* flush with the visible edge */
  width: 18px;         /* thickness of the shadow strip */
  height: 100%;
  pointer-events: none;
  z-index: 2;

  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.35),   /* darkest at the outer edge */
    rgba(0, 0, 0, 0)       /* fade into the panel */
  );
}

/* Off-canvas wrapper: no shadows, no clipping */
.e-off-canvas__content {
  position: relative;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: visible !important;
}

/* Countdown Container */
#custom-countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-size: 36px;
  font-weight: 350;
  color: #fff;
  background-color: transparent;
  gap: 10px;
  user-select: none;
}

/* Individual block */
#custom-countdown span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(240, 208, 80);
  padding: 4px 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 65px;
  min-width: 65px;
  border-radius: 0;
}

/* Number */
#custom-countdown .number {
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
}

/* Label inside box */
#custom-countdown .label {
  font-size: 12px;
  margin-top: 4px;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------------------------------------------------------
   Countdown (skin): digital 7-segment clock (red)
   Activate by adding class="digital-watch" to #custom-countdown
   Keeps existing countdown functionality intact.
   --------------------------------------------------------- */
#custom-countdown.digital-watch {
  --dbc-digital-red: #e11d2e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Hide legacy layout if it exists in the same container */
#custom-countdown.digital-watch > span {
  display: none !important;
}

#custom-countdown.digital-watch .dbc-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#custom-countdown.digital-watch .dbc-digital-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

#custom-countdown.digital-watch svg {
  display: block;
}

/* Digit sizing (scaled down from the original demo SVGs) */
#custom-countdown.digital-watch .dbc-digital-digit {
  width: 32px;
  height: auto;
}

#custom-countdown.digital-watch .segment {
  fill: rgba(0, 0, 0, 0.16);
  transition: fill 0.25s ease-in-out;
}

/* Colon between HH:MM and MM:SS */
#custom-countdown.digital-watch .dbc-digital-colon {
  position: relative;
  width: 8px;
  height: 56px;
  flex: 0 0 8px;
}

#custom-countdown.digital-watch .dbc-digital-colon::before,
#custom-countdown.digital-watch .dbc-digital-colon::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  background: var(--dbc-digital-red);
  border-radius: 999px;
}

#custom-countdown.digital-watch .dbc-digital-colon::before {
  top: 18px;
}

#custom-countdown.digital-watch .dbc-digital-colon::after {
  top: 34px;
}

/* Active segments per digit class */
#custom-countdown.digital-watch svg.num-1 .b,
#custom-countdown.digital-watch svg.num-1 .c,

#custom-countdown.digital-watch svg.num-2 .a,
#custom-countdown.digital-watch svg.num-2 .b,
#custom-countdown.digital-watch svg.num-2 .d,
#custom-countdown.digital-watch svg.num-2 .e,
#custom-countdown.digital-watch svg.num-2 .g,

#custom-countdown.digital-watch svg.num-3 .a,
#custom-countdown.digital-watch svg.num-3 .b,
#custom-countdown.digital-watch svg.num-3 .c,
#custom-countdown.digital-watch svg.num-3 .d,
#custom-countdown.digital-watch svg.num-3 .g,

#custom-countdown.digital-watch svg.num-4 .b,
#custom-countdown.digital-watch svg.num-4 .c,
#custom-countdown.digital-watch svg.num-4 .f,
#custom-countdown.digital-watch svg.num-4 .g,

#custom-countdown.digital-watch svg.num-5 .a,
#custom-countdown.digital-watch svg.num-5 .c,
#custom-countdown.digital-watch svg.num-5 .d,
#custom-countdown.digital-watch svg.num-5 .f,
#custom-countdown.digital-watch svg.num-5 .g,

#custom-countdown.digital-watch svg.num-6 .a,
#custom-countdown.digital-watch svg.num-6 .c,
#custom-countdown.digital-watch svg.num-6 .d,
#custom-countdown.digital-watch svg.num-6 .e,
#custom-countdown.digital-watch svg.num-6 .f,
#custom-countdown.digital-watch svg.num-6 .g,

#custom-countdown.digital-watch svg.num-7 .a,
#custom-countdown.digital-watch svg.num-7 .b,
#custom-countdown.digital-watch svg.num-7 .c,

#custom-countdown.digital-watch svg.num-8 .a,
#custom-countdown.digital-watch svg.num-8 .b,
#custom-countdown.digital-watch svg.num-8 .c,
#custom-countdown.digital-watch svg.num-8 .d,
#custom-countdown.digital-watch svg.num-8 .e,
#custom-countdown.digital-watch svg.num-8 .f,
#custom-countdown.digital-watch svg.num-8 .g,

#custom-countdown.digital-watch svg.num-9 .a,
#custom-countdown.digital-watch svg.num-9 .b,
#custom-countdown.digital-watch svg.num-9 .c,
#custom-countdown.digital-watch svg.num-9 .d,
#custom-countdown.digital-watch svg.num-9 .f,
#custom-countdown.digital-watch svg.num-9 .g,

#custom-countdown.digital-watch svg.num-0 .a,
#custom-countdown.digital-watch svg.num-0 .b,
#custom-countdown.digital-watch svg.num-0 .c,
#custom-countdown.digital-watch svg.num-0 .d,
#custom-countdown.digital-watch svg.num-0 .e,
#custom-countdown.digital-watch svg.num-0 .f {
  fill: var(--dbc-digital-red);
}

@media (max-width: 768px) {
  #custom-countdown.digital-watch {
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
  }
  #custom-countdown.digital-watch .dbc-digital-digit {
    width: 26px;
  }
  #custom-countdown.digital-watch .dbc-digital-colon {
    height: 44px;
  }
  #custom-countdown.digital-watch .dbc-digital-colon::before {
    top: 14px;
  }
  #custom-countdown.digital-watch .dbc-digital-colon::after {
    top: 26px;
  }
}
/* Footer wave effect */
.footer {
  position: relative;
  text-align: center;
  background: white; /* Changed to white */
  color: black; /* Adjust text color if needed */
}

.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px; /* Fix for safari gap */
  min-height: 100px;
  max-height: 150px;
}

/* Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* Shrinking for mobile */
@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }
}


/* Mega menu genre style */
.unique-genre-container {
    width: 100%;
    max-width: 100%;
    max-height: 400px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.unique-genre-list {
    width: 100%;
    max-width: 1200px;
    list-style: none;
    padding: 10px;
    margin: 0;
    display: grid;
    grid-template-rows: repeat(10, auto); /* You can adjust 10 if needed */
    grid-auto-flow: column; /* 👈 THIS is the key line */
    row-gap: 5px;
    column-gap: 5px;
    font-weight: 300;
    font-size: 13px;
    color: #222;
    text-align: left;
}


.unique-genre-list > li {
    position: relative;
    break-inside: avoid;
    cursor: pointer;
    display: inline-block; /* shrink to text width */
    width: fit-content; /* NEW: Only as wide as text */
    overflow: hidden;
    justify-content: center;
}

.unique-genre-list > li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    height: 2px;
    width: 100%;
    background-color: #aaa; /* NEW: softer gray color */
    transition: transform 0.3s ease;
}

.unique-genre-list > li:hover::after {
    transform: translateX(-50%) scaleX(1);
}




/* Responsive Design */
@media (max-width: 768px) {
    .unique-genre-list {
        grid-template-columns: repeat(2, min-content); /* 2 columns on tablets */
    }
}

@media (max-width: 480px) {
    .unique-genre-list {
        grid-template-columns: repeat(1, min-content); /* 1 column on mobile */
    }
}




/* Mega Menu occupation style - Enhanced */
.unique-occupation-recommendation-container {
    width: 100%;
    max-height: 550px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    background-color: #F8F8F8; /* ← updated background */
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}


.unique-occupation-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px 24px; /* smaller vertical and horizontal gaps */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Parent term redesign */
.unique-parent-term {
    font-size: 15px;
    font-weight: 700;
    color: #1f1f1f;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 4px;
    margin-bottom: 6px;
    display: inline-block;
}

/* Child terms */
.unique-child-terms {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.unique-child-terms li {
    font-weight: 400;
    font-size: 13.5px;
    cursor: pointer;
    color: #444;
    padding: 2px 0 2px 20px;
    position: relative;
    transition: all 0.25s ease-in-out;
}

.unique-child-terms li::before {
    content: "☆";
    color: #999;
    position: absolute;
    left: 0;
    font-size: 18px;
    top: 1px;
    transition: all 0.3s;
}

.unique-child-terms li:hover::before {
    content: "★";
    color: #ffd46c;
    font-size: 20px; /* ⬅️ Increase this for bigger stars */
}

.unique-child-terms li:hover {
    color: #000;
    transform: translateX(2px);
}





/* Responsive Design */
@media (max-width: 768px) {
    .unique-occupation-list {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 480px) {
    .unique-occupation-list {
        grid-template-columns: repeat(1, 1fr); /* 1 column on mobile */
    }
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar {
  width: 12px; /* Slightly thicker for a bold yet elegant look */
  height: 12px; /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: rgba(217,217,217, 0.5); /* Semi-transparent dark track */
  border-radius: 10px; /* Rounded corners for a soft feel */
  backdrop-filter: blur(3px); /* Glassmorphic blur effect */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for depth */
}

::-webkit-scrollbar-thumb {
  background: rgba(190, 190, 190, 0.7); /* Semi-transparent light gray thumb */
  border-radius: 10px; /* Rounded corners */
  border: 2px solid rgba(255, 255, 255, 0.2); /* Light border for contrast */
  box-shadow: 0 0 5px rgba(220, 219, 219, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.2); /* Reduced glow */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 180, 180, 0.8); /* Darker gray on hover */
  box-shadow: 0 0 8px rgba(180, 180, 180, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.3); /* Subtle enhanced glow on hover */
}

/* Review Form Container */
.book-review-form {
  position: relative;
  max-width: 750px;                     /* unify with trivia */
  background: #fff;                     /* white background */
  padding: 10px;                        /* match trivia */
  color: #232A35;                       /* dark text for white bg */
  font-family: 'Poppins', sans-serif;
  z-index: 1000;
  overflow: hidden;
}

.book-review-form .review-submit{display:inline-block;margin-top:16px;clear:both}


.elementor-4841 .elementor-element.elementor-element-9729b9a .e-off-canvas__content {
  background: transparent !important;
  box-shadow: none !important;
}

.elementor-4841 .elementor-element.elementor-element-9729b9a .e-off-canvas__content::before,
.elementor-4841 .elementor-element.elementor-element-9729b9a .e-off-canvas__content::after {
  background: none !important;
  box-shadow: none !important;
  display: none !important;
  content: none !important;
}


/* Label Styling */
.book-review-form label {
  font-size: 0.95rem;
  margin-bottom: 6px;
  display: block;
  color: #1d2330;
}

/* Text Inputs & Textarea */
.book-review-form input[type="text"],
.book-review-form textarea {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #f6f7fa;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  color: #232A35;
  font-size: 0.95rem;
  transition: border 0.3s ease, background 0.3s ease;
}

.book-review-form input[type="text"]:focus,
.book-review-form textarea:focus {
  border-color: #232A35;
  background: #f0f2f7;
  outline: none;
}

/* Textarea height */
.book-review-form textarea {
  height: 120px;
  resize: vertical;
}

/* Submit Button */
.book-review-form input[type="submit"],
.book-review-form button {
  background-color: #232A35;
  color: #fff;
  border: none;
  padding: 4px 11px;
  font-weight: 300;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s, transform 0.1s;
  box-shadow: none;
  margin-top: 30px;
}


.book-review-form input[type="submit"]:hover,
.book-review-form button:hover {
  background-color: #151a22;
}

/* Star Rating Container */
.book-review-form .stars-container {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

/* Hide radios */
.book-review-form .stars-container input[type="radio"] {
  display: none;
}

/* Star style */
.book-review-form .stars-container label.star {
  font-size: 36px;
  color: #bbb;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

/* HOVER: highlight current and all previous stars */
.book-review-form .stars-container label.star:hover,
.book-review-form .stars-container label.star:hover ~ label.star {
  color: #ffd46c;
}

/* CHECKED: highlight checked and all previous stars */
.book-review-form .stars-container input[type="radio"]:checked ~ label.star,
.book-review-form .stars-container input[type="radio"]:checked ~ label.star ~ label.star {
  color: #ffd46c;
  text-shadow: none;
}


/* Responsive */
@media (max-width: 600px) {
  .book-review-form {
    padding: 18px;
    max-width: 98%;
  }
  .book-review-form .stars-container label.star {
    font-size: 28px;
  }
}

/* Note user that the trivia is already done */
.notification-bar.info {
  display: flex;
  align-items: center;
  background: #e8f3fd;
  color: #245582;
  border-radius: 7px;
  padding: 11px 15px;
  margin-bottom: 15px;
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(36, 85, 130, 0.06);
  border-left: 4px solid #69aaff;
}
.notification-bar .note-icon {
  font-size: 13px;
  margin-right: 5px;
  flex-shrink: 0;
  /* If you want to use an SVG or custom icon, style it here */
}

/* Trivia Container Styling */
#book-trivia-section,
#trivia-results,
#review-form-section {
  background: #fff;              /* unified white background */
  border-radius: 12px;
  padding: 20px;
  color: #232A35;                /* dark text for white bg */
  max-width: 750px;
  font-family: 'Poppins', sans-serif;
  max-height: 100vh;    /* takes up at most 70% of viewport height */
  overflow-y: auto;    /* vertical scroll inside */
  overflow-x: hidden;  /* no horizontal scroll */
  padding-right: 10px;  /* small space so scrollbar doesn’t overlap content */
  box-sizing: border-box;
}

/* Question block */
.trivia-question {
  margin-bottom: 0px;
}

.trivia-question p {
  font-size: 15px;
  margin-bottom: 10px;
  color: #232A35;
}

/* Answer choices */
.trivia-question label {
  display: block;
  padding: 10px 14px;
  margin-bottom: 3px;
  background: #f6f7fa;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  color: #232A35;
  transition: all 0.3s;
  cursor: pointer;
}

.trivia-question label:hover,
.trivia-question input[type="radio"]:checked + label {
  background: #e7eaee;
  border-color: #c6c7cc;
  color: #222;
}

.trivia-question input[type="radio"] {
  margin-right: 10px;
}

/* Force bigger gap between checkbox and text in review form */
.book-review-form .dbc-review-recommend {
  display: inline-flex !important;
  align-items: center;
}

.book-review-form .dbc-review-recommend input[type="checkbox"] {
  margin-right: 16px !important;   /* make it obviously larger */
}

.book-review-form .dbc-review-recommend-text {
  display: inline-block;
}



/* Feedback text */
.answer-feedback {
  margin-top: 8px;
  font-size: 0.95rem;
  color: #4e6218;
}

/* Buttons: unify with Review Form */
#book-trivia-form button,
#book-trivia-form input[type="submit"] {
  background-color: #232A35;
  color: #fff;
  border: none;
  padding: 4px 11px;
  font-weight: 300;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 12px;
  transition: background-color 0.3s, transform 0.1s;
  box-shadow: none;
}
#book-trivia-form button:hover,
#book-trivia-form input[type="submit"]:hover {
  background-color: #93bb86;
}
#book-trivia-form button#skip-trivia {
  background: #7c7c7c;
  color: #fff;
}


/* Responsive: matches review form */
@media (max-width: 600px) {
  #book-trivia-section,
  #trivia-results,
  #review-form-section {
    padding: 16px;
    max-width: 98%;
  }
}



/*This is for the occupation recommendation list*/
.occupation-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

.occupation-list > li {
  background: #14171c;
  margin: 0 0 20px;
  padding: 30px;
  cursor: pointer;
  position: relative;
  font-size: 16px;
  user-select: none;
}

.occupation-list > li:hover {
  background: #f8d069;
  color: #fff;
  transition: all 0.3s ease;
}

.occupation-list li::before {
  content: "- ";
}

.occupation-list > li:before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: #999 transparent transparent transparent;
}

.occupation-list > .has-children:before {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  border-width: 6px 6px 0 6px; /* Increase the border-width */
}

.occupation-list > li.active > ul {
  display: block;
}

.occupation-list > li.active {
  color: #fff;
}

.occupation-list > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: rgba(0, 0, 0, .8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
  display: none;
  transition: all 0.3s ease;
  user-select: none;
}

.occupation-list > li.active > ul {
  opacity: 1;
  visibility: visible;
}

.occupation-list > li > ul > li {
  margin: 0;
  padding: 5px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.occupation-list > li > ul > li:last-child {
  border-bottom: none;
}

.occupation-list > li > ul > li:hover {
  background: #f8d069;
  color: #fff;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
  .occupation-list {
    grid-template-columns: repeat(1, 1fr); /* Display 2 columns on mobile */
  }
}

/* Affiliate links styling */
.affiliate-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.affiliate-dropdown-list .affiliate-dropdown-note{font-style:normal;font-size:12px;line-height:1.3;opacity:.85;padding:17px 10px 10px;border-top:1px solid rgba(0,0,0,.08)}


/* Button styling */
.affiliate-dropdown-toggle {
  background-color: #ffd46c;
  color: #000;
  border: none;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition: background 0.3s ease;
}

.affiliate-dropdown-toggle:hover {
  background-color: #93BB86;
  color: #fff;
}

/* Dropdown icon animation */
.affiliate-dropdown-toggle .dropdown-icon {
  transition: transform 0.3s ease;
}

.affiliate-dropdown-wrapper.open .dropdown-icon {
  transform: rotate(180deg); /* Rotating the icon on dropdown */
}

/* Hide the dropdown initially */
.affiliate-dropdown-list {
  display: none; /* Ensure it's hidden by default */
  position: absolute;
  top: 115%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: 999;
  min-width: 230px;
  max-width: 100%;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* List items in the dropdown */
.affiliate-dropdown-list li {
  list-style: none;
  padding: 0;
}

/* Styling each partner's link */
.affiliate-dropdown-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  background-color: #f8f8f8;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background 0.2s ease;
}

/* Hover effect for the links */
.affiliate-dropdown-list a:hover {
  background-color: #ececec;
}

/* Partner logo */
.partner-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Partner name styling */
.partner-name {
  font-size: 15px;
  font-weight: 500;
}

/* Dropdown icon size */
.dropdown-icon {
  margin-left: 8px;
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.affiliate-dropdown-wrapper.open .affiliate-dropdown-list {
  display: grid;
}


/* Scrollbar for Review Loop Grid widget */
/* Scroll only the post items inside the Loop Grid */
.scrollbar-loop-grid .elementor-loop-container {
  max-height: 1150px;          /* Adjust height as needed */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 15px;
}

/* Ensure the outer widget doesn’t interfere */
.scrollbar-loop-grid {
  overflow: visible !important;
  padding: 0 !important;
}

/* Optional: spacing for pagination outside */
.scrollbar-loop-grid + .elementor-pagination {
  margin-top: 20px;
}

/* Pagination container */
.custom-loop-pagination .elementor-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

/* Numbered pages */
.custom-loop-pagination .elementor-pagination .page-numbers {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  background-color: #fafafa;
  color: #444;
  border-radius: 50%;
  text-decoration: none;
  font-size: 14px;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 20px;
  transition: all 0.2s ease;
}

/* Hover effect for numbers */
.custom-loop-pagination .elementor-pagination .page-numbers:hover {
  background-color: #e0e0e0;
  color: #000;
}

/* Current (active) page */
.custom-loop-pagination .elementor-pagination .page-numbers.current {
  background-color: #ffd46c;
  color: #444;
  font-weight: bold;
  border-color: #ffc107;
}

/* Arrows (prev/next) base style */
.custom-loop-pagination .elementor-pagination .prev,
.custom-loop-pagination .elementor-pagination .next {
  background: none;
  border: none;
  color: #333;
  font-size: 16px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 0;
  line-height: 1;
  position: relative;
  text-indent: -9999px;
  overflow: hidden;
}

/* Remove hover background for arrows */
.custom-loop-pagination .elementor-pagination .prev:hover,
.custom-loop-pagination .elementor-pagination .next:hover {
  background: none;
  color: #000;
  border: none;
}

/* Replace text with arrows */
.custom-loop-pagination .elementor-pagination .prev::before {
  content: "<";
}

.custom-loop-pagination .elementor-pagination .next::before {
  content: ">";
}

/* Center arrows vertically and horizontally */
.custom-loop-pagination .elementor-pagination .prev::before,
.custom-loop-pagination .elementor-pagination .next::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 19px;
  text-indent: 0;
  text-align: center;
  line-height: 1;
    font-family: 'Consolas', sans-serif;
    font-weight: 600;

}

/* Optional spacing if needed */
.custom-loop-pagination .elementor-pagination .prev {
  margin-right: 4px;
}

.custom-loop-pagination .elementor-pagination .next {
  margin-left: 4px;
}




/* Vote button styling */
.vote-button {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 5px;
  margin-top: 4px;
  font-weight: 400;
}

.vote-button i {
  margin-right: 4px;
  vertical-align: middle;
}

.vote-button[name="like_button"]:hover {
  background-color: #356C28;
  color: white;
}

.vote-button[name="dislike_button"]:hover {
  background-color: #961C1C;
  color: white;
}

.vote-button:hover {
  opacity: 0.8;
}

.review-vote-button {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 5px;
  margin-top: 4px;
  font-weight: 400;
}

.review-vote-button i {
  margin-right: 4px;
  vertical-align: middle;
}

.review-vote-button[name="review_like_button"]:hover {
  background-color: #356C28;
  color: white;
}

.review-vote-button[name="review_dislike_button"]:hover {
  background-color: #961C1C;
  color: white;
}

.review-vote-button:hover {
  opacity: 0.8;
}


/* Tooltip icon — consistent everywhere */
.tooltip-clickable{
  /* Hard reset to avoid page-specific inherited styling */
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;

  border: 2px solid #000 !important;     /* use 2px (pixel-perfect, no subpixel weirdness) */
  background: transparent !important;

  position: relative !important;
  cursor: help !important;
  box-sizing: border-box !important;

  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;

  vertical-align: middle !important;
}

/* Hide icony children if any sneak in */
.tooltip-clickable svg,
.tooltip-clickable i,
.tooltip-clickable .e-icon,
.tooltip-clickable .elementor-icon,
.tooltip-clickable img{
  display: none !important;
}

/* The question mark — use inset + margin:auto to avoid 50% subpixel rounding differences per page */
.tooltip-clickable::before{
  content: "?" !important;
  font-family: "Arial" !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  color: #000 !important;

  position: absolute !important;
  inset: 0 !important;
  width: 12px !important;
  height: 12px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  pointer-events: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

/* Bigger hit area (mobile friendly) */
.tooltip-clickable::after{
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;               /* bigger than -6 for touch */
  border-radius: 999px !important;
}



.floating-tooltip{
  position: fixed; /* important: prevents page overflow + easier viewport math */
  background-color: rgba(20, 23, 28, 0.95);
  color: #fff;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  z-index: 999999;
  max-width: 280px;
  pointer-events: none;
  white-space: normal;
  box-sizing: border-box;
}

/* Base arrow */
.floating-tooltip::after{
  content:"";
  position:absolute;
  width:0;height:0;
  border-style: solid;
}

/* Bottom tooltip → arrow on top */
.floating-tooltip[data-place="bottom"]::after{
  top: -12px;
  border-width: 6px;
  border-color: transparent transparent rgba(20, 23, 28, 0.95) transparent;
}

/* Top tooltip → arrow on bottom */
.floating-tooltip[data-place="top"]::after{
  bottom: -12px;
  border-width: 6px;
  border-color: rgba(20, 23, 28, 0.95) transparent transparent transparent;
}

/* Right tooltip → arrow on left */
.floating-tooltip[data-place="right"]::after{
  left: -12px;
  border-width: 6px;
  border-color: transparent rgba(20, 23, 28, 0.95) transparent transparent;
}

/* Left tooltip → arrow on right */
.floating-tooltip[data-place="left"]::after{
  right: -12px;
  border-width: 6px;
  border-color: transparent transparent transparent rgba(20, 23, 28, 0.95);
}

/* JS-controlled arrow alignment */
.floating-tooltip[data-place="bottom"]::after,
.floating-tooltip[data-place="top"]::after{
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
}

.floating-tooltip[data-place="right"]::after,
.floating-tooltip[data-place="left"]::after{
  top: var(--arrow-y, 50%);
  transform: translateY(-50%);
}





/* Book ranking info style */
div.book-ranking-info {
    width: 100%;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #000; /* optional, for better readability */
}

/* Keep your Elementor override for that specific element */
.elementor-4996 .elementor-element.elementor-element-455e3be {
    width: 100% !important; /* Override the restricted width */
    max-width: 100% !important; /* Ensure it takes up the full width */
    flex-grow: 1 !important; /* Allow the widget to expand */
}


/* Book review amount of comments display icon*/
.dbc-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  font-family: system-ui;
  color: #000;
}

/* Apply fill and stroke to the icon itself */
.dbc-comment-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: white;           /* icon fill */
  stroke: black;         /* outline border */
}

/* Verified reviewer tooltip */
.tooltip-verified {
  position: relative;
  cursor: help;
}

.tooltip-verified::after {
  content: "Verified Reviewer – Passed Trivia Quiz";
  position: absolute;
  bottom: 140%; 
  left: 50%;
  transform: translateX(-50%);
  background-color: #111;
  color: white;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px; 
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.tooltip-verified:hover::after {
  opacity: 1;
}

/* Daily book choice author badge design */
.dbc-author-badge {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}

/* Bookshelf design */
.book-shelf-section {
  background: #fff;
  box-shadow: none;
  margin-bottom: 30px;
  max-width: 400px;
  font-family: Poppins;
}

.book-shelf-section select,
.book-shelf-section input[type="text"] {
  width: 100%;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fdfdfd;
  font-size: 13px;
  margin-bottom: 14px;
  box-shadow: none;
  height: 36px;
}

.book-shelf-section .shelf-public-checkbox {
  margin-bottom: 16px;
  align-items: center;
  font-size: 13px;
  gap: 6px;
}

.book-shelf-section .shelf-public-checkbox input[type="checkbox"] {
  transform: translateY(2px);
}

.book-shelf-section .shelf-public-checkbox label {
  padding-top: 1px;
  padding-bottom: 10px;
  padding-left: 5px;
}

.book-shelf-section input[type="submit"] {
  background-color: #232A35;
  color: #fff;
  border: none;
  padding: 4px 11px;
  font-weight: 300;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.book-shelf-section input[type="submit"]:hover {
  background-color: #383E48;
  color: #fff;
}

.book-shelf-section label {
  font-size: 13px; /* or whatever size you prefer */
  font-weight: 300; /* optional: makes it slightly bolder */
  display: inline-block;
  margin-bottom: 4px;
  font-family: Poppins;
}

/* =========================================================
   DBC — Review Navigation (Previous / Random / Next)
   Shortcode: [review_navigation]
   Legacy button styling (match .book-shelf-section input[type="submit"])
   ========================================================= */
.dbc-review-nav{
  --dbc-review-dice: 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  gap:10px;
  margin: 10px 0 0;
  padding: 0;
}

.dbc-review-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:Poppins, sans-serif;
  font-size:14px;
  font-weight:300;
  color:#fff !important;
  text-decoration:none !important;
  background-color:#232A35;
  border:none;
  padding:4px 11px;
  border-radius:3px;
  cursor:pointer;
  transition: background-color .3s ease, transform .15s ease;
  white-space:nowrap;
}

.dbc-review-nav a:hover{
  background-color:#383E48;
  color:#fff !important;
}

.dbc-review-nav a:active{
  transform: translateY(1px);
}

.dbc-review-nav a.dbc-dice{
  width: var(--dbc-review-dice);
  height: var(--dbc-review-dice);
  padding:0;
  border-radius:999px;
  line-height:1;
  font-size:12px;
}

@media (max-width: 480px){
  .dbc-review-nav a{
    font-size:13px;
    padding:4px 9px;
  }
}

.acf-message {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
}

.acf-message.success {
  background-color: #e7f9e8;
  color: #317b3b;
}

.acf-message.error {
  background-color: #fdeaea;
  color: #b52929;
}

/* Share button styling */
.share-icon-dropdown-wrapper {
  position: relative;
  z-index: 10000;
}

.share-icon-dropdown-list {
  position: absolute;
  top: 40px;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  display: none;
  padding: 8px 12px;
  list-style: none;
  z-index: 10001;
}

.share-icon-dropdown-wrapper.open .share-icon-dropdown-list {
  display: block;
}

.share-icon-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.share-icon-trigger {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

/* Dropdown styling */
.share-icon-dropdown-list {
  display: none;
  position: absolute;
  top: 115%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: 999;
  min-width: 230px;
  max-width: 100%;
  grid-template-columns: 1fr;
  gap: 10px;
}

.share-icon-dropdown-wrapper.open .share-icon-dropdown-list {
  display: grid;
  
}

.share-icon-dropdown-list li {
  list-style: none;
  padding: 0;
}

.share-icon-dropdown-list a {
  display: flex;
  align-items: center;
  gap: 10px;

  background-color: #f8f8f8;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background 0.2s ease;
}

.share-icon-dropdown-list a:hover {
  background-color: #ececec;
}

.partner-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.partner-name {
  font-size: 15px;
  font-weight: 500;
}

/* Book awards layout */
.book-awards-list {
    margin: 5px 0 0 20px;
    padding-left: 20px;
    list-style-type: disc;
}

.book-awards-list li {
    margin-bottom: 4px;
}

/* Book tag voting form */
#tag-buttons .tag-button {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 1;
  padding: 1px 4px;
  border: 1px solid #ccc;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #f8f8f8;
  color: #333;
  user-select: none;
  display: inline-block;
}
#tag-buttons .tag-button:hover { background-color: #e5e5e5; }
#tag-buttons .tag-button.selected { background-color: #222; color: white; border-color: #222; }

/* Book Tags Styling */
.dbc-tag-cloud ul {
  list-style: none;
  padding-top: 5px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px; /* horizontal and vertical spacing */
}
.dbc-tag-cloud li { display: inline-block; margin-right: 7px; }

/* Base tag style */
.dbc-tag {
  position: relative;
  display: inline-block;
  background: #394250;
  padding: 0 12px 0 18px;
  height: 21px;
  line-height: 21px;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  margin-right: 6px;
  margin-bottom: 1px;
  z-index: 1;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Triangle (seamless + exact height) */
.dbc-tag::before {
  content: '';
  position: absolute;
  top: 0;
  /* tiny tuck under the pill to hide the hairline */
  left: -8.5px;                 /* was -8px */
  width: 0;
  height: 0;
  /* match pill height precisely: 10.5 + 10.5 = 21 */
  border-top: 10.5px solid transparent;   /* was 11px */
  border-bottom: 10.5px solid transparent;/* was 11px */
  border-right: 9.5px solid #394250;      /* was 9px */
  z-index: 0;                    /* sit under pill edge so overlap is hidden */
  transition: border-right-color 0.2s ease;
}

/* Hover Effect (unchanged) */
.dbc-tag:hover {
  background: #ff91a9;
  color: #fff;
}
.dbc-tag:hover::before { border-right-color: #ff91a9; }

.dbc-tag:focus,
.dbc-tag:active,
.dbc-tag:visited {
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Circle hole */
.dbc-tag::after {
  content: '';
  width: 4px;
  height: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px #999;
  border-radius: 50%;
  position: absolute;
  left: 3px;
  top: 50%;                     /* keep centered vertically */
  transform: translateY(-50%);  /* replaces fixed 8px offset */
  z-index: 2;
}

/* ====== BOOK TOOLTIP STYLES (All Books Template) ====== */

.book-tooltip-card {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}

/* Default: Tooltip appears on the right */
.book-tooltip-info {
  position: absolute !important;
  top: 50% !important;
  left: 100% !important;
  transform: translateY(-50%) translateX(20px) !important;
  width: 420px !important;
  max-width: 90vw !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  min-width: 320px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Tooltip appears on the left if space is tight */
.book-tooltip-info.left {
  left: unset !important;
  right: 100% !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-50%) translateX(-20px) !important;
}


/* Show tooltip on hover */
.book-tooltip-card:hover .book-tooltip-info {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Tooltip inner container */
.book-tooltip-inner {
  background-color: rgba(20, 23, 28, 0.9); /* 0.8 opacity applied */
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  position: relative;
  font-family: inherit;
  line-height: 1.5;
  width: 420px !important;
  max-width: 100%;
  backdrop-filter: blur(4px);
}


/* Arrow default (pointing left-to-right) */
.tooltip-arrow {
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #14171c;
}

/* Flip arrow when tooltip appears on left */
.book-tooltip-info.left .tooltip-arrow {
  left: auto;
  right: -8px;
  border-right: none;
  border-left: 8px solid #14171c;
}

/* Typography inside tooltip */
.tooltip-title {
  font-size: inherit;
  font-weight: 400;
  margin-bottom: 6px;
}

.book-tooltip-info .book-tooltip-inner h2.tooltip-title {
  color: #fff !important;
}


.book-tooltip-inner .author {
  font-style: italic;
  color: #a7a5a5;
  font-weight: 400;
  margin-bottom: 4px;
}

.book-tooltip-inner .book-tooltip-genre {
  font-size: 0.875em;
  color: #888;
  font-weight: 400;
  margin-top: 6px;
  margin-bottom: 6px;
  font-family: inherit;
}

.book-tooltip-inner .rating {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 8px;
}

.book-tooltip-inner .short-desc {
  font-weight: 400;
  color: #fff;
  margin-bottom: 6px;
}

.book-tooltip-inner .desc {
  color: #333;
  font-size: 0.85em;
}

.book-tooltip-inner .compact-rating {
  color: #fff !important;
}






.responsive-chart-wrapper {
  position: relative;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 2 / 1; /* or use padding-bottom trick */
  margin: 20px 0;
}

#ratingBreakdownChart {
  width: 100%;
  height: 100%;
  display: block;
}

/* User XP Bar styling */
.xp-bar-container {
    position: relative;
    height: 28px;
    background-color: #e0e0e0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7dd87f 0%, #68d391 50%, #48bb78 100%);
    background-size: 200% 100%;
    animation: xp-gradient-shift 3s ease-in-out infinite;
    width: 0%;
    transition: width 0.6s ease-in-out;
    border-radius: 14px 0 0 14px;
    box-shadow: 0 2px 8px rgba(125, 216, 127, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@keyframes xp-gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.xp-bar-label-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 13px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none; /* prevent click interference */
}


/* XP Log Styling */
.xp-log ul {
    list-style: none;
    padding-left: 0;
}

.xp-log li {
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #ffffff;
    border-left: 4px solid #1976d2;
    font-size: 14px;
}

/* XP Log Scrollable Container */
.xp-log-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  margin-top: 20px;
  border-radius: 8px;
}

/* Collapsible panel base (unchanged) */
#filter-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none; /* re-enabled when open */
  position: relative;
}
#filter-panel.is-open { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  #filter-panel { transition: none !important; }
}

/* Remove the old pseudo spacer if any */
#filter-panel::after { content: none !important; }

/* Real DOM spacer at the very end inside #filter-panel:
   <div class="filter-reserve" aria-hidden="true"></div>
   It reserves headroom for the first-time "Remove filters" button
   BUT is visually cancelled by a negative bottom margin. */
#filter-panel { --fp-reserve: 56px; }                /* desktop default */
#filter-panel .filter-reserve {
  display: block;
  height: var(--fp-reserve);                         /* counted in scrollHeight */
  margin-bottom: calc(-1 * var(--fp-reserve));       /* cancels visual space */
  pointer-events: none;
  flex-shrink: 0;
}

/* Mobile tweak */
@media (max-width: 480px) {
  #filter-panel { --fp-reserve: 40px; }
}

/* Celebrity search bar custom overlay*/
/* Only affect the Search widget that has the dbc-compact-results class */
.dbc-compact-results .e-search-results > .e-search-results-list{
  max-height: 40vh;
  overflow-y: auto;   /* native scrollbar appears only when needed */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}






/* DBC Socials — icons only */
.dbc-user-socials{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Make the icon itself the hit target */
.dbc-user-socials .dbc-social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;           /* no padding/border/background */
  background:none;
  border:0;
  line-height:0;
  text-decoration:none;
  outline:0;
}

/* Slightly enlarge on hover/focus for feedback (can remove if you want zero effects) */
.dbc-user-socials .dbc-social-btn:hover,
.dbc-user-socials .dbc-social-btn:focus-visible{
  transform:scale(1.06);
}

/* Ensure crisp sizing; the <img> width/height is set inline from PHP */
.dbc-user-socials .dbc-social-btn img{
  display:block;
  object-fit:contain;
}





/* ===========================
   WP 2FA FRONT-END MODAL SKIN
   Make it look like DBC modals
   =========================== */

/* Main modal box – same vibe as .dbc-modal__dialog */
.modal__content.wp2fa-form-styles {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-width: min(720px, 95vw);
    max-height: 85vh;
    overflow-y: auto;
    padding: 22px 24px 20px;
    font-family: inherit;
}

/* Headings and text inside wizard */
.wp2fa-form-styles h2,
.wp2fa-form-styles h3 {
    margin: 0 0 8px;
    font-size: 20px;     /* match dbc-modal header */
    font-weight: 600;
}

.wp2fa-form-styles p {
    margin: 0 0 10px;
    font-size: 0.95rem;
}

/* Generic step spacing */
.wp2fa-form-styles .wizard-step {
    margin-top: 8px;
}

.wp2fa-form-styles .step-setting-wrapper {
    margin-top: 8px;
}

/* Cards (“Reconfigure”, “Configure one-time code”, etc.) */
.wp2fa-form-styles .option-pill {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 12px 30px rgba(15,23,42,0.06);
}

/* Compact the radio groups a bit */
.wp2fa-form-styles fieldset.radio-cells {
    border: 0;
    padding: 0;
    margin: 0 0 10px;
}

/* Buttons – use the same style as DBC dark buttons */
.wp2fa-form-styles .button.button-primary,
.wp2fa-form-styles .wp-2fa-button-primary,
.wp2fa-form-styles .modal__btn.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 4px;
    background: #111827;
    border: 1px solid #111827;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    margin-right: 10px;    /* horizontal space between buttons */
    margin-bottom: 10px;   /* vertical space */
}

.wp2fa-form-styles .button.button-primary:hover,
.wp2fa-form-styles .wp-2fa-button-primary:hover,
.wp2fa-form-styles .modal__btn.button-primary:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

/* Secondary buttons (Cancel, “I’ll generate them later”, etc.) */
.wp2fa-form-styles .button.button-secondary,
.wp2fa-form-styles .wp-2fa-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #111827;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
}

.wp2fa-form-styles .button.button-secondary:hover,
.wp2fa-form-styles .wp-2fa-button-secondary:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Email / TOTP verify code inputs */
.wp2fa-form-styles input[type="tel"],
.wp2fa-form-styles input[type="text"],
.wp2fa-form-styles textarea {
    font-family: inherit;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
}

/* App key + COPY inside wizard: line up nicely and make Copy a button */
.wp2fa-form-styles .app-key-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.wp2fa-form-styles .app-key {
    max-width: 280px;
}

.wp2fa-form-styles .click-to-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.wp2fa-form-styles .click-to-copy:hover {
    background: #e5e7eb;
}

/* “Send me another code” buttons row */
.wp2fa-form-styles .wp2fa-setup-actions {
    margin-top: 14px;
}

/* Backup codes area */
.wp2fa-form-styles .backup-key-wrapper textarea.app-key {
    width: 100%;
    max-width: 100%;
}

/* Overlay – if WP 2FA uses Micromodal, this makes it match DBC overlay */
.modal__overlay {
    background: rgba(0,0,0,0.45);
}

/* Ensure the modal sits above normal content but below your own dbc-modal z if needed */
.modal[aria-hidden="false"] {
    z-index: 9999;
}


/* MENU CSS */
/* Global nuke for Elementor hamburger background */
.elementor-menu-toggle,
.elementor-menu-toggle:hover,
.elementor-menu-toggle:focus,
.elementor-menu-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



.dbc-search-wrapper{
    display:inline-flex;
    align-items:center;
    gap:8px;
    position:relative;
}

.dbc-header-search-field{
    max-width:260px;
    width:0;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    transition:
        width 220ms ease,
        opacity 200ms ease;
}

.dbc-search-wrapper.is-open .dbc-header-search-field{
    width:260px;
    opacity:1;
    pointer-events:auto;
}



/* Optional: global tuning for rating display */
.dbc-rating-wrap {
    /* e.g. adjust gap or vertical alignment if needed */
    gap: 4px;
}

.dbc-rating-wrap .dbc-rating-number {
    /* if you want smaller or lighter number */
    font-size: 15px;
    color: #222;
}

/* DBC – Homepage Celebrity Search (FIXED layout: input expands, button stays same) */
.dbc-celeb-search{
  display:grid !important;
  grid-template-columns: 1fr auto !important; /* ✅ input gets all leftover space */
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
}

/* Input */
.dbc-celeb-search input#dbcCelebQuery{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 13.5px !important;

  height: 28px !important;
  padding: 0 12px !important;
  line-height: 30px !important;

  border: 1px solid #d7dbe0 !important;
  border-radius: 3px !important;
  background: #fff !important;

  box-shadow: none !important;
  outline: none !important;

  width: 100% !important;     /* ✅ fill the 1fr column */
  min-width: 0 !important;    /* ✅ allow shrinking nicely */
}

/* Button */
.dbc-celeb-search button#dbcCelebGo{
  width: auto !important;
  min-width: 0 !important;    /* ✅ kill theme min-width */
  max-width: 100% !important;
  white-space: nowrap !important;
  display:inline-flex !important;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-left: 11px;
  padding-right: 11px;
  align-items:center !important;
  justify-content:center !important;
}

/* Focus */
.dbc-celeb-search input#dbcCelebQuery:focus{
  border-color: #c9ced6 !important;
}

/* Placeholder */
.dbc-celeb-search input#dbcCelebQuery::placeholder{
  color:#9aa3ad !important;
  opacity:1 !important;
}

/* Small screens: slightly tighter gap + button padding */
@media (max-width: 520px){
  .dbc-celeb-search{ gap:8px !important; }
  .dbc-celeb-search button#dbcCelebGo{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ============================================
   EXTRACTED CSS FROM FUNCTIONS.PHP
   ============================================ */

/* ===== Review Vote Buttons ===== */
.review-vote-button{transition:background-color .15s,border-color .15s,transform .06s}
.review-vote-button.is-active[name="review_like_button"]{
  background:#22c55e !important;border-color:#22c55e !important;color:#fff !important;
}
.review-vote-button.is-active[name="review_dislike_button"]{
  background:#ef4444 !important;border-color:#ef4444 !important;color:#fff !important;
}

/* ===== Review Navigation ===== */
.dbc-rnav2{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%}

.dbc-rnav2__btn{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;background:#232A35;color:#fff;border:0;border-radius:3px;
  padding:4px 11px;font-weight:300;font-size:14px;line-height:1;box-shadow:none;cursor:pointer;
}
.dbc-rnav2__btn:hover,.dbc-rnav2__btn:focus{background:#383E48;color:#fff}

.dbc-rnav2__rand{justify-self:center;text-decoration:none;color:inherit}
.dbc-rnav2__dice{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;line-height:1;background:transparent;
}
.dbc-rnav2__die{font-size:18px;line-height:1}

.dbc-rnav2 .dbc-tip{position:relative}
.dbc-rnav2 .dbc-tip[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:#111;color:#fff;font-size:12px;line-height:1;padding:6px 8px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease
}
.dbc-rnav2 .dbc-tip[data-tip]::before{
  content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#111;opacity:0;transition:opacity .12s ease
}
.dbc-rnav2 .dbc-tip:hover::after,.dbc-rnav2 .dbc-tip:hover::before{opacity:1}

/* ===== Genre Chart ===== */
.dbc-genre-chart-wrap{
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 300px;
}
.dbc-genre-chart-wrap canvas{
    width: 100% !important;
    height: 100% !important;
    display: block;
}

@media (max-width: 600px){
    .dbc-genre-chart-wrap{
        height: 240px;
    }
}

/* ===== Bar Chart Race (Top 20 reviews per period) ===== */
.dbc-reviews-race-wrap {
    font-family: Poppins, sans-serif;
    max-width: 960px;
    width: 100%;
    margin: 1.5rem 0;
}
.dbc-reviews-race-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.dbc-reviews-race-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}
.dbc-reviews-race-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dbc-reviews-race-period-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #555;
}
.dbc-reviews-race-period-label select {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
}
.dbc-reviews-race-play {
    padding: 6px 14px;
    font-size: 13px;
    font-family: inherit;
    background: #14171c;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.dbc-reviews-race-play:hover {
    background: #2a2e36;
}
.dbc-reviews-race-period-label-display {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    min-height: 1.5em;
}
.dbc-reviews-race-chart {
    width: 100%;
    overflow: hidden;
}
.dbc-reviews-race-chart svg {
    display: block;
    overflow: visible;
}
.dbc-reviews-race-chart .dbc-race-label {
    font-size: 14px;
    fill: #333;
}
.dbc-reviews-race-chart .dbc-race-value {
    pointer-events: none;
}
.dbc-reviews-race-chart .dbc-race-bar-row:hover .dbc-race-bar {
    opacity: 0.9;
}
.dbc-reviews-race-chart .dbc-race-bar {
    transition: opacity 0.15s ease;
}

.dbc-reviews-race-empty {
    color: #666;
    font-style: italic;
}

/* ===== Reviewed Book Cover ===== */
.dbc-book-cover-card{
  --dbc-cover-w:195px;
  --dbc-r:15px;
  width:var(--dbc-cover-w);
  height:100%;
  display:inline-block;
  position:relative;
  overflow:hidden;
  border-radius:0 var(--dbc-r) var(--dbc-r) 0;
  box-shadow:0 0 5px 0 rgba(0,0,0,.5);
  background:#101016;
}
.dbc-book-cover-card .dbc-book-cover-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0 var(--dbc-r) var(--dbc-r) 0;
}
.dbc-book-cover-card, .dbc-book-cover-card *{ pointer-events:none; }

/* ===== Book Dimensions ===== */
.dbc-dimensions { margin: 0; }
.dbc-dimensions-title{
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: normal;
  color: #000;
  display: block;
  margin: 0 0 6px 0;
}
.dbc-dimensions-list{
  margin: 5px 0 0 20px;
  padding-left: 20px;
  list-style-type: disc;
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: normal;
  color: #000;
}
.dbc-dimensions-list li{
  margin-bottom: 4px;
}
.dbc-dimensions-label{ font-weight: 300; }

/* ===== Book of the Day Bookmark/Shelf Popup ===== */
.dbc-bod-shelf-item-btn{
    display:block;
    width:100%;
    margin:0;
    padding:8px 14px;
    border:none;
    background:transparent;
    font-size:13px;
    line-height:1.4;
    cursor:pointer;
    white-space:nowrap;
    text-align:left !important;
    color:#333;
    border-radius:0;
}
.dbc-bod-shelf-item-btn:hover{
    background:#f4f4f4;
    color:#111;
}
@media (max-width: 600px){
    .dbc-bod-shelf-popup{
        left:10px;
        top:46px;
        max-width:85vw;
    }
}

/* ===== Elementor Menu Avatar ===== */
#dbcUserMenu.e-n-menu-title .e-n-menu-icon{ display:none !important; }
#dbcUserMenu.e-n-menu-title .e-n-menu-title-container{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:32px !important;
}
#dbcUserMenu .dbc-menu-avatar{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  display:inline-block !important;
  flex:0 0 34px !important;
}
#dbcUserMenu .dbc-menu-avatar{
  cursor:pointer !important;
}
#dbcUserMenu.e-n-menu-title .e-n-menu-title-container{
  cursor:pointer !important;
}

/* ===== Trending Shelves ===== */
.dbc-ts-wrap{ width:100%; }
.dbc-ts-list{ display:flex; flex-direction:column; gap:10px; }
.dbc-ts-row{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.12);
  display:flex;
  align-items:center;
  gap:12px;
}
.dbc-ts-rank{
  width:18px;
  text-align:right;
  font-size:12px;
  color:#9ca3af;
  flex:0 0 auto;
}
.dbc-ts-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.dbc-ts-title{
  font-size:14px;
  font-weight:700;
  color:#111827;
  margin:0;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dbc-ts-owner{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#6b7280;
  line-height:1.1;
}
.dbc-ts-owner a{
  color:#6b7280;
  text-decoration:none;
  font-weight:600;
}
.dbc-ts-owner a:hover{ text-decoration:underline; }
.dbc-ts-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.dbc-ts-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 8px;
  height:22px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  font-size:10.5px;
  color:#4b5563;
  white-space:nowrap;
}
.dbc-ts-chip .lbl{
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:9px;
  color:#9ca3af;
}
.dbc-ts-chip .val{
  font-weight:700;
  color:#111827;
}
.dbc-ts-books-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:8px;
  background:#f5f5f5;
  border:1px solid #ddd;
  color:#111 !important;
  cursor:pointer;
  font-size:12.5px;
  line-height:1;
  box-shadow:none !important;
  transition:none !important;
  text-decoration:none !important;
}
.dbc-ts-books-btn:hover,
.dbc-ts-books-btn:focus,
.dbc-ts-books-btn:active{
  background:#f5f5f5 !important;
  border-color:#ddd !important;
  color:#111 !important;
  outline:none !important;
  box-shadow:none !important;
  filter:none !important;
  text-decoration:none !important;
}
.dbc-ts-profile-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  background:#111827;
  color:#fff !important;
  font-size:12.5px;
  text-decoration:none !important;
  white-space:nowrap;
}
.dbc-ts-profile-btn:hover{ filter:brightness(0.95); }
.dbc-ts-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.38);
  display:none;
  z-index:99998;
}
.dbc-ts-modal{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 28px));
  max-height: min(70vh, 620px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  display:none;
  z-index:99999;
  overflow:hidden;
}
.dbc-ts-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid #f3f4f6;
}
.dbc-ts-modal-title{
  font-size:14px;
  font-weight:800;
  color:#111827;
  margin:0;
  line-height:1.2;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dbc-ts-modal-close{
  width:30px; height:30px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111827;
}
.dbc-ts-modal-body{
  padding:10px 14px 12px;
  overflow:auto;
  max-height: calc(min(70vh, 620px) - 54px);
}
.dbc-ts-book-list{ list-style:none; padding:0; margin:0; }
.dbc-ts-book-item{ padding:10px 0; border-bottom:1px solid #f9fafb; }
.dbc-ts-book-item:last-child{ border-bottom:none; }
.dbc-ts-book-title{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#111827;
  text-decoration:none;
  line-height:1.25;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.dbc-ts-book-title:hover{ text-decoration:underline; }
.dbc-ts-book-authors{ margin-top:3px; font-size:12px; color:#6b7280; }
@media (max-width: 640px){
  .dbc-ts-row{ padding:10px; gap:10px; }
  .dbc-ts-chip{ display:none; }
}

/* ===== Book of the Day Bookmark ===== */
.dbc-bod-bookmark-wrap{
    position:relative;
    display:inline-block;
    font-family:inherit;
}
.dbc-bod-cover{
    position:relative;
    overflow:visible;
    border-radius:0 16px 16px 0;
    width:140px;
    background:#f3f3f3;
}
.dbc-bod-cover img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:0 16px 16px 0;
}
@media (min-width:480px){
    .dbc-bod-cover{ width:130px; }
}
@media (min-width:768px){
    .dbc-bod-cover{ width:160px; }
}
.dbc-bod-bookmark-btn{
    position:absolute;
    top:-1px;
    left:10px;
    width:32px;
    height:38px;
    background: transparent;
    border:none;
    border-radius:0 !important;
    color:#fff;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
    clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%);
    -webkit-clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%);
    transition: filter 140ms ease;
    overflow:visible;
    transform: translateZ(0);
    will-change: transform;
}
.dbc-bod-bookmark-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(240, 208, 80, 0.72);
    clip-path: inherit;
    -webkit-clip-path: inherit;
    z-index:0;
}
.dbc-bod-bookmark-btn::after{
    content:none !important;
}
.dbc-bod-bookmark-btn:hover{
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
}
.dbc-bod-bookmark-btn:hover::before{
    background: rgba(252, 225, 159, 0.88);
}
.dbc-bod-bookmark-btn span{
    position:relative;
    z-index:1;
    opacity:1 !important;
    transform: translateY(-2px);
}
.dbc-bod-shelf-popup{
    position:absolute;
    top:46px;
    left:10px;
    min-width: 240px;
    max-width: 320px;
    background:#ffffff;
    color:#333;
    border-radius:12px !important;
    border:1px solid #ececec;
    box-shadow:0 12px 28px rgba(0,0,0,0.18);
    padding:0;
    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
    transition:opacity 160ms ease, transform 160ms ease;
    z-index:99;
    overflow:visible;
}
.dbc-bod-bookmark-wrap.is-open .dbc-bod-shelf-popup{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
.dbc-bod-shelf-title{
    padding:10px 14px;
    font-size:14px;
    font-weight:600;
    color:#222;
    background:#fafafa;
    border-bottom:1px solid #eee;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    overflow:hidden;
}
.dbc-bod-shelf-list{
    list-style:none;
    margin:0;
    padding:0;
    max-height:200px;
    overflow-y:auto;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
}
.dbc-bod-shelf-list li{
    margin:0;
    padding:0;
}
.dbc-bod-shelf-item-btn{
    display:block;
    width:100%;
    margin:0;
    padding:8px 14px;
    border:none;
    background:transparent;
    font-size:13px;
    line-height:1.4;
    cursor:pointer;
    white-space:nowrap;
    text-align:left !important;
    color:#333;
    border-radius:0;
}
.dbc-bod-shelf-item-btn:hover{
    background:#f4f4f4;
    color:#111;
}
@media (max-width: 600px){
    .dbc-bod-shelf-popup{
        left:10px;
        top:46px;
        max-width:85vw;
    }
}

/* ===== Author Breadcrumbs ===== */
.dbc-bc{display:flex;flex-wrap:wrap;align-items:center;gap:3px;font-size:13px;line-height:-0.9}
.dbc-bc__sep{opacity:.5;margin:0 2px}
.dbc-bc__link{text-decoration:none;color:#111;padding:0 0 2px 0;transition:color .15s ease}
.dbc-bc__home .dashicons{position:relative;top:-2px;margin-right:.2em}
.dbc-bc__current{font-weight:500;color:#111;position:relative;padding-bottom:3px}
.dbc-bc__current:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#111;opacity:.85;border-radius:2px}
@media (max-width:600px){.dbc-bc{gap:5px;font-size:12px}}

/* ===== Tooltip (global for all breadcrumb home icons) ===== */
.dbc-tooltip{position:relative;display:inline-flex;align-items:center}
.dbc-tooltip::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #1f2227;
  color: #fff;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,.3);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: none;
  z-index: 99999;
}
.dbc-tooltip::before{
  content: "";
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #1f2227 transparent transparent transparent;
  opacity: 0;
  transition: none;
  z-index: 99998;
}
.dbc-tooltip:hover::after,
.dbc-tooltip:focus::after,
.dbc-tooltip:hover::before,
.dbc-tooltip:focus::before{opacity:1}

/* ===== Author Genre Pie Chart ===== */
.dbc-chart-card.dbc-genre-pie-only{
  margin:0;
  padding:0;
  background:none;
  box-shadow:none;
  border:0;
}
.dbc-genre-flex{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:40px;
  width:100%;
}
.dbc-genre-legend{
  flex:0 0 auto;
}
.dbc-genre-legend-list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0 0 20px 0;
  padding:0;
  list-style:none;
}
.dbc-genre-legend-list li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  margin:0;
  font-family:Poppins, sans-serif;
  font-size:12px;
  color:#555;
  line-height:1.6;
}
.dbc-genre-legend-swatch{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:2px;
  border:1px solid rgba(0,0,0,0.12);
  box-sizing:border-box;
}
.canvas-pointer{ cursor:pointer; }

/* ===== Followed Authors Manager ===== */
.dbc-fam-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.dbc-fam-modal{
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  width:min(720px,95vw);
  max-height:85vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dbc-fam-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid #e5e7eb;
  background:#f9fafb;
}
.dbc-fam-modal-header h3{
  margin:0;
  font-size:20px;
  font-weight:600;
  color:#111827;
}
.dbc-fam-modal-subtitle{
  margin:8px 18px 10px;
  font-size:13px;
  color:#6b7280;
}
.dbc-followed-authors-manager{
  padding:0 18px 16px;
  max-height:calc(85vh - 56px);
  overflow-y:auto;
}
.dbc-fam-modal-close{
  background:#b91c1c;
  border:1px solid #b91c1c;
  width:18px;
  height:18px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  color:#ffffff;
  cursor:pointer;
  padding:0;
  margin:0;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
  transition:background-color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease,transform 0.1s ease;
}
.dbc-fam-modal-close:hover,
.dbc-fam-modal-close:focus{
  background:#991b1b;
  border-color:#991b1b;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  transform:translateY(-1px);
  outline:none;
}
.dbc-fam-search{
  margin-bottom:18px;
}
.dbc-fam-search label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  font-size:13px;
}
#dbc-fam-search-input{
  width:100%;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.12);
  padding:9px 11px;
  background:#ffffff;
  color:#111827;
  font-size:14px;
}
#dbc-fam-search-input:focus{
  outline:none;
  border-color:#111827;
  box-shadow:0 0 0 1px #111827 inset;
}
.dbc-fam-search-results{
  margin-top:6px;
  border-radius:8px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
  max-height:220px;
  overflow-y:auto;
}
.dbc-fam-search-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  font-size:14px;
}
.dbc-fam-search-item + .dbc-fam-search-item{
  border-top:1px solid rgba(15,23,42,0.06);
}
.dbc-fam-search-empty{
  padding:8px 10px;
  font-size:13px;
  opacity:0.7;
}
.dbc-fam-list-wrapper{
  margin-top:4px;
  background:#ffffff;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:12px 14px;
}
.dbc-fam-list-header{
  font-weight:600;
  font-size:14px;
  margin-bottom:8px;
}
.dbc-fam-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dbc-fam-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-radius:8px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  transition:background-color 0.12s ease,box-shadow 0.12s ease;
}
.dbc-fam-item + .dbc-fam-item{
  margin-top:2px;
}
.dbc-fam-item:hover{
  background:#f9fafb;
  box-shadow:0 1px 3px rgba(15,23,42,0.08);
}
.dbc-fam-name a{
  color:#111827;
  text-decoration:none;
  font-size:14px;
}
.dbc-fam-name a:hover{
  text-decoration:underline;
}
.dbc-fam-empty{
  font-size:13px;
  opacity:0.7;
}
.dbc-fam-toggle{
  background: var(--dbc-site-accent, #222) !important;
  color:#ffffff !important;
  border:none;
  border-radius:6px;
  padding:6px 12px;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.07);
  transition:background-color 0.15s ease,box-shadow 0.15s ease,transform 0.08s ease;
}
.dbc-fam-toggle:hover{
  background:#bb5a5a !important;
  color:#ffffff !important;
  box-shadow:0 2px 5px rgba(0,0,0,0.16);
  transform:translateY(-1px);
}

/* ===== Author Followers Modal ===== */
.dbc-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.dbc-modal[hidden]{
  display:none;
}
.dbc-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.dbc-modal__dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(560px,92vw);
  max-height:85vh;
  overflow:hidden;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.dbc-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid #e5e7eb;
  background:#f9fafb;
}
.dbc-modal__header h3{
  margin:0;
  font-size:20px;
  font-weight:600;
}
.dbc-modal__body{
  padding:12px 16px;
  max-height:calc(85vh - 56px);
  overflow:auto;
}
.dbc-modal__close{
  background:#b91c1c;
  border:1px solid #b91c1c;
  width:18px;
  height:18px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  color:#ffffff;
  cursor:pointer;
  padding:0;
  margin:0;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
  transition:background-color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease,transform 0.1s ease;
}
.dbc-modal__close:hover,
.dbc-modal__close:focus{
  background:#991b1b;
  border-color:#991b1b;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  transform:translateY(-1px);
  outline:none;
}
.dbc-friend-row{
  justify-content:flex-start;
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0;
  padding:6px 8px;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
}
.dbc-friend-row:hover{
  background:#f3f4f6;
}
.dbc-friend-avatar{
  border-radius:50%;
  width:28px;
  height:28px;
  object-fit:cover;
  display:block;
}
.dbc-name{
  font-size:14px;
}
.dbc-modal-section{
  margin-bottom:10px;
}
.dbc-modal-section-title{
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  opacity:.8;
}
.dbc-modal-divider{
  border:0;
  border-top:1px solid #e5e7eb;
  margin:8px 0;
}