/* ********************************************************************************
 * Building blocks
 * h2, h3, p, etc        Standard html tags
 * div.gbBlock           Sidebar or content section with style for contained lists
 * ul.gbBreadCrumb       List of links/path elements
 * table.gbDataTable     Table for data/form elements with styles for shading rows
 */

#gallery h2, #gallery h3, #gallery h4, #gallery form {
    margin: 0;
    padding: 0;
}

#gallery p {
    margin: 0.6em 0;
    padding: 0;
}

.gbBlock {
    padding: 0.5em;
    border-width: 0 0 1px 0;
    border-style: inherit;
    border-color: inherit;
    /* IE can't inherit these */
    border-style: expression(parentElement.currentStyle.borderStyle);
    border-color: expression(parentElement.currentStyle.borderColor);
}

.gbBlock ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.gbBlock ul ul {
    margin: 0 0 0.5em 1.0em;
}

.gbBlock li {
    padding: 6px 0 0 0;
}

#gallery .gbBlock h3 {
    margin-bottom: 0.5em;
}

#gallery .gbBlock h4 {
    margin-top: 0.5em;
}


#gsNavBar div.gbBreadCrumb {
    margin: 0;
    padding: 4px 8px;
}

table.gbDataTable {
    padding-bottom: 4px;
}

table.gbDataTable th, table.gbDataTable td {
    padding: 4px;
}


.giBlockToggle {
    padding: 0 0.4em 0.1em;
}
.giBlockToggle:hover {
    cursor: pointer;
}


.gbMarkupBar {
    margin: 4px 0;
}

#gallery .gbMarkupBar input {
    margin: 0;
    padding: 0;
}


/* ********************************************************************************
 * Sections
 * body.gallery     Page body in G2 standalone (doesn't apply to embedded)
 * #gallery         Page container
 * #gsNavBar   Top bar with breadcrumb and other links
 * #gsSidebar       Sidebar
 * #gsContent       Main content
 */

body.gallery {
    margin: 0;
    padding: 0;
}

#gallery {
    padding: 8px;
}
#gallery.rtl {
    direction: rtl;
}

#gsNavBar {
    border-top-width: 1px;
    border-bottom-width: 1px;
}

#gsNavBar div.gbSystemLinks {
    padding: 4px 6px;
}

#gsNavBar div.gbSystemLinks span {
    padding: 0 4px;
}

#gsSidebar {
    border-right-width: 1px;
    width: 175px;
    overflow: hidden;
}
#gsSidebarCol {
    width: 1%; /* Expand to fit content ("0" bad4 firefox, "1px" bad4 opera) */
}

td.giAlbumCell, td.giItemCell {
    padding: 1em;
    text-align: center;
}

#gallery td.giAlbumCell select, #gallery td.giItemCell select {
    margin-top: 0.8em;
}

/* So imageframed thumbs can be centered */
td.giAlbumCell table, td.giItemCell table {
    margin: auto;
}

#gsPages span {
    padding: 0 0.3em;
}

#gallery #gsSidebar ul {
    font-size: 1em;
}

/* ********************************************************************************
 * cakepicturegallery Theme for Gallery 2
 * by Ross A. Reyman, Jon Huang, and Chad Kieffer
 * updated by Alan Harder
 */

/* ********************************************************************************
 * Building blocks
 * #gallery              Default font/color settings
 * .gcBackground1,2..    Palette of backgrounds
 * .gcBorder1,2..        Palette of borders
 * a, h2, h3, etc        Standard html tags
 * .giTitle, .giSubtitle, .giDescription, .giInfo, .giSuccess, .giWarning, .giError
 *                       Palette of text styles
 * div.gbBreadCrumb      List of links/path elements
 * table.gbDataTable     Table for data/form elements with styles for shading rows
 * div.gbTabBar          UI component for selectable tabs
 * .autoComplete*        Styles for autoComplete popup lists
 */

#gallery {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    color: #333;
    background-color: #fff;
}
body.gallery {
    background-color: #fff;
}

.gcBackground1 {
    background-color: #eee;
}

.gcBackground2 {
    background-color: #e7e7e7;
}

.gcBorder1 {
    border: 0 solid #ccc;
}

.gcBorder2 {
    border: 0 solid #888;
}

#gallery a {
    font-weight: bold;
    text-decoration: none;
    color: #6b8cb7;
}
#gallery a:hover {
    text-decoration: underline;
    color: #f4560f;
}
#gallery a:active {
    text-decoration: none;
    color: #f9c190;
}

#gallery img {
    border-width: 0;
}

#gallery h2, #gallery h3, #gallery h4 {
    font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
}

#gallery input:focus, #gallery textarea:focus {
    background-color: #ffc;
    color: #000;
}

#gallery input.inputTypeSubmit, #gallery input.inputTypeButton {  /* No input[type=submit] in IE */
    color: #333;
    background-color: #eee;
    border-width: 2px;
    border-style: solid;
    border-color: #e7e7e7 #666 #666 #e7e7e7;
}

#gallery select {
    font-size: 1em;
}

.giTitle, #gallery h2, #gallery h3, #gallery h4 {
    font-size: 1.3em;
    font-weight: bold;
}

#gallery pre, #gallery tt {
    font-family: Courier New;
    font-size: 1.2em;
}

.giSubtitle {
    font-size: 0.9em;
    font-weight: normal;
    vertical-align: text-bottom;
}

.giDescription {
    font-size: 1.1em;
    line-height: 1.4em;
}

.gbEmptyAlbum {
    height: 400px;
}

.giDescription h3.emptyAlbum {
    line-height: 4.0em;
    text-align: center;
}

.giInfo {
    font-size: 0.9em;
    color: #888;
}

.giInfo span.summary {
    display: block;
}

.giSuccess, .giWarning, .giError  {
    font-weight: bold;
}

.giSuccess { color: #5c0; }
.giWarning { color: #c50; }
.giError { color: #a44; }

.giNew, .giUpdated {
    border-width: 2px;
    border-style: ridge;
    padding: 0 6px;
    line-height: 1.9em;
}

#gsNavBar div.gbBreadCrumb {
    font-size: 1.1em;
    font-weight: bold;
}

#gsNavBar div.gbBreadCrumb a, #gsNavBar div.gbBreadCrumb span {
    padding: 0 0 0 14px;
    background: url('images/icon_path_separator.gif') no-repeat left;
}

#gsNavBar div.gbBreadCrumb a.BreadCrumb-1 {   /* no :first-child in IE */
    padding-left: 0;
    background-image: none;
    white-space: nowrap;
}

div[id^="gsThumb"] {
    width: 100%;
}

#gallery.IE div.gbBreadCrumb span {
    display: inline-block;   /* IE loses padding-left on wrapped inline nowrap element */
    padding-right: 4px;      /* IE has less space at right of each span */
}

