/* ==========================================================================
   INSTRUCTION / TERMS PANELS
   Absorbed from modules/countdown.css, which styles.css used to @import.
   The countdown itself is gone for 2027 (all tiers are permanently on sale),
   but these panel styles were living in that file and are still needed.
   ========================================================================== */

:root {
    --countdown-dark-red: #8B0000;
}

.countdown-section {
    padding: 20px;
}

.countdown-message-box {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: linear-gradient(135deg,
        rgba(221, 190, 12, 0.841) 0%,
        rgba(205, 175, 5, 0.698) 100%);
    border-radius: 15px;
    border: 2px solid rgba(139, 0, 0, 0.2);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
}

.instruction-cards-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.instruction-card {
    background: rgba(218, 211, 177, 0.934);
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(139, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.instruction-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        rgba(255, 215, 0, 0.8) 0%,
        rgba(139, 0, 0, 0.8) 50%,
        rgba(255, 215, 0, 0.8) 100%);
    border-radius: 12px 12px 0 0;
}

.instruction-card-icon {
    font-size: 2.5rem;
    margin-bottom: 5px;
    display: block;
}

.card-tip .instruction-card-icon {
    color: #2196F3;
}

.instruction-card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--countdown-dark-red);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.instruction-card-content {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
    text-align: left;
}

.instruction-card-content strong {
    color: var(--countdown-dark-red);
}

.instruction-card-content a {
    color: var(--countdown-dark-red);
    text-decoration: none;
    font-weight: bold;
}

.instruction-card-content a:hover {
    text-decoration: underline;
}

.countdown-instructions-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--countdown-dark-red);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   "RESERVE YOUR PAGE(S)!" steps - three lines, scannable in a couple of
   seconds. Replaces the dense 2026 block that mixed interaction instructions,
   tier rules and pricing in one wall of text.
   -------------------------------------------------------------------------- */

.reserve-steps {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.reserve-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.reserve-step-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--countdown-dark-red);
    color: #F2CB10;
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.reserve-step-text {
    font-size: 1.05rem;
    line-height: 1.45;
    color: #2b2b2b;
    padding-top: 5px;
}

.reserve-step-text strong {
    color: var(--countdown-dark-red);
}

.reserve-fcfs {
    margin: 0 0 18px 0;
    padding: 10px 14px;
    background: rgba(139, 0, 0, 0.08);
    border-left: 4px solid var(--countdown-dark-red);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--countdown-dark-red);
    text-align: left;
}

.reserve-tiers {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding-top: 14px;
    border-top: 1px dashed rgba(139, 0, 0, 0.3);
}

.reserve-tiers-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--countdown-dark-red);
    margin-bottom: 4px;
}

.reserve-tier-line {
    font-size: 0.95rem;
    color: #2b2b2b;
}

@media (max-width: 480px) {
    .countdown-instructions-title {
        font-size: 1.5rem;
    }

    .instruction-card {
        padding: 20px 16px;
    }

    .reserve-step-text {
        font-size: 0.98rem;
    }
}

/* Tooltip Styles */
.custom-tooltip {
    position: fixed !important;
    background-color: #F2CB10;
    border: 2px solid #8B0000;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 10001 !important;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    max-width: 250px;
    word-wrap: break-word;
    text-align: center;
    line-height: 1.2;
}

.custom-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.custom-tooltip.fade-out {
    opacity: 0;
    transform: translateY(-5px);
}

/* Secure Month Interactive Tooltip */
.custom-tooltip.secure-month-tooltip {
    cursor: pointer;
    user-select: none;
    padding: 10px 15px;
    background-color: #FFD700;
    border: 2px solid #8B0000;
    pointer-events: auto !important; /* Override default pointer-events */
    white-space: nowrap; /* Prevent line breaks */
    max-width: none; /* Remove max-width constraint */
}

.custom-tooltip.secure-month-tooltip:hover {
    background-color: #F2CB10;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.secure-month-checkbox {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #8B0000;
    background: white;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    border-radius: 2px;
}

.secure-month-checkbox.checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 2px;
    color: #8B0000;
    font-weight: bold;
    font-size: 14px;
}

.secure-month-label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Video Player Styles */
.video-player-section {
    width: 100%;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

.video-player {
    position: relative;
    width: 100%;
    max-width: 1100px; /* Default max width for 1920+ screens */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* Maintain 16:9 aspect ratio for desktop */
.video-player::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
}

/* Mobile uses 4:5 aspect ratio */
@media (max-width: 768px) {
    .video-player::before {
        padding-top: 125%; /* 4:5 aspect ratio (5/4 = 1.25) */
    }
}

.video-player video,
.video-player .video-screenshot,
.video-player .video-control-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-player video {
    display: none; /* Hidden initially */
    object-fit: cover;
}

.video-screenshot {
    display: block; /* Shown initially */
    z-index: 2;
}

/* ==========================================================================
   VIDEO TITLE OVERLAY (2027)
   Sits over the poster frame and fades out when playback starts, so it never
   competes with the video itself. Nothing is burned into the MP4, which keeps
   the title editable without a re-encode.
   ========================================================================== */

.video-title-overlay {
    position: absolute;
    top: 0;
    left: 0;
    /* Only the left column. Bianca stands centre-right in frame, so the title
       is stacked one word per line down the side rather than running across
       the top where it covered her head. */
    width: 58%;
    height: 100%;
    padding: 4% 4% 4% 5%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.02em;
    pointer-events: none;
    text-align: left;
    /* Scrim fades out to the RIGHT, keeping the text legible without dimming
       the subject. */
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0) 100%);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* While the video plays the title stays fully readable - it carries the year,
   which is no longer spoken in the 2027 cut - but the scrim eases off so it
   sits over moving footage more lightly. */
.video-title-overlay.playing {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.52) 0%,
        rgba(0, 0, 0, 0.28) 45%,
        rgba(0, 0, 0, 0) 100%);
}

.video-title-line-1,
.video-title-line-2 {
    display: block;
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.video-title-line-1 {
    font-size: clamp(0.85rem, 2.3vw, 1.6rem);
    color: #ffffff;
    margin-bottom: 0.12em;
}

.video-title-line-2 {
    font-size: clamp(1.15rem, 3.7vw, 2.6rem);
    color: #F2CB10;
}

/* --------------------------------------------------------------------------
   4:5 mobile crop.

   The framing here is much tighter: her face sits in the TOP of the frame
   (roughly 8%-32% of the height), so the top-left position used on 16:9 lands
   straight on it. The title moves to the LOWER left instead.

   It cannot go all the way down either - the burned-in subtitles occupy
   y 71%-84% and span x 21%-79% on this crop (measured from the source). So
   the block is anchored with its bottom edge just above that band, which
   clears her face and the subtitles at every point in the video.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .video-title-overlay {
        top: auto;
        height: auto;
        /* Percentage `bottom` resolves against the player's height, so this
           puts the block's lower edge at ~66%, a clear 5% above the subtitle
           band rather than butting right up against it. */
        bottom: 34%;
        width: 78%;
        padding: 3% 6% 3% 6%;
        justify-content: flex-end;
        /* Soft elliptical scrim: the block no longer reaches the frame edges,
           so a hard-edged gradient would show its own outline. */
        background: radial-gradient(ellipse at 25% 50%,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.5) 42%,
            rgba(0, 0, 0, 0) 78%);
    }

    .video-title-overlay.playing {
        background: radial-gradient(ellipse at 25% 50%,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.38) 42%,
            rgba(0, 0, 0, 0) 78%);
    }

    .video-title-line-1 {
        font-size: clamp(0.8rem, 3.4vw, 1.2rem);
    }

    .video-title-line-2 {
        font-size: clamp(1.1rem, 5.4vw, 1.9rem);
    }
}

