/**
 * Pi Cropper Advanced - Styles
 * Version: 7.0.0
 */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
    --pi-primary: #14213D;
    --pi-primary-hover: #1a2d52;
    --pi-success: #4CAF50;
    --pi-success-hover: #45a049;
    --pi-light-bg: #fafafa;
    --pi-border: #ddd;
    --pi-text: #333;
    --pi-text-muted: #666;
    --pi-text-light: #999;
    --pi-shadow: rgba(0, 0, 0, 0.1);
    --pi-shadow-hover: rgba(0, 0, 0, 0.15);
    --pi-radius: 8px;
    --pi-radius-sm: 6px;
    --pi-transition: 0.3s ease;
}

/* TikTok Warning Popup */
#pi-tiktok-warning {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.pi-tiktok-content {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pi-tiktok-icon {
    margin-bottom: 16px;
}

.pi-tiktok-content h2 {
    margin: 0 0 12px 0;
    font-size: 20px;
    color: #333;
}

.pi-tiktok-content > p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px 0;
}

.pi-tiktok-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.pi-tiktok-actions .pi-control-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
}

.pi-tiktok-actions .pi-btn-primary.copied {
    background: #28a745;
}

.pi-tiktok-url input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 11px;
    text-align: center;
    background: #f8f8f8;
    color: #666;
}

.pi-tiktok-tip {
    background: #fff3cd;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #856404;
    margin: 0;
}

/* ============================================
   Cropper Container
   ============================================ */
#pi-cropper-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 5px 10px 15px;
    box-sizing: border-box;
    text-align: center;
}

.pi-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--pi-primary);
    margin: 2px 0 2px;
}

/* Step Indicator - Hidden by default */
.pi-step-indicator {
    display: none;
}

/* ============================================
   Cropper Box
   ============================================ */
#pi-cropper-box {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 55vh;
    max-height: 500px;
    margin: 10px auto;
    overflow: hidden;
    border: 2px dashed var(--pi-border);
    border-radius: var(--pi-radius);
    background: var(--pi-light-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

@media (max-height: 800px) {
    #pi-cropper-box {
        height: 50vh;
        max-height: 400px;
    }
}

@media (max-height: 600px) {
    #pi-cropper-box {
        height: 45vh;
        max-height: 300px;
    }
}

/* Mobile landscape */
@media (max-height: 500px) and (orientation: landscape) {
    #pi-cropper-box {
        height: 55vh;
        max-height: 280px;
    }
}

/* Ocultar mouse hints en táctil */
@media (hover: none) and (pointer: coarse) {
    #pi-mouse-hints {
        display: none;
    }
}

#pi-basic-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Cropper.js background override */
.cropper-bg {
    background-image: none !important;
    background-color: var(--pi-light-bg) !important;
}

/* Cropper.js - Larger resize handles for better UX */
.cropper-point {
    width: 10px !important;
    height: 10px !important;
    background-color: var(--pi-primary) !important;
    border-radius: 3px !important;
    opacity: 1 !important;
}

.cropper-point.point-e,
.cropper-point.point-w {
    margin-top: -10px !important;
}

.cropper-point.point-n,
.cropper-point.point-s {
    margin-left: -10px !important;
}

.cropper-point.point-ne,
.cropper-point.point-nw,
.cropper-point.point-se,
.cropper-point.point-sw {
    width: 10px !important;
    height: 10px !important;
}

.cropper-line {
    background-color: var(--pi-primary) !important;
    opacity: 0.3 !important;
}

.cropper-view-box {
    outline: 2px solid var(--pi-primary) !important;
    outline-color: rgba(20, 33, 61, 0.75) !important;
}

/* Mobile - even larger handles for touch */
@media (max-width: 768px) {
    .cropper-point {
        width: 15px !important;
        height: 15px !important;
    }
    
    .cropper-point.point-e,
    .cropper-point.point-w {
        margin-top: -14px !important;
    }
    
    .cropper-point.point-n,
    .cropper-point.point-s {
        margin-left: -14px !important;
    }
    
    .cropper-point.point-ne,
    .cropper-point.point-nw,
    .cropper-point.point-se,
    .cropper-point.point-sw {
        width: 15px !important;
        height: 15px !important;
    }
}

/* ============================================
   Upload Overlay
   ============================================ */
#pi-upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
    cursor: pointer;
    background: var(--pi-light-bg);
    transition: background var(--pi-transition);
}

#pi-upload-overlay:hover,
#pi-upload-overlay:focus {
    background: #f0f0f0;
}

#pi-upload-overlay:focus {
    outline: 2px solid var(--pi-primary);
    outline-offset: -2px;
}

.pi-upload-logo {
    max-width: 200px;
    margin-bottom: 20px;
}

