/* *********************************************************
 * Updates:
 * 15/08/2025 - Adding spinner on Desktop during load images 
 * 19/08/2025 - Narrow left-side of left-pane
 * 31/08/2025 - Close the Image modal only by clicking the exit button
 * 17/09/2025a - Ver V3.5.5: Download a displayed original image with metadata
 * 19/09/2025 - Add left margin to the left pane
 * 19/09/2025 - New button: [Add new images to album] for Photografer
 *********************************************************** */
.entry-content li, .entry-content textarea { /* narrow left-side of left-pane  Add: 19/08/2025 */
  margin: 0 0 0 10px;
}

#media-viewer-root {
  display: flex;
  direction: rtl;
  height: 90vh;
  width: 100vw;
  max-width: 100vw;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* Panes */
@media only screen and (min-device-width : 481px) { /* Desktop */
#mv-right-pane {
  min-width: 150px;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid #ccc;
  padding: 0.1em;   /* 1em; Chg: 15/08/2025 */
  background-color: #f9f9f9;
  transition: width 0.2s ease;
  position: relative; /* For spinner positioning,  Add: 18/08/2025 */
}
#mv-left-pane {
  min-width: 150px;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.1em;   /* 1em; Chg: 15/08/2025 */
  margin-left: 35px;   /* Add: 19/09/2025 */
  background-color: #fff;
  transition: width 0.2s ease;
}}
@media only screen and (max-device-width : 480px) { /* Smartphone */
#mv-right-pane {
  min-width: 150px;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid #ccc;
  padding: 0.1em;   /* 1em; Chg: 15/08/2025 */
  background-color: #f9f9f9;
  transition: width 0.2s ease;
}
#mv-left-pane {
  min-width: 150px;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.1em;   /* 1em; Chg: 15/08/2025 */
  background-color: #fff;
  transition: width 0.2s ease;
  position: relative; /* For spinner positioning,  Add: 15/08/2025 */
}}

/* Gutter */
#mv-gutter {
  width: 6px;
  cursor: col-resize;
  background: #ddd;
  z-index: 10;
  flex-shrink: 0;
}

/* Folder list */
#mv-folder-list {
  list-style: none;
  padding: 0;
  margin-top: 1em;
  line-height: 1.0;
}

@media only screen and (min-device-width : 481px) { /* Desktop */
#mv-folder-list li {
  cursor: pointer;
  padding: 0.1em;   /* 0.5em; Chg: 11/08/2025 */
  font-size: 1.0em; /* 0.5em; Chg: 11/08/2025 */
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}}
@media only screen and (max-device-width : 480px) { /* Smartphone */
#mv-folder-list li {
  cursor: pointer;
  padding: 0;   /* 0.5em; Chg: 11/08/2025 */
  font-size: 1.4em; /* 0.5em; Chg: 11/08/2025 */
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}}

#mv-folder-list li:hover {
  background-color: #eaeaea;
}

/* Carousel thumbnails */
#mv-carousel {
  display: grid;   /* flex; Chg: 29/08/2025 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Add: 29/08/2025 */
/* flex-wrap: wrap;    Del: 29/08/2025 */
  gap: 1em;  
/* align-items: flex-start;   Del: 29/08/2025 */
}

.mv-image-container {
  width: 240px;
  height: 250px; /* Fixed height for the entire card  Add: 29/08/2025 */														   
  flex-grow: 0;
  flex-shrink: 0;
  border: 1px solid #ccc;
  padding: 0.5em;
  background-color: #fafafa;
  display: flex;
  flex-direction: column; /* Stacks image, caption, and button vertically */
 /* align-items: stretch;    Del: 29/08/2025 */
}