.video-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Show/hide screenshots based on screen size */
.desktop-screenshot {
    display: block;
}

.mobile-screenshot {
    display: none;
}

@media (max-width: 768px) {
    .desktop-screenshot {
        display: none;
    }
    
    .mobile-screenshot {
        display: block;
    }
}

.video-control-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: opacity 0.3s ease;
}

.video-control-overlay:hover {
    opacity: 0.8;
}

.play-icon-button,
.pause-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.play-icon-button:hover,
.pause-icon-button:hover {
    transform: scale(1.1);
}

.play-icon-button svg,
.pause-icon-button svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Responsive breakpoints */
/* Mobile phones (up to 768px) - 100% width */
@media (max-width: 768px) {
    .video-player-section {
        padding: 0 10px;
        margin: 20px auto;
    }
    
    .video-player {
        max-width: 100%;
        border-radius: 8px;
    }
    
    .play-icon-button svg,
    .pause-icon-button svg {
        width: 60px;
        height: 60px;
    }
}

/* Tablets and medium screens (769px to 1919px) - max 840px */
@media (min-width: 769px) and (max-width: 1919px) {
    .video-player {
        max-width: 840px;
    }
}

/* Large screens (1920px+) - max 1100px */
@media (min-width: 1920px) {
    .video-player {
        max-width: 1100px;
    }
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(180deg, #000000 0%, #6d6d6d 100%);
    min-height: 100vh;
}

/* Main Container - Fully Responsive */
.main-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Section */
.header-section {
    text-align: center;
    margin-bottom: 40px;
    padding: 12px;
    background: linear-gradient(45deg, #d4af37, #ffd700);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.main-title {
    font-size: 2.4rem;
    font-weight: 500;
    color: #efefef;
    letter-spacing: 2px;
    margin-top: -10px; 
    margin-bottom: -25px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); 
}

.subtitle {
    font-size: 4rem;
    font-weight: bold;
    color: #8B0000;
    letter-spacing: 3px;
    text-shadow: 2px 2px 2px rgba(254, 254, 254, 0.8); 
}

/* Second line of the masthead, same red display treatment as #1 FANS' CHOICE.
   Replaces the old .edition-text "CALENDARS' 16TH ANNIVERSARY LIMITED EDITION"
   line - the anniversary framing is gone for 2027. Inherits every responsive
   size from .subtitle; this only closes the gap between the two lines. */
.subtitle-year {
    margin-top: -18px;
    padding-bottom: 10px;
}

.cta-title {
    font-size: 2.2rem;
    color: #8B0000;
    font-weight: bold;
}

.instructions {
    font-size: 1.6rem;
    color: #333;
    margin: 0 auto;
    font-weight: 700;
    margin-bottom: 10px;
}

.instructions-steps {
    font-size: 1.3rem;
    margin: 0 auto;
    font-weight: 600;
    color: #8B0000;
}

/* Calendar Grid Section */
.calendar-grid-section {
    margin-bottom: 40px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: 1fr 1.34fr 1fr; /* Cover | Months | Back Cover - responsive proportions */
    gap: 20px; /* Responsive gap */
    width: 100%;
    margin: 0 auto;
    align-items: start;
    justify-content: center;
    padding: 0 10px;
}

/* Cover containers on the sides */
.cover-container,
.back-cover-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    padding-top: 10px;
}

.cover-container { align-items: end; }
.back-cover-container { align-items: start; }

/* Large cover pages - Responsive dimensions */
.large-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4; /* Portrait orientation */
    border: 5px solid #DAA520; /* Thicker gold border for covers */
    box-shadow: 0 8px 25px rgba(218, 165, 32, 0.3); /* Golden shadow */
    max-width: auto;
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack content vertically */
    /* Prevent any interference */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* Remove any margins that could cause misalignment */
    margin: 0 !important;
}

.large-cover:hover {
    transform: scale(1.05) translateY(-8px); /* Enhanced hover effect */
    box-shadow: 0 12px 30px rgba(218, 165, 32, 0.4);
}

.large-cover .page-label {
    font-size: 1.1rem; /* Larger label text */
    font-weight: bold;
    color: #dfdfdf;
    margin-top: auto; /* Push label to bottom */
}

.large-cover .page-content {
    flex: 1; /* Take up remaining space */
}

/* Center months container */
.months-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start;
    padding: 2px; /* Reduced padding to minimize extra space */
}

.calendar-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
    padding: 5px;
    margin: 5px 0;
}

.page-container {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 120px; /* Minimum height for usability */
    background-color: #808080;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
    aspect-ratio: 3/4; /* Enforce 3:4 ratio */
    margin-bottom: 20px; 
}

.page-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.page-container.drag-over {
    border-color: #4CAF50;
    background-color: #90EE90;
    transform: scale(1.05);
}

.page-container.has-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   RESERVED STATE (2027)
   A page in the sponsor's order. Photos are optional, so "selected" has to
   read as a complete, confident state on its own - not as a half-finished
   upload waiting to be fixed.
   ========================================================================== */

.page-container.selected {
    border-color: #F2CB10;
    box-shadow: 0 0 0 2px rgba(242, 203, 16, 0.35), 0 8px 22px rgba(0, 0, 0, 0.25);
}

.page-container.selected:not(.has-image) {
    /* Warm diagonal hatch: clearly "claimed", clearly "no photo yet". */
    background-color: #c9a713;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.10) 0px,
        rgba(0, 0, 0, 0.10) 10px,
        rgba(0, 0, 0, 0.02) 10px,
        rgba(0, 0, 0, 0.02) 20px
    );
}

.page-container.selected .drop-indicator {
    display: none;
}

/* The sponsor's own "RESERVED - photo optional" chip, shown only on a
   selected page that has no photo staged. */
.reserved-badge {
    display: none;
}

.page-container.selected:not(.has-image) .reserved-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Above the month artwork overlay (z-index 6), which is now shown as soon
       as a page is selected rather than only once a photo is added. */
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    text-align: center;
    pointer-events: none;
    width: 92%;
}

.reserved-badge-icon {
    font-size: 1.6rem;
    line-height: 1;
}

