/*
Theme Name: Blocksy Child (Ideas Zone)
Template: blocksy
Description: Master stylesheet. Version 5.5, with final Pinterest-style modal.
*/
/* --- 1. GLOBAL LAYOUT --- */
body { padding-top: 70px; }
body.admin-bar { padding-top: 102px; }
/* --- 2. MASONRY GRID --- */
.nail-art-grid { margin: 0 auto; }
.nail-art-grid::after { content: ""; display: block; clear: both; }
.nail-art-grid .grid-sizer, .nail-art-grid .nail-art-item { box-sizing: border-box; }
.nail-art-grid .grid-sizer, .nail-art-grid .nail-art-item { width: 20%; padding: 8px; float: left; }
@media (max-width: 768px) {
.nail-art-grid .grid-sizer, .nail-art-grid .nail-art-item { width: 50% !important; padding: 5px !important; }
}
/* --- 3. IDEA CARD & HOVER --- */
.idea-card { background: #fff; border-radius: 16px; overflow: hidden; position: relative; width: 100%; }
.idea-card img { max-width: 100%; height: auto; display: block; }
.nail-art-item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease-in-out; }
.nail-art-item:hover .nail-art-item-overlay { opacity: 1; }
.overlay-button { padding: 10px 20px; border-radius: 25px; border: none; font-weight: bold; color: #111; background-color: #fff; cursor: pointer; text-decoration: none; }
.overlay-button.park-it-button { background-color: #e60023; color: #fff; }
.idea-card-content { padding: 10px 15px 15px; }
/* --- 4. IMAGE SIZING FIXES --- */
.page-template-page-view-idea .single-nail-art-featured-image img { max-width: 550px; width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 16px; }
#image-preview-container { display: flex; gap: 10px; margin-top: 10px; padding: 10px; border: 1px dashed #ccc; border-radius: 5px; min-height: 120px; }
#image-preview-container .image-preview-item { width: 100px; height: 100px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; position: relative; }
#image-preview-container .image-preview-item img { width: 100%; height: 100%; object-fit: cover; }
#image-preview-container .delete-preview-btn { position: absolute; top: 5px; right: 5px; z-index: 10; background: rgba(0,0,0,0.7); color: white !important; border: 2px solid white; border-radius: 50%; width: 24px; height: 24px; padding: 0; font-size: 14px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#image-preview-container .delete-preview-btn:hover { background: #e60023; }
/* =================================================================== / ==  5. PINTEREST-STYLE EDIT MODAL                              == / =================================================================== */
.edit-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.edit-modal-content { background: #fff; padding: 0; border-radius: 16px; width: 100%; max-width: 800px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); max-height: 90vh; display: flex; flex-direction: column; }
.edit-modal-header { padding: 15px 25px; border-bottom: 1px solid #eee; }
.edit-modal-header h3 { margin: 0; font-size: 1.6em; text-align: center; }
.edit-modal-close { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; color: #aaa; background: none; border: none; cursor: pointer; }
.edit-modal-body { padding: 25px; overflow-y: auto; }
.edit-modal-layout { display: flex; gap: 25px; }
.edit-modal-form-fields { flex: 2; display: flex; flex-direction: column; gap: 15px; }
.edit-modal-image-preview { flex: 1; }
.edit-modal-image-preview img { width: 100%; height: auto; border-radius: 8px; }
.form-field label { display: block; font-weight: bold; margin-bottom: 0.5em; font-size: 0.9em; }
.form-field input[type="text"], .form-field input[type="url"], .form-field textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1em; }
.categories-checkbox-group { border: 1px solid #ddd; border-radius: 8px; padding: 10px; max-height: 120px; overflow-y: auto; }
.categories-checkbox-group label { display: block; margin-bottom: 8px; font-weight: normal; }
.form-field-toggle { flex-direction: row; align-items: center; justify-content: space-between; }
.switch { position: relative; display: inline-block; width: 51px; height: 31px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 25px; width: 25px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #0073aa; }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.edit-modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-top: 1px solid #eee; }
.button-link.cancel-edit-button { background-color: #efefef; color: #111; padding: 10px 20px; border-radius: 25px; }
.save-changes-button { background: #e60023; color: #fff; border: none; padding: 10px 25px; font-size: 1em; font-weight: bold; border-radius: 25px; cursor: pointer; }
.save-changes-button:disabled { background-color: #ccc; cursor: not-allowed; }
.spinner-container { text-align: center; padding: 40px; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #e60023; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* =================================================================== / ==  7. SUBMIT PAGE - CREATE FIRST ZONE STYLES                  == / =================================================================== */
.create-first-zone-container {
max-width: 600px;
margin: 20px auto;
padding: 30px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
}
#create-zone-on-submit-page-form input[type="text"] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 15px;
}
#create-zone-on-submit-page-form button {
background-color: #e60023;
color: #fff;
border: none;
padding: 12px 25px;
font-size: 1em;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
}
#create-zone-feedback {
margin-top: 15px;
font-weight: bold;
}
/* =================================================================== / ==   FINAL HEADER & LOGGED-OUT FIXES                           == / =================================================================== */
.header-auth-buttons {
display: flex;
align-items: center;
gap: 10px;
}
.auth-button {
padding: 8px 20px;
font-weight: bold;
border-radius: 25px;
text-decoration: none;
transition: opacity 0.2s ease;
white-space: nowrap;
}
.auth-button:hover {
opacity: 0.85;
}
.auth-button.login-button {
background-color: #efefef;
color: #111;
}
.auth-button.register-button {
background-color: #e60023;
color: #fff;
}
/* =================================================================== / ==   FINAL HEADER & LOGGED-OUT FIXES                           == / =================================================================== */
.header-auth-buttons {
display: flex;
align-items: center;
gap: 10px;
}
.auth-button {
padding: 8px 20px;
font-weight: bold;
border-radius: 25px;
text-decoration: none;
transition: opacity 0.2s ease;
white-space: nowrap;
}
.auth-button:hover {
opacity: 0.85;
}
.auth-button.login-button {
background-color: #efefef;
color: #111;
}
.auth-button.register-button {
background-color: #e60023;
color: #fff;
}
/* =================================================================== / ==   5. My Zones/Boards Page (Pinterest-Style Grid)            == / =================================================================== */
/* This creates the main responsive grid for the cards */
.zones-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
.zone-board-card-wrapper {
position: relative; /* Needed for the status button */
}
/* Styles the link that makes the whole card clickable / Lifts the card on hover */
}
/* This creates the image preview grid (the magic part) / Main image is twice as wide / Two rows for smaller images */
gap: 4px;
height: 200px;
background-color: #f0f0f0;
border-radius: 16px;
overflow: hidden;
}
/* Makes the first image fill the entire left side */
.zone-image-previews .preview-image:first-child {
grid-row: 1 / 3;
}
/* If there's only one image, make it fill the whole box */
.zone-image-previews.preview-count-1 .preview-image:first-child {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* This ensures the images fill their boxes without distortion */
.zone-image-previews .preview-image {
background-size: cover;
background-position: center;
}
/* The placeholder for empty zones */
.preview-image-placeholder {
width: 100%;
height: 100%;
grid-column: 1 / 3;
grid-row: 1 / 3;
background-color: #e9e9e9;
}
/* Styles the text details below the images */
.zone-board-details {
padding-top: 15px;
}
.zone-board-title {
font-size: 1.4em;
margin: 0 0 5px 0;
color: #111;
}
.zone-board-count {
margin: 0;
color: #555;
}
/* Styles the Public/Private status button */
.zone-actions {
position: absolute;
top: 10px;
right: 10px;
}
.privacy-toggle-button {
background: rgba(0,0,0,0.6);
color: white;
border: none;
border-radius: 20px;
padding: 5px 12px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
}
.privacy-status-icon {
font-size: 14px;
}
/* --- SEO Fix: Hide Uncrawlable Link from Ultimate Member --- */
a.um-modal-close[data-action="um_remove_modal"] {
display: none !important;
}
/* =================================================================== / ==   ENGAGEMENT CENTER (NOTIFICATIONS PAGE) STYLES             == / =================================================================== */
/* --- 1. The Main Two-Panel Layout --- / Allows stacking on mobile if needed / Space between the two panels */
}
.notification-list-panel {
flex: 1; /* Defines the width ratio / Prevents it from getting too squished */
max-width: 400px;
}
.notification-detail-panel {
flex: 2; /* Makes the right panel twice as wide as the left */
}
/* --- 2. Styling the Notification List --- */
.notification-list-page {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.notification-item a {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 15px;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease;
cursor: pointer; /* Change cursor to indicate it's clickable / A light blue to show selection */
}
.notification-item:last-child a {
border-bottom: none;
}
.notification-item-avatar img {
border-radius: 50%;
}
.notification-item-content {
color: #333;
}
/* --- 3. Styling the Placeholder in the Right Panel --- */
.no-notification-selected {
padding: 60px 30px;
text-align: center;
background-color: #f9f9f9;
border: 1px dashed #ddd;
border-radius: 8px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.no-notification-selected .panel-icon {
font-size: 3em;
display: block;
margin-bottom: 20px;
}
.no-notification-selected h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.5em;
color: #111;
}
.no-notification-selected p {
margin: 0;
color: #555;
max-width: 350px;
}
/* =================================================================== / ==   ENGAGEMENT CENTER DETAIL PANEL STYLES                     == / =================================================================== */
/* This styles the container for the loaded content */
.idea-detail-view-container {
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
}
/* Styles the top part with the image and title */
.idea-preview-card {
padding: 20px;
border-bottom: 1px solid #f0f0f0;
}
/* --- THE IMAGE FIX IS HERE --- / Set a maximum width for the image container / Center the image and add space below it / Ensures the image respects the rounded corners / Make the image fill its container / Maintain aspect ratio / Removes extra space below the image / --- END IMAGE FIX --- */
.idea-preview-title {
text-align: center;
font-size: 1.6em;
margin-bottom: 15px;
}
/* This targets the stats display specifically inside this panel / Center the stats icons */
border-top: none;
border-bottom: none;
padding: 0;
}
/* Styles the comments area below the preview / Add a scrollbar if there are many comments */
overflow-y: auto;
}
.idea-comment-item {
display: flex;
gap: 10px;
padding: 15px 0;
border-top: 1px solid #f0f0f0;
}
.idea-comment-item:first-child {
border-top: none;
padding-top: 0;
}
.comment-author-avatar img {
border-radius: 50%;
}
.comment-author-name {
font-weight: bold;
}
.comment-text {
margin-top: 3px;
line-height: 1.5;
}
/* =================================================================== / ==   CREATOR DASHBOARD ANALYTICS STYLES                        == / =================================================================== */
.creator-dashboard .section-title {
margin-top: 40px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/* --- Summary Stats Grid --- */
.analytics-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.summary-stat-box {
background: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.summary-stat-box .stat-number {
font-size: 2.5em;
font-weight: bold;
display: block;
color: #111;
}
.summary-stat-box .stat-label {
font-size: 0.9em;
color: #555;
margin-top: 5px;
display: block;
}
/* --- Top Performing Ideas List --- / Pinterest Red */
}
.top-posts-list .post-views {
font-size: 0.9em;
font-weight: normal;
color: #555;
background-color: #f0f0f0;
padding: 3px 8px;
border-radius: 12px;
}
/* =================================================================== / ==   SUBMISSION FORM - MULTI-COLUMN CATEGORY CHECKBOXES        == / =================================================================== */
/* This targets the container that holds all the checkboxes / This is the magic part: it creates as many 250px columns as will fit / This creates a small space between the rows and columns */
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
}
/* This styles each individual checkbox and its label / Space between the checkbox and the text / A light blue hover effect */
border-color: #b3d4fc;
}
/* =================================================================== / ==   TEMU AFFILIATE PRODUCT SHOWCASE BOX                         == / =================================================================== */
.temu-product-box {
display: flex;
flex-wrap: wrap; /* Allows stacking on mobile */
gap: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin: 30px 0;
align-items: center;
}
.temu-product-box .product-image {
flex-basis: 200px; /* Set a base width for the image / Prevent the image from shrinking */
}
.temu-product-box .product-image img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
border: 1px solid #eee;
}
.temu-product-box .product-details {
flex-basis: 0;
flex-grow: 1; /* Allow details to fill remaining space */
}
.temu-product-box .product-title {
margin-top: 0;
margin-bottom: 5px;
font-size: 1.4em;
}
.temu-product-box .product-price {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.8em;
font-weight: bold;
color: #e60023; /* A red to grab attention */
}
.temu-product-box .product-tagline {
font-style: italic;
color: #555;
margin-bottom: 15px;
}
.temu-product-box .product-cta-button {
display: inline-block;
background-color: #ff6a00; /* Temu's signature orange */
color: #fff;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
transition: transform 0.2s ease;
}
.temu-product-box .product-cta-button:hover {
transform: scale(1.05);
}
/* Responsive styles for mobile / Stack image and text vertically */
text-align: center;
}
}
/* =================================================================== / ==   MULTI-PRODUCT AFFILIATE GRID                              == / =================================================================== */
/* This is the container that will hold multiple product boxes / This creates a responsive grid with 2 columns on most screens / The space between the product boxes */
margin-top: 30px;
margin-bottom: 30px;
}
/* On smaller mobile screens, stack the products in a single column */
@media (max-width: 768px) {
.temu-product-grid {
grid-template-columns: 1fr;
}
}
/* =================================================================== / ==   TEMU PRODUCT SLIDER STYLING                               == / =================================================================== */
.temu-product-slider .temu-product-slide {
padding: 0 10px; /* Creates spacing between the slides */
}
/* Style the product box specifically within a slide / Make boxes in a row equal height */
}
.temu-product-slider .product-details {
display: flex;
flex-direction: column;
flex-grow: 1; /* Allows the details to fill space / Pushes button to the bottom */
}
.temu-product-slider .product-title {
font-size: 1em; /* Slightly smaller for the slider view */
}
.temu-product-slider .product-price {
font-size: 1.4em;
}
/* Style the slider arrows */
.slick-prev, .slick-next {
background: #fff !important;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
width: 40px !important;
height: 40px !important;
}
.slick-prev:before, .slick-next:before {
color: #111 !important;
font-size: 24px !important;
}
/* =================================================================== / ==   HOME ZONE POST SLIDER                                     == / =================================================================== */
.home-zone-post-slider .post-slide {
padding: 0 8px;
position: relative;
}
.home-zone-post-slider .post-slide img {
border-radius: 8px;
width: 100%;
height: auto;
}
.home-zone-post-slider .post-slide-title {
position: absolute;
bottom: 0;
left: 8px; /* Match padding / Match padding */
margin: 0;
padding: 20px 10px 10px;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
border-radius: 0 0 8px 8px;
}
.home-zone-post-slider .post-slide-title span {
color: #fff;
font-size: 0.9em;
text-decoration: none;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* =================================================================== / ==   HOME ZONE SLIDER STYLES (V2 - HIGH-TECH BUTTON)           == / =================================================================== */
.home-zone-post-slider .post-slide {
padding: 0 8px;
position: relative;
overflow: hidden; /* Important for the overlay effect */
border-radius: 8px;
}
.home-zone-post-slider .post-slide-link {
display: block;
position: relative;
}
.home-zone-post-slider .post-slide img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease; /* Adds a subtle zoom on hover */
}
/* The dark overlay that appears on hover / Hidden by default */
transition: opacity 0.3s ease;
}
/* The button itself / Start slightly lower */
transition: transform 0.3s ease;
}
/* The hover effect: Fade in the overlay, zoom the image, pop up the button */
.home-zone-post-slider .post-slide:hover .post-slide-overlay {
opacity: 1;
}
.home-zone-post-slider .post-slide:hover .view-idea-button {
transform: translateY(0);
}
.home-zone-post-slider .post-slide:hover img {
transform: scale(1.05);
}
/* =================================================================== / ==   FLOATING FOOTER BAR                                       == / =================================================================== */
.floating-footer-bar {
position: fixed;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: flex-end;
pointer-events: none;
z-index: 1000;
}
.last-viewed-container {
pointer-events: auto;
background: rgba(22, 22, 22, 0.8);
color: #fff;
padding: 8px 15px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 10px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.last-viewed-container .label {
font-weight: bold;
font-size: 0.9em;
}
.last-viewed-items a {
color: #f0f0f0;
font-size: 0.8em;
margin: 0 5px;
text-decoration: underline;
opacity: 0.8;
transition: opacity 0.2s;
}
.last-viewed-items a:hover {
opacity: 1;
}
.help-menu-container {
position: relative;
pointer-events: auto;
}
.help-menu-button {
width: 50px; height: 50px;
border-radius: 50%;
background: rgba(22, 22, 22, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
font-size: 24px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.help-menu-popover {
position: absolute;
bottom: 60px;
right: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
width: 200px;
overflow: hidden;
}
.help-menu-popover a {
display: block;
padding: 12px 15px;
color: #333;
text-decoration: none;
}
.help-menu-popover a:hover {
background: #f0f0f0;
}
/* =================================================================== / ==   VIEW IDEA PAGE & FOOTER BAR (TOP-NOTCH UPGRADE V2)        == / =================================================================== */
/* --- 1. Fix "View Idea" Page Layout (Pinterest Style) --- / Flex properties for responsiveness / This is the key to making the image smaller / Allow this to take up more space */
}
/* --- 2. Fix Help Menu Popover Text --- */
.help-menu-popover a {
color: #111 !important;
}
.help-menu-popover a:hover {
background-color: #f0f0f0;
}
/* --- 3. Style the "Last Viewed" Image Thumbnails --- */
.last-viewed-container .label {
font-weight: bold;
font-size: 0.9em;
}
.last-viewed-items {
display: flex;
align-items: center;
gap: 8px;
}
.last-viewed-item {
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
transition: all 0.2s ease-in-out;
}
.last-viewed-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- 4. Add the Pinterest-Style Hover Effect --- / 4x size is too big, 3.5 is better / Change to a rounded rectangle on hover / Double the width / Double the height */
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* =================================================================== / ==   VIEW IDEA PAGE PINTEREST-STYLE LAYOUT FIX                 == / =================================================================== */
/* Creates the main two-column flex container / Allows columns to stack on small screens / The space between the image and the details */
}
/* Defines the image column (left side) / Allows it to grow, shrink, with a base size / <<< THIS CONTROLS THE IMAGE SIZE / Centers it if the screen is very wide / Rounded corners */
}
/* Defines the details column (right side) / Takes up the remaining space */
}
/* Styles the action buttons at the top of the right column / Allows reaction buttons to fill space */
}
/* =================================================================== / ==   REACTION BUTTONS OVERHAUL (V4 - BIG & CLICKABLE)          == / =================================================================== */
.pin-actions .reaction-buttons-container {
display: flex;
gap: 10px; /* Space between the buttons */
}
/* This is the main style for each button / Make all buttons share the space equally / Pill shape */
cursor: pointer;
transition: all 0.2s ease;
font-size: 1.1em;
}
/* Add a subtle lift effect on hover */
.pin-actions .reaction-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Style for the currently selected button / Light pink for active state / Red border for active state */
color: #e60023;
font-weight: bold;
}
/* Loading state to prevent rapid clicks */
.pin-actions .reaction-button.loading {
opacity: 0.6;
cursor: not-allowed;
}
.pin-actions .reaction-icon {
font-size: 1.3em; /* Make the emoji icon bigger */
}
/* =================================================================== / ==   LAST VIEWED HOVER EFFECT FIX (AUGUST 2025)                == / =================================================================== */
/* This rule reduces the hover size to a more reasonable scale / Reduced from 3.5 to 2.0 / A softer corner radius on hover / A more reasonable expanded width / A more reasonable expanded height */
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* =================================================================== / ==   FLOATING FOOTER BAR POSITIONING FIX (AUGUST 2025)         == / =================================================================== */
/* This is the default style for the entire bar / Default position for desktop / Sits just below the mobile menu */
display: flex;
align-items: center;
gap: 15px;
}
/* On mobile screens, LIFT the bar to sit above the 60px mobile menu / 60px for the menu + 20px of space */
}
}
/* =================================================================== / ==   OFF-CANVAS MENU SCROLLING FIX                             == / =================================================================== */
.off-canvas-panel {
display: flex; /* Use flexbox for better internal layout */
flex-direction: column;
height: 100%;
}
.off-canvas-panel .off-canvas-main-list {
flex-grow: 1; /* Allows the menu list to fill available space / THIS IS THE FIX: Adds a scrollbar when needed */
padding: 15px;
}
/* =================================================================== / ==   OFF-CANVAS MENU SCROLLING FIX (V2 - DEFINITIVE)           == / =================================================================== */
/* This targets the main panel and makes it a flex container / Use viewport height for robustness */
}
/* This targets the header within the panel / Prevents the header from shrinking */
}
/* This is the most important part. It targets the menu list. / Allows the list to fill all remaining vertical space / THIS IS THE FIX: Forces the scrollbar / Improves scrolling on iOS devices / Ensures it has a height to overflow from */
}