.mv-image-container img {
  width: 100%;
  height: 160px;  /* auto; SET a fixed height here  Chg: 29/08/202 */
  border-radius: 4px;
  display: block;
  object-fit: cover; /* Ensures image is not distorted */
  flex-shrink: 0; /* Prevents image from shrinking  Add: 29/08/2025*/
  transition: transform 0.2s ease-in-out;	/* Add: 29/08/2025*/									 
}
.mv-image-container:hover img { /* Add: 29/08/2025*/
  cursor: pointer;
  transform: scale(1.03);
}
@media only screen and (min-device-width : 481px) { /* Desktop */
.mv-caption {
  font-weight: bold;
  color: #333;
  margin-top: 0.5em;
  font-size: 0.80em;  /* Add: 29/08/2025 */
  line-height: 1.0;   /* Controls spacing between the two lines  Add: 29/08/2025 */  
  /* The following combination forces the text to wrap
  /*  and show an ellipsis (...) after 2 lines  Add: 29/08/2025 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;																  
}}
@media only screen and (max-device-width : 480px) { /* Desktop */
.mv-caption {
  font-weight: bold;
  color: #333;
  margin-top: 0.5em;
  font-size: 1.4em;  /* Smaller font size  Add: 29/08/2025 */
  line-height: 1.0;   /* Controls spacing between the two lines  Add: 29/08/2025 */  
  /* The following combination forces the text to wrap
  /*  and show an ellipsis (...) after 2 lines  Add: 29/08/2025 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;																  
}}


.mv-filename {
  font-style: italic;
  font-size: 0.9em;
  color: #666;
  margin-top: 0.25em;
}

.mv-buttons {
  margin-top: auto;   /* 0.5em;  Chg: 29/08/2025 */
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

@media only screen and (min-device-width : 481px) { /* Desktop */
.mv-buttons button,
.mv-buttons a {
  padding: 0.2em 0.5em;  /* 0.4em 0.8em;  Chg: 29/08/2025 */
  border: none;
  background-color: #0073aa;
  color: #000000; /* white; Chg: 11/08/2025 */
  text-decoration: none;
  border-radius: 3px;
  font-size: 0.85em;
  text-align: center;
}}
@media only screen and (max-device-width : 480px) { /* Smartphone */
.mv-buttons button,
.mv-buttons a {
  padding: 0.2em 0.5em;  /* 0.4em 0.8em;  Chg: 29/08/2025 */
  border: none;
  background-color: #0073aa;
  color: #000000; /* white; Chg: 11/08/2025 */
  text-decoration: none;
  border-radius: 3px;
  font-size: 1.4em;
  text-align: center;
}}

.mv-buttons button:hover,
.mv-buttons a:hover {
  background-color: #005f8d;
}

@media only screen and (max-device-width : 480px) { /* Smartphone Add: 19/08/2025 */
#mv-album-title {
/*  text-align: center; */
    font-size: 1.5em;
	font-weight: bold;
    color: #333;
    padding-bottom: 1px;
    border-bottom: 1px solid #ccc;
	word-break: break-word;
    white-space: normal;
 	margin-left: 10px;
	padding: 0 0 0 5px;
}

#mv-back-button {
    background-color: #007bff; /* Distinct blue background */
    color: #000000;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    margin: 10px; /* Space around button */
}
#mv-back-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}}

/* Metadata modal */
@media only screen and (min-device-width : 481px) { /* Desktop */
#mv-metadata-frame {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 60%;
  background: white;
  border: 2px solid #333;
  padding: 1em;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  font-size: 0.95em;
}}
@media only screen and (max-device-width : 480px) { /* Smartphone */
#mv-metadata-frame {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 60%;
  background: white;
  border: 2px solid #333;
  padding: 1em;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  font-size: 1.25em;
}}

#mv-metadata-frame div {
  margin-bottom: 0.5em;
}

#mv-metadata-frame button {
  margin-top: 1em;
  background: #444;
  color: white;
  padding: 0.5em 1em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

#mv-metadata-frame button:hover {
  background: #222;
}

/* Modal full image viewer */
#mv-image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.mv-modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  top: 0;
  left: 0;
}

.mv-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
  padding: 1em;
  z-index: 2001;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  border-radius: 8px;
  z-index: 2001; /* Ensures it's on top of the overlay Add: 30/08/2025 */
}

#mv-modal-img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  margin: auto;
}

#mv-modal-close {
  position: absolute;
  top: 1px;  /* 0; Distance from the top of the modal content  Chg: 29/08/2025 */
  right: 1px;  /* 0; Distance from the right of the modal content Chg: 29/08/2025 */
  font-size: 2.0em; /* 1.5em; Chg: 29/08/2025 */
/* background: transparent; Del 29/08/2025 */
  background-color: #fff; /* White background for visibility Del: 29/08/2025 */										   
  color: #333;  /* #444; Darker text color Chg: 29/08/2025 */
  border: 1px solid #ccc; /* none;  Subtle border Chg: 29/08/2025 */									 
  border-radius: 50%; /* Make it round Add: 29/08/2025 */
  width: 3px;      /* Fixed width Add: 29/08/2025 */
  height: 3px;     /* Fixed height Add: 29/08/2025 */
  display: flex;           /* 29/08/2025 */
  align-items: center;     /* 29/08/2025 */
  justify-content: center; /* 29/08/2025 */
  cursor: pointer;
  z-index: 1001;    /* Ensure it's above the image and overlay Add: 29/08/2025 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Soft shadow for depth Add: 29/08/2025 */
/* padding: 0.5em 0.8em; Del: 29/08/2025 */
}
																	
#mv-modal-close:hover { /* Add: 29/08/2025 */
  background-color: #eee; /* Slight change on hover */
} 

#mv-modal-download { /* Add: 17/09/2025a */
  background-color: #b2b5b6;  /* #0073aa; */
}
#mv-modal-download:hover { /* Add: 17/09/2025a */
  background-color: #eee; /* Slight change on hover */
}

#mv-upd-album-button { /* Add: 19/09/2025 */
    background-color: #007bff; /* Distinct blue background */
    color: #000000;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    margin: 10px; /* Space around button */
}
#mv-upd-album-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/**
 * Bidirectional Text Rules
 * This forces elements with a 'dir' attribute to respect that direction,
 * creating a new directional context for the element. This is the standard
 * way to properly handle mixed LTR and RTL content.																			 													   																	   
 */
[dir="ltr"] {
    direction: ltr;
    unicode-bidi: embed;
}

[dir="rtl"] {
    direction: rtl;
    unicode-bidi: embed;
}

/* --- START: Spinner styles --- Add: 15/08/2025 */
@media only screen and (min-device-width : 481px) { /* Desktop Add: 18/08/2025 */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #2980b9;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  display: none; /* Hidden by default */
  position: absolute; /* fixed; */
  top: 15%;
  left: 10%;
  margin-left: -25px; /* Centers the spinner horizontally */
  z-index: 10;
}}
@media only screen and (max-device-width : 480px) { /* Smartphone Add: 18/08/2025 */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #2980b9;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  display: none; /* Hidden by default */
  position: absolute; /* fixed; */
  top: 15%;
  left: 25%;
  margin-left: -25px; /* Centers the spinner horizontally */
  z-index: 3000;
}}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* --- END: Spinner styles --- */