/* Dark ink on the gold hatch - reads far better than gold on gold. */
.reserved-badge-text {
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #6b0000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.reserved-badge-hint {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: rgba(50, 25, 0, 0.8);
    text-transform: uppercase;
}

/* Covers are much larger, so the chip can scale up with them. */
.large-cover .reserved-badge-icon {
    font-size: 3rem;
}

.large-cover .reserved-badge-text {
    font-size: 1.6rem;
}

.large-cover .reserved-badge-hint {
    font-size: 0.95rem;
}

/* Shown in place of the PayPal button when the server cannot verify payments. */
.checkout-unavailable {
    padding: 20px 18px;
    border: 2px dashed #b8860b;
    border-radius: 8px;
    background: rgba(242, 203, 16, 0.12);
    text-align: center;
}

.checkout-unavailable-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #8B0000;
}

.checkout-unavailable-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
}

.photo-btn {
    background: rgba(76, 175, 80, 0.9) !important;
}

.photo-btn:hover {
    background: rgba(76, 175, 80, 1) !important;
}

.page-content {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.drop-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-weight: bold;
    z-index: 2;
    pointer-events: none;
    }

.plus-icon {
    display: block;
    font-size: 4rem;
    margin-bottom: -20px;
}

.drop-text {
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.page-container.has-image .drop-indicator {
    display: none;
}

.page-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: 5px;
}

.page-controls.hidden {
    display: none;
}

.page-controls button {
    width: 32px;
    height: 32px;
    font-size: 17px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.page-controls button:hover {
    background: rgba(0,0,0,0.9);
}

.remove-btn {
    background: rgba(220, 20, 60, 0.8) !important;
}

.remove-btn:hover {
    background: rgba(220, 20, 60, 1) !important;
}

.page-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 6;
    opacity: 0.9;
    display: none;
}

.page-container.has-image .page-overlay,
.page-container.selected .page-overlay,
.page-container.locked .page-overlay {
    display: block;
}

.page-label {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    font-weight: bold;
    color: #F2CB10;
    text-align: center;
    white-space: nowrap;
}

/* Page spacer no longer needed with new layout */

/* Special styling for cover and back cover */
.cover-page, .back-cover-page {
    border: 3px solid #DAA520;
}

.cover-page .page-label, .back-cover-page .page-label {
    color: #F2CB10;
    font-weight: bold;
    font-size: 1.4rem;
    bottom: -40px;
}

/* Tier Selection Section */
.tier-selection-section {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px;
    background: #F2CB10;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.tier-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

.tier-box {
    padding: 20px;
    background: linear-gradient(135deg, #a8b7bc, #beced0);
    border-radius: 10px;
    text-align: center;
    cursor: default; /* Changed from pointer to default - no longer clickable */
    transition: all 0.3s ease;
    border: 3px solid transparent;
    min-width: 0; /* Allow shrinking */
}

.tier-box.diamond-tier {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.85), rgba(255, 165, 0, 0.85));
    border-color: #DAA520;
}

/* Hover effect removed - tier boxes are now display-only, not interactive */

.tier-box.selected {
    border-color: #00ff08;
    border-width: 8px;
    transform: translateY(-5px);
    box-shadow: 0 6px 35px rgb(31, 122, 34);
    background: #a9daaf;
}

.tier-box.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tier-header {
    font-size: 1.9rem;
    font-weight: bold;
    margin-bottom: 0px;
    color: #8B0000;
}

.tier-title {
    font-size: 2.0rem;
    font-weight: bold;
    margin-bottom: 1px;
    color: #333;
}

.tier-price {
    font-size: 2.7rem;
    font-weight: bold;
    margin-bottom: 2px;
    color: #8B0000;
}

.tier-value {
    font-size: 2.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #12880a;
}

.tier-subtitle {
    font-size: 1.4rem;
    color: #333;
    line-height: 1.4;
    text-align: left;
}

/* Content Container */
.content-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Legacy additional choices section removed - now integrated into form */

.page-alternatives {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-alternatives label {
    font-weight: bold;
    color: #333;
    font-size: 1rem;
}

.alternative-drop-zones {
    display: flex;
    gap: 15px;
}

.alternative-drop-zone {
    flex: 1;
    width: 120px; /* Fixed width for consistent sizing */
    height: 160px; /* 3:4 ratio (120px * 4/3 = 160px) */
    max-width: 120px; /* Ensure consistent sizing */
    background-color: #f0f0f0;
    border: 2px dashed #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background-size: cover;
    background-position: center;
    aspect-ratio: 3/4; /* Enforce 3:4 aspect ratio to match main page containers */
}

.alternative-drop-zone:hover {
    border-color: #4CAF50;
    background-color: #f9f9f9;
}

.alternative-drop-zone.drag-over {
    border-color: #4CAF50;
    background-color: #e8f5e8;
}

.alternative-drop-zone .drop-text {
    color: #666;
    font-weight: bold;
    pointer-events: none;
}

.alternative-drop-zone.has-image {
    border: 2px solid #4CAF50;
    border-style: solid;
}

.alternative-drop-zone.has-image .drop-text {
    display: none;
}

/* Alternative zone remove button */
.alternative-remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: none;
    z-index: 10;
    transition: all 0.2s ease;
    font-weight: bold;
}

.alternative-remove-btn:hover {
    background: #c0392b;
    transform: scale(1.1);
}

.alternative-drop-zone.has-image .alternative-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Submission Form Section */
.submission-form-section {
    flex: 1;
    width: 100%;
}

.form-container {
    background: rgba(208, 208, 208, 0.9);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
    width: 100%;
    max-width: 800px;
}

.form-title {
    font-size: 2.6rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    background: #F2CB10;
}

.form-row {
    margin-bottom: 20px;
}

.form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
    font-size: 1.8rem;
}

.form-row input,
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1.4rem;
    transition: border-color 0.3s;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    border-color: #4CAF50;
}

.form-row textarea {
    min-height: 100px;
    resize: vertical;
}

.form-row input[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* Ultimate Fan Appreciation Jar styles */
.form-row .tip-description {
    font-size: 1.1rem;
    margin-top: 5px;
    color: #343434;
    font-style: italic;
}

.form-row select#ultimate-fan-tip {
    width: auto;
    font-size: 0.9rem;
}

/* Terms section styling */
.form-row.terms-section {
    background-color: #d4edda;
    padding: 15px;
    border-radius: 5px;
}

.form-row.terms-section label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.month-secure-row {
    background: rgba(255, 255, 0, 0.1);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.month-secure-row input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
    transform: scale(1.5);
}

/* PayPal Button Container */
#paypal-button-container {
    margin-top: 20px;
}

/* Additional Choices within Form */
.additional-choices-row {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 15px 0;
}

.additional-choices-label {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    display: block;
}

.additional-choices-subtitle {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.4;
    font-style: italic;
}

/* Additional choices grid - preserve existing functionality */
.additional-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    margin-top: 15px;
}

/* Drag and Drop Visual Feedback */
.dragging {
    opacity: 0.5;
}