#gsNavBar div.gbBreadCrumb span.BreadCrumb-1 {   /* no :first-child in IE */
    padding-left: 0;
    background-image: none;
}

#gsNavBar div.gbSystemLinks {
  float: right;
}

table.gbDataTable th {
    text-align: left;
    background-color: #e7e7e7;
}

.gbEven {
    background-color: #fff;
}

.gbOdd {
    background-color: #eee;
}


div.gbTabBar {
    font-size: 0.9em;
    font-weight: bold;
    margin: 0.8em 0 0;
    padding: 6px;
    background: url('images/tab_bg.gif') repeat-x bottom;
    white-space: nowrap;
}

div.gbTabBar span.o {
    padding: 6px 0 5px 8px;
    background: url('images/tab_left.jpg') no-repeat left top;
}
#gallery.IE div.gbTabBar span.o {
    display: inline-block;   /* IE loses padding-left on wrapped inline nowrap element */
    margin-bottom: 1px;      /* ..and then adds padding differently with inline-block.. */
}
/* IE may clip off the right end of a long set of tabs, so allow IE to wrap them */
#gallery.IE div.gbTabBar { padding-bottom: 0; white-space: normal; }
#gallery.IE div.gbTabBar span.giSelected { margin-bottom: 0; }

#gallery div.gbTabBar span span {
    padding: 6px 12px 5px 4px;
    background: url('images/tab_right.jpg') no-repeat right top;
}

#gallery div.gbTabBar a {
    color: #777;
    text-decoration: none;
}

#gallery div.gbTabBar a:hover {
    color: #333;
}

#gallery div.gbTabBar span.giSelected {
    padding-bottom: 6px;
    background-image: url('images/tab_left_on.jpg');
}

#gallery div.gbTabBar span.giSelected span {
    color: #333;
    padding-bottom: 6px;
    background-image: url('images/tab_right_on.jpg');
}

.autoCompleteBackground {
    border: 1px solid #ccc;
    border-top-style: none;
    margin: 0;
}

.autoCompleteHighlight {
    text-decoration: underline;
}

.autoCompleteNotSelected {
    background-color: #eee;
    padding: 3px 4px 3px 17px;
}

.autoCompleteSelected {
    background-color: #ffc;
    padding: 3px 4px 3px 17px;
}


#gallery .gbMarkupBar input {
    font-size: 1.1em;
}


#ProgressBar #progressDone {
    background-color: #fd6704;
    border: thin solid #ddd;
}

#ProgressBar #progressToGo {
    background-color: #eee;
    border: thin solid #ddd;
}

.giSearchHighlight {
    font-weight: bold;
    background-color: #ff6;
}


/* ********************************************************************************
 * Sections
 * #gallery         Page container
 * #gsNavBar   Top bar with breadcrumb and other links
 * #gsSidebar       Sidebar
 * #gsContent       Main content
 * #giFormUsername  Form field for entering a username
 * #giFormGroupname Form field for entering a group name
 */

#gsNavBar div {
    margin-top: 0.1em;  /* Align system links with breadcrumb */
    font-weight: bold;
}

#gsSidebar div ul {   /* no > in IE */
    font-size: 1.1em;
    font-weight: bold;
}
#gsSidebar div ul ul { font-size: 1.0em; }

#gsSidebar ul span {
    color: #999;
}

#giFormUsername, .giFormUsername {
    background: url('images/userinfo.png') no-repeat 0 1px;
    padding-left: 17px;
}

#giFormGroupname {
    background: url('images/groupinfo.png') no-repeat 0 1px;
    padding-left: 17px;
}

#giFormPassword {
    background: url('images/key7-16-bw.gif') no-repeat 0 1px;
    padding-left: 17px;
}

/* Opera ignores padding in form inputs; put icons on right side instead */
#gallery.opera #giFormUsername, #gallery.opera .giFormUsername,
#gallery.opera #giFormGroupname, #gallery.opera #giFormPassword {
    background-position: right center;
}

div.gbNavigator div.next-and-last {
  float: right;
}
div.gbNavigator div.next-and-last.no-previous {
  float: none;
  text-align: right;
}

div.gbNavigator a.first {
  padding-left: 27px;
  background: url("images/nav_first.gif") left no-repeat;
}

div.gbNavigator a.previous {
  padding-left: 27px;
  background: url("images/nav_prev.gif") left no-repeat;
}

div.gbNavigator a.next {
  padding-right: 27px;
  background: url("images/nav_next.gif") right no-repeat;
}

div.gbNavigator a.last {
  padding-right: 27px;
  background: url("images/nav_last.gif") right no-repeat;
}

div.gbNavigator div.first-and-previous img {
  vertical-align: middle;
  padding-right: 0.5em;
}
div.gbNavigator div.next-and-last img {
  vertical-align: middle;
  padding-left: 0.5em;
}

#gallery.rtl div.gbNavigator div.next-and-last {
  float: left;
}
#gallery.rtl div.gbNavigator div.next-and-last.no-previous {
  float: none;
  text-align: left;
}
#gallery.rtl div.gbNavigator div.first-and-previous {
  text-align: right;
}
/* Both IE and Gecko have bugs with omitting padding on rtl inline content */
#gallery.IE.rtl div.gbNavigator a {
  display: inline-block;
}
#gallery.gecko.rtl div.gbNavigator a {
  display: -moz-inline-box;
}

#gallery.rtl div.gbNavigator a.first {
  padding: 0 27px 0 0;
  background: url("images/nav_last.gif") right no-repeat;
}
#gallery.rtl div.gbNavigator a.previous {
  padding: 0 27px 0 0;
  background: url("images/nav_next.gif") right no-repeat;
}
#gallery.rtl div.gbNavigator a.next {
  padding: 0 0 0 27px;
  background: url("images/nav_prev.gif") left no-repeat;
}
#gallery.rtl div.gbNavigator a.last {
  padding: 0 0 0 27px;
  background: url("images/nav_first.gif") left no-repeat;
}
#gallery.rtl div.gbNavigator div.first-and-previous img {
  padding: 0 0 0 0.5em;
}
#gallery.rtl div.gbNavigator div.next-and-last img {
  padding: 0 0.5em 0 0;
}

div.block-search-SearchBlock a.advanced {
  display: block;
  padding: 3px;
}

div.block-core-ItemLinks {
  margin: 3px 0;
}
div.block-core-ItemLinks a {
  padding: 3px;
}
div#gsSidebar div.block-core-ItemLinks a {
  display: block;
}

div#gsSidebar div.block-core-PeerList a {
  display: block;
  padding: 3px;
}

div#gsSidebar div.block-core-PeerList span {
  font-weight: bold;
  display: block;
  padding: 3px;
}

div#gsSidebar div.block-core-PeerList span.current {
  color: #0b6cff;
}

/* ***************************************************** */
/*                   Dynamic blocks                      */
/* ***************************************************** */