/* =================================================================== */
/* ==      Ideas Zone - Master Stylesheet (Refactored V4)           == */
/* ==   This version is specifically built for the Blocksy theme,   == */
/* ==   includes the HYPER-SPECIFIC mobile fix, and is organized    == */
/* ==   for long-term maintainability.                              == */
/* =================================================================== */


/* =================================================================== */
/* ==  1. Z-INDEX HIERARCHY (For Reference)                         == */
/* =================================================================== */
/*
    100001 - Panels & Modals (Visible Layer)
    100000 - Overlays (Darkened Background)
    1000   - Main Sticky Header
    999    - Mobile Headers & Bars
    99     - Sticky Dashboard Tabs
*/


/* =================================================================== */
/* ==  2. GLOBAL RESETS & LAYOUT                                    == */
/* =================================================================== */


/* --- Hides the default theme header and navigation completely --- */
/* This is now handled by a filter in your functions.php. */
/* We leave this comment for documentation purposes. */


/* --- Adds top padding to the body to make space for our custom header --- */
body {
    padding-top: 70px;
}
body.admin-bar {
    padding-top: 102px !important; /* 70px header + 32px admin bar */
}


/* =================================================================== */
/* ==  3. CORE LAYOUT COMPONENTS                                    == */
/* =================================================================== */