.drag-preview {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transform: rotate(-5deg);
}

/* Comprehensive Responsive Design */



/* Desktop/Laptop (1920px +) */
@media (min-width: 1920px) {

    .main-container {padding: 30px 40px;}
    .calendar-grid {gap: 30px;}
    .tier-box {padding: 25px;}

    .tier-header {font-size: 1.3rem;}
    .tier-title {font-size: 1.3rem;}
    .tier-price {font-size: 2.3rem;}
    .tier-subtitle {font-size: 1.1rem;}
    .tier-value {font-size: 1.3rem;}

    .main-title { font-size: 2.4rem; }
    .subtitle { font-size: 3.2rem; }
    .cta-title { font-size: 2.0rem; }
    .instructions { font-size: 1.2rem; }
    .instructions-steps { font-size: 1.1rem; }

    .section-title {font-size: 2rem;}
    .form-title {font-size: 2rem;}
    .form-row label {font-size: 1.2rem;}
    .form-row input,
    .form-row textarea {font-size: 1.1rem;}
}






/* Desktop Layout: Combine 6 mobile rows back into 3x4 grid */
@media (min-width: 1200px) {
    .months-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
    
    .calendar-row {
        display: contents; /* This makes the row wrapper invisible, items flow directly to parent grid */
    }
}

/* Tablet Landscape (768px - 1919px) */
@media (min-width: 768px) and (max-width: 1919px) {
    .main-container {
        padding: 20px;
    }
    
    .page-controls button {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    /* Custom tablet layout: Use CSS Grid for the entire calendar structure */
    .calendar-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two main columns for covers */
        grid-template-areas: 
            "cover back-cover"
            "months months";
        gap: 30px; /* Increased gap for better label spacing */
        align-items: start;
        justify-items: center;
    }
    
    /* Position covers in the top row */
    .cover-container {
        grid-area: cover;
        justify-self: end;
        margin-bottom: 40px; /* Extra space for cover label */
    }
    
    .back-cover-container {
        grid-area: back-cover;
        justify-self: start;
        margin-bottom: 40px; /* Extra space for back cover label */
    }
    
    /* Months span the full width below covers */
    .months-container {
        grid-area: months;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        width: 100%; /* Full width */
        max-width: none; /* Remove width restriction */
    }
    
    .calendar-row {
        display: contents; /* Flatten the 6 rows into 3-column grid */
        margin-bottom: 45px; /* Extra spacing between rows for labels */
    }
    
    /* Add specific spacing for month page containers */
    .page-container.month-page {
        margin-bottom: 35px; /* Space for month labels */
    }
    
    .tier-boxes {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .tier-box {
        margin-bottom: 20px;
    }
    
    /* Remove the spanning rule since we now have 4 visible tiers that should form 2x2 grid */
    /* .tier-box:nth-child(5) rule removed - no longer needed with 4 visible tiers */
    
    .tier-header {font-size: 1.4rem;}
    .tier-title {font-size: 1.3rem;}
    .tier-price {font-size: 2.3rem;}
    .tier-subtitle {font-size: 1.1rem;}
    .tier-value {font-size: 1.2rem;}

    .content-container {
        gap: 30px;
    }

    .main-title { font-size: 2.4rem; }
    .subtitle { font-size: 3.0rem; }
    .cta-title { font-size: 2.0rem; }
    .instructions { font-size: 1.1rem; }
    .instructions-steps { font-size: 1.1rem; }


    .section-title {font-size: 1.4rem;}
    .form-title {font-size: 1.6rem;}
    .form-row label {font-size: 1.2rem;}
    .form-row input,
    .form-row textarea {font-size: 1.1rem;}

}

/* ==========================================================================
   WIDESCREEN WINDOWS BELOW 1920px

   The block above claims everything from 768px to 1919px and stacks the
   calendar: covers side by side on top, months in three columns underneath.
   That is right for a tablet, but wrong for a short, wide window - and a
   quarter of a 4K monitor lands at roughly 1280-1536 CSS pixels once Windows
   display scaling is applied. The result was a tall, oversized calendar in a
   window that is in fact wider than it is tall.

   Width alone cannot tell those two cases apart, so this also asks about the
   SHAPE of the viewport. A viewport at least 3:2 is a widescreen window and
   gets the full horizontal layout: cover | 4x3 months | back cover. A 4:3 or
   portrait tablet at the same width keeps the stacked layout above.
   ========================================================================== */
@media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
    /* Undo the stacked grid-areas layout and return to the base three-column
       split. The 1fr / 1.34fr / 1fr ratio is deliberate: it makes each cover
       come out roughly as tall as the whole 4x3 months block, so the three
       columns line up. Widening the middle column threw that out. */
    .calendar-grid {
        grid-template-areas: none;
        grid-template-columns: 1fr 1.34fr 1fr;
        gap: 18px;
        align-items: start;
        justify-items: stretch;
    }

    .cover-container,
    .back-cover-container {
        grid-area: auto;
        margin-bottom: 0;
    }

    .cover-container   { justify-self: end; }
    .back-cover-container { justify-self: start; }

    /* Twelve months as 4 across x 3 down, between the two covers */
    .months-container {
        grid-area: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        width: 100%;
        max-width: none;
    }

    .calendar-row {
        display: contents;
        margin-bottom: 0;
    }

    /* The stacked layout reserved 35px under each tile for its label; the
       horizontal layout is tighter, so claw that back. */
    .page-container.month-page {
        margin-bottom: 22px;
    }

}

/* Below 1920 the month tiles in that horizontal layout are genuinely small
   (~130px), so the labels and the sold/reserved tag have to come down with
   them or they overrun the tile they belong to. Screens at 1920 and up have
   room for the full-size versions, so this is deliberately scoped. */
@media (min-width: 1100px) and (max-width: 1919px) and (min-aspect-ratio: 3/2) {
    .large-cover {
        border-width: 4px;
    }

    .page-container.locked[data-page-type="monthly"] .golden-lock-tag,
    .page-container.locked:not([data-page-type]) .golden-lock-tag {
        min-width: 92px;
        padding: 6px 8px;
        font-size: 9px;
        bottom: -8px;
        left: -8px;
    }

    .page-label {
        font-size: 1rem;
        bottom: -26px;
    }

    .large-cover .page-label {
        font-size: 1rem;
    }
}

/* Keep the page from stretching edge to edge on a full 4K display, where
   line lengths become unreadable and the calendar absurdly large. */