div.block-comment-ViewComments {
  margin: 5px auto;
  max-width: 600px;
}

div.block-comment-ViewComments div.one-comment {
  border: 1px solid #e7e7e7;
  padding: 5px;
  margin-bottom: 5px;
}

div.block-comment-ViewComments h3 {
}

div.block-comment-ViewComments span {
  padding-right: 5px;
}

div.block-comment-ViewComments p.info {
  font-style: italic;
  text-align: right;
  font-size: 0.95em;
}

div.block-core-GuestPreview {
  float: right;
}
#gallery.rtl div.block-core-GuestPreview {
  float: left;
}

span.block-core-SystemLink {
}

div.block-exif-ExifInfo {
  margin: 5px;
}

span.bsw_ButtonDisabled {
  color: #999;
}

span.bsw_ButtonEnabled {
  color: #000;
  cursor: pointer;
}

table.bsw_ParamTable {
  width: 100%;
  border: 1px solid #999;
  border-collapse: collapse;
}

tr.bsw_ParamHeaderRow {
  background-color: #EEE;
}

tr.bsw_ParamHeaderRow td {
  font-weight: bold;
  text-align: center;
  border: 1px solid #999;
}

td.bsw_BlockCommands {
  white-space: nowrap;
  text-align: center;
}

#gsFooter {
  padding-top: 4px;
}

/* ********************************************************************************
 * Rating module style fix
 */
.giRatingUI {
    margin: 10px auto; /* Required to center default rating module star images */
}
div[id^="gsThumb"] .giRatingAverageContainer {
    margin: auto;
}

/* ********************************************************************************
 * Modern Responsive Enhancements with Tailwind Integration
 */

/* Mobile-first responsive utilities */
@media (max-width: 768px) {
    #gallery {
        padding: 4px;
    }

    /* Ensure sidebar stacks properly on mobile */
    #gsSidebarCol {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Improve touch targets on mobile */
    #gallery a, #gallery button {
/*
        min-height: 44px;
        min-width: 44px;
*/
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Better image viewing on mobile */
    #gallery img {
        max-width: 100%;
        height: auto;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    #gsSidebarCol {
        width: 200px;
    }
}

/* Remove table-based layout constraints */
#gsSidebarCol {
    display: block;
}

/* Smooth transitions for interactive elements */
#gallery a, #gallery button, #gallery .nav_next, #gallery .nav_prev {
    transition: all 0.3s ease;
}

#gallery a:hover, #gallery button:hover {
    transform: translateY(-2px);
}

/* Touch-friendly swipe indicators */
@media (hover: none) and (pointer: coarse) {
    /* Add subtle gradient hints for swipe gestures */
    body.gallery::before,
    body.gallery::after {
        content: '';
        position: fixed;
        top: 50%;
        width: 30px;
        height: 60px;
        margin-top: -30px;
        opacity: 0.1;
        pointer-events: none;
        z-index: 10;
        transition: opacity 0.3s;
    }

    body.gallery::before {
        left: 0;
        background: linear-gradient(to right, rgba(107, 140, 183, 0.5), transparent);
    }

    body.gallery::after {
        right: 0;
        background: linear-gradient(to left, rgba(107, 140, 183, 0.5), transparent);
    }
}

/* Accessibility improvements */
*:focus {
    outline: 2px solid #6b8cb7;
    outline-offset: 2px;
}

/* Force light mode - no dark mode */
body.gallery {
    background-color: #fff !important;
    color: #333 !important;
}

#gallery {
    background-color: #fff;
    color: #333;
}

.gcBackground1 {
    background-color: #f5f5f5;
    color: #333;
}

.gcBackground2 {
    background-color: #eee;
    color: #333;
}
/* Modern image frames - replaced ImageFrame tables */

/* Album thumbnail images */
.album_image {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.album_image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Photo page image container */
#gsImageView {
    width: 100%;
    text-align: center;
    overflow-x: auto;
}

#gsImageView img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Photo page image frame */
.photo_frame {
    max-width: 100%;
    margin: 0.25rem auto;
    text-align: center;
    display: inline-block;
}

@media (max-width: 768px) {
    .photo_frame {
        margin: 0.25rem auto !important;
        padding: 0 !important;
    }
}

.photo_main_image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Photo page main image container */
#main_photo {
    display: block;
    position: relative;
    text-align: center;
    margin-top: 0.25rem;
}

/* Photo page heading */
.photo-h1 {
    font-size: 2rem !important;
    line-height: 1.3;
    margin: 0.5rem auto 0.5rem;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    clear: both;
    padding: 0 1rem;
}

h1.photo-h1,
H1.photo-h1 {
    font-size: 2rem !important;
}

/* Override for mobile - must come after base rules */
@media (max-width: 768px) {
    /* Ensure header-info appears below gsNavBar with clear separation */
    .header-info {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0.5rem auto 0.5rem !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        order: 999 !important; /* Ensure it comes after navbar if flex */
    }
}