#pi-upload-text {
    margin-top: 10px;
    font-weight: 700;
    font-size: 18px;
    color: var(--pi-text-muted);
}

.pi-upload-subtext {
    margin-top: 5px;
    font-size: 14px;
    color: var(--pi-text-light);
}

/* ============================================
   Control Buttons
   ============================================ */
#pi-cropper-controls,
#pi-result-controls {
    display: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 0;
}

.pi-control-btn {
    background: var(--pi-primary);
    color: #fff;
    border: none;
    border-radius: var(--pi-radius-sm);
    padding: 10px 14px;
    font-size: 15px;
    min-width: 46px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px var(--pi-shadow);
    cursor: pointer;
}

.pi-control-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.pi-control-btn:hover:not(:disabled) {
    background: var(--pi-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--pi-shadow-hover);
}

.pi-control-btn:focus-visible {
    outline: 2px solid var(--pi-primary);
    outline-offset: 2px;
}

.pi-btn-primary {
    min-width: 120px;
}

.pi-btn-success {
    background: var(--pi-success);
    min-width: 120px;
}

.pi-btn-success:hover:not(:disabled) {
    background: var(--pi-success-hover);
}

/* ============================================
   Cropped Image Container
   ============================================ */
#pi-cropped-container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 5px auto;
    padding: 2px;
    background: var(--pi-light-bg);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-sm);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    width: auto;
    height: auto;
    overflow: visible;
}

#pi-cropped-wrapper {
    overflow: hidden;
    position: relative;
}

#pi-cropped-image {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transition: transform var(--pi-transition);
}

/* ============================================
   Loading Overlay
   ============================================ */
.pi-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    z-index: 20;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--pi-text);
}

.pi-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(20, 33, 61, 0.2);
    border-top: 4px solid var(--pi-primary);
    border-radius: 50%;
    animation: pi-spin 1s linear infinite;
    margin-bottom: 15px;
}

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

/* ============================================
   Gallery
   ============================================ */
#pi-gallery-root {
    width: 100%;
    max-width: 1400px;
    margin: 24px auto 32px;
    padding: 0 16px;
    box-sizing: border-box;
    display: block !important;
    visibility: visible !important;
}

.pi-gallery-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--pi-primary);
    text-align: center;
    margin-bottom: 24px;
}

/* Grid Layout - Desktop optimized for 6 images (2 rows x 3 cols) */
#pi-results-grid {
    display: grid;
    gap: 20px;
}

/* Desktop: 3 columns */
@media (min-width: 1025px) {
    #pi-results-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* Tablet: 2 columns */
@media (min-width: 601px) and (max-width: 1024px) {
    #pi-results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
    #pi-results-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================================
   Gallery Card (Thumbnail)
   ============================================ */
.pi-gallery-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--pi-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pi-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Image Tile */
.pi-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
}

.pi-tile.is-vertical {
    aspect-ratio: 3 / 4;
}

.pi-tile > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.pi-tile:hover > img {
    transform: scale(1.03);
}

/* Badges Container */
.pi-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.pi-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.pi-badge-size {
    background: rgba(20, 33, 61, 0.85);
    color: #fff;
}

.pi-badge-palette {
    background: rgba(255, 255, 255, 0.9);
    color: var(--pi-text);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Palette-specific colors */
.pi-badge-palette.palette-graphite {
    background: rgba(68, 68, 68, 0.9);
    color: #fff;
}

.pi-badge-palette.palette-dither_2b {
    background: rgba(68, 68, 68, 0.9);
    color: #fff;
}

.pi-badge-palette.palette-autumn {
    background: rgba(194, 107, 49, 0.9);
    color: #fff;
}

.pi-badge-palette.palette-vintage {
    background: rgba(82, 59, 255, 0.9);
    color: #fff;
}

.pi-badge-palette.palette-dither_spectrum {
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
    color: #fff;
}

.pi-badge-palette.palette-full_color {
    background: linear-gradient(
        135deg,
        #ff9a00 0%,   /* amarillo cálido */
        #ff3cac 45%,  /* magenta */
        #784ba0 75%,  /* púrpura */
        #2b86c5 100%  /* azul profundo */
    );
    color: #fff;
}

/* Card Footer */
.pi-card-footer {
    padding: 12px 16px;
    display: flex;
    justify-content: center;
}

.pi-btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: var(--pi-success);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--pi-radius-sm);
    transition: all 0.2s ease;
}

.pi-btn-buy:hover {
    background: var(--pi-success-hover);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.pi-btn-buy i {
    font-size: 16px;
}

/* Regenerate Button */
#pi-regenerate-btn {
    display: block;
    margin: 24px auto 0;
    max-width: 300px;
    background: var(--pi-primary);
}