@media (min-width: 2100px) {
    .main-container,
    .countdown-message-box,
    .content-container {
        max-width: 2000px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tablet Portrait & Large Mobile (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .main-container {
        padding: 15px;
    }
    
    .page-controls button {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    /* Header responsive typography */
    .main-title {
        font-size: 2.1rem;
        margin-top: -5px; 
        margin-bottom: -15px;
    }
    
    .subtitle {
        font-size: 2.8em;
        margin-top: -1px; 
        margin-bottom: 3px;
    }
    
    
    .cta-title {
        font-size: 1.7rem;
    }
    
    .instructions {
        font-size: 1.1rem;
    }

    .instructions-steps {
        font-size: 0.9rem;
        margin-top: 20px;
    }
    
    /* Calendar grid becomes vertical stack */
    .calendar-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }
    
    .cover-container,
    .back-cover-container {
        width: 100%;
        padding-top: 0;
    }
    
    .large-cover {
        max-width: 100%;
        width: 100%;
    }
    
    /* Months container maintains 3x4 grid but responsive */
    .months-container {
        width: 100%;
    }
    
    .calendar-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 10px;
    }
    
    /* Tier boxes stack in pairs */
    .tier-boxes {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tier-box {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .tier-header {font-size: 1.6rem;}
    .tier-title {font-size: 1.6rem;}
    .tier-price {font-size: 2.5rem;}
    .tier-subtitle {font-size: 0.9rem;}
    .tier-value {font-size: 1.5rem;}

    /* Bottom section - form already centered */
    .content-container {
        padding: 0 20px;
    }

    .section-title {font-size: 1.5rem;}
    .form-title {font-size: 1.5rem;}
    .form-row label {font-size: 1.2rem;}
    .form-row input,
    .form-row textarea {font-size: 1.2rem;}
}

/* Mobile (320px - 480px) */
@media (max-width: 480px) {
    .main-container {
        padding: 10px;
    }
    
    /* Header responsive typography - prevent overflow */
    .main-title {
        font-size: 1.2rem;
        letter-spacing: 1px;
        margin-bottom: -9px;
    }
    
    .subtitle {
        font-size: 1.8rem;
        letter-spacing: 2px;
        margin-bottom: 7px;
    }
    
    
    .cta-title {
        font-size: 1.3rem;
    }
    
    .instructions {
        font-size: 0.9rem;
    }
    
    .instructions-steps {
        font-size: 0.7rem;
    }
    
    /* Calendar grid becomes full vertical stack */
    .calendar-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0;
    }
    
    .cover-container,
    .back-cover-container {
        width: 100%;
        padding-top: 0;
    }
    
    .large-cover {
        max-width: 100%;
        width: 100%;
    }
    
    /* Months container maintains 3x4 grid but smaller */
    .months-container {
        width: 100%;
    }
    
    .calendar-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .page-container {
        width: 100%;
        height: auto;
        min-height: 60px;
    }
    
    /* Tier boxes stack vertically */
    .tier-boxes {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .tier-box {
        padding: 15px;
        min-width: 0;
    }
    
    .tier-header {font-size: 0.9rem;}
    .tier-title {font-size: 1rem;}
    .tier-price {font-size: 1.2rem;}
    .tier-subtitle {font-size: 0.8rem;}
    .tier-value {font-size: 1.1rem;}

    .form-title {font-size: 1.6rem;}
    .form-row label {font-size: 1.0rem;}
    .form-row input,
    .form-row textarea {font-size: 0.9rem;}
    
    /* Bottom section - form already centered */
    .content-container {
        padding: 0 15px;
    }
    
    .form-container {
        padding: 15px;
    }
    
    /* Additional choices responsive adjustments for mobile */
    .additional-choices {
        justify-content: center;
        gap: 20px;
        display: flow;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
        max-width: 95%;
    }
    
    /* Alternative drop zones adjustments for mobile */
    .alternative-drop-zone {
        width: 100px;
        height: 133px;
        max-width: 100px;
        margin-bottom: 15px;
    }
    
    /* Touch-friendly sizing */
    .page-controls button {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
}

/* Success and Error States */
.success-message {
    background: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #c3e6cb;
    margin-bottom: 20px;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #f5c6cb;
    margin-bottom: 20px;
}

/* Loading States */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #4CAF50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Instructions display logic */
.desktop-instructions {
    display: block;
}

.mobile-instructions {
    display: none;
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Switch instructions for touch devices */
    .desktop-instructions {
        display: none;
    }
    
    .mobile-instructions {
        display: block;
        color: #8B0000;
        font-weight: 600;
    }

    /* Remove hover effects on touch devices */
    .page-container:hover,
    .tier-box:hover {
        transform: none;
        box-shadow: none;
    }
    
    
    /* Better spacing for touch */
    .calendar-row {
        gap: 12px;
    }
    
    /* ----------------------------------------------------------------------
       TOUCH SCROLLING

       These were both `touch-action: none`, which tells the browser to hand
       every gesture to the page and never scroll. On a phone the cover fills
       most of the viewport, so putting a finger on it and swiping did nothing
       at all - the page appeared to freeze. It applied even to empty tiles
       that have no drag behaviour to protect.

       Empty tiles now behave normally. Tiles holding a photo allow vertical
       panning, so one finger always scrolls the page; the JS decides on the
       first move whether a gesture is a scroll or an image drag, and two
       fingers reposition and zoom the photo.
       ---------------------------------------------------------------------- */
    .page-container {
        touch-action: manipulation; /* normal scrolling, minus the tap delay */
    }

    .page-container.has-image {
        touch-action: pan-y;
    }
    
    /* Add visual feedback for touch interactions */
    .page-container.has-image::after {
        /* One finger scrolls the page now, so the hint has to say what
           actually moves the photo: two fingers. */
        content: "✌️ TWO FINGERS TO MOVE & ZOOM";
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 10px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 20;
    }
    
    .page-container.has-image:active::after,
    .page-container.touch-active::after {
        opacity: 1;
    }
    
    /* Touch feedback states */
    .page-container.touch-active {
        transform: scale(1.02);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    
    /* Focus states for keyboard navigation */
    .page-container:focus {
        outline: 3px solid #4CAF50;
        outline-offset: 2px;
    }
    
    .page-container:focus-visible {
        outline: 3px solid #4CAF50;
        outline-offset: 2px;
    }
}

/* High DPI/Retina Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .page-overlay {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
    }
    
    .page-controls,
    .tier-selection-section,
    .submission-form-section {
        display: none;
    }
}

/* Locked Page Styles */
.page-container.locked {
    border: 3px solid #e74c3c !important;
    opacity: 0.9;
    position: relative;
}

.page-container.locked::before {
    content: "";
    display: none; /* Hide default lock icon, we'll use golden tag instead */
}

/* ==========================================================================
   TAKEN BUT AWAITING ARTWORK (2027)
   Someone has paid for this page and will email their photo later. It is just
   as unavailable as a SOLD page, so it must not look like an empty slot.
   ========================================================================== */

.page-container.locked.awaiting-artwork {
    border-color: #b8860b !important;
    background-color: #3a3320;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 215, 0, 0.14) 0px,
        rgba(255, 215, 0, 0.14) 12px,
        rgba(0, 0, 0, 0.18) 12px,
        rgba(0, 0, 0, 0.18) 24px
    );
}

.page-container.locked.awaiting-artwork .drop-indicator {
    display: none;
}

/* Cooler, calmer palette than the gold SOLD tag, and no shimmer - this is a
   holding state, not a celebration. */
.golden-lock-tag.awaiting-artwork {
    background: linear-gradient(135deg, rgba(120, 144, 180, 0.95), rgba(80, 100, 135, 0.95)) !important;
    color: #ffffff !important;
    border-color: #8fa5c4 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    animation: none !important;
}

.golden-lock-tag.awaiting-artwork .lock-icon {
    animation: none !important;
}

/* Icon, RESERVED and the pill share one flex row so the pill centres on the
   word itself. Left inline it rode the text baseline and sat noticeably high. */
.golden-lock-tag .status-line {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Payment-confirmed pill sitting beside the word RESERVED. Sized in em so it
   tracks whatever font-size the tag has at the current breakpoint - 10px on a
   month tile, 9px on the cramped 1100-1919px layout. Dark ink on bright green
   stays legible at those sizes; white would not. */
.golden-lock-tag .paid-badge {
    display: inline-block;
    margin-left: 0.55em;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    background: linear-gradient(135deg, #4ade80, #16a34a);
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #06301b;
    font-size: 0.72em;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-shadow: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

/* The covers carry a 22px tag, where a proportional pill shouts louder than the
   word it qualifies. 40% smaller there. Month tiles keep the full size - they
   have no legibility to spare. The bumped margin keeps the gap looking the
   same, since the pill's own em shrank with it. */
.page-container.locked[data-page-type="cover"] .golden-lock-tag .paid-badge {
    font-size: 0.43em;
    margin-left: 0.9em;
}

.golden-lock-tag .artwork-pending {
    display: block;
    font-style: italic;
    opacity: 0.9;
    text-transform: none;
}

.page-container.locked[data-page-type="cover"] .golden-lock-tag .artwork-pending {
    font-size: 14px;
    margin-top: 2px;
}

.page-container.locked[data-page-type="monthly"] .golden-lock-tag .artwork-pending,
.page-container.locked:not([data-page-type]) .golden-lock-tag .artwork-pending {
    font-size: 8px;
    margin-top: 1px;
}

/* Golden lock tag with buyer info - Cover pages (front/back) */
.page-container.locked[data-page-type="cover"] .golden-lock-tag {
    position: absolute;
    bottom: -16px;
    left: -16px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.85), rgba(255, 165, 0, 0.85));
    color: #8B4513;
    padding: 16px 24px;
    border-radius: 24px;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(255,255,255,0.3);
    box-shadow: 0 6px 16px rgba(255,215,0,0.4), 0 2px 6px rgba(0,0,0,0.2);
    z-index: 10;
    border: 4px solid #FFD700;
    min-width: 240px;
    text-align: center;
    animation: goldShimmer 2s ease-in-out infinite alternate;
}

/* Golden lock tag with buyer info - Monthly pages (44% of full size - 33% larger than 1/3) */
.page-container.locked[data-page-type="monthly"] .golden-lock-tag,
.page-container.locked:not([data-page-type]) .golden-lock-tag {
    position: absolute;
    bottom: -10px;
    left: -10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.85), rgba(255, 165, 0, 0.85));
    color: #8B4513;
    padding: 8px 11px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
    box-shadow: 0 3px 8px rgba(255,215,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
    z-index: 10;
    border: 2px solid #FFD700;
    min-width: 106px;
    text-align: center;
    animation: goldShimmer 2s ease-in-out infinite alternate;
}

/* Lock icon for cover pages */
.page-container.locked[data-page-type="cover"] .golden-lock-tag .lock-icon {
    font-size: 28px;
    margin-right: 12px;
    display: inline-block;
    animation: lockPulse 1.5s ease-in-out infinite;
}

/* Lock icon for monthly pages (proportionally larger) */
.page-container.locked[data-page-type="monthly"] .golden-lock-tag .lock-icon,
.page-container.locked:not([data-page-type]) .golden-lock-tag .lock-icon {
    font-size: 13px;
    margin-right: 5px;
    display: inline-block;
    animation: lockPulse 1.5s ease-in-out infinite;
}

/* Buyer name for cover pages */
.page-container.locked[data-page-type="cover"] .golden-lock-tag .buyer-name {
    display: block;
    font-size: 18px;
    margin-top: 4px;
    opacity: 0.9;
    font-weight: normal;
}

/* Buyer name for monthly pages (proportionally larger) */
.page-container.locked[data-page-type="monthly"] .golden-lock-tag .buyer-name,
.page-container.locked:not([data-page-type]) .golden-lock-tag .buyer-name {
    display: block;
    font-size: 8px;
    margin-top: 2px;
    opacity: 0.9;
    font-weight: normal;
}

/* Tier info for cover pages */
.page-container.locked[data-page-type="cover"] .golden-lock-tag .tier-info {
    display: block;
    font-size: 16px;
    margin-top: 2px;
    opacity: 0.8;
    font-weight: normal;
    font-style: italic;
}

/* Tier info for monthly pages (proportionally larger) */
.page-container.locked[data-page-type="monthly"] .golden-lock-tag .tier-info,
.page-container.locked:not([data-page-type]) .golden-lock-tag .tier-info {
    display: block;
    font-size: 7px;
    margin-top: 1px;
    opacity: 0.8;
    font-weight: normal;
    font-style: italic;
}

@keyframes goldShimmer {
    0% { box-shadow: 0 6px 16px rgba(255,215,0,0.4), 0 2px 6px rgba(0,0,0,0.2); }
    100% { box-shadow: 0 8px 24px rgba(255,215,0,0.6), 0 4px 8px rgba(0,0,0,0.3); }
}

@keyframes lockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Locked image display */
.locked-image {
    pointer-events: none;
}

/* Allow interactions for locked images in admin mode */
body.admin-mode .locked-image {
    pointer-events: auto !important;
}

/* Disabled tier boxes */
.tier-box.disabled {
    opacity: 0.5;
    filter: grayscale(100%);
    pointer-events: none;
    cursor: not-allowed;
}

.tier-box.disabled::after {
    content: "UNAVAILABLE";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    z-index: 5;
}

/* Admin Mode Styles */
.admin-mode .page-container.locked {
    border-color: #f39c12 !important;
    cursor: pointer;
}

.admin-mode .page-container.locked:hover {
    border-color: #e67e22 !important;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
}

/* Admin Footer */
.admin-footer {
    width: 100%;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    padding: 12px 0;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    border-top: 1px solid #34495e;
    margin-top: 40px; /* Add some space above the footer */
}

.admin-footer-content a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    margin: 0 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
}

.admin-footer-content a:hover {
    background: rgba(255,255,255,0.1);
    color: #3498db;
    transform: translateY(-1px);
}

.admin-footer-content a:active {
    transform: translateY(0);
}

/* Admin Dialog Styles */
.admin-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-dialog.hidden {
    display: none;
}

.admin-dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.admin-dialog-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10001;
    min-width: 400px;
    max-width: 500px;
    margin: 20px;
    animation: dialogSlideIn 0.3s ease-out;
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.admin-dialog-header {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.admin-dialog-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.admin-dialog-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.admin-dialog-body {
    padding: 24px 20px;
}

.admin-field {
    margin-bottom: 20px;
}

.admin-field label {
    display: block;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 14px;
}

.admin-field input,
.admin-field select {
    width: 100%;
    padding: 12px;
    border: 2px solid #bdc3c7;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    background: #fff;
}

.admin-field input:focus,
.admin-field select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.admin-dialog-footer {
    padding: 16px 20px;
    border-top: 1px solid #ecf0f1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-radius: 0 0 12px 12px;
    background: #f8f9fa;
}

.admin-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-size: 12px;
}

.admin-btn-cancel {
    background: #95a5a6;
    color: white;
}

.admin-btn-cancel:hover {
    background: #7f8c8d;
}

.admin-btn-ok {
    background: #27ae60;
    color: white;
}

.admin-btn-ok:hover {
    background: #229954;
}

.admin-btn:active {
    transform: translateY(1px);
}

/* Alternative Images Validation Dialog Styles */
.validation-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.validation-dialog.hidden {
    display: none;
}

.validation-dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
}

.validation-dialog-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10001;
    min-width: 450px;
    max-width: 550px;
    margin: 20px;
    animation: validationSlideIn 0.3s ease-out;
    border: 3px solid #f39c12;
}

@keyframes validationSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.validation-dialog-header {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 18px 24px;
    border-radius: 9px 9px 0 0;
    text-align: center;
}

.validation-dialog-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.validation-dialog-body {
    padding: 30px 24px;
    text-align: center;
}

.validation-message {
    font-size: 18px;
    font-weight: bold;
    color: #e74c3c;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.validation-instructions {
    font-size: 15px;
    color: #2c3e50;
    margin: 0;
    line-height: 1.5;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #f39c12;
}

.validation-dialog-footer {
    padding: 20px 24px;
    border-top: 1px solid #ecf0f1;
    display: flex;
    justify-content: center;
    border-radius: 0 0 9px 9px;
    background: #f8f9fa;
}

.validation-ok-btn {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.validation-ok-btn:hover {
    background: linear-gradient(135deg, #d68910, #c0392b);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
}

.validation-ok-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(230, 126, 34, 0.3);
}

/* Admin Email Test Button Styles */
.admin-test-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.admin-test-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1f4e79);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.admin-test-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3);
}