/* Force override of problematic 414px absolute positioning */
@media only screen and (max-width: 414px) {
    .header-info {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0.25rem auto 0.5rem !important;
        padding: 0 0.5rem !important;
        height: auto !important;
        max-height: none !important;
        background-color: transparent !important;
    }

    .header-info .hi-col,
    .header-info .hi-col-2 {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* H1 - centered, wrapping to 2 lines, readable size */
    .photo-h1,
    h1.photo-h1,
    H1.photo-h1,
    .header-info h1,
    .hi-col h1,
    .hi-col-2 h1 {
        font-size: 0.95rem !important;
        text-align: center !important;
        margin: 0 auto 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
        line-height: 1.5 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        left: auto !important;
        clear: both !important;
    }
}

    .header-info .hi-col,
    .header-info .hi-col-2 {
        overflow: visible !important;
        height: auto !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    .header-info .hi-col *,
    .header-info .hi-col-2 * {
        text-align: center !important;
    }

    /* H1 specific styling - centered, wrapping, below navbar */
    .photo-h1,
    h1.photo-h1,
    H1.photo-h1,
    .header-info h1,
    .hi-col h1,
    .hi-col-2 h1 {
        font-size: 1rem !important;
        text-align: center !important;
        margin: 0.5rem auto !important;
        padding: 0.5rem 1rem !important;
        line-height: 1.4 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        clear: both !important;
    }

    /* Shrink and compact banner on mobile */
    .flex.justify-center.py-4 {
        padding-top: 0.25rem !important;
        padding-bottom: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    .flex.justify-center.py-4 img {
        max-height: 34px !important;
        width: auto !important;
    }
}

/* Banner styling - desktop (full size) - must use media query to override mobile !important */
@media (min-width: 769px) {
    .flex.justify-center.py-4 {
        padding: 1rem 0 !important;
        margin-bottom: 0.5rem !important;
    }

    .flex.justify-center.py-4 img {
        max-height: none !important;  /* No size restriction on desktop */
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* Header info container - modernized */
.header-info {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 0.25rem !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.header-info .hi-col,
.header-info .hi-col-2 {
    width: 100%;
    text-align: center;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    float: none;
    display: block;
}

/* Center copyright and licensing info */
.giInfo {
    text-align: center;
    margin: 1rem auto !important;
    max-width: 800px;
}

/* Photo page layout improvements */
body #gsImageView {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 2rem 1rem;
    text-align: center;
}

/* Center content below image */
.giDescription {
    text-align: center;
    max-width: 900px;
    margin: 1.5rem auto;
    font-size: 1rem;
    line-height: 1.6;
    color: #ccc;
}

/* Photo description paragraph */
.photo_p {
    max-width: 800px;
    margin: 1rem auto;
    line-height: 1.6;
}

/* EXIF data table styling */
.gbDataTable {
    margin: 2rem auto;
    max-width: 600px;
    border-collapse: collapse;
}

.gbDataTable td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.gbDataTable .gbEven {
    font-weight: 600;
    color: #374151;
}

.gbDataTable .gbOdd {
    color: #6b7280;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .photo-h1 {
        font-size: 1rem;
        padding: 0 0.5rem;
        line-height: 1.3;
    }

    .photo_frame {
        margin: 0.75rem auto 0.25rem !important;
        padding: 0.25rem !important;
    }

    #main_photo {
        margin-bottom: 0 !important;
        margin-top: 0.5rem !important;
        padding-bottom: 0 !important;
    }

    /* Fix menu overlay on mobile */
    .menu_overlay {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 28px !important;
        padding: 2px !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .menu_overlay_inner {
        height: 28px !important;
        line-height: 28px !important;
        overflow: hidden !important;
    }

    .menu_overlay .mo_ul {
        margin: 0 !important;
        padding: 0 !important;
        height: 28px !important;
        line-height: 28px !important;
    }

    .menu_overlay .mo_li {
        display: inline-block !important;
        height: 28px !important;
        line-height: 28px !important;
        vertical-align: middle !important;
    }

    .giDescription {
        margin: 0.25rem auto !important;
        padding-top: 0.5rem !important;
    }

    .gbDataTable {
        font-size: 0.875rem;
    }

    .gbDataTable td {
        padding: 0.375rem 0.75rem;
    }
}

/* Menu overlay for photo actions */
.menu_overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    padding: 8px;
}

.menu_overlay .mo_ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.menu_overlay .mo_li {
    display: inline-block;
    padding: 0;
}

.menu_overlay .mo_li a {
    color: white;
    text-decoration: none;
}

.menu_overlay .mo_li a:hover {
    color: #4a9eff;
}

/* Search result thumbnails */
.giThumbnail {
    display: block;
    max-width: 100%;
    max-height: 200px;
    height: auto;
    margin: 0 auto;
}

/* Search result grid items */
.gbItemImage, .gbItemAlbum {
    min-height: 200px;
}

/* Rating stars - clean modern layout */
.giRatingUI {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.giRatingUI a {
    display: inline-block;
    line-height: 1;
}

/* Hide the rating average bar - not needed */
.giRatingAverageContainer,
.giRatingAverage {
    display: none !important;
}

/* Rating votes display */
.giRatingVotes {
    font-size: 0.875rem;
    color: #666;
}

/* Star images */
.giRatingUI img {
    width: 20px;
    height: 20px;
    display: block;
}

/* Item info block - compact layout */
.block-core-ItemInfo.giInfo {
    font-size: 0.875rem;
}

.block-core-ItemInfo .viewCount {
    margin-bottom: 8px;
}

.block-core-ItemInfo .summary-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Compact navigator styling */
.gbNavigator {
    padding: 0.25em 0.5em !important;
}

.gbNavigator table {
    margin: 0 !important;
}

.gbNavigator td {
    padding: 2px 4px !important;
    font-size: 0.875rem;
}

/* Compact album header */
.gbBlock.gbTop {
    padding: 0.5em !important;
}

.gbBlock.gbTop h1 {
    margin: 0 0 0.25em 0;
    font-size: 1.5rem;
}

.gbBlock.gbTop .giDescription {
    margin: 0.25em 0;
}

/* Grid layout alignment fixes */
div.giAlbumCell, div.giItemCell {
    text-align: center;
}

div.giAlbumCell .album_image,
div.giItemCell .album_image {
    background: white;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

div.giAlbumCell h2,
div.giItemCell h2,
div.giAlbumCell h3,
div.giItemCell h3 {
    text-align: center;
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.3;
}

div.giAlbumCell .giInfo,
div.giItemCell .giInfo {
    text-align: center;
    margin: 0 auto;
}

#gallery input.inputTypeSubmit,
#gallery input.inputTypeButton,
.inputTypeSubmit,
input[type="submit"],
button[type="submit"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 0.75rem 2rem !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px;
}

#gallery input.inputTypeSubmit:hover,
#gallery input.inputTypeButton:hover,
.inputTypeSubmit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
}

#gallery input.inputTypeSubmit:active,
#gallery input.inputTypeButton:active,
.inputTypeSubmit:active,
input[type="submit"]:active,
button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Reset thumbs up/down buttons to use background images */
.thumbsup.mini_thumbs {
    position: relative !important;
    height: 16px !important;
    min-height: 16px !important;
}

.thumbsup.mini_thumbs .result1 {
    display: block !important;
    margin: 0 0 0 38px !important;
    height: 16px !important;
    font-size: 13px !important;
    line-height: 16px !important;
    text-align: left !important;
}

.thumbsup.mini_thumbs input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background: url(/vote/images/mini_thumbs.png) no-repeat 0 0 !important;
    border: 0 !important;
    text-indent: -9999px !important;
    padding: 0 !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0 !important;
    line-height: 999px !important;
}

.thumbsup.mini_thumbs input.down {
    left: 18px !important;
    background-position: -16px 0 !important;
}

.thumbsup.mini_thumbs input:hover,
.thumbsup.mini_thumbs input:focus {
    background-position: 0 -16px !important;
    box-shadow: none !important;
    transform: none !important;
}

.thumbsup.mini_thumbs input.down:hover,
.thumbsup.mini_thumbs input.down:focus {
    background-position: -16px -16px !important;
}

.thumbsup.mini_thumbs input:active {
    background-position: 0 -32px !important;
    box-shadow: none !important;
    transform: none !important;
}

.thumbsup.mini_thumbs input.down:active {
    background-position: -16px -32px !important;
}

.thumbsup.mini_thumbs.disabled input,
.thumbsup.mini_thumbs.busy input {
    background-position: 0 -48px !important;
}

.thumbsup.mini_thumbs.disabled input.down,
.thumbsup.mini_thumbs.busy input.down {
    background-position: -16px -48px !important;
}

/* Hide blank rating average bar */
.giRatingAverageContainer2 {
    display: none !important;
}

/* Cancel button variant */
#gallery input[name*="cancel"],
#gallery input[value="Cancel"],
input[name*="cancel"],
input[value="Cancel"],
button[name*="cancel"] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
}

#gallery input[name*="cancel"]:hover,
#gallery input[value="Cancel"]:hover,
input[name*="cancel"]:hover,
input[value="Cancel"]:hover,
button[name*="cancel"]:hover {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%) !important;
}