/* --- Main Fused Header (Desktop) --- */
#fused-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    height: 70px;
}
body.admin-bar #fused-header {
    top: 32px;
}
.fused-header-container {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 15px; height: 100%;
}
.fused-header-left { display: flex; align-items: center; gap: 15px; }
#fused-header .custom-logo { height: 32px !important; width: auto !important; }
.fused-header-center { flex-grow: 1; padding: 0 20px; }
.fused-header-right { display: flex; align-items: center; }


/* --- Mobile Headers & Bars (Hidden on Desktop by default) --- */
#mobile-header,
.mobile-bottom-bar {
    display: none;
}


/* --- Off-Canvas Menu Panel & Overlay --- */
#off-canvas-overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100000;
}
.off-canvas-panel {
    display: none; position: fixed; top: 0; left: 0; transform: translateX(-100%);
    width: 300px; height: 100%; background: #fff; z-index: 100001;
    box-shadow: 4px 0px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease-in-out;
}
body.off-canvas-menu-active #off-canvas-overlay { display: block; }
body.off-canvas-menu-active .off-canvas-panel { display: block; transform: translateX(0); }
.off-canvas-header { display: flex; justify-content: flex-end; padding: 15px 20px; border-bottom: 1px solid #eee; }
#off-canvas-menu-close { font-size: 32px; color: #555; background: none; border: none; cursor: pointer; }
.off-canvas-panel .off-canvas-main-list { list-style: none; padding: 15px; margin: 0; }
.hamburger-menu span { display: block; width: 20px; height: 2px; background-color: #111; margin: 2px auto; border-radius: 1px; }


/* --- Dashboard Tabs --- */
.dashboard-tabs {
    display: flex; justify-content: center; border-bottom: 1px solid #ddd;
    margin-bottom: 30px; background: #ffffff; z-index: 99;
    position: -webkit-sticky; position: sticky; top: 70px;
}
body.admin-bar .dashboard-tabs {
    top: 102px;
}


/* =================================================================== */
/* ==  4. REUSABLE COMPONENTS (Buttons, Cards, Modals, etc.)        == */
/* =================================================================== */


/* --- Buttons --- */
.fused-header-button, .auth-button {
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: background-color 0.2s;
    border: none; cursor: pointer;
}
.fused-header-button { width: 48px; height: 48px; border-radius: 50%; font-size: 18px; color: #111; }
.auth-button { padding: 10px 20px; font-weight: bold; border-radius: 25px; }
.fused-header-button.create-icon, .auth-button.register-button { background-color: #e60023; color: #fff; }
.fused-header-button.message-icon, .fused-header-button.notification-icon, .fused-header-button.profile-icon, .auth-button.login-button { background-color: #efefef; color: #111; }
.fused-header-button:hover, .auth-button:hover { opacity: 0.85; }
.button-link { display: inline-block; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-weight: bold; font-size: 14px; text-align: center; transition: opacity 0.2s; }
.button-link:hover { opacity: 0.8; }
.button-link.edit-button { background-color: #333; color: #fff; }
.button-link.delete-button { background-color: #e60023; color: #fff; }


/* --- Search Forms --- */
.visual-search-form { display: flex; width: 100%; max-width: 800px; margin: 0 auto; background-color: #efefef; border-radius: 30px; }
.visual-search-form .search-field { flex-grow: 1; border: none; background: transparent; padding: 15px 25px; font-size: 1em; outline: none; color: #333; }
.visual-search-form .search-submit { border: none; background-color: #e60023; color: #fff; padding: 0 25px; font-size: 1.2em; border-radius: 0 30px 30px 0; cursor: pointer; }


/* --- Grids & Cards --- */
.nail-art-grid { margin: 0 auto; }
.nail-art-item { width: 20%; padding: 5px; box-sizing: border-box; } /* Desktop: 5 columns */
.idea-card { background-color: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.02); position: relative; width: 100%; }
.idea-card img { max-width: 100%; height: auto; display: block; }
.idea-card-content { padding: 10px 15px 15px; }
.idea-card-title { font-size: 1em; margin: 0; }
.idea-card-title a { text-decoration: none; color: #111; }


/* --- Modals (Generic) --- */
.modal-overlay, .stats-modal-overlay, .edit-modal-overlay, .park-it-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); z-index: 100000; display: flex;
    align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.modal-content, .stats-modal-content, .edit-modal-content, .park-it-modal-content {
    background: #fff; padding: 0; border-radius: 16px; width: 100%;
    max-width: 500px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative;
    max-height: 90vh; display: flex; flex-direction: column; z-index: 100001;
}
.modal-close, .stats-modal-close, .edit-modal-close, .park-it-modal-close {
    position: absolute; top: 10px; right: 15px; font-size: 28px;
    font-weight: bold; color: #aaa; background: none; border: none; cursor: pointer;
}


/* =================================================================== */
/* ==  5. PAGE-SPECIFIC & COMPLEX COMPONENT STYLES                  == */
/* =================================================================== */


/* --- Single Idea Page --- */
.page-template-page-view-idea .nail-art-single-layout,
.single-nail_art_idea .nail-art-single-layout {
    display: flex; flex-direction: row; gap: 40px;
}
.page-template-page-view-idea .nail-art-main-content,
.single-nail_art_idea .nail-art-main-content {
    flex: 2;
}
.page-template-page-view-idea .nail-art-sidebar-content,
.single-nail_art_idea .nail-art-sidebar-content {
    flex: 1; min-width: 320px;
}
.single-nail-art-featured-image img { width: 100%; height: auto; display: block; border-radius: 16px; }
.sidebar-widget { margin-bottom: 25px; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f9f9f9; }
.sidebar-widget .widget-title { margin-top: 0; margin-bottom: 15px; font-size: 1.2em; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; }


/* --- Contest Page Specifics --- */
.top-idea-item .top-idea-rank {
    position: absolute; top: 15px; left: 15px; z-index: 10;
    background-color: rgba(0, 0, 0, 0.7); color: #fff;
    font-weight: bold; font-size: 24px; width: 44px; height: 44px;
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; border: 2px solid #fff;
}
.top-idea-item:hover .top-idea-vote-area { opacity: 1; }
.top-idea-vote-area { opacity: 0; transition: opacity 0.3s ease; position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; box-sizing: border-box; text-align: center; }


/* =================================================================== */
/* ==  6. CONSOLIDATED MOBILE STYLES (max-width: 768px)             == */
/* =================================================================== */


@media (max-width: 768px) {


    /* --- Layout & Header Swapping --- */
    body {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    body.admin-bar {
        padding-top: 106px !important;
    }
    #fused-header {
        display: none !important; /* Hide desktop header */
    }
    #mobile-header {
        display: flex; /* Show mobile top header */
        position: fixed; top: 0; left: 0;
        width: 100%; height: 60px;
        background-color: #fff; z-index: 999;
        align-items: center; justify-content: flex-end;
        padding: 0 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }
    .mobile-bottom-bar {
        display: flex; /* Show mobile bottom bar */
        position: fixed; bottom: 0; left: 0;
        width: 100%; height: 60px;
        background-color: #fff; z-index: 999;
        border-top: 1px solid #e0e0e0;
        align-items: center; justify-content: space-around;
    }
    .mobile-bottom-bar-menu { display: flex; justify-content: space-around; height: 100%; width: 100%; list-style: none; margin: 0; padding: 0; }
    .mobile-bottom-bar-menu a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: #555; font-size: 10px; }
    .mobile-bottom-bar-menu .icon { font-size: 22px; }


    /* --- Page-Specific Layouts on Mobile --- */
    .page-template-page-view-idea .nail-art-single-layout,
    .single-nail_art_idea .nail-art-single-layout {
        flex-direction: column;
    }
    .dashboard-tabs {
        top: 60px;
    }
    body.admin-bar .dashboard-tabs {
        top: 106px;
    }


    /* --- THE HYPER-SPECIFIC TWO-COLUMN MOBILE GRID FIX --- */
    /*
     * This rule ONLY targets the grid on the Home Zone page.
     * It will NOT affect the grid on the Dashboard or any other page.
    */
    .page-template-page-home-zone .nail-art-grid .nail-art-item {
        width: 50% !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        margin-bottom: 0 !important;
    }
}


/* --- 3. MOBILE 2-COLUMN GRID FIX --- */
@media (max-width: 768px) {
    /* On mobile, we change the same container to have only 2 columns. */
    .page-template-page-home-zone .nail-art-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* =================================================================== */
/* ==   COOPERATIVE FIX for Masonry JS Layout (July 23)             == */
/* /* =================================================================== */

/* =================================================================== */
/* ==     NAIL ART MASONRY GRID STYLES (FINAL SIZER VERSION)      == */
/* =================================================================== */

/* This rule is essential for Masonry to work with percentages */
.nail-art-grid .grid-sizer,
.nail-art-grid .nail-art-item {
    box-sizing: border-box; 
}

/* --- 1. Desktop Grid (5 Columns) --- */
.nail-art-grid .grid-sizer {
    width: 20%;
}

.nail-art-grid .nail-art-item {
    width: 20%;
    padding: 8px; /* This creates the space between items */
}

/* --- 2. Mobile Grid (2 Columns) --- */
@media (max-width: 768px) {
  .nail-art-grid .grid-sizer {
    width: 50%;
  }
  .nail-art-grid .nail-art-item {
    width: 50%;
    padding: 5px; /* Adjust padding for mobile */
  }
}

/* =================================================================== */
/* ==   FINAL LAYOUT & HEADER FIXES (July 23)                       == */
/* =================================================================== */

/* --- 1. DESKTOP HEADER ALIGNMENT FIX --- */
/* This rule uses high specificity to force the header icons into a row. */
header#fused-header .fused-header-right .header-user-icons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* --- 2. DESKTOP HAMBURGER STYLE FIX --- */
/* This styles the hamburger button itself */
.fused-header-button.hamburger-menu {
    width: 48px;
    height: 48px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
    padding: 0;
}
.fused-header-button.hamburger-menu:hover {
    background-color: #e0e0e0 !important;
}
/* This styles the three little lines inside the button */
.fused-header-button.hamburger-menu span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #111;
    margin: 2px auto;
    border-radius: 1px;
}

/* --- 3. MOBILE GRID STABILITY FIX --- */
/* This uses high specificity to override the theme and ensure
   the 2-column layout on mobile is permanent. */
@media (max-width: 768px) {
  .page-template-page-home-zone .nail-art-grid .grid-sizer {
    width: 50% !important;
  }
  .page-template-page-home-zone .nail-art-grid .nail-art-item {
    width: 50% !important;
    padding: 5px !important;
  }
}

/* =================================================================== */
/* ==   SINGLE IDEA PAGE SIDEBAR & BUTTONS FIX (July 23)          == */
/* =================================================================== */

/* --- 1. Style the Reaction Buttons --- */
.sidebar-widget .reaction-buttons-container {
    display: flex;
    gap: 10px; /* Space between the buttons */
}
.sidebar-widget .reaction-button {
    flex: 1; /* Make all buttons share the space equally */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #ddd;
    background-color: #f0f0f0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sidebar-widget .reaction-button:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}
.sidebar-widget .reaction-button.active {
    background-color: #ffe5ea; /* Light pink for active state */
    border-color: #e60023;   /* Red border for active state */
    color: #e60023;
    font-weight: bold;
}
.sidebar-widget .reaction-icon {
    font-size: 1.2em;
}

/* --- 2. Style the "Park It" Button --- */
.sidebar-widget .park-it-widget .button.park-it-trigger-button {
    display: block; /* Make it a block to fill the width */
    width: 100%;
    padding: 12px 20px;
    background-color: #e60023; /* Pinterest Red */
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.sidebar-widget .park-it-widget .button.park-it-trigger-button:hover {
    background-color: #ad001a; /* Darker red on hover */
}
.sidebar-widget .park-it-widget .button.park-it-trigger-button .fas {
    margin-right: 8px; /* Space between the icon and text */
}

/* --- 3. Style the Login Prompts --- */
.sidebar-widget .park-it-login-prompt,
.sidebar-widget .reaction-login-prompt {
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
}

/* =================================================================== */
/* ==   SINGLE IDEA PAGE BUTTON POLISH (July 23)                  == */
/* =================================================================== */

/* --- 1. Style the "View Profile" Button --- */
/* This rule targets the button inside the author box */
.idea-author-box .author-follow-button .button {
    padding: 8px 18px;
    background-color: #efefef; /* Our standard light grey */
    color: #333;               /* Dark text */
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 8px;        /* A gentle curve */
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.idea-author-box .author-follow-button .button:hover {
    background-color: #ddd;    /* Darken on hover */
    color: #111;
}

/* --- 2. Style the "Park It" Button --- */
/* This rule makes the Park It button look like the reactions */
.sidebar-widget .park-it-widget .button.park-it-trigger-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-color: #e60023; /* Pinterest Red */
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;      /* Pill shape */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 1em;          /* Ensure font size is consistent */
}
.sidebar-widget .park-it-widget .button.park-it-trigger-button:hover {
    background-color: #ad001a; /* Darker red on hover */
}
.sidebar-widget .park-it-widget .button.park-it-trigger-button .fas {
    margin-right: 8px; /* Space between icon and text */
}

/* =================================================================== */
/* ==   UNIFIED DASHBOARD TABS STYLING (July 23)                  == */
/* =================================================================== */

/* The container for the tab buttons */
.dashboard-tabs {
    display: flex;
    justify-content: center; /* Center the tabs horizontally */
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}

/* Each individual tab button */
.dashboard-tab-link {
    padding: 15px 30px;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1em;
    font-weight: bold;
    color: #555;
    position: relative;
    transition: color 0.2s ease;
}
.dashboard-tab-link:hover {
    color: #111;
}

/* The style for the currently active tab */
.dashboard-tab-link.active {
    color: #111;
}

/* The little underline for the active tab */
.dashboard-tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Sits on top of the container's border */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #111;
}

/* =================================================================== */
/* ==   DASHBOARD MANAGEMENT GRID STYLING (July 23)               == */
/* =================================================================== */

/* This creates a responsive grid for the "Created" tab items */
.management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

/* Style the cards specifically for management */
.management-grid .idea-card {
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.management-grid .idea-card-placeholder-image {
    height: 200px;
    background-color: #f0f0f0;
}
.management-grid .idea-card-content {
    padding: 15px;
}
.management-grid .idea-card-title {
    font-size: 1.1em;
    margin-top: 0;
}
.management-grid .idea-card-status {
    font-size: 0.8em;
    font-style: italic;
    color: #666;
    margin-bottom: 15px;
}
.management-grid .idea-card-actions {
    display: flex;
    gap: 10px;
}

/* =================================================================== */
/* ==   AD SCRIPT CONFLICT FIX (July 23)                          == */
/* =================================================================== */

/*
 * This is a defensive rule to prevent crashing ad scripts from
 * injecting large, empty containers that break our layout.
 * It specifically targets ad containers ONLY on the dashboard page.
*/
.page-template-page-my-dashboard ins.adsbygoogle {
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* Hide anything inside it */
}

/* =================================================================== */
/* ==   DASHBOARD MASONRY GRID OVERRIDE (July 23)                 == */
/* =================================================================== */

/* 
 * This is a high-specificity rule to override the Blocksy theme's
 * default layout styles ONLY on the dashboard page.
*/

/* --- 1. Desktop Dashboard Grid (5 Columns) --- */
.page-id-66950 .nail-art-grid .grid-sizer {
    width: 20% !important;
}

.page-id-66950 .nail-art-grid .nail-art-item {
    width: 20% !important;
    padding: 8px !important;
}

/* --- 2. Mobile Dashboard Grid (2 Columns) --- */
@media (max-width: 768px) {
  .page-id-66950 .nail-art-grid .grid-sizer {
    width: 50% !important;
  }
  .page-id-66950 .nail-art-grid .nail-art-item {
    width: 50% !important;
    padding: 5px !important;
  }
}

/* =================================================================== */
/* ==   MOBILE HEADER SEARCH BAR STYLES                           == */
/* =================================================================== */

@media (max-width: 768px) {
  #mobile-header {
    justify-content: space-between; /* This makes space for the search bar */
    gap: 15px;
  }

  .mobile-header-search {
    flex-grow: 1; /* Allows the search bar to fill the available space */
  }

  /* Re-using our existing search form styles but adjusting for mobile */
  #mobile-header .visual-search-form {
    height: 40px;
  }
  #mobile-header .visual-search-form .search-field {
    padding: 5px 15px;
    font-size: 0.9em;
  }
  #mobile-header .visual-search-form .search-submit {
    padding: 0 15px;
    font-size: 1em;
  }
}

/* =================================================================== */
/* ==   VIEW IDEA PAGE PINTEREST-STYLE LAYOUT FIX                 == */
/* =================================================================== */

/* Creates the main two-column flex container */
.pinterest-style-layout {
    display: flex;
    flex-wrap: wrap; /* Allows columns to stack on small screens */
    gap: 30px; /* The space between the image and the details */
}

/* Defines the image column (left side) */
.pin-image-container {
    flex: 1 1 45%; /* Allows it to grow, shrink, with a base size */
    max-width: 500px; /* <<< THIS CONTROLS THE IMAGE SIZE */
    margin: 0 auto; /* Centers it if the screen is very wide */
}
.pin-image-container img {
    border-radius: 16px;
    width: 100%;
    height: auto;
}

/* Defines the details column (right side) */
.pin-details-container {
    flex: 1 1 50%; /* Takes up the remaining space */
}

/* Styles the action buttons at the top of the right column */
.pin-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}
.pin-actions .park-it-trigger-button {
    flex-grow: 1; /* Allows reaction buttons to fill space */
}

/* =================================================================== */
/* ==   REACTION BUTTONS OVERHAUL (V4 - BIG & CLICKABLE)          == */
/* =================================================================== */

.pin-actions .reaction-buttons-container {
    display: flex;
    gap: 10px; /* Space between the buttons */
}

/* This is the main style for each button */
.pin-actions .reaction-button {
    flex: 1; /* Make all buttons share the space equally */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f0f0f0;
    border-radius: 25px; /* Pill shape */
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1em;
}

/* Add a subtle lift effect on hover */
.pin-actions .reaction-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Style for the currently selected button */
.pin-actions .reaction-button.active {
    background-color: #ffe5ea; /* Light pink for active state */
    border-color: #e60023;   /* Red border for active state */
    color: #e60023;
    font-weight: bold;
}

/* Loading state to prevent rapid clicks */
.pin-actions .reaction-button.loading {
    opacity: 0.6;
    cursor: not-allowed;
}

.pin-actions .reaction-icon {
    font-size: 1.3em; /* Make the emoji icon bigger */
}

/* =================================================================== */
/* ==   FLOATING FOOTER BAR POSITIONING FIX (SEPTEMBER 2025)        == */
/* =================================================================== */

/* This is the default style for the entire bar */
.floating-footer-bar {
    /* Default position for desktop. Lifts it up 20px from the bottom. */
    bottom: 20px; 
    /* The rest of the styles like position, display, etc., are already correct */
}

/* On mobile screens, LIFT the bar to sit above the 60px mobile menu */
@media (max-width: 768px) {
    .floating-footer-bar {
        /* 60px for the menu + 20px of space = 80px */
        bottom: 80px;
    }
}

/* =================================================================== */
/* ==   HOME ZONE BOTTOM SECTION (ADS & PAGINATION)               == */
/* =================================================================== */

.page-bottom-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    text-align: center;
    border-radius: 8px;
}

.home-zone-ad-container {
    margin-bottom: 30px;
    min-height: 90px; /* Prevents layout jump while ad loads */
}

.nail-art-pagination .page-numbers {
    padding: 8px 15px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

.nail-art-pagination .page-numbers:hover,
.nail-art-pagination .page-numbers.current {
    background-color: #e60023;
    color: #fff;
    border-color: #e60023;
}

/* =================================================================== */
/* ==   TEMU PRODUCT SLIDER STYLING                               == */
/* =================================================================== */

.temu-product-slider .temu-product-slide {
    padding: 0 10px; /* Creates spacing between the slides */
}

/* Style the product box specifically within a slide */
.temu-product-slider .temu-product-box {
    margin: 0;
    height: 100%; /* Make boxes in a row equal height */
    display: flex;
    flex-direction: column;
}
.temu-product-slider .product-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows the details to fill space */
}
.temu-product-slider .product-cta-button {
    margin-top: auto; /* Pushes button to the bottom */
}
.temu-product-slider .product-title {
    font-size: 1em; /* Slightly smaller for the slider view */
}
.temu-product-slider .product-price {
    font-size: 1.4em;
}

/* Style the slider arrows */
.slick-prev, .slick-next {
    background: #fff !important;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: 40px !important;
    height: 40px !important;
    z-index: 10;
}
.slick-prev:before, .slick-next:before {
    color: #111 !important;
    font-size: 24px !important;
}
.slick-prev { left: -20px !important; }
.slick-next { right: -20px !important; }