.admin-only {
    display: none;
}

body.admin-mode .admin-only {
    display: block;
}

/* Exclusive Tier Priority Sale Dialog Styles */
.exclusive-banner-top {
    display: block;
    width: calc(100% + 30px); /* Full width plus tier box padding */
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 10px;
    margin: -15px -15px 10px -15px; /* Negative margins to extend full width of tier box */
    box-sizing: border-box;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #FFD700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Hide the centered UNAVAILABLE tag during exclusive mode */
.tier-box.disabled.exclusive-mode::after {
    display: none !important;
}

/* Legacy overlay style - kept for backward compatibility */
.exclusive-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.85), rgba(255, 165, 0, 0.85));
    color: #8B4513;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    z-index: 5;
    opacity: 1 !important;
    filter: none !important;
    border: 2px solid #231900;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.exclusive-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002; /* Higher than validation dialog */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.exclusive-dialog.hidden {
    opacity: 0;
    pointer-events: none;
}

.exclusive-dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.exclusive-dialog-content {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 10003;
    min-width: 500px;
    max-width: 600px;
    margin: 20px;
    animation: exclusiveSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 4px solid #FFD700;
}

@keyframes exclusiveSlideIn {
    from {
        opacity: 0;
        transform: translateY(-40px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.exclusive-dialog-header {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.85), rgba(255, 165, 0, 0.85));
    color: #8B4513;
    padding: 24px 28px 20px 28px;
    border-radius: 12px 12px 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.exclusive-dialog-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.exclusive-dialog-header h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.exclusive-tier-title {
    margin: 8px 0 4px 0;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 3px 6px rgba(0,0,0,0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.exclusive-requirements {
    margin: 4px 0 0 0;
    font-size: 18px;
    font-weight: bold;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.exclusive-dialog-body {
    padding: 32px 28px;
    text-align: center;
}

.exclusive-message {
    font-size: 17px;
    color: #2c3e50;
    margin: 0 0 24px 0;
    line-height: 1.5;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    border-left: 5px solid #FFD700;
    text-align: left;
}

.exclusive-selection-status {
    background: #ffffff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.exclusive-selection-current,
.exclusive-selection-needed {
    margin-bottom: 16px;
    font-size: 15px;
    color: #2c3e50;
}

.exclusive-selection-current:last-child,
.exclusive-selection-needed:last-child {
    margin-bottom: 0;
}

.exclusive-selection-current strong,
.exclusive-selection-needed strong {
    display: block;
    margin-bottom: 6px;
    color: #495057;
    font-size: 16px;
}

.exclusive-pages-list {
    color: #6c757d;
    font-weight: 500;
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #28a745;
    display: block;
    margin-top: 4px;
}

.exclusive-selection-needed .exclusive-pages-list {
    border-left-color: #dc3545;
    color: #721c24;
}

.exclusive-dialog-footer {
    padding: 20px 28px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: center;
    border-radius: 0 0 12px 12px;
    background: #f8f9fa;
}

.exclusive-close-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.exclusive-close-btn:hover {
    background: linear-gradient(135deg, #218838, #1e7e34);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.exclusive-close-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
}

/* Responsive design for exclusive dialog */
@media (max-width: 768px) {
    .exclusive-dialog-content {
        min-width: auto;
        max-width: 95%;
        margin: 10px;
    }
    
    .exclusive-dialog-header {
        padding: 20px 20px 16px 20px;
    }
    
    .exclusive-dialog-header h3 {
        font-size: 20px;
    }
    
    .exclusive-tier-title {
        font-size: 22px;
    }
    
    .exclusive-requirements {
        font-size: 16px;
    }
    
    .exclusive-dialog-body {
        padding: 24px 20px;
    }
    
    .exclusive-message {
        font-size: 15px;
        padding: 16px;
    }
    
    .exclusive-selection-status {
        padding: 16px;
    }
}

/* Event System Utility Classes */
.event-hidden {
    display: none !important;
}

/* Initial loading state for tier boxes to prevent flash */
.tier-boxes {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tier-boxes.loaded {
    opacity: 1;
}

/* Disable transitions during initial load for instant display */
.tier-boxes.no-transition,
.tier-boxes.no-transition * {
    transition: none !important;
}

/* Ensure countdown section respects event-hidden class */
.countdown-section.event-hidden {
    display: none !important;
}

/* Calendar Main Title - Always Visible */
.calendar-main-title {
    color: #ffd700;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 20px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    display: block !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .calendar-main-title {
        font-size: 1.5rem;
        margin: 15px 0;
    }
}

@media (max-width: 480px) {
    .calendar-main-title {
        font-size: 1.2rem;
        margin: 10px 0;
    }
}

/* Admin control buttons */
.admin-delete-btn, .admin-save-btn {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 12px;
    z-index: 15;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-save-btn {
    background: #27ae60;
}

.admin-delete-btn:hover {
    background: #c0392b;
}

.admin-save-btn:hover {
    background: #229954;
}

/* Admin logout button styles already defined in JavaScript */

/* Success/Error message styles */
.success-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #d4edda;
    color: #155724;
    padding: 45px 60px;
    border-radius: 15px;
    border: 3px solid #c3e6cb;
    z-index: 10000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    min-width: 400px;
    max-width: 80%;
}

.error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f8d7da;
    color: #721c24;
    padding: 45px 60px;
    border-radius: 15px;
    border: 3px solid #f5c6cb;
    z-index: 10000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    min-width: 400px;
    max-width: 80%;
}

/* ==========================================
   🔔 UNIFIED SALE NOTIFICATION SYSTEM
   ========================================== */

.unified-notification-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 25000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.unified-notification-dialog.show {
    opacity: 1;
    visibility: visible;
}

.unified-notification-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

.unified-notification-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border: 2px solid #007bff;
    max-width: 500px;
    width: 90%;
    animation: unifiedNotificationPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes unifiedNotificationPop {
    0% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.unified-notification-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 20px 25px;
    border-radius: 13px 13px 0 0;
}

.unified-notification-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
}

.unified-notification-body {
    padding: 25px;
}

.unified-notification-body p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

.unified-notification-actions {
    padding: 0 25px 25px 25px;
    text-align: center;
}

.unified-notification-button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 120px;
}

.unified-notification-button:hover {
    background: linear-gradient(135deg, #218838 0%, #1c7430 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .unified-notification-content {
        margin: 20px;
        width: calc(100% - 40px);
    }
    
    .unified-notification-header {
        padding: 15px 20px;
    }
    
    .unified-notification-header h3 {
        font-size: 1.1rem;
    }
    
    .unified-notification-body {
        padding: 20px;
    }
    
    .unified-notification-body p {
        font-size: 1rem;
    }
    
    .unified-notification-actions {
        padding: 0 20px 20px 20px;
    }
}

/* ==========================================
   🚨 LEGACY SALE NOTIFICATION DIALOG (Remove after testing)
   ========================================== */

.sale-notification-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.sale-notification-dialog.show {
    opacity: 1;
    visibility: visible;
}

.sale-notification-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

.sale-notification-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 3px solid #dc3545;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: saleNotificationPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes saleNotificationPop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.sale-notification-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 25px 30px;
    border-radius: 17px 17px 0 0;
    text-align: center;
}

.sale-alert-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    animation: saleAlertPulse 2s infinite;
}

@keyframes saleAlertPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.sale-notification-header h2 {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sale-alert-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 8px;
    opacity: 0.95;
}

.sale-notification-body {
    padding: 30px;
}

.sales-list {
    margin-bottom: 25px;
}

.sale-item {
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
    border: 2px solid #fee2e2;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.1);
}

.sale-item:last-child {
    margin-bottom: 0;
}

.sale-tier {
    font-size: 1.3rem;
    font-weight: 700;
    color: #dc3545;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.sale-tier::before {
    content: '💎';
    margin-right: 8px;
}

.sale-pages {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    padding-left: 20px;
}

.sale-buyer {
    font-size: 0.95rem;
    color: #666;
    font-style: italic;
    padding-left: 20px;
}

.sale-notification-message {
    background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%);
    border: 2px solid #bbdefb;
    border-radius: 12px;
    padding: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1565c0;
    text-align: center;
    margin-bottom: 25px;
}

.sale-notification-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.sale-notification-actions .btn-primary,
.sale-notification-actions .btn-secondary {
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sale-notification-actions .btn-primary {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.sale-notification-actions .btn-primary:hover {
    background: linear-gradient(135deg, #218838 0%, #1c7430 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.sale-notification-actions .btn-secondary {
    background: #6c757d;
    color: white;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.sale-notification-actions .btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

/* Refresh Loader Styles */
.refresh-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 25000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-loader-content {
    background: white;
    padding: 40px 50px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.refresh-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #28a745;
    border-radius: 50%;
    animation: refreshSpin 1s linear infinite;
    margin: 0 auto 20px auto;
}

@keyframes refreshSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.refresh-message {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sale-notification-content {
        margin: 20px;
        width: calc(100% - 40px);
    }
    
    .sale-notification-header {
        padding: 20px;
    }
    
    .sale-notification-header h2 {
        font-size: 1.8rem;
    }
    
    .sale-alert-subtitle {
        font-size: 1rem;
    }
    
    .sale-notification-body {
        padding: 20px;
    }
    
    .sale-notification-actions {
        flex-direction: column;
    }
    
    .sale-notification-actions .btn-primary,
    .sale-notification-actions .btn-secondary {
        min-width: 100%;
    }
}

/* Input Validation Styles */
.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
    font-weight: 500;
}

.error-message.show {
    display: block;
}

/* Visual feedback for invalid inputs */
input.input-error {
    border-color: #dc3545 !important;
    background-color: #fff5f5;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

input.input-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Visual feedback for valid inputs */
input.input-success {
    border-color: #28a745 !important;
    background-color: #f5fff5;
}

input.input-success:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Shake animation for invalid input */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.input-error {
    animation: shake 0.5s;
}

/* ==========================================
   MAINTENANCE MESSAGE BOX
   ========================================== */

.maintenance-message-box {
    background: linear-gradient(135deg, #FFE4B5 0%, #FFD700 100%);
    border: 3px solid #FF4500;
    border-radius: 15px;
    padding: 25px 20px;
    margin: 30px auto;
    max-width: 90%;
    width: 100%;
    box-shadow: 0 8px 25px rgba(255, 69, 0, 0.3);
    animation: maintenancePulse 2s ease-in-out infinite;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.maintenance-message-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: maintenanceShine 3s infinite;
}

.maintenance-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    animation: maintenanceIconBounce 1.5s ease-in-out infinite;
}

.maintenance-content {
    position: relative;
    z-index: 1;
}

.maintenance-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #8B0000;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.maintenance-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2F4F4F;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Animations */
@keyframes maintenancePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

@keyframes maintenanceIconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes maintenanceShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .maintenance-title {
        font-size: 1.5rem;
    }
    
    .maintenance-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .maintenance-message-box {
        padding: 20px 15px;
        margin: 20px auto;
    }
    
    .maintenance-icon {
        font-size: 2.5rem;
    }
    
    .maintenance-title {
        font-size: 1.2rem;
    }
    
    .maintenance-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .maintenance-title {
        font-size: 1rem;
        line-height: 1.3;
    }
    
    .maintenance-subtitle {
        font-size: 0.9rem;
        line-height: 1.3;
    }
}

/* Mobile PayPal Processing Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}