/* Form input fields */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    width: 100%;
    max-width: 400px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .inputTypeSubmit,
    input[type="submit"] {
        padding: 0.625rem 1.5rem;
        font-size: 0.9375rem;
        width: 100%;
        max-width: 300px;
    }
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }
}

/* Photo page specific improvements */
#sidebarCol {
    width: 100% !important;
    max-width: 1200px;
    margin: 2rem auto !important;
    padding: 0 1rem;
    text-align: center;
    float: none !important;
}

/* Search box on photo page */
#sidebarCol form,
.gbBlock form {
    max-width: 500px;
    margin: 1.5rem auto;
    text-align: center;
}

#sidebarCol input[type="text"],
.gbBlock input[type="text"] {
    width: 100%;
    max-width: 350px;
    margin: 0 auto 0.5rem;
    display: inline-block;
}

/* Rating stars container */
.giRatingUI {
    text-align: center;
    margin: 2rem auto !important;
    max-width: 400px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
}

.giRatingUI a {
    display: inline-block;
    margin: 0 2px;
}

.giRatingAverageContainer {
    margin: 0.5rem auto;
    max-width: 200px;
}

.giRatingVotes {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: #999;
}

/* Add Comment section */
#addcomment,
#AddComment_block,
#addCommentForm {
    max-width: 800px;
    margin: 1rem auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
}

#AddComment_block {
    padding: 1rem 2rem;
}

#addCommentForm .gbBlock {
    max-width: 600px;
    margin: 1rem auto;
    text-align: left;
}

#addCommentForm label {
    display: block;
    margin: 1rem 0 0.5rem;
}

#addCommentForm label b,
#addCommentForm .gbBlock b,
#addCommentForm b {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* Don't make heading giant - only the "Add Comment" title */
#addCommentForm > div:first-child .gbBlock b,
#AddComment_block > div:first-child b {
    font-size: 1.5rem !important;
    text-align: center !important;
    display: block !important;
}

#addcomment h2,
#addcomment h3,
#AddComment_block .gbBlock b,
#addCommentForm > .gbBlock:first-child b {
    text-align: center;
    display: block;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

#addcomment table {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

#addcomment input[type="text"],
#addcomment textarea,
#addCommentForm input[type="text"],
#addCommentForm textarea,
#addCommentForm input#author,
#addCommentForm input#subject,
#addCommentForm textarea#comment {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0.75rem;
    border: 2px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 0.5rem;
    font-size: 1rem;
}

#addcomment textarea,
#addCommentForm textarea,
#addCommentForm textarea#comment {
    min-height: 150px;
    font-family: inherit;
    resize: vertical;
}

/* SCEditor WYSIWYG editor width fix */
#addCommentForm .sceditor-container,
#addCommentForm .sceditor-container iframe,
.gbBlock .sceditor-container,
.gbBlock .sceditor-container iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

#addCommentForm .sceditor-container iframe,
.gbBlock .sceditor-container iframe {
    min-height: 150px !important;
    height: 150px !important;
}

/* Ensure SCEditor toolbar is visible */
#addCommentForm .sceditor-toolbar,
.gbBlock .sceditor-toolbar {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    opacity: 1 !important;
}

/* Rating stars CSS */
.giRatingUI {
    text-align: center;
    padding: 1rem 0;
    margin: 1rem auto;
}

.rating-star-wrapper {
    display: inline-block;
    margin: 0 2px;
}

.rating-star-wrapper img {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Star background images - use module's default relative paths */
.giRatingFullUserNo,
.giRatingFullUserYes,
.giRatingEmptyUserNo,
.giRatingEmptyUserYes,
.giRatingHalfUserNo,
.giRatingHalfUserYes {
    background-size: contain;
    background-position: center;
}

.giRatingVotes {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #999;
}

/* Related/similar items section */
.related,
div.related {
    text-align: left;
    width: 80%;
    margin: 2rem auto;
    padding: 1rem;
}

@media (max-width: 768px) {
    .related,
    div.related {
        width: 95%;
        margin: 1rem auto;
    }
}

.related b {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    display: block;
}

#related {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    width: 100%;
}

#related li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.25rem 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    border-bottom: 1px solid #333;
}

#related li a.relatedurl {
    grid-column: 1;
    grid-row: 1 / 3;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.4;
    align-self: center;
}

#related li .stars {
    grid-column: 2;
    grid-row: 1;
    color: gold;
    white-space: nowrap;
    font-weight: bold;
    min-width: 80px;
    text-align: left;
}

#related li .num_comments {
    grid-column: 2;
    grid-row: 2;
    white-space: nowrap;
    background: #444;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    text-align: left;
    justify-self: start;
}

/* Q&A Form section */
.qa_form,
#qa_form {
    max-width: 500px;
    margin: 1rem auto;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
    text-align: center;
}

.qa_form label,
#qa_form label {
    display: block;
    margin: 1rem auto 0.25rem;
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem !important;
}

.qa_form input[type="text"],
#qa_form input[type="text"] {
    width: 80% !important;
    max-width: 400px !important;
    margin: 0.5rem auto !important;
    display: block !important;
    text-align: center;
    padding: 0.5rem;
}

/* Slider track centering */
.qa_form input[data-slider],
#qa_form input[data-slider] {
    width: 70% !important;
    max-width: 400px !important;
    margin: 0.75rem auto !important;
    display: block !important;
}

.qa_form br,
#qa_form br {
    display: block;
    margin: 0.5rem 0;
}

.qa_form input[type="submit"],
#qa_form input[type="submit"] {
    margin: 1.5rem auto !important;
    display: block !important;
    padding: 0.75rem 2rem !important;
    font-size: 1rem !important;
}

/* EXIF table centering */
table.gbDataTable {
    margin: 2rem auto !important;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
    overflow: hidden;
}

table.gbDataTable td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333;
}

table.gbDataTable tr:last-child td {
    border-bottom: none;
}

/* Copyright info styling */
.giInfo p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* License button styling */
a[href*="License"],
a[href*="license"] {
    display: inline-block;
    background: #22c55e !important;
    color: white !important;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    margin: 0.5rem;
    transition: all 0.3s ease;
}