#pi-regenerate-btn:hover {
    background: var(--pi-primary-hover);
}

/* ============================================
   Lightbox
   ============================================ */
#pi-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.92);
}

#pi-lightbox.open {
    display: flex;
}

#pi-lightbox img {
    max-width: min(90vw, 1200px);
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--pi-radius);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.lb-btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}

.lb-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.lb-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.lb-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.lb-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.lb-next:hover {
    transform: translateY(-50%) scale(1.1);
}

.lb-close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
}

.lb-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 16px;
    border-radius: 999px;
}

/* Lightbox Badges */
.lb-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
}

.lb-badges .pi-badge {
    font-size: 14px;
    padding: 6px 14px;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    .pi-title {
        font-size: 18px;
    }
    
    .pi-control-btn {
        padding: 12px 14px;
        min-width: 44px;
        min-height: 44px;
    }
    
    .pi-btn-primary,
    .pi-btn-success {
        min-width: 100px;
    }
    
    .lb-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .lb-prev {
        left: 10px;
    }
    
    .lb-next {
        right: 10px;
    }
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1) {
    .pi-tile {
        position: relative;
        height: 0;
        padding-bottom: 75%; /* 4:3 */
    }
    
    .pi-tile.is-vertical {
        padding-bottom: 133.33%; /* 3:4 */
    }
    
    .pi-tile > img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* ============================================
   Tips Modal
   ============================================ */
#pi-tips-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(245, 245, 245, 0.98);
}

#pi-tips-modal.open {
    display: flex;
}

.pi-tips-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

#pi-tips-image {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    border-radius: var(--pi-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

#pi-tips-ok {
    min-width: 150px;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 600px) {
    #pi-tips-image {
        max-height: 60vh;
    }
    
    #pi-tips-ok {
        min-width: 120px;
        padding: 12px 30px;
    }
}

/* ============================================
   Mouse Hints Overlay (drag & zoom indicators)
   ============================================ */
#pi-mouse-hints {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#pi-mouse-hints.hidden {
    opacity: 0;
    pointer-events: none;
}

.pi-hint-mouse {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.pi-hint-icon {
    position: relative;
    width: 140px;
    height: 140px;
}

/* Mouse body */
.pi-mouse-body {
    width: 50px;
    height: 80px;
    background: #fff;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Mouse buttons */
.pi-mouse-btn-left,
.pi-mouse-btn-right {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 30px;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
}

.pi-mouse-btn-left {
    transform: translate(-100%, -50%) translateY(-22px);
    border-radius: 25px 0 0 0;
    border-right: 1px solid #ddd;
}

.pi-mouse-btn-right {
    transform: translate(0%, -50%) translateY(-22px);
    border-radius: 0 25px 0 0;
}

.pi-mouse-btn-left.active {
    background: #FFD700;
}

/* Mouse wheel */
.pi-mouse-wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-22px);
    width: 14px;
    height: 22px;
    background: #e0e0e0;
    border-radius: 7px;
    border: 2px solid #ccc;
}

.pi-mouse-wheel.active {
    background: #FFD700;
}

