.world-info-modal {position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--dark-bg);z-index:100;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s ease-in-out;overflow:hidden;}.world-info-modal.active {transform:translateX(0);}.regions-list-content,.region-peppers-content,.pepper-detail-content {flex:1;overflow-y:auto;padding:1rem;display:none; flex-direction:column;position:relative;}.regions-list-content.active,.region-peppers-content.active,.pepper-detail-content.active {display:flex;}.region-item {background-color:rgba(255, 255, 255, 0.1);border-radius:0.75rem;padding:1rem;margin-bottom:1rem;display:flex;align-items:center;cursor:pointer;transition:all 0.2s ease;}.region-item:hover {background-color:rgba(255, 255, 255, 0.2);transform:translateY(-2px);}.region-icon {width:40px;height:40px;min-width:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:rgba(255, 255, 255, 0.1);margin-right:15px;overflow:hidden;}.region-icon svg {width:32px;height:32px;color:var(--accent-color);}.region-info {flex:1;}.region-name {font-size:1.1rem;font-weight:bold;color:var(--light-text);margin-bottom:0.25rem;}.region-pepper-count {font-size:0.8rem;color:rgba(255, 255, 255, 0.7);}.region-arrow {width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;color:var(--light-text);opacity:0.7;}.pepper-list-item {display:flex;align-items:center;padding:0.75rem;border-radius:0.5rem;margin-bottom:0.5rem;background-color:rgba(255, 255, 255, 0.1);cursor:pointer;transition:all 0.2s ease;}.pepper-list-item:hover {background-color:rgba(255, 255, 255, 0.2);transform:translateX(3px);}.pepper-color-dot {width:1rem;height:1rem;border-radius:50%;margin-right:0.75rem;}.pepper-list-info {flex:1;display:flex;justify-content:space-between;align-items:center;}.pepper-list-name {font-weight:bold;color:var(--light-text);}.pepper-list-scoville {font-size:0.8rem;color:rgba(255, 255, 255, 0.8);padding:0.25rem 0.5rem;background-color:rgba(0, 0, 0, 0.2);border-radius:1rem;}.pepper-detail-header {display:flex;align-items:center;margin-bottom:1.5rem;}.pepper-detail-icon {width:3rem;height:3rem;margin-right:1rem;display:flex;align-items:center;justify-content:center;}.pepper-detail-title {flex:1;}.pepper-detail-name {font-size:1.5rem;font-weight:bold;margin-bottom:0.25rem;}.pepper-detail-origin {font-size:0.9rem;opacity:0.7;}.pepper-detail-scoville {font-size:1.2rem;font-weight:bold;margin:1rem 0;padding:0.5rem;text-align:center;background-color:rgba(255, 255, 255, 0.1);border-radius:0.5rem;}.pepper-detail-info {background-color:rgba(255, 255, 255, 0.05);padding:1rem;border-radius:0.5rem;margin-bottom:1rem;}.sensory-item {margin-bottom:0.75rem;}.sensory-label {font-weight:bold;font-size:0.9rem;margin-bottom:0.25rem;opacity:0.8;}.sensory-value {font-size:0.9rem;line-height:1.4;}.select-pepper-btn {background-color:var(--primary-color);color:white;border:none;border-radius:0.5rem;padding:0.75rem;font-size:1rem;font-weight:bold;width:100%;margin-top:1rem;cursor:pointer;transition:all 0.2s ease;}.select-pepper-btn:hover {background-color:var(--secondary-color);transform:translateY(-2px);}.slide-enter {transform:translateX(100%);}.slide-enter-active {transform:translateX(0);transition:transform 0.3s ease-in-out;}.slide-exit {transform:translateX(0);}.slide-exit-active {transform:translateX(-100%);transition:transform 0.3s ease-in-out;}@media (min-width:481px) {.region-item {padding:1.25rem;}.region-icon {width:3rem;height:3rem;}.region-name {font-size:1.2rem;}.pepper-list-item {padding:1rem;}.pepper-detail-name {font-size:1.8rem;}}.modal-back-btn {display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:5px;margin-right:10px;color:var(--text-color);}.modal-swap-btn {display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:5px;margin-left:auto;margin-right:10px;color:var(--text-color);}.modal-swap-btn .icon-container {width:24px;height:24px;}.modal-swap-btn:hover {color:var(--accent-color);}.return-to-dock-btn {display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:5px;margin-right:10px;color:var(--text-color);}.return-to-dock-btn .icon-container {width:24px;height:24px;}.return-to-dock-btn:hover {color:var(--accent-color);}.piment-modal {--piment-text-color:#ffffff;--piment-accent-color:#ff6b00;--piment-bg-dark:#1a1e24;--piment-bg-card:#2a3038;--piment-border-color:#3a4048;}.piment-modal .pepper-detail-content h2 {color:var(--piment-accent-color);font-size:1.8rem;margin-bottom:10px;text-shadow:0 2px 4px rgba(0, 0, 0, 0.3);letter-spacing:0.5px;}.piment-modal .pepper-origin {color:#e0e0e0;font-size:1.2rem;margin-bottom:15px;font-style:italic;}.piment-modal .pepper-scoville {background-color:rgba(255, 107, 0, 0.2);color:#ffffff;padding:8px 15px;border-radius:6px;font-size:1.3rem;font-weight:bold;margin:15px 0;text-align:center;border:1px solid rgba(255, 107, 0, 0.4);box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);}.piment-modal .sensory-info {background-color:var(--piment-bg-card);border-radius:8px;padding:15px;margin:15px 0;border:1px solid var(--piment-border-color);}.piment-modal .sensory-info h3 {color:var(--piment-accent-color);margin-bottom:10px;font-size:1.2rem;}.piment-modal .sensory-item {margin-bottom:12px;}.piment-modal .sensory-item-label {color:#b0b0b0;font-weight:600;margin-bottom:4px;font-size:0.95rem;}.piment-modal .sensory-item-value {color:#ffffff;font-size:1rem;line-height:1.4;}.piment-modal .pepper-info {background-color:rgba(255, 255, 255, 0.05);padding:12px;border-radius:6px;margin-top:15px;color:#e0e0e0;font-style:italic;line-height:1.5;border-left:3px solid var(--piment-accent-color);}.piment-modal .select-pepper-btn {background-color:var(--piment-accent-color);color:white;border:none;padding:12px 20px;border-radius:6px;font-size:1.1rem;font-weight:600;cursor:pointer;width:100%;margin-top:20px;transition:all 0.2s ease;text-transform:uppercase;letter-spacing:1px;}.piment-modal .select-pepper-btn:hover {background-color:#ff8c3f;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255, 107, 0, 0.3);}.world-map-container {position:relative;width:100%;height:400px;overflow:hidden;background-color:#121212; border-radius:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);margin:15px auto;max-width:90%;border:1px solid #333;}.world-map {width:54%;height:39%;object-fit:fill;display:block;opacity:0.3;filter:grayscale(70%) brightness(0.8) contrast(1.2);position:relative;left:85px;top:60px;}.region-marker {position:absolute;transform:translate(-50%, -50%);cursor:pointer;z-index:10;}.marker-dot {width:24px; height:24px;background-color:var(--accent-color);border-radius:50%;border:2px solid rgba(255, 255, 255, 0.8);box-shadow:0 0 8px rgba(0, 0, 0, 0.5);margin:0 auto;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;}.marker-dot::after {content:'';width:12px;height:12px;background-color:rgba(255, 255, 255, 0.9);border-radius:50%;transition:all 0.2s ease;}.marker-label {position:absolute;top:100%;left:50%;transform:translateX(-50%);background-color:rgba(15, 15, 15, 0.95); color:white;padding:10px 14px;border-radius:8px;font-size:1.1rem;white-space:nowrap;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;pointer-events:none;margin-top:10px;font-weight:600; z-index:100; box-shadow:0 4px 15px rgba(0, 0, 0, 0.5);border:1px solid rgba(255, 255, 255, 0.3);display:flex;align-items:center;gap:12px;letter-spacing:0.5px; text-shadow:0 1px 2px rgba(0, 0, 0, 0.5); }.marker-nav-button {width:28px;height:28px;background-color:rgba(255, 255, 255, 0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:8px;transition:all 0.2s ease;pointer-events:auto; color:var(--accent-color);border:1px solid rgba(255, 255, 255, 0.4);z-index:101; }.marker-nav-button:hover {background-color:var(--accent-color);color:white;transform:scale(1.1);box-shadow:0 0 10px rgba(255, 107, 0, 0.5);}.marker-nav-button svg {width:18px;height:18px;}.region-marker.active {z-index:99; }.region-marker:hover .marker-label,.region-marker.active .marker-label {opacity:1;transform:translateX(-50%) translateY(5px);pointer-events:auto; }.region-marker:hover .marker-dot,.region-marker.active .marker-dot {transform:scale(1.3);background-color:#ff6b00;}.region-marker:hover .marker-dot::after,.region-marker.active .marker-dot::after {background-color:white;}@keyframes pulse {0%{transform:scale(1); opacity:1; }50%{transform:scale(1.2); opacity:0.8; }100%{transform:scale(1); opacity:1; }}.region-marker .marker-dot {animation:pulse 2s infinite;animation-play-state:paused;}.region-marker:hover .marker-dot,.region-marker.active .marker-dot {animation-play-state:running;}@media (max-width:768px) {.world-map-container {height:300px;}.marker-dot {width:30px; height:30px;}.marker-dot::after {width:16px;height:16px;}.marker-label {font-size:0.9rem;padding:6px 10px;}}.modal-header {display:flex;align-items:center;padding:15px;border-bottom:1px solid rgba(255, 255, 255, 0.1);position:relative;}.piment-modal .modal-header {background-color:var(--piment-bg-dark);border-bottom:1px solid var(--piment-border-color);padding:15px 20px;}.piment-modal .modal-title {color:var(--piment-accent-color);font-size:1.4rem;font-weight:600;text-shadow:0 1px 2px rgba(0, 0, 0, 0.5);letter-spacing:0.5px;}.piment-modal .modal-back-btn,.piment-modal .modal-close-btn,.piment-modal .modal-return-dock-btn {background-color:rgba(255, 255, 255, 0.1);border:1px solid rgba(255, 255, 255, 0.2);color:white;transition:all 0.2s ease;}.piment-modal .modal-back-btn:hover,.piment-modal .modal-close-btn:hover,.piment-modal .modal-return-dock-btn:hover {background-color:var(--piment-accent-color);border-color:var(--piment-accent-color);transform:translateY(-2px);box-shadow:0 2px 8px rgba(255, 107, 0, 0.3);}#back-map-icon-container {width:20px;height:20px;}.piment-modal .sensory-item-label {color:#b0b0b0;font-weight:600;margin-bottom:4px;font-size:0.95rem;padding-right:20px;}