a[href*="License"]:hover,
a[href*="license"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* Create E-Card button */
a[href*="E-Card"],
a[href*="Greeting"] {
    display: inline-block;
    background: #3b82f6 !important;
    color: white !important;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    margin: 0.5rem;
    transition: all 0.3s ease;
}

a[href*="E-Card"]:hover,
a[href*="Greeting"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Responsive adjustments for photo page */
@media (max-width: 768px) {
    .photo-h1 {
        font-size: 1rem;
        padding: 0 0.5rem;
        line-height: 1.3;
    }

    #gsImageView {
        padding: 0.5rem 0.5rem !important;
        margin-bottom: 0 !important;
    }

    #gsImageView.gbBlock {
        margin: 0.25rem !important;
    }

    #addcomment,
    .qa_form,
    #qa_form {
        padding: 1rem;
        margin: 0.75rem auto;
    }

    /* Compact PhotoSizes on mobile */
    .block-core-PhotoSizes {
        margin: 0.25rem auto 0.25rem;
        padding: 0.25rem;
        font-size: 0.8rem;
    }

    .block-core-PhotoSizes.giInfo {
        margin: 0.25rem auto 0.5rem;
    }

    .block-core-PhotoSizes select {
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
    }

    table.gbDataTable {
        font-size: 0.875rem;
    }

    table.gbDataTable td {
        padding: 0.5rem 0.75rem;
    }
}

/* Fix two-column layout on photo pages */
.section.group {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.section.group .col.span_1_of_2 {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    float: none;
    display: block;
}

/* Hide duplicate search boxes on photo page */
.section.group .form-wrapper {
    display: none;
}

/* Center and style the left column elements */
.section.group .col.span_1_of_2:first-child {
    text-align: center;
}

/* Hide ad in left column */
.section.group #ad {
    display: none;
}

/* Make copyright/license column centered */
.section.group .col.span_1_of_2:last-child {
    text-align: center;
    max-width: 800px;
}

/* Center Facebook comments */
.fb-comments {
    margin: 2rem auto !important;
    display: block;
}

/* Improve EXIF heading */
.block-exif-ExifInfo h3 {
    text-align: center;
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    font-weight: 600;
}

/* Add Comment heading */
#AddComment_trigger h2,
#AddComment_trigger h3,
#AddComment_block h2,
#AddComment_block h3 {
    text-align: center;
    font-size: 1.3rem;
    margin: 1.5rem 0 1rem;
}

/* Fix header-info h1 to actually show the title */
.header-info .photo-h1 {
    display: block !important;
    visibility: visible !important;
}

/* Make sure title appears above image */
.w-full.max-w-7xl {
    text-align: center;
}

/* Center size selector - compact single line */
.block-core-PhotoSizes {
    text-align: center;
    margin: 0.5rem auto 0.25rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.block-core-PhotoSizes.giInfo {
    margin: 0.5rem auto 0.5rem;
    padding: 0.25rem 0;
}

.block-core-PhotoSizes select {
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    background: #333;
    color: #fff;
    border: 1px solid #555;
    font-size: 0.9rem;
    margin: 0 0.25rem;
    font-size: 0.9375rem;
}

/* Improve copyright paragraph styling */
.section.group p {
    margin: 1rem 0;
    line-height: 1.6;
}

.section.group p b {
    font-weight: 600;
}

/* ========================================================================================
 * ADMIN PAGE MODERNIZATION
 * ======================================================================================== */

/* Admin page container - convert table layout to flexbox */
#itemAdminForm, #siteAdminForm table {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    border-collapse: collapse !important;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Admin page table rows */
#itemAdminForm, #siteAdminForm table tr {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 1.5rem;
}

/* Admin page table cells */
#itemAdminForm, #siteAdminForm table td {
    display: block !important;
}

/* Sidebar column */
#gsSidebarCol {
    flex: 0 0 280px !important;
    min-width: 280px;
}

/* Main content column */
#itemAdminForm, #siteAdminForm table td:not(#gsSidebarCol) {
    flex: 1 !important;
    min-width: 0;
}

/* Sidebar styling */
#gsSidebar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none !important;
}

#gsSidebar .gbBlock {
    background: rgba(255, 255, 255, 0.95);
    margin: 0;
    padding: 1.25rem;
    border: none;
    border-bottom: 3px solid rgba(102, 126, 234, 0.3);
}

#gsSidebar .gbBlock:last-child {
    border-bottom: none;
}

#gsSidebar .gbBlock h2,
#gsSidebar .gbBlock h3 {
    color: #667eea;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #667eea;
}

/* Sidebar thumbnail */
#gsSidebar .gbBlock img {
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-bottom: 0.75rem;
}

/* Sidebar navigation links */
#gsSidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#gsSidebar ul li {
    margin: 0;
    padding: 0;
}

#gsSidebar ul li a {
    display: block;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    color: #333;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background: rgba(102, 126, 234, 0.05);
    font-weight: 500;
}

#gsSidebar ul li a:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Active menu item */
#gsSidebar ul li.active,
#gsSidebar ul li:has(+ li) {
    font-weight: 600;
}

#gsSidebar ul li:not(:has(a)) {
    display: block;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    color: white;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Main content area */
#gsContent {
    background: white;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb !important;
}

#gsContent h2,
#gsContent h3 {
    color: #667eea;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #667eea;
}

/* Admin forms and tables */
#gsContent table.gbDataTable {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#gsContent table.gbDataTable th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9375rem;
}

#gsContent table.gbDataTable td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

#gsContent table.gbDataTable tr:last-child td {
    border-bottom: none;
}

#gsContent table.gbDataTable tr:nth-child(even) {
    background: #f9fafb;
}

#gsContent table.gbDataTable tr:hover {
    background: #f3f4f6;
}

/* Admin form inputs */
#gsContent input[type="text"],
#gsContent input[type="password"],
#gsContent input[type="email"],
#gsContent textarea,
#gsContent select {
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 500px;
}

#gsContent input[type="text"]:focus,
#gsContent input[type="password"]:focus,
#gsContent input[type="email"]:focus,
#gsContent textarea:focus,
#gsContent select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Admin checkboxes and radios */
#gsContent input[type="checkbox"],
#gsContent input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

/* Admin labels */
#gsContent label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* Admin buttons in content area */
#gsContent input.inputTypeSubmit,
#gsContent input.inputTypeButton,
#gsContent button[type="submit"],
#gsContent .gbButton {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 0.875rem 2rem !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3) !important;
    margin: 0.5rem 0.5rem 0.5rem 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
}

#gsContent input.inputTypeSubmit:hover,
#gsContent input.inputTypeButton:hover,
#gsContent button[type="submit"]:hover,
#gsContent .gbButton:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4) !important;
}

/* Success/Error messages */
.giSuccess,
#gsContent .success {
    background: #d1fae5;
    border: 2px solid #059669;
    color: #065f46;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    font-weight: 500;
}

.giError,
#gsContent .error {
    background: #fee2e2;
    border: 2px solid #dc2626;
    color: #991b1b;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    font-weight: 500;
}