/* +/- indicators for scroll - positioned outside mouse */
.pi-mouse-wheel-arrows {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pi-mouse-wheel-arrows span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Dashed circle around drag mouse */
.pi-drag-arrows {
    display: none;
}

/* Arrows - positioned outside the mouse */
.pi-arrow {
    position: absolute;
    width: 0;
    height: 0;
}

.pi-arrow-up {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 16px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.pi-arrow-down {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.pi-arrow-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 16px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.pi-arrow-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.pi-arrow-up {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 16px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.pi-arrow-down {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.pi-arrow-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 16px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.pi-arrow-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Zoom arrows - HIDDEN */
.pi-zoom-arrows {
    display: none;
}

.pi-zoom-arrow-out,
.pi-zoom-arrow-in {
    display: none;
}

@media (max-width: 500px) {
    #pi-mouse-hints {
        gap: 40px;
    }
    
    .pi-hint-icon {
        width: 100px;
        height: 100px;
    }
    
    .pi-mouse-body {
        width: 40px;
        height: 65px;
    }
    
    .pi-mouse-btn-left,
    .pi-mouse-btn-right {
        width: 18px;
        height: 24px;
    }
    
    .pi-mouse-btn-left {
        transform: translate(-100%, -50%) translateY(-18px);
    }
    
    .pi-mouse-btn-right {
        transform: translate(0%, -50%) translateY(-18px);
    }
    
    .pi-mouse-wheel {
        transform: translate(-50%, -50%) translateY(-18px);
    }
    
    .pi-mouse-wheel-arrows span {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
    
    .pi-arrow-up,
    .pi-arrow-down {
        border-left-width: 8px;
        border-right-width: 8px;
    }
    
    .pi-arrow-up {
        border-bottom-width: 12px;
    }
    
    .pi-arrow-down {
        border-top-width: 12px;
    }
    
    .pi-arrow-left,
    .pi-arrow-right {
        border-top-width: 8px;
        border-bottom-width: 8px;
    }
    
    .pi-arrow-left {
        border-right-width: 12px;
    }
    
    .pi-arrow-right {
        border-left-width: 12px;
    }
}

/* ============================================
   Upgrade Popup (shown when user clicks "No")
   ============================================ */
#pi-upgrade-popup {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 3vh 3vw;
    background: rgba(0, 0, 0, 0.7);
}

#pi-upgrade-popup.open {
    display: flex;
}

.pi-upgrade-content {
    background: #fff;
    border-radius: clamp(10px, 2vw, 16px);
    padding: clamp(12px, 3vh, 30px) clamp(10px, 3vw, 30px);
    max-width: min(400px, 90vw);
    width: 100%;
    max-height: 94vh;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.pi-upgrade-title {
    font-size: clamp(14px, 2.5vh, 18px);
    font-weight: 600;
    color: var(--pi-text);
    line-height: 1.35;
    margin-bottom: clamp(8px, 2vh, 20px);
}

.pi-upgrade-preview {
    margin-bottom: clamp(8px, 2vh, 16px);
}

.pi-upgrade-main-img {
    width: clamp(80px, 25vh, 180px);
    max-width: 50vw;
    height: auto;
    border-radius: clamp(4px, 1vw, 8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: clamp(6px, 1.5vh, 14px);
}

.pi-upgrade-thumbnails {
    display: flex;
    justify-content: center;
    gap: clamp(4px, 1vw, 10px);
}

.pi-upgrade-thumb {
    width: clamp(30px, 8vh, 55px);
    height: clamp(30px, 8vh, 55px);
    object-fit: cover;
    border-radius: clamp(3px, 0.5vw, 6px);
    border: 2px solid var(--pi-border);
}

#pi-upgrade-ok {
    min-width: clamp(120px, 40vw, 180px);
    padding: clamp(8px, 1.5vh, 14px) clamp(16px, 4vw, 30px);
    font-size: clamp(12px, 2vh, 15px);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: clamp(4px, 1vh, 10px);
}

/* Updated Card Footer - Vertical layout */
.pi-card-footer {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Palette Label - Full width bar above button */
.pi-palette-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    /* Default colors */
    background: rgba(102, 102, 102, 0.9);
    color: #fff;
}

/* Palette-specific colors for label */
.pi-palette-label.palette-graphite {
    background: rgba(68, 68, 68, 0.95);
    color: #fff;
}

.pi-palette-label.palette-autumn {
    background: rgba(194, 107, 49, 0.95);
    color: #fff;
}

.pi-palette-label.palette-vintage {
    background: rgba(139, 119, 101, 0.95);
    color: #fff;
}

.pi-palette-label.palette-dither_bn {
    background: #222;
    color: #fff;
}

.pi-palette-label.palette-dither_2b {
    background: rgba(68, 68, 68, 0.95);
    color: #fff;
}

.pi-palette-label.palette-dither_color,
.pi-palette-label.palette-dither_spectrum {
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
    color: #fff;
}

.pi-palette-label.palette-full_color {
    background: linear-gradient(
        135deg,
        #ff9a00 0%,
        #ff3cac 45%,
        #784ba0 75%,
        #2b86c5 100%
    );
    color: #fff;
}

/* Button container */
.pi-btn-container {
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Buy Now button - keep existing styles but ensure full width */
.pi-btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: var(--pi-success);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--pi-radius-sm);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.pi-btn-buy:hover {
    background: var(--pi-success-hover);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.pi-btn-buy i {
    font-size: 16px;
}

/* Coming Soon button - disabled style */
.pi-btn-coming-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: #9e9e9e;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--pi-radius-sm);
    cursor: not-allowed;
    opacity: 0.85;
    box-sizing: border-box;
}

.pi-btn-coming-soon i {
    font-size: 16px;
}

/* Hide mouse hints on touch devices */
@media (hover: none) and (pointer: coarse) {
    #pi-mouse-hints {
        display: none !important;
    }
}

/* ============================================
   Responsive adjustments for new card layout
   ============================================ */
@media (max-width: 480px) {
    .pi-palette-label {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .pi-btn-container {
        padding: 10px 12px;
    }
    
    .pi-btn-buy,
    .pi-btn-coming-soon {
        padding: 10px 16px;
        font-size: 13px;
    }
}