.giWarning,
#gsContent .warning {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    color: #92400e;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    font-weight: 500;
}

.giInfo,
#gsContent .info {
    background: #dbeafe;
    border: 2px solid #3b82f6;
    color: #1e40af;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    font-weight: 500;
}

/* Responsive admin layout */
@media (max-width: 768px) {
    #itemAdminForm, #siteAdminForm table,
    #itemAdminForm, #siteAdminForm table tr {
        flex-direction: column !important;
    }

    #gsSidebarCol {
        flex: 1 !important;
        min-width: 100% !important;
    }

    #itemAdminForm, #siteAdminForm table td:not(#gsSidebarCol) {
        min-width: 100% !important;
    }
}

/* ========================================================================================
 * NAVIGATION MODERNIZATION
 * ======================================================================================== */

/* Main navigation container */
.gbSystemLinks {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.75rem;
    padding: 0;
    margin: 1rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#menu1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

#menu1 li {
    margin: 0;
    padding: 0;
}

#menu1 li:not(:last-child) a {
    display: block;
    padding: 1rem 1.5rem;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
}

#menu1 li a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Search form in navigation */
#menu1 li:last-child {
    margin-left: auto;
    padding: 0.5rem 1rem;
}

#menu1 form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

#menu1 form input[type="text"] {
    padding: 0.5rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 0.875rem;
    width: 200px;
    transition: all 0.2s ease;
}

#menu1 form input[type="text"]:focus {
    outline: none;
    border-color: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
    width: 250px;
}

#menu1 form button {
    padding: 0.5rem 1.25rem;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

#menu1 form button:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive navigation */
@media (max-width: 768px) {
    #menu1 {
        flex-direction: column;
        gap: 0;
    }
    
    #menu1 li {
        width: 100%;
    }
    
    #menu1 li a {
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    #menu1 li:last-child {
        margin-left: 0;
        padding: 1rem;
    }
    
    #menu1 form {
        flex-direction: column;
        width: 100%;
    }
    
    #menu1 form input[type="text"],
    #menu1 form input[type="text"]:focus {
        width: 100%;
    }
    
    #menu1 form button {
        width: 100%;
    }
}

/* ========================================================================================
 * ALBUM THUMBNAIL INFO BLOCK FIX
 * ======================================================================================== */

/* Fix extremely tall info block under thumbnails */
.block-core-ItemInfo.giInfo {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0.5rem !important;
}

/* Compact view count */
.block-core-ItemInfo .viewCount.summary {
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0.25rem 0;
    padding: 0;
}

/* Fix rating stars to be compact */
.block-core-ItemInfo .summary-rating {
    margin: 0.25rem 0;
    padding: 0;
}

.block-core-ItemInfo .giRatingUI {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-wrap: wrap;
    height: auto !important;
    min-height: 0 !important;
}

/* Rating star images */
.giRatingUI img {
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    vertical-align: middle;
}

/* Rating average bar container */
.giRatingAverageContainer {
    width: 80px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin: 0.25rem 0;
}

.giRatingAverage {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

/* Rating votes text */
.giRatingVotes {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.2;
    margin: 0.25rem 0;
}

/* Hide the hidden rating values */
.giRatingHidden {
    display: none !important;
}

/* Compact the entire rating block */
.summary-rating .rating {
    display: block;
    line-height: 1;
}

/* Remove excessive spacing */
.block-core-ItemInfo div {
    margin: 0;
    padding: 0;
}

/* Ensure info block doesn't stretch */
.giInfo {
    display: block !important;
    position: relative !important;
}

/* ========================================================================================
 * ADDITIONAL UI FIXES
 * ======================================================================================== */

/* Album H1 - Better visibility especially on mobile */
.album_h1,
h1.album_h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0.5rem 0 !important;
    line-height: 1.2 !important;
}

@media (max-width: 768px) {
    .album_h1,
    h1.album_h1 {
        font-size: 1.5rem !important;
        color: #111827 !important;
        text-shadow: none !important;
    }
}

/* Album Description - Ensure it's visible */
.giDescription {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    display: block !important;
}

/* Comments Bubble - Larger and more readable */
.bubble {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.875rem !important;
    border-radius: 1.25rem !important;
    min-width: auto !important;
    height: auto !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.bubble a {
    color: white !important;
    text-decoration: none !important;
}

.bubble a:hover {
    text-decoration: underline !important;
}

.comments_bubble_text {
    margin-left: 0.25rem !important;
}

/* Search Block - More Compact */
.block-search-SearchBlock,
div.block-search-SearchBlock {
    padding: 0.75rem !important;
}

.block-search-SearchBlock .gbBlock,
.block-search-SearchBlock form {
    margin: 0 !important;
    padding: 0.5rem 0 !important;
}

.block-search-SearchBlock input[type="text"] {
    margin: 0.25rem 0 !important;
    padding: 0.5rem !important;
}

.block-search-SearchBlock input[type="checkbox"] {
    margin: 0.25rem 0.5rem 0.25rem 0 !important;
}

.block-search-SearchBlock label {
    margin: 0.25rem 0 !important;
    font-size: 0.875rem !important;
}

.block-search-SearchBlock input[type="submit"],
.block-search-SearchBlock button {
    margin: 0.5rem 0 0.25rem 0 !important;
    padding: 0.5rem 1.5rem !important;
}

/* Fix rating stars displaying vertically */
.giRatingUI {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
}

.giRatingUI img {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.giRatingUI .rating {
    display: inline-flex !important;
    flex-direction: row !important;
}

/* Grid alignment - Use CSS Grid with uniform heights */
div[id^="gsThumb"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 1.5rem !important;
    padding: 1rem !important;
}

@media (min-width: 640px) {
    div[id^="gsThumb"] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    div[id^="gsThumb"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Grid items - Ensure uniform layout */
.giAlbumCell,
.giItemCell {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* H3 titles - Fixed height with ellipsis for overflow */
.giAlbumCell h3,
.giItemCell h3 {
    min-height: 2.6em !important;
    max-height: 2.6em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.3 !important;
    margin: 0.5rem 0 !important;
}

/* Info block - Push to bottom and maintain compact size */
.giAlbumCell .giInfo,
.giItemCell .giInfo {
    margin-top: auto !important;
}


/* ========================================================================================
 * NAVIGATION AND INFO BLOCK FIXES
 * ======================================================================================== */

/* Anchor navigation to bottom on mobile */
.gbNavigator {
    position: relative !important;
}

@media (max-width: 768px) {
    .gbNavigator {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Further reduce ItemInfo block height - aggressive approach */
.block-core-ItemInfo.giInfo,
.giInfo.block-core-ItemInfo {
    max-height: 80px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.25rem !important;
    overflow: hidden !important;
    line-height: 1.1 !important;
}

.block-core-ItemInfo * {
    font-size: 0.75rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 0.125rem !important;
}

.block-core-ItemInfo .summary {
    display: inline !important;
    margin: 0 0.25rem !important;
}

.block-core-ItemInfo br {
    display: none !important;
}

/* Hide breadcrumb if empty */
.gbBreadCrumb:empty,
.gbBreadCrumb ul:empty {
    display: none !important;
}

.gbBreadCrumb {
    min-height: 0 !important;
    padding: 0 !important;
}

/* Hide system links in gsNavBar - redundant with hamburger menu, but keep breadcrumb */
#gsNavBar .gbSystemLinks {
    display: none !important;
}

/* Hide "MENU" text in hamburger button, keep only icon */
.slicknav_menu .slicknav_menutxt {
    display: none !important;
}

.slicknav_btn {
    padding: 0.438em 0.625em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.slicknav_menu .slicknav_icon {
    margin: 0 !important;
    float: none !important;
}

.slicknav_icon-bar {
    display: block;
    width: 1.125em;
    height: 0.125em;
    background-color: #fff;
    border-radius: 1px;
}

.slicknav_icon-bar + .slicknav_icon-bar {
    margin-top: 0.188em;
}

/* Style breadcrumb for better visibility */
#gsNavBar {
    padding: 0.5rem 1rem !important;
}

.gbBreadCrumb {
    min-height: 0 !important;
    padding: 0.5rem 0 !important;
}

/* Compact breadcrumb on mobile - modern minimal style */
@media (max-width: 768px) {
    #gsNavBar {
        padding: 2px 4px !important;
        min-height: 20px !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
        line-height: 20px !important;
    }

    /* Hide the actual menu list - slicknav creates its own button */
    #gsNavBar #menu1 {
        display: none !important;
    }

    .gbBreadCrumb {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0.75rem !important;
        line-height: 20px !important;
        min-height: 20px !important;
        height: auto !important;
        white-space: nowrap !important;
    }

    .gbBreadCrumb ul,
    .gbBreadCrumb li {
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        line-height: 20px !important;
    }

    #gsNavBar div.gbBreadCrumb a {
        padding: 0 4px !important;
        font-size: 0.75rem !important;
        font-weight: normal !important;
        white-space: nowrap !important;
        display: inline !important;
        line-height: 20px !important;
    }

    /* Ensure breadcrumb can wrap if needed, but stays compact */
    .breadcrumbs {
        display: block !important;
        line-height: 20px !important;
        white-space: normal !important;
    }
}

/* Center album overlay on thumbnails */
.album_overlay {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 80px !important;
}

/* Remove excessive spacing in photo page */
.w-full.max-w-7xl.mx-auto {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body #gsImageView {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#gsImageView.gbBlock {
    margin: 6px !important;
}

/* Rating stars - make clickable */
.giRatingUI[data-can-rate="1"] .rating-star-wrapper {
    cursor: pointer !important;
}

.rating-star-wrapper {
    display: inline-block;
}

/* Fix navigation buttons - remove pseudo-element arrows that cause double arrows */
#prev_big::before,
#prev_big::after,
#next_big::before,
#next_big::after {
    display: none !important;
    content: none !important;
}

/* Make navigation buttons smaller and less intrusive on mobile */
@media (max-width: 768px) {
    #prev_big,
    #next_big {
        padding: 0.75rem !important;
        opacity: 0.95 !important;
        display: flex !important;
        visibility: visible !important;
        position: relative !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
        border-radius: 9999px !important;
        flex-shrink: 0 !important;
    }

    #prev_big:active,
    #next_big:active {
        opacity: 1 !important;
        transform: scale(0.95) !important;
    }

    #prev_big svg,
    #next_big svg {
        width: 2rem !important;
        height: 2rem !important;
        color: #374151 !important;
    }

    /* Ensure navigation container is visible on mobile */
    .fixed.bottom-20,
    div.fixed.bottom-20 {
        display: flex !important;
        justify-content: space-between !important;
        visibility: visible !important;
        z-index: 9999 !important;
        position: fixed !important;
        bottom: 50% !important;
        transform: translateY(50%) !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 0.25rem !important;
        pointer-events: none !important;
        width: 100vw !important;
    }

    /* Override the centering wrapper inside nav container */
    .fixed.bottom-20 .max-w-7xl {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    .fixed.bottom-20 > *,
    .fixed.bottom-20 a {
        pointer-events: auto !important;
    }

    /* Prevent body overflow from hiding nav buttons */
    body, html, #gallery {
        overflow-x: visible !important;
    }

    #gallery {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure both nav buttons are always visible */
    #prev_big {
        left: 0 !important;
    }

    #next_big {
        right: 0 !important;
    }
}

/* Modernize album navigation */
.block-core-Navigator,
.gbNavigator {
    text-align: center !important;
    padding: 1rem !important;
    background-color: #ffffff !important;
}

.block-core-Navigator a,
.gbNavigator a {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    text-decoration: none !important;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.block-core-Navigator a:hover,
.gbNavigator a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Modernize breadcrumb */
.gbBreadCrumb {
    padding: 0.75rem 1rem !important;
    background: #f8f9fa;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breadcrumbs__item a {
    color: #667eea !important;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumbs__item a:hover {
    text-decoration: underline;
}

/* Fix search input visibility in hamburger menu */
#menu1 input[type="text"],
#searchCriteria,
input[name="g2_form[searchCriteria]"],
.gbSystemLinks input[type="text"] {
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    padding: 0.5rem !important;
    border-radius: 0.25rem !important;
    font-size: 14px !important;
    line-height: normal !important;
}

#menu1 button[type="submit"] {
    background: #667eea !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem;
    cursor: pointer;
}

#menu1 button[type="submit"]:hover {
    background: #764ba2 !important;
}

/* Compact navbar on very small mobile viewports */
@media (max-width: 415px) {
    #gsNavBar {
        padding: 1px 2px !important;
        min-height: 0 !important;
    }

    #gsNavBar div.gbBreadCrumb {
        padding: 1px 2px !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    #gsNavBar div.gbBreadCrumb a {
        padding: 2px 3px !important;
        font-size: 0.75rem !important;
        display: inline-block;
    }

    #gsNavBar div.gbSystemLinks {
        padding: 1px 2px !important;
        font-size: 0.75rem !important;
    }

    /* Ensure h1 doesn't get cropped */
    .photo-h1 {
        font-size: 0.9rem !important;
        padding: 2px 4px !important;
        margin: 2px 0 !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .header-info,
    .header-info .hi-col,
    .header-info .hi-col-2 {
        overflow: visible !important;
        max-width: 100% !important;
    }
}

/* Reduce excessive spacing on mobile */
@media (max-width: 768px) {
    .w-full.max-w-7xl {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0 !important;
    }

    .section.group {
        margin-top: 0.5rem !important;
        padding-top: 0 !important;
    }
}